*{
   /* max-width:1175px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin:auto; */
    box-sizing: border-box;
    --G4Accent:#5D6362;
    --W4Accent:rgb(133, 30, 30);
    --Rit2Accent:rgb(85, 16, 16);
    --G3Accent:rgb(22, 32, 117); 
    --VoicesAccent:rgb(6, 26, 68);   
    --OneIneAccent:rgb(73, 27, 73);
    --LMGMAccent:rgb(8, 87, 8);
    --OramosAccent: rgb(146, 62, 5);  
    --SeasonalMissAccent: rgb(98, 78, 40);
    --WeCelebrateAccent:rgb(41, 18, 54);
    --CelebremosAccent: #706045;
    --WordandSongAccent: #504537;
    --DivineOfficeAccent: #242324;
}

/* Section 1 - Main Header, image, and title */

.BGWrap{
    width: 99.18vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-image:url(https://s3.amazonaws.com/cdn.giamusic.com/page_files/NeumeBG_AlphaWHITE10.png), linear-gradient(rgb(22, 22, 22), rgb(27, 27, 27));
    background-color:rgb(26, 26, 26);
    z-index:2;
    margin-top:15px;
  }


#PageWrapper{
    
    max-width:1140px;
    margin:auto;
    background-color: white;
    padding-bottom:25px;
    border-right: 4px solid #CACACA;
    border-left: 4px solid #CACACA;
}


#PageWrapper h1, #PageWrapper h2, #PageWrapper h3, #PageWrapper h4{
    font-weight:bold;
}

#PageWrapper p {
    margin-bottom:0;
    padding-left: 1em;
    padding-right:1em;
}

#PageHeader{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.157), rgb(255 255 255 / 25%), rgba(0, 0, 0, 0.157));    padding-top:2em;    
    margin-top:-32px;
}

#PageHeader h1{
    display:block;
    color:white;
    text-align:center;
    font-size: clamp(25px, 4vw, 50px);
    padding: 1em 0 1em 0;
}

#PageWrapper sup{
    font-size:.7em;
    font-weight:normal;
}

.HymnalHeader{    
    border-bottom: 3px solid #242424;
    border-top: 3px solid #242424;    
}

.MissalText{
    padding: 0 2em 3em 2em;
    border-bottom: 3px solid #242424;
    border-top: 3px solid #242424;
}

.MissalText h1{
    padding:1em 0 .5em 0 !important;
    margin:0;
}

.MissalText p{
    margin:0;
    text-align:center;
    color:white;
    font-size: clamp(12px, 4vw, 20px);
    font-weight:bold;
    line-height:1.3em;
}

.MissalDeliveryText{
    color:rgb(255, 196, 0);
}

.MissalExplanation {
    font-size:.9em !important;
    font-weight:normal !important;
    line-height:1em !important;
    margin-top: 15px !important;
}


.HeaderWrapper{
    padding: 40px 0;
    background-color: white;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap:wrap;
    border-top: 3px solid #242424;
}

.HeaderImages{
    display: flex;
    place-items: center;
    justify-content:center;
    height:40rem;
}

#BookCircle{
    max-height:330px;
    max-width:95%;
}

#TitleArt{
    max-height:100%;
    max-width:100%;
    width:600px;
}

#TallTitle{
    width:300px;
    max-width:100%;
}

/* Section 1 END - Main Header, image, and title */
/* Section 2 - Info, Pie Chart, Features */

section.container ul {
    list-style: square;
    padding: 20px;
}
   
section.container li {
    padding-bottom: 10px; 
}

.InfoWrapper{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    margin:1em auto;
    align-items: center;
}

.TextInfo{
    display:grid;
    place-items:center;
    color: #222;
    max-width:350px;
}

.TextInfo p {
    font-size: clamp(32px, 4vw, 50px);
    text-align:center;
    font-weight:bold;
    letter-spacing:-1.5px;
    padding:0 !important;
    margin-top:0 !important;
}

section.container ul{
    padding:0;
}

section.container li{
    list-style-position: outside;
}



.PieChart{
    display:block;
    max-width:300px;
    width:100%;
    padding: 1em 0;
    height:100%;
}

.InfoCopy{
    color:white;
    padding: 3em 3vw !important;
    font-size: clamp(14px, 2vw, 17px);
    line-height:1.7em;
    border-top: 3px solid #242424;
    border-bottom: 3px solid #242424;
}

.InfoCopy p {
    margin-bottom:1.2em !important;
}

.FeaturesCopy{
    background-color: #ebebeb;
    padding:2em 0;
    margin:1.5em auto;
    border-top:3px solid rgb(202, 202, 202);
    border-bottom:3px solid rgb(202, 202, 202);
}

.FeaturesCopy h2{
    font-weight:bold;
    margin-bottom:32px;
    color: #222;
    font-size:3em;
    font-size: clamp(28px, 5vw,45px);
    letter-spacing:-2px;
    padding-left:1em;
}

.FeaturesCopy ul{
    list-style:circle inside !important;
    font-size: clamp(14px, 2vw, 17px);
    padding-left:5em !important;
    display:block;    
}

.FeaturesCopy li{
    margin: 10px 0;
    line-height:1.6em;
    padding-right:.5em;
}

.FeaturesButton{
    width:800px;
    max-width:90%;
    margin:15px auto 0px auto !important;
}

.VideoFrame{
    display:grid;
    place-content: center;
    padding:1em;
    background-color:#e7f2f5;
    margin-bottom:20px;
    justify-items:center;
}

.VideoFrame iframe{
    max-width:90%;
}


.VideoFrame p{
    text-align:center;
    margin:15px auto;
}

/* Section 2 END- Info, Pie Chart, Features */
/* Section 3 Editions and Additional */

.TitleDivider{
    padding:3em 1em;
    margin-bottom:20px;    
    border-bottom: 3px solid #1f1f1f;
    border-top: 3px solid #1f1f1f;
}

.TitleDivider h3{
    color: white;
    font-size: clamp(25px, 4vw, 40px);
    text-align:center;
    text-transform: uppercase;
}

.ButtonWrapper{
    display:flex;
    flex-grow:1;
    flex-basis: 100%;
    gap:1em;
    margin:1em 0;
    justify-content: space-evenly;
    flex-wrap:wrap;
}

.PageButton {
    display:grid;
    place-items:center;
    padding:.8em;
    max-width:70%;
    text-align:center;
    color:white;
    border-radius:40px;
    text-decoration:none;
    font-size: clamp(15px, 3vw, 25px);
    font-weight:bold;   
    margin:0 auto;    
    
    border: 2px solid #000000;
}

.PageButton:hover, .PageButton:focus, .PageButton:active{
    background-image: linear-gradient(rgba(255, 255, 255, 0.616), rgba(0, 0, 0, 0.26));
    background-blend-mode:overlay;
    color:white;  
    transition: all 2s ease-in-out;
}

.BottomButtons{
    padding:0;
}

.BottomButtons a {
    font-size: 1em;
}

.PewChoral{
    width:26%;
}

.HalfButton{
    width:48%;
}

.divineButton{    
    font-size: clamp(16px, 3vw, 20px);
    background-color: rgb(100, 100, 100);
    margin-block:1em;
    max-width: min(90%, 750px);
}

.divineAccomp{
    margin-top:1em;
}

.divineInfo{
    margin-block:40px;
}

.divineInfo p{
    margin:unset;
    font-size:clamp(15px, 5vw,18px);
    max-width:70ch;
    text-align:center;
    line-height:2;
    color:rgb(73, 73, 73);
} 

.AccompWrapper{
    margin:1em 0;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}

.VoicesAccomp{
    grid-template-columns: 1fr 2fr;
}

.FourColumn{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;    
    place-content:center;
}

.SeasonalResourceOptions, .DigitalDownload{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top:15px;
}

.SeasonalResourceOptions img{
    max-width:75%;
    margin:0 auto 15px auto;
}

.SeasonalResourceOptions p{
    font-size: clamp(10px, 3vw, 16px);
    width:98%;
    color:white;
    text-align:center;
    padding:15px 5px;
    font-weight:bold;
    text-transform:uppercase;
    flex-grow:1;
    display:flex;
    flex-direction:column;
    place-content: center;
}

.MissalSize{
    font-size:.8em;
    font-style: italic;
    font-weight:normal;
    text-transform:none;
    display:block;
    margin-top:15px;
}
    
.AccompButton{
    width:80%;
    margin:5px;
    padding:.5em;
    font-size: clamp(15px, 3vw, 20px);
}

.MissIndexDates{
    font-size:12px;
    font-weight:normal; 
    font-style:italic; 
    display:block; 
    margin-top:4px;
    letter-spacing:1px;
}

.MissalIndexButton{
    padding:10px;
    font-size:clamp(12px, 3vw, 20px);
}

.MissalitoButton{
    background-color:rgb(58, 58, 58);
}

.AccompCell{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
}


.AccompImage{
    max-width:70%;
    padding:.3em;
    max-height:250px;
}

.AdditionalImage{
    max-width:70%;
    max-height:400px;
}

.AdditonalWrapper{
    margin:30px auto;
    display:grid;
    grid-template-columns: 1fr 2fr;
    align-items:center;
    justify-content: space-evenly;
}

.AdditionalCopy{
    display:grid;
    place-items:center;
    max-width:100%;
    text-align:center;
}

.G3AdditionalWrapper, .OiFAdditionalWrapper{
    grid-template-columns: 1fr 1fr 1fr;
}

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

.AddTitle{
    font-weight:bold;
    font-size:clamp(16px, 4vw, 24px);
    margin-top:0;
}

.BinderButton{
    grid-area:1fr;
}

.BinderImage{
    width:90%;
    max-width: 500px;
    -webkit-filter: drop-shadow(5px 5px 5px #222222);
    filter: drop-shadow(5px 5px 5px #222222);
    margin-bottom:12px;
}


.BinderImageContain{
    background-image: linear-gradient(rgb(43, 43, 43), rgb(40, 39, 44));
    background-color:#2d2d2d;
    padding:30px 0;
}

.BinderImageContain h3, .BinderImageContain p{
    color:white;
}

.BinderImageContain h3{
    font-size:clamp(20px, 4vw, 40px);
    margin-bottom:10px;
}


.BinderImageContain p{
    font-size:clamp(12px, 2vw, 16px);
    letter-spacing:2px;
    font-style: italic;
    margin:0 0 10px 0;
    opacity:50%;
}

.AddBinderButton{
    margin:8px 0 !important;
    padding:5px !important;
}

.BinderStack{
    max-height:500px !important;
    max-width:90%;
}

.BinderButtonWrapper{
    grid-template-columns: 1fr 1.5fr;
}

.BinderButtonWrapperSers4{
    grid-template-columns: 1fr;
    margin-bottom:15px;
}

.BinderImageSers4{
    max-width:700px !important;
}


.G3AddTitle{
    font-size:1.3em;
}

.AddSubtitle{
    font-style: italic;
    font-size:.8em; 
    margin-top:10px;
    max-width:75ch;
}

.AddButton{
    width:80%;
    font-size:1em;
    margin:20px 0;
}

.AddBorder{
    display:block;
    margin: 20px 0;
    height:2px;
    width:100%;
}

.FundWrapper{
    margin-top:18px;
    display:grid;
    grid-template-columns: 40% 60%;
    min-height: 300px;
    background-color:rgb(23, 26, 47);
}

.FundImage{
    background-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/DoIt/VideoSeries_WebData/WebPages/Hymnals%20and%20Missals%202022/Assets/Fundraising/GIAHymnals_Fundraising_Mobile.png);
    background-size: cover;
    background-position: right;
}

.FundText{
    color:white;
    text-align:center;
    display:grid;
    align-content: center;
    justify-items: center;
}

.FundText h3{
    color:white;
    font-size:1.5em;
    font-weight:bold;
    text-transform: uppercase;
    margin-bottom:15px;
}

.FundText p{
    margin-bottom:20px !important;
    font-size:.9em;
}

.FundButton{
    background-color: rgb(40, 117, 58);
}

.lectionaryMissalWrap > p {
    text-align: center;
    max-width:85ch;
    margin-inline:auto;
    line-height:1.7;
}

.lectMissButton{
    padding:15px;
    max-width:500px;
    width:100%;
    font-size:clamp(16px, 3vw, 20px);
    margin-bottom:18px;
    margin:0;
}

.lectMissCopy{
    margin-bottom:20px;
}

.fullLengthImage{
    max-width:100%;
}

.lectionaryMissalImage{
    margin:auto !important;
    display:block;
    width:90%;
    max-width:850px;
}

.lectMissButtonWrapper{
    gap:12px;
    margin-block: 45px;
}

.WASSMAccompTitle{
    font-size:14px;
    font-weight:normal;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom:8px !important;
    color:rgb(95, 93, 93);
}

.WASSMAccompEdition{
    margin-top:0;

}



/* 04 Media Queries */


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

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

    .DeskBanner{
        display: none;	
   }
    
    .HeaderBook{
        display:none;
    }

    .TextInfo{
        width:100vw;
        max-width:100%;
    }

    .FeaturesCopy h2{
        text-align:center;
        padding-left:0;
        padding-bottom:.5em;
    }

    .FeaturesCopy ul{
        padding-left:1em !important;
    }


    .PewChoral{
        width:100%;
    }
    
    .AdditonalWrapper, .VoicesAccomp, .SeasonalWrapper, .FundWrapper{
        grid-template-columns: 1fr;
    }

    .SeasonalWrapper{
        grid-template-columns: 1fr 1fr;
    }
    
    .FundImage{
        display:none;
    }

    .AdditionalImage{
        width:50%;
        max-width:225px;
    }

    .lectMissButton{
        max-width:80%;
    }

    
        
}


.EmailSection{
    display:flex;
    /* background-image: url(https://s3.amazonaws.com/cdn.giamusic.com/page_files/NeumeBG_AlphaWHITE10.png); */
    background-color:#0A0C30;
    padding:50px 0;
    flex-wrap:wrap;
    justify-content:space-evenly;
    margin:1em auto;
    
}

.EmailContain{
    flex:2;
    display:grid;
    place-items:center;
}

.EmailCopy{
    width:80%;
    color:white;
    font-weight:bold;
    font-size: clamp(12px, 3vw, 20px);
    text-align:center;
    line-height:1.5em;
    padding-bottom:1em;
    min-width:280px;

}

.EmailImage{
    max-width:375px;
    min-width:200px;
    padding:0 25px;
    display:grid;
    margin:15px 0;
    place-items:center;
}

.EmailImage img{
    max-width:100%;
}

.EmailButton{
    background-color:#008C62;
    color: white !important;
    width:70%;
    padding:1em;
    font-size: clamp(12px, 3vw, 20px);
}


/* Class below sets BG to Page Color */

.G4BG{
    background-color: var(--G4Accent);
}

.W4BG{
    background-color: var(--W4Accent);
}

.Rit2BG{
    background-color: var(--Rit2Accent);
}

.G3BG{
    background-color: var(--G3Accent);
}

.VoicesBG{
    background-color: var(--VoicesAccent);
}

.OneInBG{
    background-color: var(--OneIneAccent);
}

.LMGMBG{
    background-color: var(--LMGMAccent);
}

.OramosBG{
    background-color: var(--OramosAccent);
}

.SeasonalMissBG{
    background-color: var(--SeasonalMissAccent);
}

.WeCelebrateBG{
    background-color: var(--WeCelebrateAccent);
}

.CelebremosBG{
    background-color: var(--CelebremosAccent);
}

.WordandSongBG{
    background-color: var(--WordandSongAccent);
}

.DivineOfficeBG{
    background-color: var(--DivineOfficeAccent);
}
.footer{
    margin-top: 0 !important;
}