@charset "UTF-8";

/* reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img,
object,
embed {
	vertical-align: middle;
	max-width: none;
}

a img {
	border: none;
}
li {
	list-style-type: none;
}

/*==================== Base ====================*/
body {
	color: #333;
	background: #f6f3ea url(img/bg.png) repeat 0 0;
	background-size: 250px 250px;
}
body,
input,
button {
	font-family: "Montserrat", "Avenir Next", sans-serif;
	font-size: 16px;
	line-height: 1.2;
}

/*==================== Layout ====================*/
#loading {
	position: fixed;
	inset: 0;
	z-index: 9;
	display: grid;
	place-items: center;
	font-size: 120%;
	color: #fff;
	background: #20242ccc;
}

.container {
	position: relative;
	margin: 0 auto;
	padding: 10px 0 20px;
	width: 1008px;
}

.title {
	position: absolute;
	top: 125px;
	right: 50px;
	width: 270px;
	font: normal normal 110%/1.2 "Rye", serif;
	text-align: center;
	letter-spacing: 2px;
}

.controls {
	position: absolute;
	top: 350px;
	right: 50px;
	width: 270px;
	text-align: center;
}
.controls div + div {
	margin-top: 10px;
}

#play-pause {
	width: 3em;
	padding: .75em 1em;
	font-size: 150%;
	line-height: 1;
	background: #fff;
	border: solid 1px #ddd;
	border-color: rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-sizing: content-box;
	cursor: pointer;
	vertical-align: top;
}
#play-pause .pause {
	display: none;
}
#play-pause.playing .play {
	display: none;
}
#play-pause.playing .pause {
	display: inline-block;
}

h1 {
	font-size: 400%;
	font-weight: 500;
	color: #d0133d;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.2);
	opacity: 0.9;
}
h1 small {
	display: block;
	font-size: 70%;
	color: #d4da6a;
}
.composer {
	margin: 20px 0 0;
	font-size: 141%;
	color: #c5aee0;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
	opacity: 0.9;
}

h2 {
	margin: 20px 0 10px;
}

.instlist {
	display: flex;
	flex-wrap: wrap;
}
.instlist > li {
	margin: 1px;
	line-height: 1;
	list-style: none;
}

.btn {
	padding: 0;
	border: solid 1px #ddd;
	border-color: rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-sizing: content-box;
	cursor: pointer;
	vertical-align: top;
	opacity: 0.5;
	filter: grayscale(0.7);
}
.btn.active {
	opacity: 1;
	filter: none;
	box-shadow: 0 0 2px #0070ff;
}

.btn .name {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -999px;
}
nil.btn.active .name {
	background: rgba(0, 128, 255, 0.2);
}

.btn {
	position: relative;
}
.btn .ver {
	position: absolute;
	font-size: 12px;
	right: 5px;
	bottom: 3px;
}

/*==================== Parts Icons ====================*/
[class*="part-"] {
	display: inline-block;
	width: 620px;
	height: 40px;
	overflow: hidden;
	background: url(img/parts.png?5) no-repeat;
	background-size: 620px 160px;
	text-indent: -99em;
	opacity: 0.9;
}

.part-r {
	background-position: 0 0;
}
.part-m {
	background-position: 0 -40px;
}
.part-h {
	background-position: 0 -80px;
}
.part-b {
	background-position: 0 -120px;
}

/*==================== Instruments Icons ====================*/
[class*="inst-"] {
	display: inline-block;
	width: 80px;
	height: 80px;
	overflow: hidden;
	background: #fff url(img/inst.jpg?1) no-repeat;
	background-size: 880px 320px;
}

.inst-pfl {
	background-position: -80px 0;
}
.inst-ob {
	background-position: -160px 0;
}
.inst-cl {
	background-position: -240px 0;
}
.inst-pcl {
	background-position: -320px 0;
}
.inst-bn {
	background-position: -400px 0;
}
.inst-oba_bn {
	background-position: -480px 0;
}
.inst-ssx {
	background-position: -560px 0;
}
.inst-obs_cls {
	background-position: -640px 0;
}
.inst-cl_pcl {
	background-position: -720px 0;
}
.inst-pfl_celst {
	background-position: -800px 0;
}

.inst-fls {
	background-position: 0 -80px;
}
.inst-cora {
	background-position: -80px -80px;
}
.inst-obs {
	background-position: -160px -80px;
}
.inst-cls {
	background-position: -240px -80px;
}
.inst-bcl {
	background-position: -320px -80px;
}
.inst-bns {
	background-position: -400px -80px;
}
.inst-cbn {
	background-position: -480px -80px;
}
.inst-tsx {
	background-position: -560px -80px;
}
.inst-bois {
	width: 164px;
	background-position: -638px -80px;
}
.inst-tps_tp {
	background-position: -800px -80px;
}

.inst-cor {
	background-position: 0 -160px;
}
.inst-tp {
	background-position: -80px -160px;
}
.inst-tp_sord {
	background-position: -160px -160px;
}
.inst-tuba {
	background-position: -240px -160px;
}
.inst-cor_tb {
	background-position: -320px -160px;
}
.inst-vn {
	background-position: -400px -160px;
}
.inst-va {
	background-position: -480px -160px;
}
.inst-vc {
	background-position: -560px -160px;
}
.inst-cb {
	background-position: -640px -160px;
}
.inst-tamb {
	background-position: -720px -160px;
}
.inst-tambs {
	background-position: -800px -160px;
}

.inst-cors {
	background-position: 0 -240px;
}
.inst-tps {
	background-position: -80px -240px;
}
.inst-tb {
	background-position: -160px -240px;
}
.inst-cuivres {
	width: 164px;
	background-position: -238px -240px;
}
.inst-va_vc {
	background-position: -400px -240px;
}
.inst-cordes {
	width: 164px;
	background-position: -478px -240px;
}
.inst-harp {
	background-position: -640px -240px;
}
.inst-timb {
	width: 164px;
	background-position: -718px -240px;
}