/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* FONTS */

@font-face {
  font-family: 'Apple-Garamond-Light';
  src:url('fonts/Apple-Garamond-Light.ttf.woff') format('woff'),
    url('fonts/Apple-Garamond-Light.ttf.svg#Apple-Garamond-Light') format('svg'),
    url('fonts/Apple-Garamond-Light.ttf.eot'),
    url('fonts/Apple-Garamond-Light.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Apple-Garamond-Light-Italic';
  src:url('fonts/Apple-Garamond-Light-Italic.ttf.woff') format('woff'),
    url('fonts/Apple-Garamond-Light-Italic.ttf.svg#Apple-Garamond-Light-Italic') format('svg'),
    url('fonts/Apple-Garamond-Light-Italic.ttf.eot'),
    url('fonts/Apple-Garamond-Light-Italic.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Apple-Garamond';
  src:url('fonts/Apple-Garamond.ttf.woff') format('woff'),
    url('fonts/Apple-Garamond.ttf.svg#Apple-Garamond') format('svg'),
    url('fonts/Apple-Garamond.ttf.eot'),
    url('fonts/Apple-Garamond.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Apple-Garamond-Italic';
  src:url('fonts/Apple-Garamond-Italic.ttf.woff') format('woff'),
    url('fonts/Apple-Garamond-Italic.ttf.svg#Apple-Garamond-Italic') format('svg'),
    url('fonts/Apple-Garamond-Italic.ttf.eot'),
    url('fonts/Apple-Garamond-Italic.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Apple-Garamond-Bold';
  src:url('fonts/Apple-Garamond-Bold.ttf.woff') format('woff'),
    url('fonts/Apple-Garamond-Bold.ttf.svg#Apple-Garamond-Bold') format('svg'),
    url('fonts/Apple-Garamond-Bold.ttf.eot'),
    url('fonts/Apple-Garamond-Bold.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Apple-Garamond-Bold-Italic';
  src:url('fonts/Apple-Garamond-Bold-Italic.ttf.woff') format('woff'),
    url('fonts/Apple-Garamond-Bold-Italic.ttf.svg#Apple-Garamond-Bold-Italic') format('svg'),
    url('fonts/Apple-Garamond-Bold-Italic.ttf.eot'),
    url('fonts/Apple-Garamond-Bold-Italic.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

/* MAIN STRUCTURE */

html { width: 100%; max-width: 100%; }
body { color:#FFF; background-color:#222; width: 100%; max-width: 100%; overflow-x: hidden;}

a { color: #FFF; }

::selection {
  background: #AAA;
}
::-moz-selection {
  background: #AAA;
}

#main-wrapper {

}

#title-wrapper {
  width: 15%;
  height: 100vh;
  position: fixed;
  background-size: 100vw auto;
  border-right: 0px solid #FFF;
  box-sizing: border-box;
  cursor: pointer;
}

#title-wrapper .title {
  font-family: 'Oswald','Libre Franklin', sans-serif;
  font-weight: 300; /*400*/
  position: absolute;
  font-size: 12.5vmin; /*15vmin*/
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  border-bottom: 4px solid rgba(255,255,255,0.0);
}

#cover {
  height: 100vh;
  background-size: 100vw auto;
  background-position: -15vw 0;
  width: 100%;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

#cover div {
  font-family:'slick','Libre Franklin', sans-serif;
  font-size: 3vw;
  letter-spacing: 0em;
  line-height:1;
  float: left;
  text-align: center;
  box-sizing: border-box;
  left: 50%;
  transform: rotate(90deg) translateX(-50%);
  opacity: 0.5;
  position: absolute;
  bottom: 3vw;
  transition: opacity 0.25s;
  animation-name: bounceArrow;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-out;
  padding: 2px;
}

@keyframes bounceArrow {
    0% {bottom:2vw }
    50% {bottom:1.7vw }
    100% {bottom:2vw}
}

#cover:hover div {
  opacity: 1.0;
}

#content-wrapper {
  width: 100%;
  position: absolute;
  padding-left: 15%;
  box-sizing: border-box;
}

/* SECTION TITLES */

.section-title {
  height:33.33vh;
  background-attachment: fixed;
  background-size: 100vw auto;
  background-position: center;
  padding-left: 0vw;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-align: center;
}

.section-title .title {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11.5vw; /*20vh;*/
  line-height: 1;
  letter-spacing: 0em;
  text-align: center;
  border-bottom: 0.9vw solid rgba(255,255,255,0.0);
  transition: border 0.15s, color 0.15s;
  margin: 0 auto;
  color: #FFF;
  white-space: nowrap;
}

.section-title:hover {

}

.section-title:hover .title {
  border-bottom-color:rgba(255,255,255,1.0);
}

.section-title.open .title {
  border-bottom-color:rgba(255,255,255,1.0);
}

.section {
  display: none;
}

.sub-section {
  display: none;
}

/* SUB SECTION TITLES */

.sub-section-title {
  height:33.33vh;
  background-attachment: fixed;
  background-size: 100vw auto;
  padding-left: 0vw;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /*position:absolute;
  top:50%;
  transform: translate(0, -50%);*/
  cursor: pointer;
  text-align: center;
}

.sub-section-title .title {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 5.5vw; /*9.5vh;*/
  line-height: 1;
  letter-spacing: -0.0em;
  /*float: left;*/
  text-align: center;
  border-bottom: 0.5vw solid rgba(255,255,255,0.0);
  transition: border 0.15s, color 0.15s;
  margin: 0 auto;
  color: #FFF;
  white-space: nowrap;
}

.sub-section-title:hover .title {
  border-bottom-color:rgba(255,255,255,1.0);
}

.sub-section-title.open .title {
  border-bottom-color:rgba(255,255,255,1.0);
}

#section-about .sub-section-title {
  height: 22.22vh;
}

#section-show .sub-section-title {
  height:33.33vh;
}

/* SUB SUB SECTION (INTERVIEWS) */
.sub-sub-section-title {
  height:25.927vh; /*38.89vh;*/
  background-attachment: fixed;
  background-size: 100vw auto;
  padding-left: 0vw;
  background-color: #EEE;
  background-image: url(img/box-bg6.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /*position:absolute;
  top:50%;
  transform: translate(0, -50%);*/
  cursor: pointer;
  text-align: center;
}

.sub-sub-section-title div {
  text-align: left;
  margin: 0 10vw;
}

.sub-sub-section-title .title {
  font-family: 'Apple-Garamond-Light-Italic', serif;
  font-weight: normal;
  text-transform: normal;
  font-size: 3.5vw; /*9.5vh;*/
  line-height: 1.3;
  letter-spacing: -0.0em;
  /*float: left;*/
  text-align: left;
  float: left;
  transition: border 0.15s, color 0.15s;
  margin: 0 auto;
  color: #FFF;
  white-space:normal;
  border-top: 4px solid #FFF;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0.25em;
}

.sub-sub-section-title .subtitle {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 900;
  text-transform: normal;
  font-size: 2.8vw; /*9.5vh;*/
  line-height: 1.1;
  letter-spacing: 0.01em;
  /*float: left;*/
  text-align: left;
  float: left;
  clear: both;
  border-bottom: 2px solid rgba(255,255,255,0.0);
  transition: border 0.15s, color 0.15s;
  margin: 0 auto;
  color: #FFF;
  white-space: nowrap;
}

.sub-sub-section-title:hover .title, .sub-sub-section-title:hover .subtitle {
  /*border-bottom-color:rgba(255,255,255,1.0);*/
  color: #000;
}

.sub-sub-section-title:hover .title {
  border-top-color:#000;
}

.sub-sub-section-title.open .title, .sub-sub-section-title.open .subtitle {
  /*border-bottom-color:rgba(255,255,255,1.0);*/
  color: #000;
}

.sub-sub-section-title.open .title {
  border-top-color:#000;
}

/* ARTISTS SECTION */

.artist-panel {
  background-color: #222;
  background-image: url(img/box-bg1.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  float: left;
  width: 100%;
}

.artist-panel:nth-child(2n) {
  background-color: #444;
  background-image: url(img/box-bg2.jpg) !important;
}

.artist-panel .sub-section-title {
  background: none;
  height:11.11vh; /*9.52*/
  padding-left: 0vw;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: center;
  transition: height 0.4s;
  cursor: pointer;
}

.artist-panel .sub-section-title .title {
  font-family: 'Apple-Garamond-Light', serif;
  font-weight: normal;
  text-transform: none;
  font-size: 8vmin; /*8vh;*/
  line-height: 1;
  letter-spacing: -0.015em;
  text-align: center;
  border-bottom: 0.2vw solid rgba(255,255,255,0.0);
  transition: border 0.15s, color 0.15s;
  margin: 0 auto;
  color: #FFF;
  white-space: nowrap;
}

.artist-panel .sub-section-title:hover .title {
  border-bottom-color: rgba(255,255,255,1.0);
}

.artist-panel .sub-section-title.open .title {
  border-bottom-color: rgba(255,255,255,1.0);
}

.artist-panel .sub-section-title.open {
  height: 22.22vh;
}

.artist-panel .content {
  width: 100%;
  background: none !important;
  box-sizing: border-box;
  display: none;
}

.artist-panel .content .spacer {
  min-height: 77.88vh; /* dependent on title open height */
}

/* CONTENT PANELS */

.content {
  background-color: #EEE;
  background-image: url(img/box-bg6.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  box-sizing: border-box;
  display: none;
  float: left;
}

.content .spacer {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 10vw;
  float: left;
}

#section-about .content .spacer {
  min-height: 77.78vh;
}

#section-show .content .spacer {
  min-height: 66.67vh;
}

/* CONTENT STYLING */

.content h1 {
  color: #000;
  font-family: 'Libre Franklin','Apple-Garamond-Light', serif;
  font-weight: 900;
  font-size: 2.8vw;
  line-height: 1.1;
  margin-bottom: 1em;
  margin-top: 0.5em;
  letter-spacing: 0.01em;
  float: left;
  border-bottom: 0.3vw solid #000;
  margin-left: 1em;
  text-transform: uppercase;
}

.content p {
  color: #000;
  font-family: 'Apple-Garamond-Light', serif;
  font-size: 2.8vw;
  line-height: 1.1;
  margin-bottom: 0.5em;
  letter-spacing: 0.01em;
  clear: both;
}

.content p i {
  font-family: 'Apple-Garamond-Light-Italic', serif;
  font-style: normal;
}

.content .text p {
  text-indent: 1em;
  margin-bottom: 1em;
}

.content .text p:first-child {
  text-indent: 0em;
}

.content .text h1 + p {
  text-indent: 0em;
}

.content p a {
  color:#000;
}

.content p a:hover {
  text-decoration: none;
}

.content p em { /*large dates */
  font-weight: 900;
  font-size: 5.5vw;
  font-family: 'Libre Franklin', sans-serif;
}

.sub-sub-section-title + .content {
  text-align: center;
}

.content .interview-info {
  float: left;
  margin-bottom: 3em;
  text-align: left;
}

.content .interview-info i {
  font-family: 'Libre Fanklin', sans-serif;
  font-style: italic;
}

.content .interview-info p {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.1vw;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.035em;
}

.content .interview-question {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 900;
    letter-spacing: 0.01em;
    font-size: 1.85vw; /*2.45vw;*/
    color: #000;
    float: left;
    margin-bottom:0.8em;
    font-size: 1.75vw;
    line-height: 1.2;
    text-align: left;
}

.content .interview-answer p {
  margin: 0;
  font-size: 2vw;
  line-height: 1.3;
  text-align: left;
}

.content .interview-answer p:last-child {
  margin-bottom: 1em;
}

.content .interview-answer em {
  text-transform: uppercase;
  font-family: 'Apple-Garamond-Light','Libre Franklin', sans-serif;
  font-weight: normal;
  letter-spacing: 0.035em;
  font-size: 2vw; /*2.8vw*/
}

.content .interview-answer img {
  font-size: 2vw;
  margin: 1em 0 1.25em 0;
  max-width: 75%;
}

.content .interview-answer img.with-caption {
  margin-bottom: 0.35em;
}

.content .interview-answer span + img {
  margin-top: 0em;
}

.content .interview-answer img + img {
  margin-top: 0em;
}

.content .interview-answer .caption {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 1.1vw;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.035em;
  color: #000;
  margin-bottom: 2.25em;
  width: 100%;
  padding: 0 12.5%;
  float: left;
  box-sizing: border-box;
}

.content .interview-answer .caption i {
  font-style: italic;
}

#logo-plattfon {
  width: 15vw;
  margin-bottom: 2em;
}
#logo-bs {
  width: 12vw;
  margin-bottom: 1em;
}
#logo-fhnw {
  width: 5vw;
}

.description {
  width: 100%;
  float: left;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 5em;
}

.description p {
  font-family: 'Apple-Garamond-Light', serif;
  color: #FFF;
  font-size: 1.75vw;
  line-height: 1.3;
  font-weight: normal;
  letter-spacing: 0.015em;
}

.description p i {
  font-family: 'Apple-Garamond-Light-Italic', serif;
  font-style: normal;
}

.description h1 {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 900;
  border-bottom: 2px solid #FFF;
  font-size: 1.5vw;
  color: #FFF;
  line-height: 1.1;
  margin-bottom: 1em;
  margin-top: 0;
  letter-spacing: 0.01em;
  float: left;
  border-bottom: 0.2vw solid #FFF;
  margin-left: 0em;
  text-transform: uppercase;
}

.description blockquote {
  font-family: 'Apple-Garamond-Light-Italic', serif;
  color: #FFF;
  font-size: 1.75vw;
  line-height: 1.3;
  font-weight: normal;
  letter-spacing: 0.015em;
  margin-bottom: 1em;
  /*padding-left: 1em;*/
  clear: both;
}

.description ul {
  list-style-type: disc;
}

.description ul li {
  font-family: 'Apple-Garamond-Light', serif;
  color: #FFF;
  font-size: 1.75vw;
  line-height: 1.3;
  font-weight: normal;
  letter-spacing: 0.015em;
}

.description a, .description p a {
  color:#FFF;
}

.description a:hover, .description p a:hover {
  color:#FFF;
  text-decoration: none;
}

.bio {
  width: 100%;
  float: left;
  padding-left: 0vw;
  box-sizing: border-box;
  /*margin-top: 5em;*/
}

.bio p {
  font-family: 'Libre Franklin', sans-serif;
  color: #CCC;
  font-size: 1.1vw;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.035em;
}

.bio p i {
  font-family: 'Libre Franklin', sans-serif;
  font-style: italic;
}

.bio p em {
  font-weight: 900;
  font-size: inherit;
}

.bio p a {
  color: #CCC;
}

.streetview {
  width: 100%;
  height: 60vh;/*60vh;*/
  margin-top: 1.5em;
  float: left;
  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");
  filter: gray;
	-webkit-filter: grayscale(99%);
  -webkit-backface-visibility: hidden;
}

/*streetview buttons*/
.gm-style-cc {
  display: none;
}

/*photo gallery*/
.gallery-img {
  width: 32%;
  height: 20vw;
  background-position: center;
  background-size: cover;
  cursor: zoom-in;
  float: left;
  transition: opacity 0.3s;
  box-sizing: border-box;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
}

.gallery-img:hover {
  opacity:0.5;
}

#gallery {
  position: fixed;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  cursor: zoom-out;
  padding: 2vw;
}

#gallery img {
  width: auto;
  height: 100%;
  left:50%;
  position: relative;
  transform: translateX(-50%);
  box-shadow: #000 0px 0px 20px;
}

/* 3D BOXES */

.box-wrapper {
  width: 100%;
  min-height: 10vw;
  /*float: left;*/
  /*margin-top: 25vh;
  margin-bottom: -25vh;*/
  box-sizing: border-box;
  padding-right: 0vw;
  padding-top: 3vw;
  padding-bottom: 5vw;
  /*height: 77.78vh;*/
  /*position: absolute;*/
}

.box-container {
  width: 25vw; /*21vw*/
  height: 31.55vw; /*26.5vw*/
  position: relative;
  perspective: 200vw; /*2000px*/
  /*transform:translateX(-50%);
  left:50%;*/
  margin:0 auto;
  margin-bottom: 6.75vw;
  /*background-color: #FF0;*/
  /*opacity:0;
  transition: opacity 0.5s;*/
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform-origin:center;
  animation-name: turnBox;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}

@keyframes turnBox {
    from {transform: scale(0.5,0.5) rotateY(0deg) }
    to {transform: scale(0.5,0.5) rotateY(360deg) }
}

.box div {
  margin: 0;
  display: block;
  position: absolute;
  border:0px solid #FFF;
  box-sizing:border-box;
  background-blend-mode:multiply;
  background-size:cover;
  backface-visibility:hidden;
  -webkit-backface-visibility: hidden;
  transform-origin:center;
  background-color:rgba(255,255,255,0.1);
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}

.box.reflection div {
  background-blend-mode:none;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top;
  background:linear-gradient(rgba(255,255,255,0.1),rgba(150,150,150,0.0));
  /*opacity:0.5;*/
  border:none;
  height: 50% !important;
}

.box .box-front,
.box .box-back {
  width: 200%;
  height: 200%;
}

.box .box-right,
.box .box-left {
  width: 47.6%;
  height: 200%;
  left: 100%;
}

.box.main .box-front  { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(-11.9%) rotateY(   -90deg ); animation-name: shade-front; }
.box.main .box-back   { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(11.9%) rotateY( 90deg); animation-name: shade-back; }
.box.main .box-right  { transform: translateX(54.5%) translateY(-25%) rotateY( 90deg ); animation-name: shade-right; }
.box.main .box-left   { transform: translateX(-364.5%) translateY(-25%) rotateY( -90deg ); animation-name: shade-left; }

@keyframes shade-front {
    0% { background-color:#FFF; }
    25% {background-color:#333; }
	75% { background-color:#999; }
}

@keyframes shade-left {
    0% { background-color:#999; }
	25% { background-color:#FFF; }
    50% {background-color:#333; }
}

@keyframes shade-back {
	25% { background-color:#999; }
    50% { background-color:#FFF; }
    75% {background-color:#333; }
}

@keyframes shade-right {
	50% { background-color:#999; }
    75% { background-color:#FFF; }
    100% {background-color:#333; }
}

.box.reflection .box-front  { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(-11.9%) rotateY(-90deg ) translateY(325%); }
.box.reflection .box-back   { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(11.9%) rotateY(90deg) translateY(325%); }
.box.reflection .box-right  { transform: translateX(55%) translateY(-25%) rotateY(90deg ) translateY(325%); }
.box.reflection .box-left   { transform: translateX(-365%) translateY(-25%) rotateY(-90deg ) translateY(325%); }


#aram-bartholl + .content .box-container {
  width: 13.1vw; /*6.55*/
  height: 21.65vw; /*10.825*/
}

#aram-bartholl + .content .box.main .box-front  { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(-21.25%) rotateY(   -90deg ); animation-name: shade-front; }
#aram-bartholl + .content .box.main .box-back   { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(21.25%) rotateY( 90deg); animation-name: shade-back; }
#aram-bartholl + .content .box.main .box-right  { width: 85%; transform: translateX(8.5%) translateY(-25%) rotateY(90deg ); animation-name: shade-right; }
#aram-bartholl + .content .box.main .box-left   { width: 85%; transform: translateX(-226%) translateY(-25%) rotateY(-90deg ); animation-name: shade-left; }

#aram-bartholl + .content .box.reflection .box-front  { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(-21.25%) rotateY(   -90deg ) translateY(325%); }
#aram-bartholl + .content .box.reflection .box-back   { transform: translateX(-25%) translateY(-25%) rotateY(90deg) translateX(21.25%) rotateY( 90deg) translateY(325%); }
#aram-bartholl + .content .box.reflection .box-right  { width: 85%; transform: translateX(8.5%) translateY(-25%) rotateY(90deg) translateY(325%); }
#aram-bartholl + .content .box.reflection .box-left   { width: 85%; transform: translateX(-226%) translateY(-25%) rotateY(-90deg) translateY(325%); }


/* BOX FACES */
#aram-bartholl.open + .content .box.main .box-front { background-image: url(boxes/aram_front.jpg); }
#aram-bartholl.open + .content .box.main .box-back { background-image: url(boxes/aram_back.jpg); }
#aram-bartholl.open + .content .box.main .box-right { background-image: url(boxes/aram_right.jpg); }
#aram-bartholl.open + .content .box.main .box-left { background-image: url(boxes/aram_left.jpg); }

#geraldine-juarez.open + .content .box.main .box-front { background-image: url(boxes/geraldine_front.jpg); }
#geraldine-juarez.open + .content .box.main .box-back { background-image: url(boxes/geraldine_back.jpg); }
#geraldine-juarez.open + .content .box.main .box-right { background-image: url(boxes/geraldine_right.jpg); }
#geraldine-juarez.open + .content .box.main .box-left { background-image: url(boxes/geraldine_left.jpg); }

#jan-robert-leegte.open + .content .box.main .box-front { background-image: url(boxes/janrobert_front.jpg); }
#jan-robert-leegte.open + .content .box.main .box-back { background-image: url(boxes/janrobert_back.jpg); }
#jan-robert-leegte.open + .content .box.main .box-right { background-image: url(boxes/janrobert_right.jpg); }
#jan-robert-leegte.open + .content .box.main .box-left { background-image: url(boxes/janrobert_left.jpg); }

#moritz-greiner-petter.open + .content .box.main .box-front { background-image: url(boxes/moritz_front.jpg); }
#moritz-greiner-petter.open + .content .box.main .box-back { background-image: url(boxes/moritz_back.jpg); }
#moritz-greiner-petter.open + .content .box.main .box-right { background-image: url(boxes/moritz_right.jpg); }
#moritz-greiner-petter.open + .content .box.main .box-left { background-image: url(boxes/moritz_left.jpg); }

#benoit-verjat.open + .content .box.main .box-front { background-image: url(boxes/benoit_front.jpg); }
#benoit-verjat.open + .content .box.main .box-back { background-image: url(boxes/benoit_back.jpg); }
#benoit-verjat.open + .content .box.main .box-right { background-image: url(boxes/benoit_right.jpg); }
#benoit-verjat.open + .content .box.main .box-left { background-image: url(boxes/benoit_left.jpg); }

#peter-moosgaard.open + .content .box.main .box-front { background-image: url(boxes/peter_front.jpg); }
#peter-moosgaard.open + .content .box.main .box-back { background-image: url(boxes/peter_back.jpg); }
#peter-moosgaard.open + .content .box.main .box-right { background-image: url(boxes/peter_right.jpg); }
#peter-moosgaard.open + .content .box.main .box-left { background-image: url(boxes/peter_left.jpg); }

#sebastian-schmieg.open + .content .box.main .box-front { background-image: url(boxes/sebastian_front.jpg); }
#sebastian-schmieg.open + .content .box.main .box-back { background-image: url(boxes/sebastian_back.jpg); }
#sebastian-schmieg.open + .content .box.main .box-right { background-image: url(boxes/sebastian_right.jpg); }
#sebastian-schmieg.open + .content .box.main .box-left { background-image: url(boxes/sebastian_left.jpg); }

#suzanne-treister.open + .content .box.main .box-front { background-image: url(boxes/suzanne_front.jpg); }
#suzanne-treister.open + .content .box.main .box-back { background-image: url(boxes/suzanne_back.jpg); }
#suzanne-treister.open + .content .box.main .box-right { background-image: url(boxes/suzanne_right.jpg); }
#suzanne-treister.open + .content .box.main .box-left { background-image: url(boxes/suzanne_left.jpg); }

#evan-roth.open + .content .box.main .box-front { background-image: url(boxes/evan_front.jpg); }
#evan-roth.open + .content .box.main .box-back { background-image: url(boxes/evan_back.jpg); }
#evan-roth.open + .content .box.main .box-right { background-image: url(boxes/evan_right.jpg); }
#evan-roth.open + .content .box.main .box-left { background-image: url(boxes/evan_left.jpg); }

#rosa-menkman.open + .content .box.main .box-front { background-image: url(boxes/rosa_front.jpg); }
#rosa-menkman.open + .content .box.main .box-back { background-image: url(boxes/rosa_back.jpg); }
#rosa-menkman.open + .content .box.main .box-right { background-image: url(boxes/rosa_right.jpg); }
#rosa-menkman.open + .content .box.main .box-left { background-image: url(boxes/rosa_left.jpg); }

#bernhard-garnicnig.open + .content .box.main .box-front { background-image: url(boxes/bernhard_front.jpg); }
#bernhard-garnicnig.open + .content .box.main .box-back { background-image: url(boxes/bernhard_back.jpg); }
#bernhard-garnicnig.open + .content .box.main .box-right { background-image: url(boxes/bernhard_right.jpg); }
#bernhard-garnicnig.open + .content .box.main .box-left { background-image: url(boxes/bernhard_left.jpg); }

#ciara-phillips.open + .content .box.main .box-front { background-image: url(boxes/ciara_front.jpg); }
#ciara-phillips.open + .content .box.main .box-back { background-image: url(boxes/ciara_back.jpg); }
#ciara-phillips.open + .content .box.main .box-right { background-image: url(boxes/ciara_right.jpg); }
#ciara-phillips.open + .content .box.main .box-left { background-image: url(boxes/ciara_left.jpg); }

#constant-dullaart.open + .content .box.main .box-front { background-image: url(boxes/constant_front.jpg); }
#constant-dullaart.open + .content .box.main .box-back { background-image: url(boxes/constant_back.jpg); }
#constant-dullaart.open + .content .box.main .box-right { background-image: url(boxes/constant_right.jpg); }
#constant-dullaart.open + .content .box.main .box-left { background-image: url(boxes/constant_left.jpg); }

#ishac-bertran.open + .content .box.main .box-front { background-image: url(boxes/ishac_front.jpg); }
#ishac-bertran.open + .content .box.main .box-back { background-image: url(boxes/ishac_back.jpg); }
#ishac-bertran.open + .content .box.main .box-right { background-image: url(boxes/ishac_right.jpg); }
#ishac-bertran.open + .content .box.main .box-left { background-image: url(boxes/ishac_left.jpg); }

#pussykrew.open + .content .box.main .box-front { background-image: url(boxes/pussykrew_front.jpg); }
#pussykrew.open + .content .box.main .box-back { background-image: url(boxes/pussykrew_back.jpg); }
#pussykrew.open + .content .box.main .box-right { background-image: url(boxes/pussykrew_right.jpg); }
#pussykrew.open + .content .box.main .box-left { background-image: url(boxes/pussykrew_left.jpg); }

#windows93.open + .content .box.main .box-front { background-image: url(boxes/windows93_front.jpg); }
#windows93.open + .content .box.main .box-back { background-image: url(boxes/windows93_back.jpg); }
#windows93.open + .content .box.main .box-right { background-image: url(boxes/windows93_right.jpg); }
#windows93.open + .content .box.main .box-left { background-image: url(boxes/windows93_left.jpg); }

#jamie-allen.open + .content #jamie-box1 .box.main .box-front { background-image: url(boxes/jamie_front1.jpg); }
#jamie-allen.open + .content #jamie-box1 .box.main .box-back { background-image: url(boxes/jamie_back1.jpg); }
#jamie-allen.open + .content #jamie-box1 .box.main .box-right { background-image: url(boxes/jamie_right1.jpg); }
#jamie-allen.open + .content #jamie-box1 .box.main .box-left { background-image: url(boxes/jamie_left1.jpg); }

#jamie-allen.open + .content #jamie-box2 .box.main .box-front { background-image: url(boxes/jamie_front2.jpg); }
#jamie-allen.open + .content #jamie-box2 .box.main .box-back { background-image: url(boxes/jamie_back2.jpg); }
#jamie-allen.open + .content #jamie-box2 .box.main .box-right { background-image: url(boxes/jamie_right2.jpg); }
#jamie-allen.open + .content #jamie-box2 .box.main .box-left { background-image: url(boxes/jamie_left2.jpg); }

#jamie-allen.open + .content #jamie-box3 .box.main .box-front { background-image: url(boxes/jamie_front3.jpg); }
#jamie-allen.open + .content #jamie-box3 .box.main .box-back { background-image: url(boxes/jamie_back3.jpg); }
#jamie-allen.open + .content #jamie-box3 .box.main .box-right { background-image: url(boxes/jamie_right3.jpg); }
#jamie-allen.open + .content #jamie-box3 .box.main .box-left { background-image: url(boxes/jamie_left3.jpg); }

#phillip-stearns.open + .content #phillip-box1.slick-active .box.main .box-front { background-image: url(boxes/phillip_front2.jpg); }
#phillip-stearns.open + .content #phillip-box1.slick-active .box.main .box-back { background-image: url(boxes/phillip_back2.jpg); }
#phillip-stearns.open + .content #phillip-box1.slick-active .box.main .box-right { background-image: url(boxes/phillip_right2.jpg); }
#phillip-stearns.open + .content #phillip-box1.slick-active .box.main .box-left { background-image: url(boxes/phillip_left2.jpg); }

#phillip-stearns.open + .content #phillip-box2.slick-active .box.main .box-front { background-image: url(boxes/phillip_front10.jpg); }
#phillip-stearns.open + .content #phillip-box2.slick-active .box.main .box-back { background-image: url(boxes/phillip_back10.jpg); }
#phillip-stearns.open + .content #phillip-box2.slick-active .box.main .box-right { background-image: url(boxes/phillip_right10.jpg); }
#phillip-stearns.open + .content #phillip-box2.slick-active .box.main .box-left { background-image: url(boxes/phillip_left10.jpg); }

#phillip-stearns.open + .content #phillip-box3.slick-active .box.main .box-front { background-image: url(boxes/phillip_front1.jpg); }
#phillip-stearns.open + .content #phillip-box3.slick-active .box.main .box-back { background-image: url(boxes/phillip_back1.jpg); }
#phillip-stearns.open + .content #phillip-box3.slick-active .box.main .box-right { background-image: url(boxes/phillip_right1.jpg); }
#phillip-stearns.open + .content #phillip-box3.slick-active .box.main .box-left { background-image: url(boxes/phillip_left1.jpg); }

#phillip-stearns.open + .content #phillip-box4.slick-active .box.main .box-front { background-image: url(boxes/phillip_front7.jpg); }
#phillip-stearns.open + .content #phillip-box4.slick-active .box.main .box-back { background-image: url(boxes/phillip_back7.jpg); }
#phillip-stearns.open + .content #phillip-box4.slick-active .box.main .box-right { background-image: url(boxes/phillip_right7.jpg); }
#phillip-stearns.open + .content #phillip-box4.slick-active .box.main .box-left { background-image: url(boxes/phillip_left7.jpg); }

#phillip-stearns.open + .content #phillip-box5.slick-active .box.main .box-front { background-image: url(boxes/phillip_front3.jpg); }
#phillip-stearns.open + .content #phillip-box5.slick-active .box.main .box-back { background-image: url(boxes/phillip_back3.jpg); }
#phillip-stearns.open + .content #phillip-box5.slick-active .box.main .box-right { background-image: url(boxes/phillip_right3.jpg); }
#phillip-stearns.open + .content #phillip-box5.slick-active .box.main .box-left { background-image: url(boxes/phillip_left3.jpg); }

#phillip-stearns.open + .content #phillip-box6.slick-active .box.main .box-front { background-image: url(boxes/phillip_front6.jpg); }
#phillip-stearns.open + .content #phillip-box6.slick-active .box.main .box-back { background-image: url(boxes/phillip_back6.jpg); }
#phillip-stearns.open + .content #phillip-box6.slick-active .box.main .box-right { background-image: url(boxes/phillip_right6.jpg); }
#phillip-stearns.open + .content #phillip-box6.slick-active .box.main .box-left { background-image: url(boxes/phillip_left6.jpg); }

#phillip-stearns.open + .content #phillip-box7.slick-active .box.main .box-front { background-image: url(boxes/phillip_front4.jpg); }
#phillip-stearns.open + .content #phillip-box7.slick-active .box.main .box-back { background-image: url(boxes/phillip_back4.jpg); }
#phillip-stearns.open + .content #phillip-box7.slick-active .box.main .box-right { background-image: url(boxes/phillip_right4.jpg); }
#phillip-stearns.open + .content #phillip-box7.slick-active .box.main .box-left { background-image: url(boxes/phillip_left4.jpg); }

#phillip-stearns.open + .content #phillip-box8.slick-active .box.main .box-front { background-image: url(boxes/phillip_front5.jpg); }
#phillip-stearns.open + .content #phillip-box8.slick-active .box.main .box-back { background-image: url(boxes/phillip_back5.jpg); }
#phillip-stearns.open + .content #phillip-box8.slick-active .box.main .box-right { background-image: url(boxes/phillip_right5.jpg); }
#phillip-stearns.open + .content #phillip-box8.slick-active .box.main .box-left { background-image: url(boxes/phillip_left5.jpg); }

#phillip-stearns.open + .content #phillip-box9.slick-active .box.main .box-front { background-image: url(boxes/phillip_front8.jpg); }
#phillip-stearns.open + .content #phillip-box9.slick-active .box.main .box-back { background-image: url(boxes/phillip_back8.jpg); }
#phillip-stearns.open + .content #phillip-box9.slick-active .box.main .box-right { background-image: url(boxes/phillip_right8.jpg); }
#phillip-stearns.open + .content #phillip-box9.slick-active .box.main .box-left { background-image: url(boxes/phillip_left8.jpg); }

#phillip-stearns.open + .content #phillip-box10.slick-active .box.main .box-front { background-image: url(boxes/phillip_front9.jpg); }
#phillip-stearns.open + .content #phillip-box10.slick-active .box.main .box-back { background-image: url(boxes/phillip_back9.jpg); }
#phillip-stearns.open + .content #phillip-box10.slick-active .box.main .box-right { background-image: url(boxes/phillip_right9.jpg); }
#phillip-stearns.open + .content #phillip-box10.slick-active .box.main .box-left { background-image: url(boxes/phillip_left9.jpg); }

/* RESPONSIVE STYLES */

/*@media screen and (max-aspect-ratio: 7/5) {

}

@media screen and (min-aspect-ratio: 16/7) {

}*/

@media screen and (max-width: 740px) {
  #title-wrapper {
    background-size: auto 100vh;
  }

  #title-wrapper .title {
    font-size: 10vmin;
  }

  #cover {
    background-size: auto 100vh;
    background-position: -15vw 0;
    align-items: flex-start;
    padding-top: 3em;
  }

  #cover div {
    font-family:'slick','Libre Franklin', sans-serif;
    font-size: 8vw;
    letter-spacing: 0em;
    line-height:1;
    float: left;
    text-align: center;
    box-sizing: border-box;
    left: 50%;
    transform: rotate(90deg) translateX(-50%);
    opacity: 1;
    position: absolute;
    bottom: 13vh;
    transition: opacity 0.25s;
    animation-name: bounceArrow;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-out;
    padding: 2px;
  }

  @keyframes bounceArrow {
      0% {bottom:13vh }
      50% {bottom:12.5vh }
      100% {bottom:13vh}
  }

  .section-title {
    background-attachment: scroll;
    background-size: auto 100vh;
  }

  .section-title .title {
    font-size: 13.5vw;
  }

  #title-about {
    background-position: center 0;
  }

  #title-artists {
    background-position: center 66.66vh;
  }

  #title-show {
    background-position: center 33.33vh;
  }

  .sub-section-title {
    background-attachment: scroll;
    background-size: auto 100vh;
  }

  .sub-section-title .title {
    font-size: 6.25vw; /*5.5*/
  }

  /*ABOUT*/

  #user-manual {
    background-position: center 66.66vh;
  }

  #research {
    background-position: center 44.44vh;
  }

  #partners {
    background-position: center 22.22vh;
  }

  /*EVENT*/

  #display {
    background-position: center 0vh;
  }

  #opening {
    background-position: center 66.66vh;
  }

  .content {
    background-image: none;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    /*-webkit-hyphens: auto;*/
  }

  .content .spacer {
    padding: 4vw 6vw;
  }

  .content h1 {
    color: #000;
    font-family: 'Libre Franklin','Apple-Garamond-Light', serif;
    font-weight: 900;
    font-size: 4.75vw;
    line-height: 1.2;
    margin-bottom: 1em;
    margin-top: 1em;
    letter-spacing: 0em;
    float: left;
    border-bottom: 0.6vw solid #000;
    margin-left: 1em;
    text-transform: uppercase;
  }

  .content p {
    font-family: 'Apple-Garamond', serif;
    font-size: 4.75vw;
    line-height: 1.2;
    margin-bottom: 0.5em;
    letter-spacing: 0.00em;
  }

  .content p i {
    font-family: 'Apple-Garamond-Italic', serif;
  }

  /* SUB SUB SECTION (INTERVIEWS) */
  .sub-sub-section-title {
    background-color: #EEE;
    background-image: none;
  }

  .sub-sub-section-title div {
    margin: 0 6vw;
  }

  .sub-sub-section-title .title {
    font-family: 'Apple-Garamond-Italic', serif;
    font-weight: normal;
    text-transform: normal;
    font-size: 7.5vw; /*3.5vh;*/
    line-height: 1.1;
    letter-spacing: -0.0em;
    border-top: 2px solid #666;
    padding-top: 0.25em;
    color: #666;
  }

  .sub-sub-section-title .subtitle {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 3vw; /*9.5vh;*/
    line-height: 1.3;
    letter-spacing: 0.01em;
    word-wrap: normal;
    white-space: normal;
    color: #666;
    padding-top: 0.5em;
  }

  .sub-sub-section-title + .content {
    text-align: center;
  }

  .content .interview-info {
    float: left;
    margin-bottom: 3em;
    text-align: left;
  }

  .content .interview-info i {
    font-family: 'Libre Fanklin', sans-serif;
    font-style: italic;
  }

  .content .interview-info p {
      font-family: 'Libre Franklin', sans-serif;
      font-size: 3vw;
      line-height: 1.3;
      font-weight: 500;
      letter-spacing: 0.035em;
  }

  .content .interview-question {
      font-family: 'Libre Franklin', sans-serif;
      font-weight: 900;
      letter-spacing: 0.01em;
      font-size: 4.5vw;
      color: #000;
      margin-bottom:0.8em;
      line-height: 1.2;
  }

  .content .interview-answer p {
    font-family: 'Apple-Garamond', serif;
    margin: 0;
    font-size: 4.75vw;
    line-height: 1.2;
    text-align: left;
  }

  .content .interview-answer p:last-child {
    margin-bottom: 1em;
  }

  .content .interview-answer img {
    font-size: 4.75vw;
    margin: 1em 0 1.25em 0;
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .content .interview-answer img.with-caption {
    margin-bottom: 0.35em;
  }

  .content .interview-answer span + img {
    margin-top: 0em;
  }

  .content .interview-answer img + img {
    margin-top: 0em;
  }

  .content .interview-answer .caption {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 3vw;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.035em;
    color: #000;
    margin-bottom: 2.25em;
    width: 100%;
    padding: 0;
    float: left;
    box-sizing: border-box;
  }

  .content .interview-answer .caption i {
    font-style: italic;
  }

  .artist-panel {
    background-color: #444;
    background-attachment: scroll;
    background-repeat:no-repeat;
    background-size: auto 100vh;
    background-position: left top;
  }

  .artist-panel .spacer {
    padding:0;
    min-height: auto !important;
  }

  .artist-panel .sub-section-title .title {
    font-size: 8vmin; /*8vh;*/
    border-bottom-width: 0.4vw;
  }

  /*.box-wrapper {
    width: 100%;
    float: left;
    margin-top: 25vh;
    margin-bottom: -6vh;
    box-sizing: border-box;
    padding-right: 0;
  }

  .box-container {
    width: 50.4vw;
    height: 63.6vw;
    position: relative;
    perspective: 2000px;
    transform:translateX(-50%) translateY(-50%);
    top:50%;
    left:50%;
    z-index:0;
  }*/

  .box-wrapper {
    width: 100%;
    min-height: 77.78vh;
    /*float: left;*/
    /*margin-top: 25vh;
    margin-bottom: -25vh;*/
    box-sizing: border-box;
    padding-right: 0vw;
    padding-top: 10vh; /*12vw;*/
    padding-bottom: 0; /*12vw;*/
    margin-bottom: 0vh;
    /*height: 77.78vh;*/
    /*position: absolute;*/
  }

  .box-container {
    width: 50vw; /*21vw*/
    height: 63.10vw; /*26.5vw*/
    position: relative;
    perspective: 400vw; /*2000px*/
    /*transform:translateX(-50%);
    left:50%;*/
    margin:0 auto;
    margin-bottom: 0; /*6.75vw;*/
    /*background-color: #FF0;*/
    /*opacity:0;
    transition: opacity 0.5s;*/
  }

  #aram-bartholl + .content .box-wrapper {
    padding-top:13vh;
  }

  #aram-bartholl + .content .box-container {
    width: 26.2vw; /*6.55*/
    height: 43.3vw; /*10.825*/
  }

  .description {
    width: 100%;
    float: left;
    padding-left: 0;
    box-sizing: border-box;
    background-color: #222;
    padding: 8vw 6vw 6vw 6vw;
    margin-bottom: 0em;
  }

  .description p {
    font-family: 'Apple-Garamond', serif;
    color: #EEE;
    font-size: 4.25vw;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0.0em;
  }

  .description p i {
    font-family: 'Apple-Garamond-Italic', serif;
    font-style: normal;
  }

  .description h1 {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 900;
    border-bottom: 2px solid #FFF;
    font-size: 4.00vw;
    color: #FFF;
    line-height: 1.3;
    margin-bottom: 1em;
    margin-top: 0;
    letter-spacing: 0.01em;
    float: left;
    border-bottom: 0.0vw solid #FFF;
    text-decoration: underline;
    margin-left: 0em;
    text-transform: uppercase;
  }

  .description blockquote {
    font-family: 'Apple-Garamond-Italic', serif;
    color: #FFF;
    font-size: 4.25vw;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0.00em;
    margin-bottom: 1em;
    /*padding-left: 1em;*/
    clear: both;
  }

  .description ul {
    list-style-type: disc;
    padding-left: 1em;
  }

  .description ul li {
    font-family: 'Apple-Garamond', serif;
    color: #FFF;
    font-size: 4.25vw;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0.00em;
    margin-bottom: 0.5em;
  }

  .description a, .description p a {
    color:#FFF;
  }

  .description a:hover, .description p a:hover {
    color:#FFF;
    text-decoration: none;
  }

  .bio {
    width: 100%;
    float: left;
    padding-left: 0;
    box-sizing: border-box;
    background-color: #CCC;
    padding: 4vw 6vw 6vw 6vw;
  }

  .bio p {
    font-family: 'Libre Franklin', sans-serif;
    color: #666;
    font-size: 3vw;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.035em;
  }

  .bio p i {
    font-family: 'Libre Franklin', sans-serif;
  }

  .bio p em {
    font-weight: 900;
    font-size: inherit;
  }

  .bio p a {
    color: #666;
  }

  #logo-plattfon {
    width: 30vw;
    margin-bottom: 2em;
  }
  #logo-bs {
    width: 24vw;
  }
  #logo-fhnw {
    width: 10vw;
  }

  .streetview {
    height: 45vh;
  }

  .gallery-img {
    width: 96%;
    height: 50vw;
    margin:2% 2% 0 2%;
  }

  .gallery-img:last-child {
    margin-bottom: 2%;
  }

  .gallery-img:hover {
    opacity:0.5;
  }

  #gallery {
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    cursor: zoom-out;
    padding: 5vw;
    overflow-x: scroll;
  }

  #gallery img {
    width: auto;
    height: 100%;
    left:0;
    position: relative;
    transform: none;
    box-shadow: #000 0px 0px 20px;
  }

}