*{ 
    scroll-behavior: smooth;
}

.pagewrapper{
    --AllColor: #de356b;
    --GeneralColor:rgb(209, 75, 34);
    --BandColor:rgb(16, 16, 149);
    --OrchColor: rgb(109, 14, 109);
    --ChoirColor: rgb(18, 116, 47);
    --MidwestColor: rgb(15, 146, 163);
    --PercussionColor: rgb(175, 27, 27);
    /* max-width:1175px;
    margin-inline:auto; */
}

.pagewrapper section{
    margin: 10px auto;
}

.pagewrapper p {
    line-height: 1.6em;
    letter-spacing:-.5px;
    margin:1em 0;
}

.Banner{
    margin-bottom:0px;
    margin-top:-1em;
}

.CategorySelector{
    background-color:rgb(228, 228, 228);
    padding:1.5rem;
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    justify-content: center;
    border-top:1px solid rgb(207, 207, 207);    
    border-bottom:1px solid rgb(207, 207, 207);
}

.CategorySelector h3{
    width:100%;
    font-weight:bold;
    margin:0;
    text-align:center;
    color:rgb(39, 46, 87);
    font-size:clamp(15px, 4vw, 25px)

}

.CategoryButton {
    margin:0;
    display:grid;
    place-items:center;
    background-color:rgb(22, 22, 22);
    flex-basis:21%;
    text-align:center;
    color:white;
    text-decoration:none;
    padding: 15px 20px;
    min-width:150px;
    border-radius:20px;
    font-weight:bold;
    font-size: clamp(13px, 3vw, 18px);
    min-height:50px;

}

.ResourceSection{
    border-left: 1px solid rgb(71, 71, 71);
    border-right: 1px solid rgb(71, 71, 71);
    background: url(https://s3.amazonaws.com/cdn.giamusic.com/page_files/NeumeBG_AlphaWHITE10.png);
    background-size:contain;
    background-color:rgb(34, 34, 34);
}

.ResourceSection h2{
    font-weight:bold;
    text-align:center;
    color:white;
    background-color:black;
    padding:20px;
    margin-top:15px;
    font-size: clamp(20px, 4vw, 35px);
    line-height:1.4em;
}

.ResourceCardWrapper{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
   margin-top:25px;
}

.ResourceCard{
    background:white;
    width:45%;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    border:2px solid black;
    padding: 10px 10px; 
    margin-bottom:30px;
    border-radius:20px;
    border: 5px solid rgb(178, 191, 235);
    justify-content: center;
}

.ResourceCard img{
    max-width:30%;
    margin:auto;
}


.CDCard{
    width:29%;
    flex-direction:column;
}

.CDCard img{
    max-width:150px;
}



.OnePxBorder {
    border:1px solid rgb(180, 180, 180);

}

.Title{
    display:flex;
    justify-content:center;
    flex-direction:column;   
    align-content:center;
    max-width:65%; 
    text-align: center;
    margin:0;
    padding: .5rem;
}

.CardTitle{
    font-size: clamp(18px, 3vw, 22px);
    font-weight:bold;
    margin-bottom:.2em;
    line-height:1.1em;
}

.CardSubTitle{
    font-size:12px;
    margin-block:5px;
    line-height:1.5em;
}

.AuthorLine{
    font-size:15px;
    padding:5px 0;
    color:#659fe2;
    font-weight:bold;
    border-bottom: 1px solid rgb(223, 223, 223);
    padding-bottom:10px;
}

.CardDescription{
    padding:5px;
    font-size:11px;
    margin-top:10px;
    text-align:left;
    line-height:1.6;
    color:rgb(114, 114, 114);
}

.ResCardButton {
    width: 100%;
}


.ResCardButton a{
    margin:15px auto 5px auto;
    max-width:90%;
    display:flex;
    justify-content: center;
    align-items: center;
    background: rgb(9, 70, 128);
    height:40px;
    text-align:center;
    color:white;
    text-decoration:none;
    border-radius:40px;
}



.ResCardButton a:hover, .ResCardButton a:focus,
.CategoryButton:hover, .CategoryButton:focus{
    background: rgb(11, 24, 93);
    transition: .4s ease-in-out;
    color:white;
}

.blankCard{
    opacity:0;
}

.oddCard{
    flex-basis:1;
}

/* Button and Header Colors */

.AllButton, #AllResources h2{
    background-color: var(--AllColor);
}

.GeneralButton, #GeneralResources h2{
    background-color: var(--GeneralColor);
}

.BandButton, #BandResources h2{
    background-color: var(--BandColor);
}

.OrchButton, #OrchResources h2{
    background-color: var(--OrchColor);
}


.ChoirButton, #ChoirResources h2{
    background-color: var(--ChoirColor);
}

.MidwestButton, #MidwestResources h2{
    background-color: var(--MidwestColor);
}

.PercussionButton, #PercussionResources h2 {
    background-color: var(--PercussionColor);
}


#MidwestResources{
    padding-bottom:25px;
}

@media only screen and (min-width: 690px){
	.MobileBanner{
         display: none;	
	}
}

@media only screen and (max-width: 690px){
	.DeskBanner{
         display: none;	
	}

    .CategoryButton{
        min-width:90%;
    }

    .ResourceCard{
        width:95%;
    }
}

@media only screen and (max-width: 425px){

    .ResourceCard img{
        max-width:60%;
        margin:auto;
    }

    .Title{
        max-width:95%;
    }
}