* {
  box-sizing: border-box;
  --TMTPBGrey: hsl(0, 0%, 16%);
  --serifFont: "Merriweather", serif;
  --acccentFont: "Krona One", sans-serif;
  scroll-behavior: smooth;
}

.pageWrapper {
  /* max-width: 1170px;
  padding: 0 14px; */
  margin: -14px auto 0 auto;
}

.contentWrapper {
  max-width: 1170px;
  padding: 20px;
  margin: 0 auto;
}

.pageWrapper p {
  font-family:'Jost', sans-serif;
  font-size:clamp(15px, 2vw, 18px);
}

.pageWrapper h1,
.pageWrapper h2,
.pageWrapper h3,
.pageWrapper h4,
.pageWrapper h5,
.pageWrapper h6 {
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  line-height:1.6;
}

.italText {
  font-style: italic;
}

.centerText {
  text-align: center;
}

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

.colorWhite {
  color: white;
}

.pageButton {
  background-color: var(--TMTPBGrey);
  padding: 10px;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  transition: .3s ease-in-out;
}

.pageButton:hover,
.pageButton:focus {
  color: white;
  background-color:#4b4a4f;
}

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

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

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

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

/* TEMPLATE END */

.serifFont{
  font-family: var(--serifFont) !important;
}

.accentFont{
  font-family:var(--acccentFont) !important;
}

.TMTPBHeader {
  background-image: linear-gradient(rgba(33, 26, 21, 0.85),rgba(33, 26, 21, 0.85)), url("https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/TMTPB_VideoRehearsal/Assets/Photos/VRS_PracticeRoom.jpg");
  background-blend-mode: multiply;
  padding: 7% 15px;
  border-radius:10px;
  background-position: center;
  background-size: cover;
}

.VRSLogo{
  width:90%;
  max-width:800px;
  filter: drop-shadow(6px 6px 8px #000000); 
  animation: zoom-in 1.5s forwards ease-in-out;   
  animation-delay: .5s;
  opacity:0;
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(.2,.2);
  }

  50% {
    transform: scale(1.1,1.1);
    opacity:.8;
  }

  100% {
    transform: scale(1,1);
    opacity:1;
  }
}


.TMTPBMainHeader{
  font-size:clamp(16px, 4vw, 28px) !important;
  line-height:1.8;
  margin:8px auto 2px auto;
  font-weight:normal !important;
  letter-spacing:1px;
}

.TMPTPBSubHeader{
  font-size:clamp(18px, 4vw, 38px) !important;
  display:block;
  margin-top:0px;
  margin-bottom:8px;
}

.presentedBy{
  background-color: var(--TMTPBGrey);
  padding:8px;
}

.presentedByText{
  font-weight:normal !important;
  margin-top:0;
  margin-bottom:0;
  color:white;
  font-size: clamp(14px, 2vw, 18px);
  font-style: italic;
}

.mainPageCopy{
  /* background-image:linear-gradient(rgba(255, 255, 255, 0.85),rgba(255, 255, 255, 0.85)), url("https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/TMTPB_VideoRehearsal/Assets/Logo%20Graphic/ColorStaff_Full.jpg");
  background-size: 75%;
  background-size:cover;  
  background-repeat: no-repeat;
  background-position:center; */
  margin:24px auto;
}

.mainPageCopyWrap{
  background-image:linear-gradient(rgba(255, 255, 255, 0.85),rgba(255, 255, 255, 0.85)), url("https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/TMTPB_VideoRehearsal/Assets/Logo%20Graphic/ColorStaff_Full.jpg");
  background-size: 755%;
  background-size:cover;  
  background-repeat: no-repeat;
  background-position:center;
}

.imageBlock{
  background-color:var(--TMTPBGrey);
  padding:25px 0 ;
}

.imageGrid{
  max-width:1175px;
  grid-template-columns: 1fr 1fr 1fr;
  padding:12px;
  margin:auto;
  gap:12px;
}

.imgGridImage{
  width:100%;
  border:1px solid rgb(97, 97, 97);
}

.squareImage{
  grid-row: 1 / span 2;
  height:100%;
  background-image:url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/TMTPB_VideoRehearsal/Assets/Photos/Eugene_Conducting.jpg);
  background-size: cover;
  background-position:right;
}

.vol12InfoWrap{
  background-color:#E6E6E6;
  padding:5% 2%;

}

.vol12InfoGrid{
  grid-template-columns: 1fr 3fr;
  max-width:1175px;
  margin:auto;
}

.tm12BookImg{
  max-width:275px;
  width:90%;
}

.vol12Info{
  background-color: var(--TMTPBGrey);
  border-radius:25px;
  box-shadow:inset 0 0 15px rgba(255, 255, 255, 0.753);
  color:white;
  font-weight:600;
  padding:5%;
  width:90%;
  text-align:center;
}

.vol12Info p{
  max-width:50ch;
  margin:0 auto 18px auto;
}

.vol12InfoHL{
  font-size: clamp(16px, 3vw, 24px) !important;
  font-weight:900;
  max-width:34ch;
  margin:auto;
}

.fullSetGrid{
  margin:24px auto;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); 
}

.fullSetImageWrap{
  content: "";
  display:block;
  height:100%;
  position: relative;  
  transition: .5s ease-in-out;
}

.fullSetItem > *{
  margin:0;
  
}

.fullSetImage{
  width:100%;
  margin-bottom:0; 
  display:block; 
}

.fullSetOverlay{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity: 0;
  height: 100%;
  width: 100%;
  background-color: #232224e2;
  display:grid;
  place-items: center;
  color:white;
  transition: .5s ease-in-out;
  font-size:clamp(28px, 5vw, 36px);
  font-weight: 900;
  z-index:3;
}

.fullSetOverlay:hover, .fullSetOverlay:focus{  
  opacity:1;
  transition: .5s ease-in-out;
  opacity:1;
}


.fullSetTitle{
  margin-top:16px;
  margin-bottom:6px;
  font-weight:600;
  font-size:clamp(16px, 4vw, 22px) !important;
}

.fullSetDesc{
  letter-spacing:2px;
  opacity: .7;
  margin-bottom:12px;
}

.fullHeader{
  background-color: var(--TMTPBGrey);
  text-align:center;
  padding:3% 2%;
}

.fullHeaderText{
  font-size:clamp(28px, 4vw, 45px);
  line-height:1.3 !important;
  color:white;
  margin:0 auto 4px auto;
}

.fullHeaderSubText{
  color:rgb(166, 166, 166);
  letter-spacing:1px;
  font-style:italic;
  margin:0;
}

.gradeHeader > *{
  margin:0;
}

.gradeHeader{
  background-color: rgb(16, 16, 100);
  text-align:center;
  padding:2%;
  color:white;
}

.gradeHeaderText{
  color:white;
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom:6px;
}

.gradeHeaderSubText{
  font-size:16px !important;
  letter-spacing: 1px;
  opacity:.7;
  font-weight:100;
}

.indivVideoInfo > * {
  margin:0;
}

.indivVideoContainer{
  padding:12px 12px;
  display:grid;
  grid-template-columns: 1fr 175px 25px;
  align-items: center;
  position:relative;
}

.indivVideoContainer:nth-child(odd){
  background-color:rgb(238, 238, 238);
}

.indivVideoTitle{
  font-size:clamp(18px, 3vw, 24px) !important;
  font-family: "Krona One", sans-serif !important;
  letter-spacing:-1.4px;
  margin-bottom:6px;
}

.gradeLevel{
  font-size:clamp(11px, 2vw, 16px) !important;
  color:rgb(129, 129, 129);
  font-family: 'Jost', sans-serif;
  letter-spacing:0px;
}

.indivVideoByInfo{
  font-size:13px !important;
  letter-spacing:.5px;
  color:rgb(129, 129, 129);
}

.indivVideoButton{
  max-height:55px;
  align-content:center;
  margin-top:14px;
  margin-bottom:14px;
}

.permissionHoldBlock{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: white;
    font-weight: bold;
    font-size: clamp(16px, 4vw, 24px);
    background-color: rgba(75, 75, 75, 0.503);
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.285);
    padding:20px;
}

.gradeThree{
  background-color: #106b25;
}

.videoWindow{
  width:90%;
  max-width:700px;
  display:block;
  aspect-ratio: 16/9;
  margin:auto;
  margin-bottom:18px;
  border-radius: 10px;
  border:4px solid #EEDF46;
}

.videoDescrip{
  font-size:14px !important;
  max-width:50ch;
  text-align: center;
  margin: auto;
  margin-bottom:24px;
  color:#6e6c77;
  letter-spacing:1px;
  line-height:1.7;
}



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

  .pageWrapper{
    padding:0;
  }

  .squareImage{
    display:none;
  }

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

  .vol12InfoGrid,
  .indivVideoContainer{
    grid-template-columns: 1fr;
  }

  .tm12BookImg{
    max-width:130px;
  }

  .gradeLevel{
    display:block;
  }


  
}