@charset "UTF-8";
/* Cluster Template */

* {box-sizing: border-box;}  

/*Grid*****************************************/
#left-subbox-cluster {
    display:grid;
    grid-template-rows: 14.5em 23em 14.5em;
    grid-template-columns: 26em 26em 26em;
    grid-template-areas: 
        "age lesson parent"
        "tuition description description"
        "materials instrument blank";
    grid-row-gap: 0.6vw;
    grid-column-gap: 0.6vw;
    font-size: 0.61vw;
}
@media only screen and (min-width:1025px) and (max-width:1400px) and (orientation:landscape)
{#left-subbox-cluster{font-size:0.72vw;}}
@media only screen and (max-width:1024px) and (orientation:landscape)
{#left-subbox-cluster{font-size:1.25vw;}}

@media only screen and (orientation:portrait)
{#left-subbox-cluster{font-size:1.25vw;}}


.top-container.r1c1{grid-area:age}
.top-container.r1c2{grid-area:lesson}
.top-container.r1c3{grid-area:parent}
.top-container-middle{grid-area:tuition}
.top-container-wide{grid-area:description} 
.top-container.r3c1{grid-area:materials}
.top-container.r3c2{grid-area:instrument}
.top-container.r3c3{grid-area:blank}

.bottom-container-wide.age,
.bottom-container-wide.class,
.bottom-container-wide.parent,
.bottom-container-wide.tuition,
.bottom-container-wide.materials,
.bottom-container-wide.instrument{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
    
/*Box Styling*****************************/
.top-container{
    height: 14.5em;
    width: 26em;
    vertical-align:top;
    opcacity:1;
    /*z-index:2;*/
}
.top-container-middle{
    height:23em;
    width: 26em;
    vertical-align:top;
    opacity:1;
}
.top-container-wide,
.bottom-container-wide.age,
.bottom-container-wide.class,
.bottom-container-wide.parent,
.bottom-container-wide.tuition,
.bottom-container-wide.materials,
.bottom-container-wide.instrument{
    height:23em;
    width: calc(52em + 0.7vw);
}
.bottom-container-wide.age,
.bottom-container-wide.class,
.bottom-container-wide.parent,
.bottom-container-wide.tuition,
.bottom-container-wide.materials,
.bottom-container-wide.instrument{
    background-color: #30B9E6;
    display:none;
    z-index:2;/*!IMPORTANT must include to prevent display from disappearing after being activatedin JS*/
}

/*Box Hovering******************************/
.top-container.r1c1:hover,
.top-container.r1c1:hover .top-title,
.top-container.r1c2:hover,
.top-container.r1c2:hover .top-title,
.top-container.r1c3:hover,
.top-container.r1c3:hover .top-title,
.top-container-middle:hover,
.top-container-middle:hover .top-title,
.top-container.r3c1:hover,
.top-container.r3c1:hover .top-title,
.top-container.r3c2:hover,
.top-container.r3c2:hover .top-title{
    transition-property:all;
    transition: 1s ease-out;
}
.top-container.r1c1:hover,
.top-container.r1c2:hover,
.top-container.r1c3:hover,
.top-container-middle:hover,
.top-container.r3c1:hover,
.top-container.r3c2:hover{
    background-color: #BDBBBB;
}

/*Text************************************/
.top-title {
    color: #FFF;
    font-size: 3.5em;
    padding: 0.5% 0 0 1%;
    position:absolute;
    /*z-index:4;*/
}
.bottom-content-text {
    display:flex;
    align-items: center;
    color: #ffffff;
    font-size: 1.9em;
    font-weight:100;
    height:100%;
    padding:0 4%;
}
#tuition{
    font-size: 1.6em;
}