/* Titles */
.title {
  font-size: 30px;
  color: white;
  position: fixed;
  text-align: center;
}

.title-orchestra {
  top: 25%;
  left: 5%;
  width: 20%;
}
.section-name {
  font-size: 20px;
  color: white;
  text-align: center;
}
.title-strings {
  top: 35%;
  left: 10%;
  width: 20%;
}
.title-woodwinds {
  bottom: 30%;
  left: 30%;
  width: 25%;
}
.title-brass {
  bottom: 25%;
  left: 45%;
  width: 25%;
}
.title-percussion {
  bottom: 55%;
  left: 30%;
  width: 20%;
}
.title-conductor {
  bottom: 25%;
  /* left: 75%; */
  left: 10%;
  width: 20%;
}
.title-ensemble {
  bottom: 35%;
  left: 40%;
  width: 20%;
}

.instrument {
  filter: brightness(75%);
  transition: all 1s;
  cursor: pointer;
  position: fixed;
}

.instrument:hover {
  filter: brightness(125%);
  -ms-transform: scale(1.1, 1.1); /* IE 9 */
  -webkit-transform: scale(1.1, 1.1); /* Safari */
  transform: scale(1.1, 1.1);
  transition: all 1s;
  cursor: pointer;
}

.instrument-name {
  position: fixed;
  background-color: beige;
  color: black;
  padding: 2.5px 10px;
  font-family: "Courier", "Arial", "sans-serif";
  font-size: 0.9em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: none;
}

/* ORCHESTRA */
.highlight-section {
  fill: transparent;
  stroke: white;
  cursor: pointer;
}

/* STRINGS */
.viool {
  width: 9%;
  bottom: 15%;
  left: 17.5%;
}

.viool-rotate {
  -ms-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.viool-rotate:hover {
  -ms-transform: rotate(-40deg) scale(1.1, 1.1);
  -webkit-transform: rotate(-40deg) scale(1.1, 1.1);
  transform: rotate(-40deg) scale(1.1, 1.1);
}

.altviool {
  width: 9%;
  bottom: 27%;
  left: 40%;
}

.cello {
  width: 12%;
  bottom: 10%;
  right: 30%;
}

.contrabas {
  width: 20%;
  bottom: 7%;
  right: 3%;
}

/*  */
/*  */
/*  */
/*  */
/* CONDUCTOR */
#dirigent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
}

/* WOODWINDS */
.dwarsfluit {
  max-width: 40%;
  max-height: 10%;
  bottom: 50%;
  left: 25%;
}

.FLrotate {
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.FLrotate:hover {
  -ms-transform: rotate(20deg) scale(1.1, 1.1);
  -webkit-transform: rotate(20deg) scale(1.1, 1.1);
  transform: rotate(20deg) scale(1.1, 1.1);
}

.hobo {
  max-height: 50%;
  max-width: 10%;
  bottom: 20%;
  right: 5%;
}
.HBrotate {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.HBrotate:hover {
  -ms-transform: rotate(270deg) scale(1.1, 1.1);
  -webkit-transform: rotate(270deg) scale(1.1, 1.1);
  transform: rotate(270deg) scale(1.1, 1.1);
}

.klarinet {
  max-height: 50%;
  max-width: 10%;
  bottom: 25%;
  left: 10%;
}
.KLrotate {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.KLrotate:hover {
  -ms-transform: rotate(-10deg) scale(1.1, 1.1);
  -webkit-transform: rotate(-10deg) scale(1.1, 1.1);
  transform: rotate(-10deg) scale(1.1, 1.1);
}

.fagot {
  height: 15%;
  bottom: 10%;
  left: 20%;
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.fagot:hover {
  -ms-transform: rotate(-10deg) scale(1.1, 1.1);
  -webkit-transform: rotate(-10deg) scale(1.1, 1.1);
  transform: rotate(-10deg) scale(1.1, 1.1);
}

/* BRASS */
.trompet {
  max-height: 20%;
  max-width: 35%;
  bottom: 35%;
  left: 35%;
}

.hoorn {
  max-height: 40%;
  max-width: 20%;
  bottom: 37.5%;
  left: 10%;
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}
.hoorn:hover {
  -ms-transform: rotate(40deg) scale(1.1, 1.1);
  -webkit-transform: rotate(40deg) scale(1.1, 1.1);
  transform: rotate(40deg) scale(1.1, 1.1);
}

.trombone {
  max-width: 60%;
  max-height: 30%;
  bottom: 8.5%;
  left: 5%;
}

.tuba {
  max-height: 80%;
  max-width: 30%;
  bottom: 10%;
  left: 67.5%;
}

/* PERCUSSION */
.pauken {
  bottom: 10%;
  left: 27%;
  max-width: 40%;
  max-height: 35%;
  text-align: center;
}
.kleine_trom {
  max-width: 17.5%;
  max-height: 25%;
  bottom: 10%;
  left: 5%;
}
.tamboerijn {
  max-width: 15%;
  max-height: 25%;
  bottom: 40%;
  left: 2.5%;
}
.triangel {
  max-width: 15%;
  max-height: 25%;
  bottom: 45%;
  right: 5%;
}
.bekkens {
  max-width: 15%;
  max-height: 25%;
  bottom: 9%;
  right: 9%;
}

/* ENSEMBLE */
#vioolEns {
  width: 7%;
  bottom: 20%;
  left: 12%;
}
#vioolEns:hover {
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

#celloEns {
  width: 11%;
  bottom: 10%;
  right: 17.5%;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
#celloEns:hover {
  -ms-transform: rotate(20deg) scale(1.1, 1.1);
  -webkit-transform: rotate(20deg) scale(1.1, 1.1);
  transform: rotate(20deg) scale(1.1, 1.1);
}

#contrabasEns {
  width: 16%;
  bottom: 10%;
  right: 2%;
}
#contrabasEns:hover {
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

#dwarsfluitEns {
  max-width: 30%;
  max-height: 10%;
  bottom: 47.5%;
  left: 2.5%;
}

.FLrotate {
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.FLrotate:hover {
  -ms-transform: rotate(20deg) scale(1.1, 1.1);
  -webkit-transform: rotate(20deg) scale(1.1, 1.1);
  transform: rotate(20deg) scale(1.1, 1.1);
}

#hoboEns {
  max-height: 40%;
  max-width: 10%;
  bottom: 10%;
  left: 2.5%;
}

.HBrotate {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.HBrotate:hover {
  -ms-transform: rotate(270deg) scale(1.1, 1.1);
  -webkit-transform: rotate(270deg) scale(1.1, 1.1);
  transform: rotate(270deg) scale(1.1, 1.1);
}

#fagotEns {
  height: 13%;
  bottom: 10%;
  left: 15%;
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
#fagotEns:hover {
  -ms-transform: rotate(-10deg) scale(1.1, 1.1);
  -webkit-transform: rotate(-10deg) scale(1.1, 1.1);
  transform: rotate(-10deg) scale(1.1, 1.1);
}

#tromboneEns {
  max-width: 35%;
  max-height: 20%;
  bottom: 25%;
  left: 20%;
}

/*SPECIALE INSTRUMENTEN*/

#baglamas {
  max-height: 50%;
  max-width: 15%;
  bottom: 10%;
  left: 3.5%;
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
#baglamas:hover {
  -ms-transform: rotate(-10deg) scale(1.1, 1.1);
  -webkit-transform: rotate(-10deg) scale(1.1, 1.1);
  transform: rotate(-10deg) scale(1.1, 1.1);
}

#basgitaar {
  max-height: 50%;
  max-width: 25%;
  top: 25%;
  right: 30%;
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
#basgitaar:hover {
  -ms-transform: rotate(50deg) scale(1.1, 1.1);
  -webkit-transform: rotate(50deg) scale(1.1, 1.1);
  transform: rotate(50deg) scale(1.1, 1.1);
}

#beatring {
  max-height: 15%;
  max-width: 15%;
  bottom: 15%;
  right: 15%;
}

#castagnettes {
  max-height: 15%;
  max-width: 15%;
  bottom: 7.5%;
  right: 2.5%;
}
#darbuka {
  max-height: 32.5%;
  max-width: 32.5%;
  bottom: 5%;
  left: 25%;
}
#gitaar {
  max-height: 40%;
  max-width: 40%;
  bottom: 17.5%;
  left: 37.5%;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
#gitaar:hover {
  -ms-transform: rotate(-30deg) scale(1.1, 1.1);
  -webkit-transform: rotate(-30deg) scale(1.1, 1.1);
  transform: rotate(-30deg) scale(1.1, 1.1);
}

#klokkenspel {
  max-height: 22.5%;
  max-width: 22.5%;
  bottom: 10%;
  right: 27.5%;
}
#mandoline {
  max-height: 35%;
  max-width: 35%;
  bottom: 10%;
  left: 15%;
}
#oed {
  max-height: 30%;
  max-width: 30%;
  bottom: 25%;
  right: 2.5%;
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}
#oed:hover {
  -ms-transform: rotate(15deg) scale(1.1, 1.1);
  -webkit-transform: rotate(15deg) scale(1.1, 1.1);
  transform: rotate(15deg) scale(1.1, 1.1);
}

#typemachine {
  max-height: 15%;
  max-width: 15%;
  bottom: 30%;
  right: 17.5%;
}

#zurna {
  max-height: 20%;
  max-width: 20%;
  bottom: 30%;
  left: 12.5%;
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}
#zurna:hover {
  -ms-transform: rotate(10deg) scale(1.1, 1.1);
  -webkit-transform: rotate(10deg) scale(1.1, 1.1);
  transform: rotate(10deg) scale(1.1, 1.1);
}

#beatring:hover,
#castagnettes:hover,
#darbuka:hover,
#klokkenspel:hover,
#mandoline:hover,
#typemachine:hover {
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}