*{
    margin:0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    --habitsButton:#2C5592;
    --habitsButtonHov:rgb(25, 34, 72);
    --habitsBand:#208F24;
    --habitsStrings:#512C92;
    --habitsChoral:#922C2C;
    --habitsLeadership:#2C5592;
    --habitsResources:rgb(50, 50, 50);
    --habitsindivBegin:#208F24;
    --habitsYellowCallout:rgb(255, 204, 0);
    --habitsIndivSuccessMus:#1f79b3;
    --habitsIndivMidMus:#d19b24;
    --habitsIndivMidStr:#382e60;
    --habitsIndivStr:#291826;
    --habitsIndivChoir:#982B31;
    --habitsIndivPathway:#005CA7;
    --habitsIndivMariachi:#573E99;
    scroll-behavior: smooth;    
}

.BGWrap p,.BGWrap h1.BGWrap h2,.BGWrap h3,.BGWrap h4,.BGWrap h5,.BGWrap h6{
    margin-bottom:16px;
    margin-top:16px;
    line-height:1.5em;    
    padding: 0 .5em;   
}

.BGWrap h1,.BGWrap h2,.BGWrap h3,.BGWrap h4,.BGWrap h5,.BGWrap h6{
    margin: 24px auto;
    font-weight:bold;
    letter-spacing:0.5px;    
    padding: 0;   
    line-height:1em;
}

h1{
    font-size:clamp(28px, 5vw, 48px);
    margin:.5em auto;
}

h2{
    font-size:clamp(22px, 4vw, 40px);
}

.italText{
    font-style: italic;
}

.serifFont{
    font-family: 'Martel', serif;
    font-weight:900 !important;
    font-variant: small-caps;
}

.centerText{
    text-align:center;
}

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

.habitsButton{
    background-color: var(--habitsButton);
    padding:20px;
    display:grid;
    place-items:center;
    text-align:center;
    color:white;
    text-decoration: none;
    font-weight:bold;
    font-size: clamp(14px, 3vw, 18px);
    border-radius:30px;
}

.catBand{
    background-color: var(--habitsBand) !important;
}

.catChoral{
    background-color: var(--habitsChoral) !important;
}

.catLeadership{
    background-color: var(--habitsLeadership) !important;
}

.catStrings{
    background-color: var(--habitsStrings) !important;
}

.catResources{
    background-color:var(--habitsResources);
    padding:1em;
}

.indivBeginBG{
    background-color: var(--habitsindivBegin) !important;
} 

.indivMidMusBG{
    background-color: var(--habitsIndivMidMus) !important;
}

.indivSuccessMusicBG{
    background-color: var(--habitsIndivSuccessMus) !important;
}

.indivMidMusStrBG{
    background-color: var(--habitsIndivMidStr) !important;
}

.indivStrBG{
    background-color: var(--habitsIndivStr) !important;
}

.indivChoirBG{
    background-color: var(--habitsIndivChoir) !important;
}

.indivPathwayBG{
    background-color: var(--habitsIndivPathway) !important;
}

.indivMariachiBG{
    background-color: var(--habitsIndivMariachi) !important;
}

.colorWhite{
    color:white;
}

/* GIA Page layout */

.BGWrap{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color:white;
    z-index:2;
}

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

.pageWrapper p{
    font-size:clamp(14px, 2vw, 16px);
}

.smallCopy{
    font-size:13px !important;
    line-height:1.8em;
}

.fullWidth{
    min-width: 99.08vw;
    width:calc(100vw - var(--scrollbarWidth));
    margin-inline-start: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
}

.grid{
    display:grid;
    gap:.5em;
}




/* Homepage CSS */

.bookFanWrap{
    margin-top:34px;
    padding-top:2em;
    background:url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/Habits_GREYBG.png);
    background-blend-mode: color-burn;    
    background-color: #BDC5D4;
    background-size: cover;    
    display:grid;
    place-items:center;
}

.bookFan{
    width:90%;
    max-width:1350px;
}

.mainCopy h1{
    text-align:center;
    border-bottom:1px solid rgb(218, 218, 218);
    padding-bottom:16px;
}

.methodHeader h1{
    border-bottom:none;
}

.habitsFullHead{
    color:white;
    background-color: rgb(33, 32, 36);
    padding:1em;
    text-align:center;
}

.habitsFullHead h2{
    color:white;
}

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


.seriesButton{
    width:95%;
    margin:auto;
    font-size:clamp(22px, 3vw, 28px);
    line-height:1.4em;
    min-height:6em;    
    transition:background-color .5s ease-in-out;
}

.seriesButton:hover, .seriesButton:focus{
    background-color:var(--habitsButtonHov);
    color:white;
}

.digitalCalloutWrapper{
    background:url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/Habits_GREYBG.png);
    background-blend-mode: soft-light;      
    background-color:#224D70;
    background-size:cover;
    background-position:top;
    padding:4em 3em;
    border-top: 10px solid var(--habitsButtonHov);    
    border-bottom: 10px solid var(--habitsButtonHov);
    margin-top:20px;
    margin-bottom:20px;
}

.digItemWrapper{
    grid-template-columns: 1fr 1fr;
    max-width:1175px !important;
    margin:auto;
    gap:30px;
}

.dCHeader{
    color:#C6DEE1;
    font-size: clamp(36px,4vw, 58px);
}

.digText p{
    color:white;
    font-weight:500;
    line-height:1.75em;
    padding:0;
}

.digText1{
    grid-column:1/2;
    grid-row:1/2;
}

.digText2{
    grid-column:1/2;
    grid-row:2/3;
}

.digiAvailPhoto{
    width:90%;
    max-width:475px;
    grid-row:1/3;
    grid-column-start:2;
    margin:auto;
    border-radius:40px;
    border:5px solid lightblue;
}

.digCalloutButton{
    background-color:#C6DEE1;
    color: var(--habitsButton);
    grid-column:1/3;
    width:80%;
    margin:auto;
    border:3px solid transparent;
}

.digCalloutButton:hover, .digCalloutButton:focus{
    color:white;
    background-color:var(--habitsButton);
    border:3px solid white;
    transition: .45s ease-in-out;
}

.habitsTeamWrap{
    grid-template-columns: repeat(auto-fit, minmax(min(335px,100%), 1fr)); 
    place-items:center;   
    gap:22px;
}

.habitsTeamPhoto{
    width:90%;
    display:block;
    margin:18px auto;
    border-radius:30px;    
    border: 1.9em solid rgba(9, 9, 70, 0.416);    
    border-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/HabitsPhotoFrame.jpg) 30 round;
}


.habitsTeamCard{
    width:100%;
    max-width:375px;
    color:white;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: space-evenly;
    background-color:#414F64;
    padding:2em 1em;
    border-radius:18px;
    box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.39);
}

.habitsTeamIMG{
    max-width:180px;
    border-radius:20px;    
    border: 4px solid rgb(214, 249, 253);
}

.habitsTeamName{
    color:rgb(214, 249, 253);
    font-size:clamp(24px, 3vw, 32px);
    line-height:1.2em;
    text-align:center;
    margin:8px 0;
}

.habitsTitle{
    margin:8px 0;
    font-style: italic;
    font-size:.8em !important;
    color:white;
}

.habitsTeamButton{
    color: var(--habitsButton);
    width:80%;
    background-color:#DCE2EC;
    padding:10px;
    margin-top:20px;
    transition: .5s ease-in-out;
}

.habitsTeamButton:hover, .habitsTeamButton:focus{
    background-color:#62a5db;
    color:white;
}




/* Method Pages */


.methodCatSelect{
    background-color: rgb(42, 41, 44);
    padding: 1em 0 2em 0;
    color:white;
}

.catButtonWrap{
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    max-width:1175px;
    margin:0 auto;
    padding: 0 15px;
    gap:20px;
}

.catButton:hover, .catButton:focus, .methodsButton:hover, .methodsButton:focus, .resourceButton:hover, .resourceButton:focus,
.resourcesMethodButton:hover, .resourcesMethodButton:focus, .conductorButton:hover, .conductorButton:focus, .editionButton:hover, .editionButton:focus, .HUButton:hover, .HUButton:focus, .HMusEdButton:hover, .HMusEdButton:focus

{
    background-image: linear-gradient(rgba(255, 255, 255, 0.616), rgba(0, 0, 0, 0.26)) !important;
    background-blend-mode:overlay !important;
    color:white;
}

.methodHeader{
    padding: 5em 1em;
    text-align:center;
    background-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/Habits_GREYBG.png);
    background-blend-mode:soft-light;
    background-size:cover;    
}

.methodHeader h1{
    color:white;
}

.methodHeader h2{
    color:white;
}

.bookElement{
    margin:2em 0;
}


.methodBookImgTitle{
    grid-template-columns: 1fr 1fr;
    place-items:center;
}

.methodImage{
    display:block;
    width:90%;
    max-height:350px;
    margin:auto;
}

.methodTitle h3{
    text-transform: uppercase;
    font-size: clamp(18px, 4vw, 44px);
    line-height:1.25em;
    color:black;
}

.methodCopy{
    background-color:#2F3743;
    color:white;
    padding:1em 3em;
    margin-top:28px;
    border-radius:0px;
    border:3px solid rgb(167, 167, 167);
}

.methodCopy p {
    font-size: 14px;
    line-height:1.65em;
    color:rgb(239, 240, 240);
    font-weight:500;
}

.methodCopy a{
    text-decoration:none;
    color: rgb(233, 246, 151);
    font-weight: bold;
}

.methodCopy ul, .resourceCopy ul{
    padding-left:45px;
    line-height:1.2em;
    list-style:disc;
}


.methodCopy li{
    border-bottom: 1px solid rgba(112, 110, 110, 0.3);
    font-size:12px;        
    padding:.55em 0;
}

.methodCopy li:nth-of-type(1){
    border-top: 1px solid rgba(112, 110, 110, 0.3);
}


.methodsButton{
    width:70%;
    margin:25px auto;
    color:white !important;
}

.catButton:hover, .catButton:focus{
    color:white;
}

.fullLine{
    margin-top:2em;
    margin-bottom:2em;
    display:block;
    background-color:rgba(179, 179, 179, 0.357);
    height:3px;
}




/*  Resource Pages */




.resourceItemWrapper{
    grid-template-columns: 300px 1fr;
    padding:10px 18px;
}

.resourceFullLine{
    margin-top:34px;
    margin-bottom:12px;
}

.resourceImage{
    width:90%;
    display:block;
    margin:auto;
}

.resourceContent, .resourceImageContain{
    display:flex;
    flex-direction: column;
    justify-content:space-evenly;
}

.resourceContent p{
    padding:0;
}

.resourceTitle{
    margin-bottom:.2em !important;
    font-size:clamp(18px, 3vw, 28px);
}

.resourceSubtitle{
    font-size:14px !important;
    font-style:italic;
    margin-bottom:1em !important;
    display:block;
    margin-top:4px !important;
}

.resourceBy{
    font-weight:bold;
    color: var(--habitsButton);
}

.resourceFullTitle{
    padding-bottom:10px;
}

.resourceCopy *{
    font-size:13px !important;
}

.resourceCopy ul{
    margin-top:13px;
}

.resourceCopy li{
    margin-bottom:1em;
}

.resourceCopy{
    background:rgb(244, 244, 244);
    padding:10px 20px;
    border:.25px solid rgb(201, 210, 225);
}

.resourceButton{
    width:70%;
    margin:auto;
    margin-top:24px;
}

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

.resourcesMethodItem{
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    flex-grow:1;
    height:100%;
}

.resourceMethodImage{
    max-width:90%;
    margin:auto;
    display:block;    
    border-radius:15px;
}

.resourceMethodImage:hover{
    max-width:94%;
    transition: all .3s ease-in-out;
}

.resourceMethodTitle{
    font-weight:bold !important;
    text-align:center;
    margin-top:12px !important;
    margin-bottom:0px !important;
}

.resourcesMethodButton{
    width:80%;
    margin:auto;
    margin: 12px auto;
    padding:12px;
    font-size:.8em;
}


/* Individual Book Pages */


.indivHeader{
    text-align:center;
    padding:2em 15px;    
}

.indivHeader h1{
    color:white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.399);
    font-size:clamp(24px, 4vw, 50px);
    max-width:21ch;
    line-height:1.3em;
}

.indivHeader h2{
    color:white;
    text-shadow:1px 1px rgba(0, 0, 0, 0.306);
}

.indivBy{
    color:white;
    font-size:14px;
    letter-spacing:1px;
    text-shadow:1px 1px rgba(0, 0, 0, 0.526);
    font-weight:600;
}

.heroBookBG{
    background:url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/Habits_GREYBG.png);
    background-blend-mode: hard-light;   
    background-size: cover;   
    padding: 3em 14px;
    display:grid;  
    place-items: center;
}

.heroBooks{
    width:80%;
    max-width:500px;
}

.indivFeatures{
    background-color:rgb(25, 25, 32);
    padding-top:4px;
    
}

.indivFeatureText{
    margin:8px auto;
    max-width:1175px;
    color:white;    
    font-size:clamp(14px, 3vw, 18px) !important;
}

.indivFeatureHighlight{
    font-family: 'Martel', serif;
    font-weight:900;
    letter-spacing:1px;
    text-transform: uppercase;
    color: var(--habitsYellowCallout);
}

.indivFullLine{
    height:3px;
    margin-top:8px;
    margin-bottom:8px;
}

.indivInfoSection{
    margin-top:24px;
    margin-bottom:24px;
}

.indivInfo p{
    font-size:14px !important;
    line-height:1.7em;
}

.indivInfo ul, .HUCopy ul, .googleForm{
    background-color:rgb(243, 243, 244);
    padding:14px;
    border:1px solid rgb(211, 211, 223);
    list-style:disc;
}

.googleForm{
    font-size:14px !important;
    line-height:1.4em;
}

.indivInfo li{
    font-size:12px !important;
    margin-bottom:6px;
    line-height:1.8em;
    margin-left:2em;
}

.editionWrapper{
   grid-template-columns: repeat(auto-fit, minmax(min(375px,100%), 1fr));
   gap:16px;
   padding:0 24px;
   margin:24px auto;
}

.conductorButton{    
    background-color:rgb(34, 34, 34);
}

.directorButton{
    background-color:rgb(34, 34, 34);
    min-height:100px;
    border-radius:60px;    
    grid-column: 1/-1;
}

.editionButton{
    letter-spacing: .2px;
    text-shadow: .75px .75px 1px rgba(0, 0, 0, 0.601);
}

.relatedResource{
    display:block;
    width:100%;
    grid-column: 1/-1;
    font-size:clamp(26px, 4vw, 40px);
    text-align: center;
}

.testimonialWrapper{
    grid-template-columns: repeat(auto-fit, minmax(min(450px,100%), 1fr));
    margin-top:24px;
    margin-bottom:24px;
}

.testimonialCard{
    background-color: rgb(37, 34, 40);    
    padding:1.5em;
    width:90%;
    max-width:650px;
    margin:auto;
    border-radius:30px;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.testimonialCard p{
    color:white;
    left:0;
}

.testimonialCopy{
    font-size:14px !important;
    line-height:2em;
    padding:none;
    display:block;
    left:0;
}

.testimonialCopy::before{
    content: '“';
    font-size:50px;
    position:relative;
    top:25px;
    right:2px;
    color:var(--habitsYellowCallout);
}

.testimonialCopy::after{
    content: '”';
    font-size:50px;
    position: relative;
    top:25px;
    line-height:12px;
    color:var(--habitsYellowCallout);
}

.testimonialInfo > p{
    font-size:12px;
    text-align:right;
    margin:0;
    margin-bottom:2px;
}

.testimonialBy{
    font-weight: bold;
    font-size:16px !important;
}

.testimonialLocal{
    font-style: italic;
}


/* Habits Universal */

.HabitsUniversalHero, .HabitsMusEdStudentHero{
    background: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/HabitsU/HabitsU_NeumeBG.png);
    background-blend-mode: hard-light;
    background-size:cover;
    background-color:#0e3817;
    display:grid;
    place-items:center; 
    height:60vh;
    padding:2em 1em;
    
    border-top: 15px solid rgb(180,206,78);
    border-bottom: 15px solid rgb(180,206,78);
}

.HULogo{
    display:grid;
    place-items:center; 
}

.HULogoIMG{
    width:90%;
    max-width:650px;
}

.HUButton{
    background-color: rgb(74, 166, 41);
    width:75%;
    max-width:750px;
    margin:auto;
}

.HUCopy{
    margin:24px auto;
}

.HUCopy li{
    font-size:14px;
    margin-bottom:.8em;
}

.HUCopy ul{
    list-style:disc;
    padding-left:3em;
    padding-top:24px;
}

.HabitsMusEdStudentHero{
    background: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/HABITS_Pages/Assets/HabitsU/HabitsMusEd_Bg.jpg);
    background-size:cover;    
    border-top: 25px solid #22408d;
    border-bottom: 25px solid #22408d;
}

.HMusEdTitle{
    text-align:center;
}


.HMusEdTitle h2{
    font-size:clamp(24px, 5vw, 56px);
    font-weight:700;
    text-align:center;
    text-shadow:2px 2px 1px rgba(0, 0, 0, 0.327);
}

.HMusEdButton{
    width:75%;
    max-width:750px;
    margin:auto;
    background-color:rgb(21, 39, 80);
}

.comingSoon{
    background-color:rgb(33, 33, 33);
    padding:40px !important;
    margin-bottom:0 !important;
    font-size:clamp(24px, 4vw, 56px);
    color: #EFDD79;
}




/* 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;
    }

    h1,h2,h3,h4,h5,h6{
        padding:0 20px;
    }

    p{
        padding: 0 1.5em;   
    }

    .digitalCalloutWrapper{
        padding:2em 1em;
    }

    .digItemWrapper{
        grid-template-columns: 1fr;
        gap:20px;
    }

    .digText1{
        grid-column:1;
        grid-row:1;
    }
    
    .digText1{
        grid-column:1;
        grid-row:1;
    }

    .digCalloutButton{
        grid-column:1;
    }
    
    
    .digiAvailPhoto{
        grid-column:1;
        grid-row:4;
        border-radius:0px;
        border:2px solid lightblue;
    }

    .catButtonWrap{
        grid-template-columns: 1fr 1fr; 
    }

    .methodBookImgTitle, .resourceItemWrapper{
        grid-template-columns: 1fr;
        place-items:center;
    }

    .methodCopy{
        margin-top:10px;
        padding:.5em;
        border-radius:0;
        border-width:2px;
    }   
    
    .resourceTitle{
        padding:0;
    }

    .resourceImage{
        width:100%;
        max-height:310px;
    }

    .indivInfo ul{
        border:none;
    }

    .testimonialCopy{
        margin-top:0;

    }

    .testimonialCard{
        padding: 10px 10px;
        padding-bottom:20px;
    }




}