@charset "UTF-8";
.tuition-box-block {
    width: 14.06em;
    height: 7.65em;
    cursor: pointer;
    margin: 1%;
}
.tuition-box-overlay,
.tuition-box-overlay-shade{
    position: absolute;
    top:0;
    left:0;
    height: 7.65em; /*must declare to be same as .tuition-box-block*/
    width:100%; /**inherit from .'course'-block*/
    text-align: center;
    color: white;
    opacity:0;
    transition: opacity 1.5s;
    
    background-color:#A2A2A2;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.tuition-box-overlay-shade{padding: 2% 3%;}
.tuition-box-overlay{padding:3% 0 0 0;}
.popup-box-wrapper {
    font-size:2vmin;/*sizing of ymes popup button inside course buttons*/
}
@media only screen and (min-width:2000px) and (orientation:landscape)
    {.popup-box-wrapper{font-size:1.1vh;}}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {.popup-box-wrapper{font-size:1.1vh;}}
@media only screen and (orientation:portrait)
    {.popup-box-wrapper{font-size: 1.5vmin;}}


.tuition-box-overlay:hover {
    opacity: 1;
}
.tuition-box-overlay-shade:hover{
    opacity:0.7;
    background-color: #7B7B7B;
}
.mw-box,
.jmc-box, 
.ymc-box, 
.mf-box, 
.jnc-box, 
.jxc-box, 
.jac-box, 
.jsac-box, 
.sac-box,
.otj-box, 
.theory-box, 
.piano-box, 
.violin-box, 
.viola-box, 
.cello-box, 
.vocal-box, 
.guitar-box, 
.ukulele-box, 
.mandolin-box, 
.flute-box, 
.drum-box, 
.sax-box, 
.clar-box{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    position:relative;
	height: 72%;/**inherit from .tuition-box-block*/
    width:auto;/**inherit from .tuition-box-block*/
	padding:0 0.8em;
	text-align:right;
	font-size:1em;
}
.mw-box {
	background-color:#FCC;
	color:#666;	
}
.jmc-box {
	background-color:#F99;
	color:#666;
}
.ymc-box {
	background-color:#FC3;
	color:#666;
}
.mf-box {
	background-color:#FF9900;
	color:#666;
}
.jnc-box {
	background-color:#DF7979;
	color:#555;
}
.jxc-box {
	background-color:#FC5C08;
	color:#666;
}
.jac-box {
	background-color:#FFCE00;
	color:#666;
}
.jsac-box {
	background-color:#ADEA1B;
	color:#666;
}
.sac-box {
	background-color:#00FFA1;
	color:#666;
}
.otj-box {
	background-color:#FF0;
	color:#666;
}
.theory-box {
	background-color:#0D80AA;
	color:#B5B5B5;
}
.piano-box {
	background-color:#50D650;
	color:#666;	
}
.violin-box {
	background-color:#3C6;
	color:#666;
}
.viola-box {
	background-color:#77CCD7;
	color:#777;
}
.cello-box {
	background-color:#9088B4;
	color:#444;
}
.vocal-box {
	background-color:#75FFFF;
	color:#777;
}
.guitar-box {
	background-color:#09F;
	color:#CCC;
}
.ukulele-box {
	background-color:#E5D620;
	color:#737373;
}
.mandolin-box {
	background-color:#ED83FF;
	color:#CCC;
}
.flute-box {
	background-color:#829BFF;
	color:#CCC;
}
.drum-box {
	background-color:#009;
	color:#CCC;
}
.clar-box {
	background-color:#A852FF;
	color:#CCC;
}
.sax-box {
	background-color:#96C;
	color:#CCC;
}
.box-group {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
#ymes-group,
#music-group,
#private-lessons {
    display: flex;
    flex-flow: column nowrap;
    font-size: 1.1vw;/*base unit*/
    width:100%;
}
@media only screen and (orientation: portrait)
    {#ymes-group,
    #music-group,
    #private-lessons{font-size: 2vmin;}}


#music-group {
    margin: 4% 0;
}
.box-group {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.group-subtitle {
    font-size: 1.38em;
    padding:1.5% 3% 1.5% 3%;
    margin: 0 0 1% 0;
    width:100%;
}
.box-title{
    line-height:1.1em;
}
.tuition {
	height:28%;/**inherit from .tuition-box-block*/
    width:auto;/**inherit from .tuition-box-block*/
	background-color:#9A9A9A;
    font-size:0.75em;
	padding:4% 3%;
	text-align:left;
	color:#FFF;
	border-bottom: solid thin #CFCFCF;
}
.icon-float-left img {
    width:5.65em;
    height: auto;
    margin-top: 0.5em;
}
#ymes-group img,
#music-group img {
    height: 4.675em;
    width:auto;
}
.italic-small-font {
    font-size: 0.7em;
    font-style: italic;
    color:#7E8296;
    line-height: 1.3;
    margin-top: 0.3em;
}
.theory-box>.italic-small-font {
    color:#B5B5B5;
}
.jmc-box>.italic-small-font,
.jnc-box>.italic-small-font,
.jxc-box>.italic-small-font {
    color:#525252;
}