html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-size: 1vw;
  color: #454545;
}

@font-face {
    font-family: Anggota;
    src: url(Anggota.woff);
}


h2 {
  font-size: 3vw;
  font-family: Anggota;
 }

h3 {
  font-size: 1.5vw;
  font-weight: bold;
  font-family: Anggota;
}

p, ul, audio {
  font-size: 1vw;
  line-height: 1.5vw;
}

audio {
  width: 32vw;
  height: 3vw;
}

#site {
  background-color: #000000;
  width: 100%;
  height: 100%;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
}

#content {
  background-size: contain;
  background-image: url('../bilder/room.svg');
  margin: 0px auto;
  width: 100vw;
  /*max-width: 200vh;*/
  height: 50vw;
  position: relative;
}

#window {
  height: 15vw;
  width: 15vw;
  float: left;
  position: absolute;
  left: 18vw;
  top: 7vw;
  z-index: 0;
}

#schieber {
  height: 15vw;
  width: 15vw;
  position: absolute;
  left: 18vw;
  top: 18.5vw;
  z-index: 1;
  transition: top 2s;
}

/*
#schieber:hover {
   top: -13vw;	
}
*/

#schieber.opened {
  top: 10vw;




}

#schieber.closed {

}

#tvbox {
  position: absolute;
  left: 69vw;
  top: 19vw;
  /*
  position: relative;
  left: 16vw;
  top: -6vw;*/
}

#tv_screen {
    border-radius: 0.5vw;
    box-shadow: #0f0f0f 1px 1px 2px;
}

/* Sprechblase */

.arrow_box {
  position: absolute;
  left: 50vw;
  top: 20vw;
  height: 7vw;
  width: 12vw;
  background: #bfbfbf;
  border: 4px solid #f5f5f5;
  z-index:2;
}

.arrow_box:after, .arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "Schau dich mal um!";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(191, 191, 191, 0);
  border-right-color: #bfbfbf;
  border-width: 20px;
  margin-top: -20px;
}

.arrow_box:before {
  border-color: rgba(245, 245, 245, 0);
  border-right-color: #f5f5f5;
  border-width: 26px;
  margin-top: -26px;
}

/* Bücher */


#books {
    position: absolute;
    left: 55vw;
    top: 42vw;
    height: 7vw;
    width: 11.9vw;
    background-image: url("../bilder/books.svg");
}

#prolink{
    position: absolute;
    left: 58.7vw;
    top: 43.35vw;
    line-height: 1.1vw;
    font-size: 1.1vw;
    color: #454545; 	
    text-decoration: none !important;
    font-family: Courier New;
}

#datlink{
    position: absolute;
    left: 58.6vw;
    top: 45.4vw;	
    line-height: 1.1vw;
    font-size: 1.1vw;
    color: #454545;
    text-decoration: none !important; 
    font-variant: small-caps;
    font-family: Times New Roman;
}

#implink{
    position: absolute;
    left: 58.5vw;
    top: 47.5vw;	
    line-height: 1.1vw;
    font-size: 1.2vw;
    color: #454545;
    text-decoration: none !important; 
    font-variant: caps;
    font-family: Arial;
}

 a#datlink:hover, a#implink:hover, a#prolink:hover {
    font-weight: bold;
}

/* TV Titelseite */

#tv {
  height: 28vw;
  width: 28vw;
}

#tv:hover {
    animation: boing 600ms ease-in-out;
}

.seeThru-display {
  position: absolute;
  left: 33vw;
  top: 25vw;  
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}

#mailbox {
    position: absolute;
    left: 58vw;
    top:23vw;
    width: 9vw;
    height: 12vw;
    background-repeat: no-repeat; */
    z-index: 2;
}

#chairbox {
  position: absolute;
  left: 6vw;
  top: 25vw;
  z-index: 2;
  transition: transform 1s;
  }

#chair {
  position: absolute;
  width: 15vw;
  height: 19.2vw;
  /* box-shadow: 0px 0px 0px 1px 4px;*/
  /* background-image: url("../bilder/chair.svg");
  background-repeat: no-repeat; */
  z-index: 2;
  /*transform-origin: 1vw 16,75vw;*/
  
}

#chair:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}

#rhythmbox {
  position: absolute;
  left: 24vw;
  top: 35vw;
  z-index: 2;
}

#rhythm {
  position: absolute;
  width: 10.6vw;
  height: 6vw;
  box-shadow: 0px 0px 0px 1px 4px;
  background-image: url("../bilder/bongo.svg");
  background-repeat: no-repeat;
  z-index: 2;
}

#rhythm:hover #note_rot {
  animation: liftup 3s ease-in-out infinite;
  /*animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;*/
  transform: translate3d(0, 0, 0);
}

#note_rot {
  position: absolute;
  width: 2vw;
  height: auto;
  left: 1vw;
  opacity: 0;
}

#rhythm:hover #note_blau {
  animation: liftup 2.8s ease-in-out 0.1s infinite;
  /*animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;*/
  transform: translate3d(0, 0, 0);
}

#note_blau {
  position: absolute;
  width: 2vw;
  height: auto;
  left: 5vw;
  opacity: 0;
}

#rhythm:hover #note_gelb {
  animation: liftup 3.2s ease-in-out 0.6s infinite;
  /*animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;*/
  transform: translate3d(0, 0, 0);
}

#note_gelb {
  position: absolute;
  width: 2vw;
  height: auto;
  left: 8vw;
  opacity: 0;
}

#rhythm:hover #note_gruen {
  animation: liftup 2.5s ease-in-out 0.4s infinite;
  /*animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;*/
  transform: translate3d(0, 0, 0);
}

#note_gruen {
  position: absolute;
  width: 2vw;
  height: auto;
  left: 7vw;
  opacity: 0;
}

#rhythm:hover #note_rosa {
  animation: liftup 3.3s ease-in-out 1.0s infinite;
  /*animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;*/
  transform: translate3d(0, 0, 0);
}

#note_rosa {
  position: absolute;
  width: 2vw;
  height: auto;
  left: 3vw;
  opacity: 0;
}

/* #relax {
    transform-origin: center 1vw;
    transform: rotate(2deg);
    transition: transform 1.3s ease-out;
    animation: swing ease-in-out 1.3s alternate infinite;
} */

#relax {
    transition: transform 0.65s ease-out;
}

#relax:hover {
    transform-origin: center 1vw;
    transform: rotate(4deg);
    animation: swing2 ease-in-out 1.3s alternate infinite;
}

@keyframes swing {
    to { transform: rotate(-2deg);
         transition: transform 2s ease-out;	}
    }

@keyframes swing2 {
    to { transform: rotate(-4deg); }
    }


@keyframes shake {
  10%, 90% {
    /*-1px*/
    transform: translate3d(-0.1vw, 0, 0);
  }
  
  20%, 80% {
    /*2px*/
    transform: translate3d(0.2vw, 0, 0);
  }

  30%, 50%, 70% {
    /*-3px*/
    transform: translate3d(-0.3vw, 0, 0);
  }

  40%, 60% {
    /*3px*/
    transform: translate3d(0.3vw, 0, 0);
  }
}

@keyframes liftup { 
  10% {
    transform-origin: center -1vw;
    transform: rotate(5deg) translate3d(0,-1vw,0);
  }
  
  20% {
    opacity: 1;
    transform-origin: center -2vw;
    transform: rotate(-3deg)  translate3d(0,-2vw,0);
  }
  
  30% {
    transform-origin: center -3vw;
    transform: rotate(3deg)  translate3d(0,-3vw,0);
  }
  
  40% {
    transform-origin: center -4vw;
    transform: rotate(-3deg)  translate3d(0,-4vw,0);
  } 
  
  50% {
    transform-origin: center -5vw;
    transform: rotate(3deg)  translate3d(0,-5vw,0);
  }
  
  60% {
    transform-origin: center -6vw;
    transform: rotate(-3deg)  translate3d(0,-6vw,0);
  } 
  
  70% {
    transform-origin: center -7vw;
    transform: rotate(3deg)  translate3d(0,-7vw,0);
  }
  
  80% {
    opacity: 1;
    transform-origin: center -8vw;
    transform: rotate(-3deg)  translate3d(0,-8vw,0);
  }
  
  90% {
    transform-origin: center -9vw;
    transform: rotate(3deg)  translate3d(0,-9vw,0);
  }
  
  100% {
    opacity: 0;
    transform-origin: center -10vw;
    transform: rotate(-3deg) translate3d(0, -10vw, 0);
  }

}

@keyframes boing {
    15%, 40%, 75%, 100% {
        transform-origin: center 27vw;
    }

    33% {
        transform: scale(1.1, 1.2);
    }

    50% {
        transform: scale(0.9, 0.95);
    }

    66% {
        transform: scale(1.05, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

/* Bild Titelseite */

#relaxbox {
  position: absolute;
  left: 36vw;
  top: 9vw;
  
  /*
  position: relative;
  left: -53vw;
  top: -28vw;*/
}

#relax {
  height: 16vw;
  width: 16vw;  
}

#relax-content figure {
  margin-left: 0vw;
}

/* Modalstyling */

.modalDialog, .modalDialog2, .modalDialog3, .modalDialog4 {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    height: 50vw;
    width: 100vw;
    top: 50%;
    left: 0;
    margin-top: -25vw;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

    .modalDialog:target, .modalDialog2:target, .modalDialog3:target, .modalDialog4:target {
        opacity: 1;
        pointer-events: auto;
    }

#ImpModal {
    height: 40vw;
    width: 70vw;
    background-color: #ffffff;
    position: fixed;
    top: 50%;
    left: 10vw;
    margin-top: -22vw;
    padding: 2vw;
    overflow: auto;
    border-radius: 2vw;
    box-shadow: #0f0f0f 1px 1px 2px;
    border-right: 2vw solid white;
    border-left: 2vw solid white;
}

#FeedbackModal {
    height: 40vw;
    width: 70vw;
    background-color: #ffffff;
    background-image: url(../bilder/SUMO_Mail.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 25vw;
    position: fixed;
    top: 50%;
    left: 10vw;
    margin-top: -22vw;
    padding: 2vw;
    overflow: auto;
    border-radius: 2vw;
    box-shadow: #0f0f0f 1px 1px 2px;
    border-right: 2vw solid white;
    border-left: 2vw solid white;
}

#tvModal {
  position: fixed;
  top: 50%;
  margin-top: -23vw;
    left: 15vw;

    
}

#exercisebox {
  position: absolute;
    left: 5.5vw;
    top: 6vw;
    width: 47vw;
  height: 35.2vw;
  background-color: #e8ddda;
  box-shadow: inset 0 0 5px #000;
  
}


#exercise0 {
    /*margin: 5px;*/
    position: absolute;
    /*top: 50%;
  margin-top: -25%;*/
    height: 100%;
    width: 100%;
    object-fit: contain;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    display: none;
}

#exercise1 {
    /*margin: 5px;*/
    position: absolute;
    /*top: 50%;
  margin-top: -25%;*/
    height: 100%;
    width: 100%;
    object-fit: contain;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

#exercise2 {
    /*margin: 5px;*/
    position: absolute;
    /*top: 50%;
  margin-top: -25%;*/
    height: 100%;
    width: 100%;
    object-fit: contain;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.modalDialog > div {
  width: 70vw;
    height: 46vw;
  position: relative;
    /* width: 70vw;
    height: 46vw;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -35vw;
    margin-top: -23vw;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background-image: url("../bilder/tv_full.svg");
    background-size: contain;
    background-repeat: no-repeat; */
    /* background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999); */
}


.modalDialog2 > div.box1 {
    width: 35vw;
    height: 46vw;
    position: fixed;
    top: 50%;
    left: 10vw;
    margin-top: -23vw;
    padding: 0.5vw 2vw 1.3vw 2vw;
    border-radius: 2vw;
    background-image: url("../bilder/relax.svg");
    background-size: contain;
    background-repeat: no-repeat;
    /* background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999); */
}

.modalDialog3 > div.box1 {
    width: 25vw;
    height: 25vw;
    position: fixed;
    top: 50%;
    left: 16vw;
    margin-top: -10vw;
    padding: 0.5vw 2vw 1.3vw 2vw;
    border-radius: 2vw;
    background-image: url("../bilder/SUMO_Drums_Circle_White.svg");
    background-size: contain;
    background-repeat: no-repeat;
    /* background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999); */
}

.modalDialog4 > div.box1 {
    width: 35vw;
    height: 22vw;
    position: fixed;
    top: 50%;
    left: 10vw;
    margin-top: -14vw;
    padding: 0.5vw 2vw 1.3vw 2vw;
    border-radius: 2vw;
    box-shadow: #0f0f0f 1px 1px 2px;
    background-color: #ffffff;
    overflow: auto;
    /* background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999); */
}

.modalDialog2 > div.box2, .modalDialog3 > div.box2, .modalDialog4 > div.box2 {
    width: 35vw;
    height: 34vw;
    position: fixed;
    top: 50%;
    right: 10vw;
    margin-top: -14vw;
    padding: 0.5vw 2vw 1.3vw 2vw;
    border-radius: 2vw;
    box-shadow: #0f0f0f 1px 1px 2px;
    background-color: #ffffff;
    overflow: auto;
    /* background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999); */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Feedback-Formular */

#FeedbackModal {
  
}

ul#form_feedback {
  list-style-type: none;
  width: 40vw;
  height: auto;
  padding: 0;
  border: none;
}

.input_text_form {
    width: 100%;
    padding: 0.7vw;
    margin: 1vw 0 1vw 0;
    font-size: 1vw;
    border-style: hidden;
    background-color: #edfcee; /*aliceblue*/
}

.input_text_form:focus {
  -webkit-box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
  -moz-box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
  box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
}

.textarea_form {
    width: 100%;
    height: auto;
    margin: 1vw 0 1vw 0;
    resize: none;
    font-size: 1vw;
    border-style: hidden;
    background-color: #edfcee; /*aliceblue*/
    padding: 0.5vw;
    font-family: Arial;
}

.button_form {
    font-size: 1vw;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 1px solid #3498db;
    border-radius: 0.6vw;
    cursor: pointer;
    display: flex;
    align-self: center;
    margin: 1vw;
    padding: 1.2vw 2.8vw;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    border-color: #65896a; /*#3498db*/
    color: #fff;
    background-color: #85b58c; /*#3498db*/
    box-shadow: 0.2vw 0.2vw 0.4vw #454545;
    transition: padding box-shadow 250ms ease-in-out;
}

.button_form:hover {
    box-shadow: 0.2vw 0.2vw 0.2vw #454545;
    padding: 1.1vw 2.7vw;
}

.button_form:focus {
    color: #fff;
    outline: 0;
}

#form_answer {
  margin: 1vw;
  display: none;
}

/* TV Navigation */

.hidden {
    opacity: 0;
}

.nextButton, .nextButtonHover {
    position: absolute;
    left: 57vw;
    top: 3vw;
    width: 8vw;
    height: 8vw;
    cursor: pointer;
}

.nextButton:hover {
  opacity: 0;
}

.nextButtonHover:active {
  transform: scale(1.02, 1.02);
}

.closeButton, .closeButtonHover {
    position: absolute;
    left: 57vw;
    top: 13vw;
    width: 8vw;
  height: auto;
  cursor: pointer;
}

.closeButton:hover {
    opacity: 0;
}

/* CLOSE-Geschichten */


.closeButtonHover:active {
  transform: scale(1.02, 1.02);
}

.closeButtonRelax, .closeButtonRelaxHover {
    position: absolute;
    width: 3vw;
  height: auto;
  cursor: pointer;
  
  top: 50%;
    right: 9vw;
    margin-top: -15.5vw;
}

.closeButtonRelax:hover {
    opacity: 0;
}

.closeButtonDrums, .closeButtonDrumsHover {
    position: absolute;
    width: 3vw;
    height: auto;
    cursor: pointer;
    top: 50%;
    right: 9vw;
    margin-top: -15.5vw;
}

.closeButtonDrums:hover {
    opacity: 0;
}

.closeButtonDat, .closeButtonDatHover {
    position: absolute;
    width: 3vw;
    height: auto;
    cursor: pointer;
    top: 50%;
    right: 10.5vw;
    margin-top: -23vw;
}

.closeButtonDat:hover {
    opacity: 0;
}


/* Magischer Stuhl und PowerBar*/

#progress {
  position: absolute;
  top: 60%;
  left: 5%;
  width: 90%;
  height: 20%;
  background-color: green;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#sumo_balance {
    position: fixed;
    bottom: 3vw;
    left: 25vw;
    height: 17vw;
    width: 17vw;
    background-image: url("../bilder/SUMO_Chair.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

#jsbar {
    width: 0%;
    height: 100%;
    background-color: limegreen;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
}

#chair_exercise {
    width: 25vw;
    height: auto;
 }

#chair_nav {
    display: flex;
    align-items: baseline;
    position: absolute;
    bottom: -1vw;
}

#chair_next, #chair_prev {
    font-size: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;
    cursor: pointer;
}