@font-face {
  font-family: "JazminAlt";
  src: url('fonts/JazminAltRegular/font.woff2') format('woff2'), url('fonts/JazminRegular/font.woff') format('woff');
}

@font-face {
  font-family: "JazminAlt";
  src: url('fonts/JazminSemiBold/font.woff2') format('woff2'), url('fonts/JazminSemiBold/font.woff') format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "Qureka";
  src: url('fonts/qureka/font.otf') format('woff2'), url('fonts/qureka/font.ttf') format('ttf');
}

body {
  padding: 0;
  margin: 0;
  font-family: "JazminAlt";
}

.qureka-font {
  font-family: "Qureka";
}

.darkBackgroundLayer {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: -2;
}
.loopVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  opacity: 70%;
}

.loopVideoLoading {
  position: fixed;
  z-index: -1;
  clip-path:  circle(min(41vw, 41vh));
  background-color: #72c0b5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(150vw, 150vh);
  height: min(150vw, 150vh);
  margin-top: 2px;
}
.bgimg {
  position: fixed;
  left: 0;
  bottom: -20%;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

.bgimgLoading {
  position: fixed;
  clip-path: circle(min(41vw, 41vh));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(150vw, 150vh);
  height: min(150vw, 150vh);
  margin-top: 2px;
  z-index: 0;

}
.mainContainer {
  display: flex;
  flex-direction: column;
  position: relative;
}
.topSpacing, .bottomSpacing {
  height:10vh;
  display: inline-block;
  position: relative;
}

.nonselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.corner {
  position:absolute;
  color: #fff;
  font-size:calc(20px + 1.5vh);
  min-height:30px;
  text-transform: uppercase;
  z-index:100;
}

#about {
  right: 2vw;
  top: 2vh;
  cursor: pointer;
}

#mashangok {
  left: 2vw;
  top: 2vh;
}

#links {
  left: 2vw;
  bottom: 2vh;
}

#links img {
  margin-left: 3px;
  margin-right: 3px;
}
#links img:hover {
  background-image: url(images/links/hover.png);
}
#glasshouse {
  right: 2vw;
  bottom: 2vh;
}

@media screen and (max-width: 500px) {
  #mashangok {
    display:none;
  }

  #glasshouse {
    left: 2vw;
    top: 2vh;
    width: 10%;
  }

  #links {
    bottom: 2vh;
    width:100%;
    text-align: center;
  }

}

.popup {
  position:fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width:60vw;
  background-color: #05455E;
  z-index: 100;
  border: 2px solid #fff;
  color: #fff;
  overflow: auto;
  box-sizing: border-box;
  max-width: 96%;
}
.darkBackground {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: 99;
  opacity: 80%;
}
.popupClose {
  left: 80vw;
  top: 16vh;
  position: fixed;
  right: 0px;
  margin: 5px;
  line-height: 0;
  z-index: 100;
}
.heading {
  font-size: large;
  font-weight: bold;
}
p {
  margin: 0.8em;
}
.xButton {
  width: 32px;
  height: 32px;
  margin:0;
  background-image: url("images/popup/x_button.png");
  background-size:cover;
  cursor: pointer;
}

.xButton:hover {
  background-image: url("images/popup/x_button.png"), url("images/popup/x_buttonHover.png");
}


.colContainer {
  display:flex;
  min-height: min-content;
  padding: 10px;
}
.col {

    flex: 1 1 0px;
    align-items: center;
    min-height: 0;
}

.hidden {
  display: none;
}

.textContainer {
  display:flex;
  flex-direction: column;
  padding: 10px;
}


.logoContainer {
  display:flex;
  flex-direction: row;
  justify-content: center;
}
.supporterLogo {
  height: 5vw;
  width: auto;
}

@media screen and (max-width: 970px) {
  .colContainer {
    flex-direction: column;
  }
  .col {
    flex: auto;
  }
  .supporterLogo {
    height: 11vw;
    width: auto;
  }
}

.componentsContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.instrumentContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.instrumentPair {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.footerContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.componentContainer {
  display: flex;
  flex-direction: column;
  width: 421px;
  height: 640px;
  align-items: center;
}
.component {
  width: 340px;
  height: 640px;
  background-repeat: no-repeat;
  position: relative;
}

.vocals {
  width: 84px;
  height: 84px;
  background-repeat: no-repeat;
  position: absolute;
  cursor: pointer;
}

.vocalsLarge {
  width: 101px;
  height: 101px;
  background-repeat: no-repeat;
  position: absolute;
  cursor: pointer;
}

.percussions {
  /* Fill in */
  width: 84px;
  height: 84px;
  background-repeat: no-repeat;
  position: absolute;
  cursor: pointer;
}

.instrument {
  width: 125px;
  height: 125px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin: 10px;
}

/* Active instrument animation */
@keyframes pulse {
	0% {
		transform: scale(0.95);
	}
	70% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.95);
	}
}

/* Section 1 instruments */
.Bass_Section1 {
  clip-path: polygon(0% 0%,0% 100%,100% 100%, 100% 0);
  background-image: url('images/section1/bass.png');
}
.Bass_Section1Active {
  background-image: url('images/section1/bass.png'), url('images/section1/bassActive.png');
  animation: pulse 2s infinite;
}
.Bass_Section1:hover {
  background-image: url('images/section1/bass.png'), url('images/section1/bassHover.png');
}
.Bass_Section1Active:hover {
  background-image: url('images/section1/bass.png'), url('images/section1/bassActive.png'), url('images/section1/bassHover.png');
}
.StringArp_Section1 {
  clip-path: circle(50%);
  background-image: url('images/section1/stringArp.png');
}
.StringArp_Section1Active {
  background-image: url('images/section1/stringArp.png'), url('images/section1/stringArpActive.png');
  animation: pulse 2s infinite;
}
.StringArp_Section1:hover {
  background-image: url('images/section1/stringArp.png'), url('images/section1/stringArpHover.png');
}
.StringArp_Section1:hover {
  background-image: url('images/section1/stringArp.png'), url('images/section1/stringArpActive.png'), url('images/section1/stringArpHover.png');
}
.Taiko_Section1 {
  clip-path: polygon(35% 0%, 50% 0%, 65% 0%, 100% 35%, 100% 50%, 100% 65%, 65% 100%, 50% 100%, 35% 100%, 0% 65%, 0% 50%, 0% 35%);
  background-image: url('images/section1/taiko.png');
}
.Taiko_Section1Active {
  background-image: url('images/section1/taiko.png'), url('images/section1/taikoActive.png');
  animation: pulse 2s infinite;
}
.Taiko_Section1:hover {
  background-image: url('images/section1/taiko.png'), url('images/section1/taikoHover.png');
}
.Taiko_Section1Active:hover {
  background-image: url('images/section1/taiko.png'), url('images/section1/taikoActive.png'), url('images/section1/taikoHover.png');
}
.Clap_Section1 {
  clip-path: polygon(48% 0%, 50% 0%, 52% 0%, 100% 80%, 100% 100%,0% 100%, 0% 80%);
  background-image: url('images/section1/clap.png');
}
.Clap_Section1Active {
  background-image: url('images/section1/clap.png'), url('images/section1/clapActive.png');
  animation: pulse 2s infinite;
}
.Clap_Section1:hover {
  background-image: url('images/section1/clap.png'), url('images/section1/clapHover.png');
}
.Clap_Section1Active:hover {
  background-image: url('images/section1/clap.png'), url('images/section1/clapActive.png'), url('images/section1/clapHover.png');
}

/* Section 2 instruments */
.Bass_Section2 {
  clip-path: polygon(0% 0%,0% 100%,100% 100%, 100% 0);
  background-image: url('images/section2/bass.png');
}
.Bass_Section2Active {
  background-image: url('images/section2/bass.png'), url('images/section2/bassActive.png');
  animation: pulse 2s infinite;
}
.Bass_Section2:hover {
  background-image: url('images/section2/bass.png'), url('images/section2/bassHover.png');
}
.Bass_Section2Active:hover {
  background-image: url('images/section2/bass.png'), url('images/section2/bassActive.png'), url('images/section2/bassHover.png');
}
.ChiralSynth_Section2 {
  clip-path: circle(50%);
  background-image: url('images/section2/chiral.png');
}
.ChiralSynth_Section2Active {
  background-image: url('images/section2/chiral.png'), url('images/section2/chiralActive.png');
  animation: pulse 2s infinite;
}
.ChiralSynth_Section2:hover {
  background-image: url('images/section2/chiral.png'), url('images/section2/chiralHover.png');
}
.ChiralSynth_Section2:hover {
  background-image: url('images/section2/chiral.png'), url('images/section2/chiralActive.png'), url('images/section2/chiralHover.png');
}
.Guitalele_Section2 {
  clip-path: polygon(35% 0%, 50% 0%, 65% 0%, 100% 35%, 100% 50%, 100% 65%, 65% 100%, 50% 100%, 35% 100%, 0% 65%, 0% 50%, 0% 35%);
  background-image: url('images/section2/guitalele.png');
}
.Guitalele_Section2Active {
  background-image: url('images/section2/guitalele.png'), url('images/section2/guitaleleActive.png');
  animation: pulse 2s infinite;
}
.Guitalele_Section2:hover {
  background-image: url('images/section2/guitalele.png'), url('images/section2/guitaleleHover.png');
}
.Guitalele_Section2Active:hover {
  background-image: url('images/section2/guitalele.png'), url('images/section2/guitaleleActive.png'), url('images/section2/guitaleleHover.png');
}
.ClapFeedback_Section2 {
  clip-path: circle(50%);
  background-image: url('images/section2/clap.png');
}
.ClapFeedback_Section2Active {
  background-image: url('images/section2/clap.png'), url('images/section2/clapActive.png');
  animation: pulse 2s infinite;
}
.ClapFeedback_Section2:hover {
  background-image: url('images/section2/clap.png'), url('images/section2/clapHover.png');
}
.ClapFeedback_Section2Active:hover {
  background-image: url('images/section2/clap.png'), url('images/section2/clapActive.png'), url('images/section2/clapHover.png');
}

/* Section 3 instruments */
.ClapRegular_Section3 {
  clip-path: circle(60%);
  background-image: url('images/section3/clap.png');
}
.ClapRegular_Section3Active {
  background-image: url('images/section3/clap.png'), url('images/section3/clapActive.png');
  animation: pulse 2s infinite;
}
.ClapRegular_Section3:hover {
  background-image: url('images/section3/clap.png'), url('images/section3/clapHover.png');
}
.ClapRegular_Section3Active:hover {
  background-image: url('images/section3/clap.png'), url('images/section3/clapActive.png'), url('images/section3/clapHover.png');
}
.ClapFeedback_Section3 {
  clip-path: circle(50%);
  background-image: url('images/section3/clapFeedback.png');
}
.ClapFeedback_Section3Active {
  background-image: url('images/section3/clapFeedback.png'), url('images/section3/clapFeedbackActive.png');
  animation: pulse 2s infinite;
}
.ClapFeedback_Section3:hover {
  background-image: url('images/section3/clapFeedback.png'), url('images/section3/clapFeedbackHover.png');
}
.ClapFeedback_Section3Active:hover {
  background-image: url('images/section3/clapFeedback.png'), url('images/section3/clapFeedbackActive.png'), url('images/section3/clapFeedbackHover.png');
}
.Bass_Section3 {
  clip-path: polygon(0% 0%,0% 100%,100% 100%, 100% 0);
  background-image: url('images/section3/bass.png');
}
.Bass_Section3Active {
  background-image: url('images/section3/bass.png'), url('images/section3/bassActive.png');
  animation: pulse 2s infinite;
}
.Bass_Section3:hover {
  background-image: url('images/section3/bass.png'), url('images/section3/bassHover.png');
}
.Bass_Section3Active:hover {
  background-image: url('images/section3/bass.png'), url('images/section3/bassActive.png'), url('images/section3/bassHover.png');
}
.Glitch_Section3 {
  clip-path: circle(50%);
  background-image: url('images/section3/glitch.png');
}
.Glitch_Section3Active {
  background-image: url('images/section3/glitch.png'), url('images/section3/glitchActive.png');
  animation: pulse 2s infinite;
}
.Glitch_Section3:hover {
  background-image: url('images/section3/glitch.png'), url('images/section3/glitchHover.png');
}
.Glitch_Section3Active:hover {
  background-image: url('images/section3/glitch.png'), url('images/section3/glitchActive.png'), url('images/section3/glitchHover.png');
}
.ChiralSynth_Section3 {
  clip-path: circle(50%);
  background-image: url('images/section3/chiral.png');
}
.ChiralSynth_Section3Active {
  background-image: url('images/section3/chiral.png'), url('images/section3/chiralActive.png');
  animation: pulse 2s infinite;
}
.ChiralSynth_Section3:hover {
  background-image: url('images/section3/chiral.png'), url('images/section3/chiralHover.png');
}
.ChiralSynth_Section3:hover {
  background-image: url('images/section3/chiral.png'), url('images/section3/chiralActive.png'), url('images/section3/chiralHover.png');
}


/* Major components */
.componentA {
  background-image: url('images/section1/componentA.png');
  width: 349px;
  height: 634px;
}

.componentB {
  background-image: url('images/section1/componentB.png');
  width: 349px;
  height: 591px;
}
.switchBase {
  background-image: url('images/switch/base.png');
  width: 349px;
  height: 41px;
}

.componentC {
  background-image: url('images/section2/componentC.png');
  width: 349px;
  height: 593px;
}

.componentD {
  background-image: url('images/section2/componentD.png');
  width: 349px;
  height: 631px;
}

.componentE {
  background-image: url('images/section3/componentE.png');
  width: 421px;
  height: 634px;
}

.componentF {
  background-image: url('images/section3/componentF.png');
  width: 349px;
  height: 594px;
}


/* Section 1 vocals */
.Vocals_Section1_1 {
  top: 46px;
  left: 134px;
  clip-path: polygon(40% 0%, 60% 0%, 100% 60%, 100% 75%, 60% 100%, 50% 100%, 40% 100%, 0% 75%, 0% 60%);
}
.Vocals_Section1_1:hover {
  background-image: url('images/section1/vocal1_hover.png');
}
.Vocals_Section1_1Active {
  background-image: url('images/section1/vocal1_active.png');
}
.Vocals_Section1_1Active:hover {
  background-image: url('images/section1/vocal1_hover.png'), url('images/section1/vocal1_active.png');
}
.Vocals_Section1_2 {
  top: 168px;
  left: 64px;
  clip-path: circle(50% at 50% 50%);
}
.Vocals_Section1_2:hover {
  background-image: url('images/section1/vocal2_hover.png');
}
.Vocals_Section1_2Active {
  background-image: url('images/section1/vocal2_active.png');
}
.Vocals_Section1_2Active:hover {
  background-image: url('images/section1/vocal2_hover.png'), url('images/section1/vocal2_active.png');
}
.Vocals_Section1_3 {
  top: 168px;
  left: 204px;
  clip-path: circle(50% at 50% 50%);
}
.Vocals_Section1_3:hover {
  background-image: url('images/section1/vocal3_hover.png');
}
.Vocals_Section1_3Active {
  background-image: url('images/section1/vocal3_active.png');
}
.Vocals_Section1_3Active:hover {
  background-image: url('images/section1/vocal3_hover.png'), url('images/section1/vocal3_active.png');
}

/* Section 1 percussion */
.Percussion_Section1_1 {
  top: 45px;
  left: 132px;
  clip-path: polygon(35% 0%, 50% 0%, 65% 0%, 100% 35%, 100% 50%, 100% 65%, 65% 100%, 50% 100%, 35% 100%, 0% 65%, 0% 50%, 0% 35%);
}
.Percussion_Section1_1:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section1_1Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section1_1Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}
.Percussion_Section1_2 {
  top: 168px;
  left: 64px;
  clip-path: circle(50% at 50% 50%);
}
.Percussion_Section1_2:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section1_2Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section1_2Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}
.Percussion_Section1_3 {
  top: 168px;
  left: 204px;
  clip-path: circle(50% at 50% 50%);
}
.Percussion_Section1_3:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section1_3Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section1_3Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}

/* Section 2 vocals */
.Vocals_Section2_1 {
  top: 20px;
  left: 123px;
  clip-path: circle(50%);
}
.Vocals_Section2_1:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section2_1Active {
  background-image: url('images/section2/vocalsTopActive.png');
}
.Vocals_Section2_1Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section2/vocalsTopActive.png');
}
.Vocals_Section2_2 {
  top: 86px;
  left: 32px;
  clip-path: circle(50%);
}
.Vocals_Section2_2:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section2_2Active {
  background-image: url('images/section2/vocalsTopActive.png');
}
.Vocals_Section2_2Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section2/vocalsTopActive.png');
}
.Vocals_Section2_3 {
  top: 86px;
  left: 216px;
  clip-path: circle(50%);
}
.Vocals_Section2_3:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section2_3Active {
  background-image: url('images/section2/vocalsTopActive.png');
}
.Vocals_Section2_3Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section2/vocalsTopActive.png');
}
.Vocals_Section2_4 {
  top: 194px;
  left: 68px;
  clip-path: circle(50%);
}
.Vocals_Section2_4:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section2_4Active {
  background-image: url('images/section2/vocals4Active.png');
}
.Vocals_Section2_4Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section2/vocals4Active.png');
}
.Vocals_Section2_5 {
  top: 194px;
  left: 182px;
  clip-path: circle(50%);
}
.Vocals_Section2_5:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section2_5Active {
  background-image: url('images/section2/vocals5Active.png');
}
.Vocals_Section2_5Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section2/vocals5Active.png');
}

/* Section 2 percussion */
.Percussion_Section2_1 {
  top: 45px;
  left: 132px;
  clip-path: polygon(35% 0%, 50% 0%, 65% 0%, 100% 35%, 100% 50%, 100% 65%, 65% 100%, 50% 100%, 35% 100%, 0% 65%, 0% 50%, 0% 35%);
}
.Percussion_Section2_1:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section2_1Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section2_1Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}
.Percussion_Section2_2 {
  top: 168px;
  left: 64px;
  clip-path: circle(50%);
}
.Percussion_Section2_2:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section2_2Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section2_2Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}
.Percussion_Section2_3 {
  top: 168px;
  left: 203px;
  clip-path: circle(50%);
}
.Percussion_Section2_3:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section2_3Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section2_3Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}

/* Section 3 vocals */
.Vocals_Section3_1 {
  top: 20px;
  left: 188px;
  clip-path: circle(50%);
}
.Vocals_Section3_1:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section3_1Active {
  background-image:  url('images/section3/vocalsBotActive.png');
}
.Vocals_Section3_1Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section3/vocalsBotActive.png');
}
.Vocals_Section3_2 {
  top: 86px;
  left: 96px;
  clip-path: circle(50%);
}
.Vocals_Section3_2:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section3_2Active {
  background-image: url('images/section3/vocalsBotActive.png');
}
.Vocals_Section3_2Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section3/vocalsBotActive.png');
}
.Vocals_Section3_3 {
  top: 86px;
  left: 280px;
  clip-path: circle(50%);
}
.Vocals_Section3_3:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section3_3Active {
  background-image: url('images/section3/vocalsBotActive.png');
}
.Vocals_Section3_3Active:hover {
  background-image: url('images/section2/vocalsHover.png'), url('images/section3/vocalsBotActive.png');
}
.Vocals_Section3_4 {
  top: 194px;
  left: 131px;
  clip-path: circle(50%);
}
.Vocals_Section3_4:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section3_4Active {
  background-image: url('images/section3/vocalsBotHover.png');
}
.Vocals_Section3_4Active:hover {
  background-image: url('images/section3/vocalsBotHover.png'), url('images/section2/vocalsHover.png');
}
.Vocals_Section3_5 {
  top: 194px;
  left: 246px;
  clip-path: circle(50%);
}
.Vocals_Section3_5:hover {
  background-image: url('images/section2/vocalsHover.png');
}
.Vocals_Section3_5Active {
  background-image: url('images/section3/vocalsBotHover.png');
}
.Vocals_Section3_5Active:hover {
  background-image: url('images/section3/vocalsBotHover.png'), url('images/section2/vocalsHover.png');
}

/* Section 3 percussion */
.Percussion_Section3_1 {
  top: 46px;
  left: 132px;
  clip-path: circle(50%);
}
.Percussion_Section3_1:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section3_1Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section3_1Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}
.Percussion_Section3_2 {
  top: 168px;
  left: 63px;
  clip-path: circle(50%);
}
.Percussion_Section3_2:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section3_2Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section3_2Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}
.Percussion_Section3_3 {
  top: 168px;
  left: 203px;
  clip-path: circle(50%);
}
.Percussion_Section3_3:hover {
  background-image: url('images/common/percHover.png');
}
.Percussion_Section3_3Active {
  background-image: url('images/common/percActive.png');
}
.Percussion_Section3_3Active:hover {
  background-image: url('images/common/percHover.png'), url('images/common/percActive.png');
}


.downSlider1 {
  background-repeat: no-repeat;
  position:  absolute;
  top: 421px;
  left: 121px;
  width: 107px;
  height: 214px;
  cursor: pointer;
}
.downSlider1_1 {
  background-image: url('images/section1/vocalSlider1.png');
}
.downSlider1_2 {
  background-image: url('images/section1/vocalSlider2.png');
}
.downSlider1_3 {
  background-image: url('images/section1/vocalSlider3.png');
}
.downSlider1_4 {
  background-image: url('images/section1/vocalSlider4.png');
}
.downSlider1_5 {
  background-image: url('images/section1/vocalSlider5.png');
}
.downSlider1_6 {
  background-image: url('images/section1/vocalSlider6.png');
}
.downSlider1_7 {
  background-image: url('images/section1/vocalSlider7.png');
}


.downSlider2 {
  background-repeat: no-repeat;
  position:  absolute;
  top: 381px;
  left: 121px;
  width: 107px;
  height: 214px;
  cursor: pointer;
}
.downSlider2_1 {
  background-image: url('images/section1/percSlider1.png');
}
.downSlider2_2 {
  background-image: url('images/section1/percSlider2.png');
}
.downSlider2_3 {
  background-image: url('images/section1/percSlider3.png');
}
.downSlider2_4 {
  background-image: url('images/section1/percSlider4.png');
}
.downSlider2_5 {
  background-image: url('images/section1/percSlider5.png');
}
.downSlider2_6 {
  background-image: url('images/section1/percSlider6.png');
}
.downSlider2_7 {
  background-image: url('images/section1/percSlider7.png');
}
.downSlider2_8 {
  background-image: url('images/section1/percSlider8.png');
}



.downSlider3 {
  background-repeat: no-repeat;
  position:  absolute;
  top: 382px;
  left: 120px;
  width: 107px;
  height: 214px;
  cursor: pointer;
}
.downSlider3_1 {
  background-image: url('images/section1/percSlider1.png');
}
.downSlider3_2 {
  background-image: url('images/section1/percSlider2.png');
}
.downSlider3_3 {
  background-image: url('images/section1/percSlider3.png');
}
.downSlider3_4 {
  background-image: url('images/section1/percSlider4.png');
}
.downSlider3_5 {
  background-image: url('images/section1/percSlider5.png');
}
.downSlider3_6 {
  background-image: url('images/section1/percSlider6.png');
}
.downSlider3_7 {
  background-image: url('images/section1/percSlider7.png');
}
.downSlider3_8 {
  background-image: url('images/section1/percSlider8.png');
}

.downSlider4 {
  background-repeat: no-repeat;
  position:  absolute;
  top: 418px;
  left: 120px;
  width: 107px;
  height: 214px;
  cursor: pointer;
}
.downSlider4_1 {
  background-image: url('images/section2/percSlider1.png');
}
.downSlider4_2 {
  background-image: url('images/section2/percSlider2.png');
}
.downSlider4_3 {
  background-image: url('images/section2/percSlider3.png');
}
.downSlider4_4 {
  background-image: url('images/section2/percSlider4.png');
}
.downSlider4_5 {
  background-image: url('images/section2/percSlider5.png');
}
.downSlider4_6 {
  background-image: url('images/section2/percSlider6.png');
}
.downSlider4_7 {
  background-image: url('images/section2/percSlider7.png');
}
.downSlider4_8 {
  background-image: url('images/section2/percSlider8.png');
}

.downSlider5 {
  background-repeat: no-repeat;
  position:  absolute;
  top: 420px;
  left: 317px;
  width: 107px;
  height: 214px;
  cursor: pointer;
}
.downSlider5_1 {
  background-image: url('images/section3/vocalsSlider1.png');
}
.downSlider5_2 {
  background-image: url('images/section3/vocalsSlider2.png');
}
.downSlider5_3 {
  background-image: url('images/section3/vocalsSlider3.png');
}
.downSlider5_4 {
  background-image: url('images/section3/vocalsSlider4.png');
}
.downSlider5_5 {
  background-image: url('images/section3/vocalsSlider5.png');
}
.downSlider5_6 {
  background-image: url('images/section3/vocalsSlider6.png');
}
.downSlider5_7 {
  background-image: url('images/section3/vocalsSlider7.png');
}

.downSlider6 {
  background-repeat: no-repeat;
  position:  absolute;
  top: 384px;
  left: 121px;
  width: 107px;
  height: 214px;
  cursor: pointer;
}
.downSlider6_1 {
  background-image: url('images/section1/percSlider1.png');
}
.downSlider6_2 {
  background-image: url('images/section1/percSlider2.png');
}
.downSlider6_3 {
  background-image: url('images/section1/percSlider3.png');
}
.downSlider6_4 {
  background-image: url('images/section1/percSlider4.png');
}
.downSlider6_5 {
  background-image: url('images/section1/percSlider5.png');
}
.downSlider6_6 {
  background-image: url('images/section1/percSlider6.png');
}
.downSlider6_7 {
  background-image: url('images/section1/percSlider7.png');
}
.downSlider6_8 {
  background-image: url('images/section1/percSlider8.png');
}


/* XY pad */

.xyPad {
  position: absolute;
  width: 182px;
  height: 182px;
  top:436px;
  left:18px;
}

.tracker {
  position:absolute;
  top:67px;
  left:67px;
  background-image: url('images/section3/filternotch.png');
  width: 57px;
  height: 57px;
}

.tracker:hover {
  background-image: url('images/section3/filternotchActive.png');
}

/* Multistate Switch */
.switchContainer {
  background-image: url('images/switch/base.png');
  width: 349px;
  height: 41px;
  display: flex;
  flex-direction: row;
  margin-top: 2px;
  justify-content: center;
}
.switchCircle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
  top: 38%;
}
.switchCircle1 {
  left: -14px;
}
.switchCircle2 {
  left: 0px;
}
.switchCircle3 {
  left: 12px;
}
.switchCircle:hover {
  background-image: url('images/switch/circleHover.png');
}
.switchCircleActive {
  background-image: url('images/switch/circleActive.png');
}
.switchCircleActive:hover {
  background-image: url('images/switch/circleHover.png'), url('images/switch/circleActive.png');
}

/* Modal */
.startModal {
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: min(9vw, 9vh);
  text-align: center;
  /* margin-top:max(-9vw, -9vh); */
}
.startModal p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
.startModalContent {
  margin: auto;
  width: 100%;
}
.startModal a, .startModal p {
  text-decoration: none;
  color:#fff;
}

.playButton {
  width:min(14vw, 14vh);
  height: min(14vw, 14vh);
  background-image: url("images/navigation/playbuttonStatic.png");
  background-size: contain;
  position:absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top:min(20vh, 20vw);
  cursor: pointer;

}

.playButton:hover {
  background-image: url("images/navigation/playbuttonStatic.png"), url("images/navigation/playbuttonHover.png");
}

/* Navigation */
.navigation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
}
.navigationRepeat {
  display: flex;
  flex-grow: 1;
  height: 60px;
  background-repeat: repeat-x;
  background-image: url('images/navigation/lineRepeat.png');
}
.navigationArrow {
  height: 60px;
  width: 22px;
  cursor: pointer;
}
.navigationArrowLeft {
  background-image: url('images/navigation/arrowLeft.png');
}
.navigationArrowLeft:hover {
  background-image: url('images/navigation/arrowLeft.png'), url('images/navigation/arrowLeftHover.png');
}
.navigationArrowRight {
  background-image: url('images/navigation/arrowRight.png');
}
.navigationArrowRight:hover {
  background-image: url('images/navigation/arrowRight.png'), url('images/navigation/arrowRightHover.png');
}
.navigationMarker {
  height: 60px;
  width: 22px;
}
.navigationMarkerLeft {
  background-image: url('images/navigation/markerLeft.png');
}
.navigationMarkerRight {
  background-image: url('images/navigation/markerRight.png');
}
.muteButton {
  height: 60px;
  width: 60px;
  cursor: pointer;
}
.navigationMute {
  background-image: url('images/navigation/mute.png');
}
.navigationMuteActive {
  background-image: url('images/navigation/mute.png'), url('images/navigation/muteActive.png');
}
.navigationMute:hover {
  background-image: url('images/navigation/mute.png'), url('images/navigation/muteHover.png');
}
.navigationMuteActive:hover {
  background-image: url('images/navigation/mute.png'), url('images/navigation/muteActive.png'), url('images/navigation/muteHover.png');
}

/* Animations*/
.blinking {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
      opacity: 0.5;
  }
}
.fadeIn {
  opacity: 1;
  transition: opacity 0.5s linear, transform 0.5s linear;
  transform: scale(1);
}
.fadeOut {
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
  transform: scale(0.9);
}

@media only screen and (max-width: 1000px) {
  .mainContainer {
    transform: scale(0.8) translateY(-10%);
  }
}

@media only screen and (max-height:800px)  {
  .mainContainer {
    transform: scale(0.7) translateY(-20%);
  }
  .popup {
      width:80vw;
      height: 70vh;
  }
  .popupClose {
    left: 90vw;
    top: 10vh;
  }
}

@media only screen and (min-height:800px) and (max-height:950px)  {
  .popup {
    width: 80vw;
  }
  .popupClose {
    left: 90vw;
    top: 16vh;
  }
}

@media only screen and (min-height:950px) and (max-height:1100px)  {
  .popup {
    width: 80vw;
  }
  .popupClose {
    left: 90vw;
    top: 16vh;
  }
}

@media only screen and (max-width: 800px) {
  .mainContainer {
    transform: scale(0.6) translateY(-20%);
  }
}

/* Mobile phones */
@media only screen and (max-width: 640px) {
  .componentsContainer {
    flex-direction: column;
  }
  .componentContainer {
    margin-bottom: 2vh;
    width: auto;
    height: auto;
  }
  .instrumentContainer {
    margin-top: 4vh;
    margin-bottom: 4vh;
  }
  .fadeOut, .fadeIn {
    transform: scale(1);
  }
  .mainContainer {
    transform: scale(1);
  }
}