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


/* STRINGS */
.viool {
	width: 10%;
	bottom: 30%;
	left: 32%;
}
.viool:hover {
	-ms-transform:  scale(1.1, 1.1); 
	-webkit-transform:  scale(1.1, 1.1); 
	transform:  scale(1.1, 1.1);
}

.altviool {
	width: 12%;
	bottom: 25%;
	left: 70%;
}
.altviool:hover {
	-ms-transform:  scale(1.1, 1.1); 
	-webkit-transform:  scale(1.1, 1.1); 
	transform:  scale(1.1, 1.1);
}

.cello {
	width: 17%;
	bottom: 0%;
	left: 50%;
	-ms-transform: rotate(70deg);
	-webkit-transform: rotate(70deg);
	transform: rotate(20deg);
}
.cello: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);
}

.contrabas {
	width: 22.5%;
	bottom: 2%;
	left: 2%;
}
.contrabas:hover {
	-ms-transform:  scale(1.1, 1.1); 
	-webkit-transform:  scale(1.1, 1.1); 
	transform:  scale(1.1, 1.1);
}


/* 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;
}
.kleineTrom {
	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*/
.highLight {
	filter: brightness(75%);
	transition: all 1s;
	cursor: pointer;
	position: fixed;
}

.highLight:hover {
	filter: brightness(125%);
}



#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);
}

/* Titles */
.title {
	font-size: 30px;
	color: white;
	position: fixed;	
	text-align: center;	
}
.titleConductor {
	bottom: 25%;
	left: 75%;
	width: 20%;
}
.titleStrings {
	bottom: 15%;
	left: 75%;
	width: 20%;
}
.titleWoodwinds {
	bottom: 30%;
	left: 30%;
	width: 25%;
}
.titleBrass {
	bottom: 25%;
	left: 45%;
	width: 25%;
}
.titlePercussion {
	bottom: 55%;
	left: 30%;
	width: 20%;
}
.titleEnsemble {
	bottom: 35%;
	left: 40%;
	width: 20%;
}