*{
    margin:0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    --taizeButtonBG:rgb(35, 42, 75);
    --taizeButtonSecondary:rgb(4, 8, 51);
    --taizeButtonBorder:rgb(110, 123, 149);    
    --taizeCardBGDark:#40445B;
    --taizeButtonBGLight:#9FB2C2;
    scroll-behavior: smooth;    
}

.BGWrap{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color:rgb(255, 255, 255);
    z-index:2;
}

.pageWrapper{
    max-width:1175px;
    margin: 0 auto;
    background-color:white;
}

.pageWrapper p {
    margin-bottom:20px;
    padding:0 1em;
}

.pageWrapper{
    font-size:clamp(14px, 4vw, 17px);
}

.mainCopy{
    padding-top:1em;
}

.fullWidth{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.titleBar{
    background-color:rgb(41, 41, 41);
    text-align:center;
    color:white;
    padding:1.5em; 
    margin-top:16px;
    margin-bottom:16;    
    font-weight:700;
    line-height:1.4em;
}

.titleBar h2{
    font-size:clamp(20px, 6vw, 40px);
    text-transform: uppercase;
    letter-spacing:-.5px;
    margin:0;
    color:white;    
    font-weight:700;
    line-height:1.4em;
}

.titleBar h3{
    font-size:clamp(18px, 6vw, 25px);
    letter-spacing:-.5px;
    margin:0;
    color:white;
    font-weight:700;
}

.mainSelector{
    margin-top:16px;
    margin-bottom:16px;
}

.smallText{
    font-size:.8em;
    text-align:center;
}

.twoX2ButtonGrid{
    display:grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr));
    grid-auto-rows: minmax(175px, 1fr);
    gap:15px;
}

.taizeButton{
    background-color: var(--taizeButtonBG);
    color:white !important;
    display:grid;
    place-items: center;
    align-content:center;    
    text-decoration: none;
    padding: 1em;    
    transition:.25s ease-in-out;    
    border:6px solid var(--taizeButtonBorder);
    border-radius:70px;
    font-weight:700;
    font-size:clamp(16px, 2vw, 25px);
    text-align:center;
    margin-bottom:20px;
}

.selectorButton{
    margin:0;        
    border-radius:20px;
    border:6px solid var(--taizeButtonBorder);
}

.selectorButton:hover, .selectorButton:focus, .taizeButton:hover, .taizeButton:focus {
    background-color: var(--taizeButtonSecondary);
    color:white;
}

.selectorMain{
    font-size: clamp(20px, 3vw, 30px);
    letter-spacing:-.04em;
    color:white !important;
    font-weight:700;
    line-height:1.3em;
}

.selectorSub{
    margin-top:12px;
    font-weight:normal;
    font-size:.6em;
    letter-spacing:.5px;
}

.mainResources{
    background-color: #F3F3F3;
    padding:3em 0;
}

.mainResourceWrapper{
    max-width:1175px;
    margin:0 auto;
    padding:0;
}

.mainResourceWrapper p, .mainResourceWrapper h3{
    padding:0;
}

.resourceTitle{
    grid-area:header;
    text-align:center;
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(30px, 4vw, 45px);
    letter-spacing:-.06em;
    margin-bottom:1em;
    padding-left:1em !important;
    padding-right:1em !important;
    line-height:1.2em;
}

.resourceImgCopy{
    padding:0 3em;
    color:rgb(31, 31, 31);
}

.resourceImgCopy p{
    margin-bottom:35px;
}

.mainResourceWrapper{
    display:grid;
    grid-template-columns: 1fr 3.5fr ;
    grid-auto-rows: max-content;
    grid-template-areas: "header header";
    place-items:center;
}

.mainImage{
    max-width:100%;
    -webkit-filter: drop-shadow(4px 4px 2px #66666682);
    filter: drop-shadow(2px 2px 2px #999999c8);
}

.mainResources:nth-child(odd){
    background-color:rgb(31, 31, 31);
}

.mainResources:nth-child(odd) .resourceTitle{
    color:white;
}

.mainResources:nth-child(odd) .resourceImgCopy{
    color:white;
}

/* Resource Pages CSS */


/* Grid layouts for resource Pages */

.twoXTwoResourceWrapper{
    display:grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr));
    row-gap: 12px;
    column-gap: 8px;
}

.threeX3ResourceWrapper{
    display:grid;
    grid-template-columns: repeat( auto-fit, minmax(360px, 1fr));
    row-gap: 12px;
    column-gap: 8px;
    margin-top:18px;
}

.fourX4ResourceWrapper{
    display:grid;  
    grid-template-columns: repeat( auto-fit, minmax(275px, 1fr));
    margin-top:18px;
    column-gap: 12px;
    row-gap: 12px;
}

/* Grid layouts for resource Pages */

.musColCard{
    color:white;
    display:flex;
    flex-direction: column;
    justify-content: center;
    flex-grow:1;
    text-align:center;
    max-width:100%;
    background-color: rgb(229, 235, 240);
    border-radius: 20px;
    padding-top:20px;
    overflow: hidden;
    border:3px solid var(--taizeButtonBGLight);
}

.bookColCard{
    border-radius:10px;
}

.recordCard{
    padding-top:20px;
}


.musColInfo{
    background-color:var(--taizeCardBGDark);
    padding-bottom:15px;
    flex-grow:1;
}

.recordInfo{
    padding-bottom:8px;
}

.pageTitle{
    margin-top:0px;

}

.MusColFullTitle{
    background-color: var(--taizeButtonSecondary);
    margin-bottom:20px;
    padding:20px 10px;
    border-bottom: 4px solid var(--taizeButtonBGLight);
    min-height:120px;
    display:grid;
    place-items: center;
    align-content: center;
}

.bookColFullTitle{
    min-height:130px;
    display:grid;
    align-content: center;
}

.recordFullTitle{
    min-height:75px;
    padding:0;
    border-bottom: 2px solid var(--taizeButtonBGLight);
    margin-bottom:12px;
}

.seriesFullTitle{
    min-height:125px;
    padding:0;
    border-bottom: 2px solid var(--taizeButtonBGLight);

}

.MusColFullTitle p{
    margin-bottom:0;
}

.musColTitle{
    color:white;
    font-size:clamp(24px, 3vw, 30px);
    text-transform:uppercase;
    letter-spacing:-.03em;
    font-weight:700;
}

.bookColTitle{
    font-size:clamp(18px, 3vw, 24px);
    font-weight:700;
}

.recordTitle, .seriesTitle{
    font-size:clamp(14px, 2vw, 19px);
    letter-spacing:0;    
    font-weight:700;
}


.musColSubtitle{
    color:rgba(255, 255, 255, 0.8);
    letter-spacing:3px;
    font-size: clamp(14px, 2vw, 17px);
    margin-top:8px;
}

.bookColSubtitle{
    font-size: clamp(12px, 2vw, 16px);
    line-height:1.6em;
    letter-spacing:1px;
}

.recordSubtitle, .seriesSubtitle{
    font-size: clamp(10px, 2vw, 12px);
    line-height:1.5em;
    letter-spacing:1px;
}


.musColImg{
    max-width:90%;
    max-height:300px;
    border-radius: 30px;
    border:4px solid var(--taizeButtonBorder);
    background-clip: border-box;
    margin:0 auto 15px auto;
}

.bookColImg{
    max-height:275px;
    max-width:90%;
    border-radius:0px;
    border:1px solid var(--taizeButtonBorder);
}

.recordImg{
    max-height:205px;
    border-radius: 0;
    border:1px solid var(--taizeButtonBorder);
}

.seriesImg{
    max-height:250px;
    border-radius:0;
    border:1px solid var(--taizeButtonBorder);
}

.resourceButton{
    display:block;
    text-decoration:none;
    text-transform: uppercase;
    letter-spacing:-.05em;
    color:var(--taizeCardBGDark);
    font-weight:700;
    font-size:clamp(18px, 3vw, 23px);
    margin:10px 0;
    padding:.5em;
    background-color:var(--taizeButtonBGLight);
    transition: .2s ease-in-out;
    border-top: 2px solid var(--taizeButtonBGLight);
    border-bottom: 2px solid var(--taizeButtonBGLight);
}

.bookColButton{
    font-weight:700;
    font-size:clamp(18px, 3vw, 32px);
    letter-spacing:0px;
}

.recordButton{
    font-weight:700;
    font-size:clamp(14px, 3vw, 20px);
    letter-spacing:0px;
    padding:.2em;    
    margin: 4px 0 4px 0;
}

.fullSeriesButton{
    margin:30px auto;
    width:90%;
    border-radius:70px;
}

.resourceButton:hover,   
.resourceButton:focus{
    background-color: rgb(19, 18, 30);
    color:white;
    border-top: 2px solid var(--taizeButtonBGLight);
    border-bottom: 2px solid var(--taizeButtonBGLight);
}

.linkWrapper{
    display:flex;
    flex-direction:column;
    flex-grow:1;
    height:60%;
    justify-content: center;
}





/* Media Queries */
/* Desk Only */
@media only screen and (min-width: 765px){
    
    .HeaderMobile{
        display: none;
    }
        
}


/* Mobile Only */
@media only screen and (max-width:765px){

    .HeaderDesk, .mainImage{
        display: none;
    }

    .twoX2ButtonGrid, .mainResourceWrapper, .twoXTwoResourceWrapper{
        grid-template-columns: 1fr;
    }

    .musColInfo, .musColCard{
        border-radius: 0;
        border-left:0;
        border-right:0;
    }

    .linkWrapper{
        display:block;
    }

    .bookColFullTitle{
        border-bottom: 2px solid var(--taizeButtonBGLight);
        min-height:90px;
    }

    .fourX4ResourceWrapper{
        grid-template-columns: repeat( auto-fit, minmax(200px, 1fr));
    }

}