﻿/*horiz1 as spacer only; horiz2 for NORMAL scores, horiz3 for NARROW scores;
vert5a, vert5b and horiz7 (text only) are exclusive to 11_imp only!
horiz4 use for "View Key" (ONE ITEM), vert3a and vert 3b for "View Key" (TWO ITEMS), vertA, B, C, D, E for "View Key" (THREE ITEMS);
horiz6 (text), horiz7 (scores), vert7a, vert7b used exclusively for 22_kTh
vert9a, 9b, 10a, 10b, 11a, 11b are all 50% with font behaviours; used in 53_harm;
horiz3 h1 is bold/large font for 11_kTh (melodic) for "Down a 5th"*/
img.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto
}
.horiz1 {
	order: 5;
}
.vert1a {
	order: 6;
}
.vert1b {
	order: 7;
}
.horiz2 {
	order: 8;
}
.vert2a {
	order: 9;
}
.vert2b {
	order: 10;
}
.horiz3 {
	order: 11;
}
.vert3a {
	order: 12;
}
.vert3b {
	order: 13;
}
.horiz4 {
	order: 14;
}
.vert4a {
	order: 15;
}
.vert4b {
	order: 16;
}
.horiz5 {
	order: 17;
}
.vert5a {
	order: 18;
}
.vert5b {
	order: 19;
}
.horiz6 {
	order: 20;
}
.vert6a {
	order: 21;
}
.vert6b {
	order: 22;
}
.horiz7 {
	order: 23;
}
.vert7a {
	order: 24;
}
.vert7b {
	order: 25;
}
.horiz8 {
	order: 26;
}
.vert8a {
	order: 27;
}
.vert8b {
	order: 28;
}
.vert9a {
	width: 85%;
	order: 29;
}
.vert9b {
	width: 15%;
	order: 30;
}
.vert10a {
	width: 85%;
	order: 31;
}
.vert10b {
	width: 15%;
	order: 32;
}
.vert11a {
	width: 85%;
	order: 33;
}
.vert11b {
	width: 15%;
	order: 34;
}
.vert12a {
	order: 35;
}
.vert12b {
	order: 36;
}
.vertA {
	order: 37;
}
.vertB {
	order: 38;
}
.vertC {
	order: 39;
}
.vertD {
	order: 40;
}
.vertE {
	order: 41;
}
.horiz1 {
	height: 35px;
	width: 100%;
}
.horiz2 {
	padding-left: 80px;
	padding-right: 80px;
}
.horiz2, .horiz3, .horiz4, .horiz5, .horiz6, .horiz7, .horiz8 {
	width: 100%;
	text-align: center;
}
.horiz2 img {
	max-width: 100%;
	text-align: center;
}
.horiz2 h1 {
	font-size: 18px;
}
.horiz2 h2, .horiz3 h2, .horiz4 h2, .horiz6 h2 {
	font-size: 16px;
	font-weight: 450;
}
.horiz2 h3 {
	font-size: 15px;
}
.horiz3 img {
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}
.horiz3 h1 {
	font-size: 16px;
}
.horiz3 h3 {
	padding-top: 20px;
	font-size: 13px;
}
.horiz4 img {
	max-width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
.vert1a {
	width: 50%;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 40px;
	height: auto;
	text-align: center;
}
.vert1a h2 {
	font-size: 17px;
	font-weight: 600;
	}
.vert1b {
	width: 50%;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 40px;
	height: auto;
	text-align: center;
}
.vert9a h1, .vert10a h1, .vert11a h1 {
	font-size: 17px;
	padding-left: 60px;
	padding-top: 0px;
}
.vert9a h2, .vert10a h2, .vert11a h2 {
	font-size: 16px;
	padding-left: 60px;
}
.vert11a, .vert11b {
	padding-bottom: 60px;
}
.vert3a {
	width: 50%;
	text-align: right;
	padding-right: 60px;
}
.vert3b {
	width: 50%;
	text-align: left;
	padding-left: 60px;
}
.vert5a {
	width: 50%;
	text-align: right;
	padding-right: 40px;
	height: auto;
}
.vert5b {
	width: 50%;
	text-align: left;
	padding-left: 40px;
	height: auto;
}
.horiz6 {
	padding-left: 40px;
}
.horiz6 h2 {
	text-align: left;
	font-size: 16px;
	font-weight: 600;
	line-height: 2;
}
.horiz7 {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}
.horiz7 h2 {
	font-size: 16px;
	font-weight: 450;
}
.horiz7 img {
	max-width: 100%;
	height: auto;
	padding-left: 0px;
	padding-right: 0px;
}
.vert7a {
	width: 50%;
	padding-right: 200px;
}
.vert7b {
	width: 50%;
	padding-left: 200px;
}
.vert7a h2, .vert7b h2 {
	font-size: 16px;
}
.vert7a h2 {
	text-align: right;
}
.vert7b h2 {
	text-align: left;
}
.vert8a {
	width: 50%;
	padding-left: 140px;
	padding-top: 20px;
	height: auto;
	text-align: center;
}
.vert8a h3 {
	font-size: 14px;
	line-height: 20px;
}
.vert8b {
	width: 50%;
	padding-right: 140px;
	padding-top: 20px;
	height: auto;
	text-align: center;
}
.vert8b h3 {
	font-size: 14px;
	line-height: 20px;
}
.vertA, .vertB, .vertC, .vertD, .vertE {
	width: 20%;
	font-size: 16px;
	text-align: center;
}
.sound {
	max-width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}
.sound h3 {
	font-size: 12px;
	line-height: 1.4;
}
.sound h2 {
	font-size: 16px;
}




@media screen and (max-width: 1119px) and (min-width: 768px) {
.horiz1 {
	height: 25px;
}
.horiz2 {
	width: 100%;
	height: auto;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}
.horiz2 h1 {
	font-size: 17px;
}
.horiz2 h2, .horiz3 h2, .horiz4 h2, .horiz6 h2 {
	font-size: 15px;
	font-weight: 400;
}
.horiz2 h3 {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 13px;
}
.horiz3 img {
	max-width: 100%;
	height: auto;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}
.horiz3 h3 {
	font-size: 12px;
}
.horiz4, .horiz5, .horiz6 {
	padding-bottom: 25px;
}
.horiz4 {
	padding-left: 80px;
	padding-right: 80px;
}
.horiz4 img {
	max-width: 100%;
	text-align: center;
}
.horiz6 {
	padding-left: 30px;
}
.horiz6 h2 {
	font-size: 14px;
	font-weight: 600;
	line-height: 2;
}
.horiz7 {
	padding-left: 20px;
	padding-right: 20px;
}
.horiz7 h2 {
	font-size: 15px;
	font-weight: 400;
}
.vert7a {
	padding-right: 140px;
}
.vert7b {
	padding-left: 140px;
}
.vert7a h2, .vert7b h2 {
	font-size: 15px;
}
.vert9a h1, .vert10a h1, .vert11a h1 {
	font-size: 16px;
	padding-left: 40px;
}
.vert9a h2, .vert10a h2, .vert11a h2 {
	font-size: 15px;
	padding-left: 40px;
}
.vert1a {
	padding-top: 5px;
	padding-bottom: 30px;
}
.vert1b {
	padding-top: 5px;
	padding-bottom: 30px;
}
.vert1a h2 {
	font-size: 15px;
	font-weight: 600;
}
.vert5a {
	padding-right: 30px;
}
.vert5b {
	padding-left: 30px;
}
.vert8a {
	padding-left: 0px;
}
.vert8a h3 {
	font-size: 13px;
	line-height: 1.5;
}
.vert8b {
	padding-right: 0px;
}
.vert8b h3 {
	font-size: 13px;
	line-height: 1.5;
}
.vertA, .vertE {
	width: 17%;
}
.vertB, .vertC, .vertD {
	width: 22%;
	font-size: 15px;
}
.sound h3 {
	font-size: 12px;
	line-height: 1.2;
}
.sound h2 {
	font-size: 15px;
}
}
	
	


@media screen and (max-width: 767px) and (min-width: 667px) {
.horiz1 {
	height: 15px;
}
.horiz1 h2 {
	font-size: 14px;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
	font-weight: 500;
}
.horiz2 {
	padding-left: 35px;
	padding-right: 35px;
}
.horiz2 h2, .horiz3 h2, .horiz4 h2, .horiz6 h2 {
	font-size: 13px;
	font-weight: 400;
}
.horiz2 h1 {
	font-size: 16px;
}
.horiz2 h3 {
	font-size: 12px;
}
.horiz3 h1 {
	font-size: 14px;
}
.horiz3 img {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 0px;
}
.horiz4 {
	padding-left: 120px;
	padding-right: 120px;
}
.horiz4, .horiz5 {
	padding-bottom: 25px;
}
.horiz6 {
	padding-left: 20px;
}
.horiz6 h2 {
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	line-height: 2;
}
.horiz7 {
	padding-left: 15px;
	padding-right: 15px;
}
.horiz7 h2 {
	font-size: 13px;
	font-weight: 400;
}
.vert1a {
	padding-top: 0px;
}
.vert1b {
	padding-top: 0px;
}
.vert1a h2 {
	font-size: 14px;
	text-align: left;
	padding-left: 60px;
	font-weight: 500;
}
.vert3a {
	padding-right: 80px;
}
.vert3b {
	padding-left: 80px;
}
.vert5a {
	padding-right: 20px;
}
.vert5b {
	padding-left: 20px;
}
.vert7a {
	padding-right: 120px;
}
.vert7b {
	padding-left: 120px;
}
.vert7a h2, .vert7b h2 {
	font-size: 14px;
}
.vert8a {
	padding-left: 5px;
}
.vert8a h3 {
	font-size: 12.5px;
	line-height: 1.5;
}
.vert8b {
	padding-right: 5px;
}
.vert8b h3 {
	font-size: 12.5px;
	line-height: 1.5;
}
.vert9a h1, .vert10a h1, .vert11a h1 {
	font-size: 15px;
	padding-left: 30px;
}
.vert9a h2, .vert10a h2, .vert11a h2 {
	font-size: 14px;
	padding-left: 30px;
}
.vert11a, .vert11b {
	padding-bottom: 60px;
}
.vertA, .vertE {
	width: 11%;
}
.vertB, .vertC, .vertD {
	width: 28%;
	font-size: 13px;
}
.sound h3 {
	font-size: 10.5px;
	line-height: 1.1;
}
.sound h2 {
	font-size: 14px;
}
}



@media screen and (max-width: 666px) {
.horiz1 {
	height: 10px;
}
.horiz2 {
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
}
.horiz2 img {
	max-width: 100%;
	height: auto;
}
.horiz2 h1 {
	font-size: 15px;
}
.horiz2 h2, .horiz3 h2, .horiz4 h2, .horiz6 h2 {
	font-size: 11px;
	padding-left: 40px;
	padding-right: 40px;
}
.horiz2 h3 {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 10px;
}
.horiz3 {
	padding-top: 0px	
}
.horiz3 img {
	max-width: 100%;
	height: auto;
	text-align: center;
	padding-left: 25px;
	padding-right: 25px;
}
.horiz3 h1 {
	font-size: 14px;
}
.horiz3 h3 {
	font-size: 10px;
}
.horiz4, .horiz5, .horiz6 {
	padding-bottom: 0px;
}
.horiz4 {
	padding-left: 30px;
	padding-right: 30px;	
}
.horiz4 img {
	max-width: 100%;
	text-align: center;
	padding-right: 30px;
	padding-left: 30px;
}
.horiz6 {
	padding-left: 0px;
}
.horiz6 h2 {
	text-align: left;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	padding-left: 0px;
}
.horiz7 {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
}
.horiz7 img {
	padding-bottom: 0px;
}
.horiz7 h2 {
	font-size: 11px;
	padding-left: 40px;
	padding-right: 40px;
}
.vert1a {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 10px;
}
.vert1a h2 {
	font-size: 11px;
	text-align: left;
	padding-left: 20px;
}
.vert1b {
	width: 100%;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 10px;
	height: auto;
	text-align: center;
}
.vert3a {
	width: 100%;
	text-align: center;
	padding-left: 40px;
	padding-right: 40px;
}
.vert3b {
	width: 100%;
	text-align: center;
	padding-left: 40px;
	padding-right: 40px;
}
.vert3a img, .vert3b img {
	max-width: 50%;
	text-align: center;
}
.vert5a {
	width: 100%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 15px;
	padding-left: 0;
	padding-right: 0px;
}
.vert5b {
	width: 100%;
	text-align: center;
	padding: 0;
}
.vert7a {
	width: 100%;
	padding-right: 0px;
}
.vert7b {
	width: 100%;
	padding-left: 0px;
}
.vert7a h2, .vert7b h2 {
	font-size: 12px;
}
.vert7a h2, .vert7b h2 {
	text-align: center;
}
.vert8a {
	width: 100%;
	padding-left: 0px;
	padding-top: 10px;
}
.vert8a h3 {
	width: 100%;
	font-size: 11px;
	line-height: 20px;
}
.vert8b {
	width: 100%;
	padding-right: 0px;
	padding-top: 10px;
	height: auto;
	text-align: center;
}
.vert8b h3 {
	font-size: 12px;
	line-height: 20px;
}
.vert9a h1, .vert10a h1, .vert11a h1 {
	font-size: 13px;
	padding-left: 10px;
	padding-top: 10px;
}
.vert9a, .vert9b, .vert10a, .vert10b, .vert11a, .vert11b {
	width: 100%;
}
.vert9a h2, .vert10a h2, .vert11a h2 {
	font-size: 12px;
	padding-left: 10px;
}
.vert11a, .vert11b {
	padding-bottom: 60px;
}
.vertA, .vertB, .vertC, .vertD, .vertE {
	width: 100%;
	padding-bottom: 10px;
	font-size: 12px;
}
.sound {
	max-width: 100%;
	padding-top: 20px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 30px;
}
.sound h3 {
	font-size: 10px;
	line-height: 1.1;
}
.sound h2 {
	font-size: 12px;
}
}