@import "reset.css";
@import "https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css";

@font-face {
  font-family: Medium;
  src: url(../assets/fonts/HelveticaNeue-Medium-11.woff) format("woff");
}

@font-face {
  font-family: Regular;
  src: url(../assets/fonts/HelveticaNeue-Roman.woff) format("woff");
}

@font-face {
  font-family: Windsor;
  src: url(../assets/fonts/WindsorBT-Roman.woff) format("woff");
}

html {
  overflow: hidden;
}


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

  #pop {
    z-index: 0;
    transform: all ease 0.75s;
    opacity: 0%;

  }

  #pop p{
    font-family: Regular;
  }

  #pop p:hover{
    cursor: pointer;
  }

  #pop.active {

    display: block;
    z-index: 5;
    height: 100dvh;
    width: 100dvw;
    background-color: rgb(0 0 0 / 50%);
    position: fixed;
    opacity: 100%;
  }

  #button4{
    position: fixed;
    right: 4%;
    top: 1%;
    transform: scale(2);
  }

  #button4:hover {
    transform: scale(2.1);
    transition: 0.125s;
  }

  .popupbg {
    position: fixed;
    height: 70dvh;
    z-index: 1;
    margin-top: -50dvh;
    margin-left: 50dvw;
    transform: translate(-50%, -50%);
    opacity: 0%;
}

.popupbg.active {

  position: fixed;
  height: 70dvh;
  z-index: 1;
  margin-top: 50dvh;
  margin-left: 50dvw;
  transform: translate(-50%, -50%);
  opacity: 100%;
}

.popupbg img {
  height: 100%;
}

.schrift {
  mix-blend-mode: multiply;
  position: fixed;
  z-index: 2;
  width: 95%;
  padding-bottom: 2dvh;
  padding-top: 2.5dvh;
  margin-left: 50%;
  transform: translate(-50%,0);
}

#sitenav {
  opacity: 100%;
  transition: all ease 0.75s;
}

#sitenav.active{
  opacity: 0%;
}

.show {
  margin-top: 100dvh;
  opacity: 0;
  transition: all ease 0.5s;
}

.hide {
  margin-top: -100dvh;
}

#slide {
  width: 100dvw;
  height: 100dvh;
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  vertical-align: center;
  overflow: scroll;
  padding-top: 16vh;
  padding-bottom: 8vh;
  transition: all ease 0.5s;
}

.konzept {
  z-index: 7;
  margin: auto;
  width: 95dvw;
}

.konzept img {
  mix-blend-mode: screen;
  padding-top: 1.5dvh;
  padding-bottom: 1.5dvh;
}

.as {
  width: 60%;
  mix-blend-mode: screen;
}


p{
  font-family: Medium;
  color: white;
  font-size: 5.5vw;
  text-align: center;
  line-height: 110%;
}

h1{
  font-family: Windsor;
  color: white;
  font-size: 6.5vw;
  line-height: 105%;
}

a{
  color: white;
}

a:hover {
  color: blue;
}

#viewer {
  width: 100dvw;
  height: 100dvh;
  transition: all ease 1s;
  z-index: 12;
}

#overlay {
  z-index: 5;
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  top: 100dvh;
  background-color: black;
  opacity: 0%;
}

#overlay.active {
  z-index: 5;
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  top: 0;
  background-color: rgb(0 0 0 / 50%);
  opacity: 100%;
}

#navbar {
  display: none;
}

#info {
  z-index: 100;
  position: absolute;
  bottom: 1.5dvh;
  width: 100dvw;
  overflow: hidden;
  opacity: 100;
  transition: all ease 2s;
}

#info.active {
  z-index: 100;
  position: absolute;
  bottom: 1.5dvh;
  width: 100dvw;
  overflow: hidden;
  opacity: 0;
  transition: none;
}

.psv-navbar {
  display: none; 
}

.psv-loader {
  display: none;
}

#nav {
  z-index: 10;
  position: fixed;
  top: 1.5dvh;
  right: -75dvw;
  display: flex;
  transition: all ease 0.5s;
}

#nav.active {
  position: fixed;
  top: 1.5dvh;
  right: 2.5dvw;
  display: flex;
  transition: all ease 0.5s;
}

#button {
  top: 1.5dvh;
  position: fixed;
  margin-left: 50dvw;
  z-index: 12;
  background-color: #0000ff;
  color: white;
  transform: translate(-50%, 0);
  border-radius: 25dvw;
  padding-top: 1dvh;
  padding-bottom: 1dvh;
  padding-left: 2dvh;
  padding-right: 2dvh;
  transition: all ease 0.5s;
}

#button.active {
  top: 1.5dvh;
  position: fixed;
  margin-left: 2.5dvw;
  z-index: 12;
  background-color: #ff5100;
  transform: translate(0, 0);
  color: white;
  border-radius: 25dvw;
  padding-top: 1dvh;
  padding-bottom: 1dvh;
  padding-left: 2dvh;
  padding-right: 2dvh;
  transition: all ease 0.5s;
}

#button2 {
  z-index: 12;
  background-color: #0000ff;
  color: white;
  border-radius: 25dvw;
  padding-top: 1dvh;
  padding-bottom: 1dvh;
  padding-left: 2dvh;
  padding-right: 2dvh;
  transition: all ease 0.5s;
  margin-right: 1dvw;
}

#button2 a {
  text-decoration: none;
}

#button2 a:hover{
  color: white;
}

#button3 {
  margin-left: auto;
  z-index: 12;
  background-color: #0000ff;
  color: white;
  border-radius: 25dvw;
  padding-top: 1dvh;
  padding-bottom: 1dvh;
  padding-left: 2dvh;
  padding-right: 2dvh;
  transition: all ease 0.5s;
  transition: all ease 1s;
}

#button3 a {
text-decoration: none;
}

#button3 a:hover {
  color: white;
}





}

@media screen and (min-width: 480px) and (max-width: 2259px) {


  #pop {
    z-index: 0;
    opacity: 0%;
    transition: all ease 0.75s;
  }

  #pop p{
    font-family: Regular;
  }

  #pop p:hover{
    cursor: pointer;
  }

  #pop.active {
    display: block;
    z-index: 5;
    height: 100dvh;
    width: 100dvw;
    background-color: rgb(0 0 0 / 50%);
    position: fixed;
    opacity: 100%;
  }

  #button4{
    position: fixed;
    right: 4%;
    top: 1%;
    transform: scale(2);
  }

  #button4:hover {
    transform: scale(2.1);
    transition: 0.125s;
    cursor: pointer;
  }

  .popupbg {
    position: fixed;
    height: 90dvh;
    z-index: 1;
    margin-top: -50dvh;
    margin-left: 50dvw;
    transform: translate(-50%, -50%);
    opacity: 0%;
}

.popupbg.active {
  position: fixed;
  height: 90dvh;
  z-index: 1;
  margin-top: 50dvh;
  margin-left: 50dvw;
  transform: translate(-50%, -50%);
  opacity: 100%;
}

.popupbg img {
  height: 100%;
}

.schrift {
  mix-blend-mode: multiply;
  position: fixed;
  z-index: 2;
  width: 90%;
  padding-bottom: 3dvh;
  padding-top: 3.5dvh;
  margin-left: 50%;
  transform: translate(-50%,0);
}

#sitenav {
  opacity: 100%;
  transition: all ease 0.75s;
}

#sitenav.active{
  opacity: 0%;

}

.show {
    margin-top: 100dvh;
    opacity: 0;
    transition: all ease 0.5s;
  }
  
.hide {
    margin-top: -100dvh;
  }
  
#slide {
    width: 100dvw;
    height: 100dvh;
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    vertical-align: center;
    overflow: scroll;
    padding-top: 25vh;
    padding-bottom: 8vh;
    transition: all ease 0.5s;
  }
  
  .konzept {
    z-index: 7;
    margin: auto;
    width: 60dvw;
    cursor: default;
  }
  
  .konzept img {
    mix-blend-mode: screen;
    padding-top: 1.5dvh;
    padding-bottom: 1.5dvh;
  }
  
  .as {
    width: 40%;
    mix-blend-mode: screen;
  }
  
  
  p{
    font-family: Medium;
    color: white;
    font-size: 1.75vw;
    text-align: center;
    line-height: 110%;
  }
  
  h1{
    font-family: Windsor;
    color: white;
    font-size: 3.25vw;
    line-height: 105%;
  }
  
  a{
    color: white;
  }
  
  a:hover {
    color: blue;
    cursor: pointer;
  }
  
  #viewer {
    width: 100dvw;
    height: 100dvh;
    transition: all ease 1s;
  }
  
  #overlay {
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 100dvh;
    background-color: black;
    z-index: 5;
    opacity: 0%;
  }
  
  #overlay.active {
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    background-color: rgb(0 0 0 / 50%);
    z-index: 5;
    opacity: 100%;
  }
  
  #navbar {
    display: none;
  }
  
  #info {
    z-index: 100;
    position: absolute;
    bottom: 1.5dvh;
    width: 100dvw;
    overflow: hidden;
    opacity: 100;
    transition: all ease 2s;
    cursor: default;
  }
  
  #info.active {
    z-index: 100;
    position: absolute;
    bottom: 1.5dvh;
    width: 100dvw;
    overflow: hidden;
    opacity: 0;
    transition: none;
  }
  
  .psv-navbar {
    display: none; 
  }
  
  .psv-loader {
    display: none;
  }
  
  #nav {
    z-index: 9;
    position: fixed;
    top: 1.5dvh;
    right: -75dvw;
    display: flex;
    transition: all ease 0.5s;
  }
  
  #nav.active {
    position: fixed;
    top: 1.5dvh;
    right: 2.5dvw;
    display: flex;
    transition: all ease 0.5s;
  }
  
  #button {
    top: 1.5dvh;
    position: fixed;
    margin-left: 50dvw;
    z-index: 10;
    background-color: #0000ff;
    color: white;
    transform-origin: left center;
    transform: translate(-50%, 0);
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transition: all ease 0.25s;
    cursor: pointer;
  }

  #button:hover {
    top: 1.5dvh;
    position: fixed;
    margin-left: 50dvw;
    z-index: 11;
    background-color: #0000ff;
    color: white;
    transform-origin: left center;
    transform: scale(1.03) translate(-50%, 0);
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transition: all ease 0.25s;
    cursor: pointer;
  }
  
  #button.active {
    top: 1.5dvh;
    position: fixed;
    margin-left: 2.5dvw;
    z-index: 11;
    background-color: #ff5100;
    transform-origin: center center;
    transform: translate(0, 0);
    color: white;
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transition: all ease 0.25s;
    cursor: pointer;
  }

  #button.active:hover {
    top: 1.5dvh;
    position: fixed;
    margin-left: 2.5dvw;
    z-index: 11;
    background-color: #ff5100;
    transform-origin: center center;
    transform: scale(1.03) translate(0, 0);
    color: white;
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transition: all ease 0.25s;
    cursor: pointer;
  }
  
  #button2 {
    z-index: 11;
    background-color: #0000ff;
    color: white;
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transition: all ease 0.25s;
    margin-right: 1dvw;
  }

  #button2:hover {
    z-index: 11;
    background-color: #0000ff;
    color: white;
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transform: scale(1.03);
    transition: all ease 0.25s;
    margin-right: 1dvw;
    cursor: pointer;
  }
  
  #button2 a {
    text-decoration: none;
  }
  
  #button2 a:hover{
    color: white;
    cursor: pointer;
  }
  
  #button3 {
    margin-left: auto;
    z-index: 11;
    background-color: #0000ff;
    color: white;
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transition: all ease 0.25s;
  }

  #button3:hover {
    margin-left: auto;
    z-index: 11;
    background-color: #0000ff;
    color: white;
    border-radius: 25dvw;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2dvh;
    padding-right: 2dvh;
    transform: scale(1.03);
    transition: all ease 0.25s;
    cursor: pointer;
  }
  
  #button3 a {
  text-decoration: none;
  }
  
  #button3 a:hover {
    color: white;
    cursor: pointer;
  }
  
  
  }

@media screen and (min-width: 2260px) {


  #pop {
    z-index: 0;
    opacity: 0%;
    transition: all ease 0.75s;

  }

  #pop p{
    font-family: Regular;
  }

  #pop p:hover{
    cursor: pointer;
  }

  #pop.active {
    display: block;
    z-index: 5;
    height: 100dvh;
    width: 100dvw;
    background-color: rgb(0 0 0 / 50%);
    position: fixed;
    opacity: 100%;
  }

  #button4{
    position: fixed;
    right: 4%;
    top: 1%;
    transform: scale(2);
  }

  #button4:hover {
    transform: scale(2.1);
    transition: 0.125s;
    cursor: pointer;
  }

  .popupbg {
    position: fixed;
    height: 90dvh;
    z-index: 1;
    margin-top: -50dvh;
    margin-left: 50dvw;
    transform: translate(-50%, -50%);
  
}

.popupbg.active {
  position: fixed;
  height: 90dvh;
  z-index: 1;
  margin-top: 50dvh;
  margin-left: 50dvw;
  transform: translate(-50%, -50%);
}

.popupbg img {
  height: 100%;
}

.schrift {
  mix-blend-mode: multiply;
  position: fixed;
  z-index: 2;
  width: 85%;
  padding-bottom: 5dvh;
  padding-top: 5dvh;
  margin-left: 50%;
  transform: translate(-50%,0);
}

#sitenav {
  opacity: 100%;
  transition: all ease 0.75s;
}

#sitenav.active{
  opacity: 0%;
}
    .show {
      margin-top: 100dvh;
      opacity: 0;
      transition: all ease 0.5s;
    }
    
    .hide {
      margin-top: -100dvh;
    }
    
    #slide {
      width: 100dvw;
      height: 100dvh;
      position: absolute;
      z-index: 7;
      display: flex;
      align-items: center;
      vertical-align: center;
      overflow: scroll;
      padding-top: 25vh;
      padding-bottom: 8vh;
      transition: all ease 0.5s;
    }
    
    .konzept {
      z-index: 7;
      margin: auto;
      width: 40dvw;
      cursor: default;
    }
    
    .konzept img {
      mix-blend-mode: screen;
      padding-top: 1.5dvh;
      padding-bottom: 1.5dvh;
    }
    
    .as {
      width: 25%;
      mix-blend-mode: screen;
    }
    
    
    p{
      font-family: Medium;
      color: white;
      font-size: 1vw;
      text-align: center;
      line-height: 110%;
    }
    
    h1{
      font-family: Windsor;
      color: white;
      font-size: 1.85vw;
      line-height: 115%;
    }
    
    a{
      color: white;
    }
    
    a:hover {
      color: blue;
      cursor: pointer;
    }
    
    #viewer {
      width: 100dvw;
      height: 100dvh;
      transition: all ease 1s;
    }
    
    #overlay {
      width: 100dvw;
      height: 100dvh;
      position: fixed;
      top: 100dvh;
      background-color: rgb(0, 0, 0 / 0%);
      z-index: 5;
    }
    
    #overlay.active {
      width: 100dvw;
      height: 100dvh;
      position: fixed;
      top: 0;
      background-color: rgb(0 0 0 / 50%);
      z-index: 5;
    }
    
    #navbar {
      display: none;
    }
    
    #info {
      z-index: 100;
      position: absolute;
      bottom: 1.5dvh;
      width: 100dvw;
      overflow: hidden;
      opacity: 100;
      transition: all ease 2s;
    }
    
    #info.active {
      z-index: 100;
      position: absolute;
      bottom: 1.5dvh;
      width: 100dvw;
      overflow: hidden;
      opacity: 0;
      transition: none;
    }
    
    .psv-navbar {
      display: none; 
    }
    
    .psv-loader {
      display: none;
    }
    
    #nav {
      z-index: 8;
      position: fixed;
      top: 1.5dvh;
      right: -75dvw;
      display: flex;
      transition: all ease 0.5s;
    }
    
    #nav.active {
      position: fixed;
      top: 1.5dvh;
      right: 2.5dvw;
      display: flex;
      transition: all ease 0.5s;
    }
    
    #button {
      top: 1.5dvh;
      position: fixed;
      margin-left: 50dvw;
      z-index: 10;
      background-color: #0000ff;
      color: white;
      transform-origin: left center;
      transform: translate(-50%, 0);
      border-radius: 25dvw;
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
    }

    #button:hover {
      top: 1.5dvh;
      position: fixed;
      margin-left: 50dvw;
      z-index: 11;
      background-color: #0000ff;
      color: white;
      transform-origin: left center;
      transform: scale(1.07) translate(-50%, 0);
      border-radius: 25dvw;
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
      cursor: pointer;
    }
    
    #button.active {
      top: 1.5dvh;
      position: fixed;
      margin-left: 2.5dvw;
      z-index: 11;
      background-color: #ff5100;
      transform: translate(0, 0);
      color: white;
      border-radius: 25dvw;
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
    }

    #button.active:hover {
      top: 1.5dvh;
      position: fixed;
      margin-left: 2.5dvw;
      z-index: 11;
      background-color: #ff5100;
      color: white;
      transform: scale(1.07);
      border-radius: 25dvw;
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
      cursor: pointer;
    }
    
    #button2 {
      z-index: 11;
      background-color: #0000ff;
      color: white;
      border-radius: 25dvw;
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
      margin-right: 1dvw;
    }

    #button2:hover {
      z-index: 11;
      background-color: #0000ff;
      color: white;
      border-radius: 25dvw;
      transform: scale(1.07);
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
      margin-right: 1dvw;
      cursor: pointer;
    }
    
    #button2 a {
      text-decoration: none;
    }
    
    #button2 a:hover{
      color: white;
      cursor: pointer;
    }
    
    #button3 {
      margin-left: auto;
      z-index: 11;
      background-color: #0000ff;
      color: white;
      border-radius: 25dvw;
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.5s;
    }

    #button3:hover {
      margin-left: auto;
      z-index: 11;
      background-color: #0000ff;
      color: white;
      border-radius: 25dvw;
      transform: scale(1.07);
      padding-top: 0.75dvh;
      padding-bottom: 0.75dvh;
      padding-left: 1.5dvh;
      padding-right: 1.5dvh;
      transition: all ease 0.25s;
      cursor: pointer;
    }
    
    #button3 a {
    text-decoration: none;
    }
    
    #button3 a:hover {
      color: white;
      cursor: pointer;
    }
    
    
    
    
    
    }