* {
    box-sizing: border-box;
    --meredithBGBlack: #232323;
    --offWhite:#eeeeee;
    --col_Beginner:rgb(0, 103, 221);
}

.cms-content{
    width:unset;
}

#allContent{
    margin-top:-14px;
}

#allContent p, #allContent, #allContent a {
    font-family: "Open Sans", sans-serif;
}

/* .pageWrapper {
    max-width: 1200px;
    padding-inline: 14px;
    margin-inline: auto;
} */

#allContent h1,
#allContent h2,
#allContent h3,
#allContent h4,
#allContent h5,
#allContent h6 {
    font-family: "Open Sans", sans-serif;
}

.italText {
    font-style: italic;
}

.centerText {
    text-align: center;
}

.pageButton {
    background-color: rgb(16, 16, 117);
    padding: 10px;
    display: grid;
    place-items: center;
    text-align: center;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 100px;
}

.pageButton:hover,
.pageButton:focus {
    color: white;
    text-decoration: none;
}

.GridColumn_2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
}

.GridColumn_3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(375px, 100%), 1fr));
}

.GridColumn_4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

/* TEMPLATE END */

.percussionHeader{
    background-color: var(--meredithBGBlack);
    display:grid;
    grid-template-columns: 225px 1fr;
    padding:24px;
    align-items: center;

    @media (width < 550px){
        grid-template-columns: 1fr;
    }
}

.headerImage{
    display:block;
    width:100%;
    max-width:50dvw;
    margin-inline:auto;    
}

.percussionHeader_Title{
    margin:unset;
    font-weight:900 !important;
    color:var(--offWhite);
    text-align:center;
    font-size:clamp(24px, 7vw, 42px);
    padding-inline:.5em;

    @media (width < 550px){
        margin-block:1em .5em;
    }
}

.percussionHeader_PageLevel{
    color:white;
    text-align:center;
    text-transform:uppercase;
    font-size:clamp(22px, 4vw, 34px);
}

.percussionHeader_PageLevel{
    margin:0 auto;
    padding:.75em;
}

.percussionInfo{
    margin-block:2.5em;
}

.percussionInfo p {
    font-size: clamp(14px, 3vw, 22px);
    line-height:1.5;
    font-weight:400;
    margin-bottom:.75em;
    color: var(--meredithBGBlack);
}

.fullBar{
    text-align: center;
    background-color: var(--meredithBGBlack);
    padding:.75em;
}

.subpage_DividerHeading{
    color:var(--offWhite);
    font-weight:800;
    font-size: clamp(18px, 3vw, 36px);

}

.exploreResources{
    color:var(--offWhite);
    font-weight:900;
    font-size: clamp(18px, 3vw, 28px);
}

.mainResourceGrid{
    gap:12px;
    margin-block:24px;
}

.mainResourceCard {
    border:2px solid transparent;
    border-radius:18px;
    transition:all .5s ease-out;
    height:100%;
    scale:(1);
}

.mainResourceCard:hover{
    background-color: rgb(243, 243, 243);
    border:2px solid rgb(212, 211, 218);
}

.mainResourceCard img{
    transition:all .5s ease-in-out;
    max-width:50dvw;
    width:150px;
    margin-top:18px;
    display:block;
    margin-inline:auto;
    transform: scale(.75);
    filter:blur(1.5px);

    @media (width < 815px){
        filter:blur(0px);
        transform: scale(1);
    }

}

.mainResourceCard a {
    text-decoration:none;

}

.mainResourceCard:hover img, 
.mainResourceCard:focus-visible img{
    transition:all .5s ease-in-out;
    transform: scale(1.1);
    filter:blur(0px);
}

.mainResource_btn{
    min-height:70px;
    margin-top:18px;
    background-color: var(--meredithBGBlack);
    margin-bottom:18px;
    max-width:90%;
    margin-inline:auto;
    transition:all .5s ease-in-out;
}

.mainResourceCard:hover .mainResource_btn, 
.mainResourceCard:focus-visible .mainResource_btn{
    transition:all .5s ease-in-out;
    background-color: rgb(21, 138, 184);
}


















/* Color Sets */
.BG_Beginner {
    background-color: var(--col_Beginner);
}