* {
box-sizing: border-box;
--mainHeaderColor: rgb(49, 49, 56);
--mainFontColor:rgb(89, 88, 92);
scroll-behavior: smooth;
}

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

.pageWrapper h1,
.pageWrapper h2,
.pageWrapper h3,
.pageWrapper h4,
.pageWrapper h5,
.pageWrapper h6 {
font-weight: bold;
font-family: Helvetica, sans-serif;
color:var(--mainHeaderColor);
}

.pageWrapper p{
color:var(--mainFontColor);
margin-block:1em;
}

.italText {
font-style: italic;
}

.centerText {
text-align: center;
}

.centerObj {
display: block;
margin-left: auto;
margin-right: auto;
}

.colorWhite {
color: white;
}

.pageButton {
background-color: var(--mainHeaderColor);
display: grid;
place-items: center;
text-align: center;
color: white;
text-decoration: none;
font-weight: bold;
padding:.2em 1.5em;
border-radius: 2em;
font-size:1.3em;
border:none;
transition: all .4s ease-in-out;
cursor:pointer;
}

.pageButtonText{
color:white;
text-decoration:none;
}

.pageButton:hover,
.pageButton:focus,
.listButton:hover,
.listButton:focus {
color: white;
background-color:rgb(0, 0, 0);
}

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

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

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

.flexColumn {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.Headers{
  margin-bottom:12px;
  margin-top:-10px;
}


/* TEMPLATE END */

.topCopy > h1{
  font-size: 1.2em;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align:center;
  padding:1rem 0 2rem 0;
  border-bottom: 1px solid rgb(218, 213, 213);
  color:#b3b3bc;
  font-weight:normal;
}

.titleTextDesc{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size:2.4rem;
  margin-top:7px;
  color: rgb(89 89 110);
  letter-spacing:2px;
  display:block;
  font-weight:bold;
  letter-spacing:1px;
}

.seasonWrapper{
  text-align:center;
  background-color:rgb(228, 227, 233);
  padding:1em 2em 2em 2em;
}

.seasonButtonWrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
  gap:10px;
}

.seasonButtonText:focus, .seasonButtonText:hover,
.yearButtonText:focus, .yearButtonText:hover{
  color:white !important;
}


.seasonWrapper p{
  color:#264155;
  font-size:clamp(14px, 2vw, 18px);
  letter-spacing:.4px;
  margin:0;
  margin-bottom:1em;
  display:block;
  width:100%;
}

.seasonButton{
  background-color:#264155;
  border-radius:0;
  min-height:90px;
}

.seasonButton:hover,
.seasonButton:focus {
color: white;
background-color:#0b263a; 
}

.seasonButton a{
  font-size: clamp(14px, 5vw, 2rem);
  line-height:1.3;
  height:100%;
  width:100%;
  display:grid;
  place-items:center;
}


.yearWrapper{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(130px, 18%) ); 
  gap:5px; 
}

.yearButton{
  border-radius:15px 15px 0px 0px;
  min-height:60px;
  cursor: pointer;
  font-size:1.1em;
  padding:0px;
}

.yearButtonText{
  color: white;
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.listHeader{
  background-color:var(--mainHeaderColor);
  padding:.6em;
  color:white !important;
  text-align:center;
  font-size:2em;
  margin:0;
}

.listHeaderSub{
  display:block;
  font-size: 1.8rem;
  font-weight:normal;
  font-style:italic;
  letter-spacing:2px;
  color:rgb(140, 140, 140);
  margin:.4em 0 0 0 ;
}

.currentPage{
  cursor:default;
  pointer-events: none;
  background-color:rgb(152, 151, 157);
}

.listItem{
  display:grid;
  grid-template-columns: 1fr 150px 150px;
  gap:5px;
  padding:.4em;
  align-items:center;
}

.listItem:nth-last-of-type(odd){
  background-color:rgb(228,227,233);
}

.listTitle{
  font-weight:bold;
  font-size:1.5rem;
  margin:0 0 0 1em;
}

.listBtnNoStyle{
  all:unset; 
  text-decoration:none; 
}

.listButton{
  min-height:40px;
  display:flex;
  gap:7px;
  align-items: center;
  justify-content: center;
  background-color: var(--mainHeaderColor);
  border:0;
  border-radius:20px;
  cursor: pointer;
  padding:0;
  text-decoration:none;
  transition:all .3s ease-in-out;
}

.listButtonText{
  font-size:1.05rem;
  font-family: 'gilroy', Arial, sans-serif;
  font-weight:bold;
}

.icon{
  display: inline;
  width: 14px;
  height: 14px;
  background-size: cover;
}

.audioIcon{
  background-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/Gather4_LectionaryVideos/Assets/AudioWhite.svg);
}

.videoIcon{
  background-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/Gather4_LectionaryVideos/Assets/VideoWHITE.svg);
  width:21px;
  height:18px;
  margin-top:-2px;
}


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

}

/* Mobile Only */

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

  .HeaderDesk {
    display: none;
  }

  .yearWrapper{
    grid-template-columns: 1fr 1fr; 
    margin-bottom:.5em;
  }

  .yearButton{
    border-radius:10px;  
  }

  .seasonWrapper{
    padding:1em .5em;
  }

  .seasonButton{
    min-height:60px;
  }

  .listItem{
    grid-template-columns: 1fr;
    text-align:center;
    gap:1em;
  }

  .listTitle{
    margin:0px;
  }

}