:root {
    --color-bodyBG: #FFF;
    --color-text: #4D5B61;
    --color-headerBG: #FFF;
    --color-hyperlink: #0075a2;
    --color-hover: #232323;
    --color-headerText: #2f3c40;
    --color-footerBG: #0075a2;
    --color-footerText:#FFF;
    --color-navBG:#fff;
    --color-navText:#a57982;
    --color-navHover:#232323;
    --color-headings:#0075a2;
  }

*{
    box-sizing: border-box;
    padding:0;
    margin:0;
    
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
/* box model fix here */
html {
    box-sizing: border-box;
    font-size: 100%;
  }
 .header-container{
     width:100%;
     
     background-size:cover;
     background-repeat: none;
     background-position:left center;
    
 }
 .home-header{
  background-image: url("images/Banner-Temp.webp");
 }
 .sb-header{
  background-image: url("images/Banner-Sound-Beginnings.webp");

 }
 .lpm-header{
  background-image: url("images/Banner-LPM.webp");

 }
 .bridge-header{
   background-image:url("images/Banner-Bridge.webp");
 }
 .guitar-header{
  background-image: url("images/Banner-Guitar.webp");

 }
 .uke-header{
  background-image: url("images/Banner-Uke.webp");

 }
 .teachers-header{
  background-image: url("images/Banner-Temp.webp");

 }
 .about-header{
  background-image: url("images/Banner-Temp.webp");
 }
 .header-container h1{
   text-align:center;
   color:var(--color-bodyBG);
   font-size:3rem;
   padding:6.8rem 0;
   font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3rem;   
 }
  
  .logo-link{
    width:300px;
    padding:10px 40px;
  }
  .flex-nav ul{
    display:flex;
    list-style: none;
    margin: 0 1rem 0 0;
  }
  
  .flex-nav li{
    width:100%;
    position: relative;
    text-align:center;
    align-self: center;
  }
  @media all and (min-width:961px){
  .flex-nav li:hover .submenu > li{
    display: block;
    top:0px;
  }
}
.highlight{
  color:#a57982;
  font-weight:bold;
}
.submenu li{
  display:none; 
}
.submenu{
  display:flex;
  flex-direction: column;
  position:absolute;
  width:100%;
}
  
.flex-nav a {
    color:var(--color-navText);
    display: flex;
    text-decoration: none;
    align-items:  center;
    text-align:center;
    justify-content: center;
    width: 100%;
    padding: 10px 5px;
    letter-spacing: 2px;
    background-color:var(--color-navBG);
    transition: all 0.5s;
    font-weight: 700;
    font-size:1rem;
    font-family: 'Montserrat', sans-serif;
  }
  .flex-nav a:hover{
    text-decoration: underline;
  }
  
  a.toggleNav {
    display: none;
  }

main{
    box-sizing: border-box;
    padding:1rem 2rem;
    color:var(--color-text);
    font-family: 'Source Sans Pro', sans-serif;
}
main h1, main h2, main h3{
    color:var(--color-headings);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
main a{
  text-decoration:none;
  color:var(--color-hyperlink);
  font-weight: 700;
}
main a:hover{
  text-decoration: underline;
}
main li{
  margin-bottom:.5rem;
}
.quote{
  color:var(--color-navText);
  font-family: 'Covered By Your Grace', cursive;
  text-align:center;
  margin:1.5rem 0rem;
  font-weight: 300;
  font-size:2rem;
}
.bordered-img{
  background-color:var(--color-headings);
  padding:10px;
  background-position-x: 14px;
  background-position-y: 12px;
  transform: translateY(4px) rotate(0deg);
  transition: all .2s linear;
}
.bordered-img:hover{ 
  transform: translateY(0px) rotate(-3deg);
}
.grid-container{
    display: grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    margin:1rem 0;
    /*border:yellowgreen solid 1px;*/
    width: 100%;
    padding: 0 15%;
    row-gap: .7rem;
    column-gap: .7rem;
}
.no-grid-container{
  margin:1rem 0;
  padding: 0 15%;
}
.grid-container-2{
  display: grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
    margin:1rem 0;
    /*border:yellowgreen solid 1px;*/
    width: 100%;
    padding: 0 15%;
    row-gap: .7rem;
    column-gap: .7rem;
}
.grid-container-2 > .grid-item > h1{
  color:#2f3c40;
  text-align:left;
  margin-bottom:1rem;
  font-weight: 700;
  letter-spacing: .05rem;
}
.grid-container-2 > .grid-item > p{
  line-height: 1.25rem;
  font-size:1rem;
}
.grid-item{
 /* border:var(--color-text) 1px solid;*/
  padding:2rem;
  max-width:100%;
  overflow: hidden;
}
.grid-item-span-2{
  grid-column: 2 / span 2;
}
.grid-item h1{
  font-size:1.5rem;
  color:#2f3c40;
  text-align:left;
  margin-bottom:1rem;
  font-weight: 700;
  letter-spacing: .05rem;
}
.grid-item h2{
  font-size:1rem;
  color:var(--color-navText);
}
.grid-item p{
  font-size:1rem; 
}
.grid-item img{
    width:100%;
}
.grid-full-width{
  grid-column: 1 / span 3;
 
}
.grid-full-width h1{
  
  text-align:left;
  
  font-weight: 700;
  letter-spacing: .05rem;
}
.img-float-right{
  float:right;
  margin:10px 20px;
  width:250px;
}
.grid-full-width img{
  width:80%;
  margin-left:10%;
}
.content-block{
  
  background-color:#ffffff;
  color:#232323;
  font-size:1rem; 
  padding:20px 20px 20px 20px;
  line-height: 1.3rem;
  border:2px solid #a57982; 
}
.content-block h1{
  color:#2f3c40;
  text-align:left;
  margin-bottom:1.5rem;
  font-weight: 700;
  letter-spacing: .05rem;
  font-size:1.5rem;
}
.white-bg{
  background-color: #fff;
  padding:2rem;
}
.gray-bg{
  background-color:#e5e5e5;
  padding:2rem;
}
.content-block p{
  background-color:#ffffff;
  color:#232323;
  font-size:1rem;
  align-self: center;
  
  line-height: 1.3rem;
}


.img-float-right::after{
  clear:both;
  content:'';
}
p{
    text-align: justify;
    margin-bottom:1rem;
}
p.teacher-info{
  background-color: var(--color-navText);
  height:100px;
  overflow:hidden;
  padding:.5rem;
  color:var(--color-footerText);
  border-radius: 10px;
  transition:.3s all linear;
}
p.teacher-info:hover{
  overflow: visible;
  height:100%;
}
.lg-img{
  width:80%;
  margin:0 auto;
}
.social-bar{
    display:flex;
    margin:0 auto;
    width:100%;
    /*border:1px solid yellow;*/
}
.social-bar a{
    width:3rem;
  font-size: 1rem;
  margin-left:.5rem;
  text-align: center;
  text-decoration: none;
    padding:1rem;
    background:var(--color-navText);
    color:var(--color-navBG);   
    transition: all .5s;
   
}
.social-bar a:hover{
    opacity:.7;
}
.social-bar p{
  margin:1rem;
  font-size:1.5rem;
  font-family:'Source Sans Pro', sans-serif;
  text-align:right;
}
.fa{
  align-self:center;
}
.pay-here{
  background-color:var(--color-hover);
  font-family: 'Montserrat', sans-serif;
  font-size:1.5rem;
  padding: 1rem;
  display:block;
  margin:0 auto;
  width:15rem;
  text-align:center;
  color:var(--color-bodyBG);
  font-weight:400;
}
.left-justify{
  margin-left:0;
}
.pay-here:hover{
  background-color: var(--color-text);
}
.pay-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-gap:2.5rem;
  margin: 1rem 0;
  align-items:center;
  justify-items:center;
}
.frame{
  overflow:visible;
  border: 2px solid var(--color-headerText);
  padding:1rem;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.frame p{
  font-family:'Montserrat', sans-serif;
  text-align: center;
  letter-spacing: 0.2rem;
}
.info-button{
  background-color:var(--color-navText);
  color:var(--color-headerBG);
  font-family:'Montserrat', sans-serif;
  padding:10px;
  border-radius:3px;
  display:block;
  margin:1rem;
  text-align: center;
  transition: .3s ease-out all;
  font-size:1.5rem;
  font-weight: 300;
}
.info-button:hover{
  background-color: var(--color-hover);
}
table{
  border:var(--color-text) 1px solid;
  width:100%;
  font-family:'Source Sans Pro', sans-serif;
  border-collapse: collapse;
}
table caption{
  text-align: left;
}
th,td{
  border:var(--color-text) 1px solid;
}
th{
  text-align: left;
  color:var(--color-bodyBG);
  background-color: var(--color-headerText);
  padding:4px 8px;
}
td{
  padding:4px 8px;
}
tr.tuition{
  background-color: var(--color-navText);
  color:var(--color-bodyBG);
}
tr.no-class{
  font-weight: 700;
}
footer{
  font-family:'Source Sans Pro', sans-serif;
    background-color: var(--color-footerBG);
    color:var(--color-footerText);
    padding:10px 0px;
}
footer p{
    text-align:center;
    display:block;
    font-size:1.5rem;
    margin-top:15px;
}
footer ul{
    display:flex;
    list-style: none;
    
}
footer li{
    flex:1;
    text-align:center;
}
footer ul a{
    text-decoration:none;
    font-size:.7rem;
    color:var(--color-footerText);
}
.footer-nav{
    width:80%;
    margin:0 auto;
}
a.reg-button, button.reg-button{
    background:var(--color-navText);
    color:var(--color-footerText);
    border-radius: .2rem;
    font-size:1.5rem;
    border:1px solid var(--color-hover);
    text-decoration: none;
    padding:.5rem 1rem;
    transition: .2s all linear;
    font-family: 'Montserrat', sans-serif;
    
}
a.reg-button:hover, button.reg-button:hover{
    background-color: var(--color-hover);
}
.video-container{
  padding-top:56.25%;
  height: 0px;
  position:relative;
}
.video{
    width:100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
}


.inner-flex{
  display:flex;
  justify-content: center;
  
}
.inner-flex > img{
  max-width:33.33%;
  padding:1rem;
  align-self:flex-start;
  margin: 0 2rem;
}
.inner-flex > a{
  max-width:33.3%;
  padding:1rem;
  align-self:flex-start;
  margin: 0 2rem;
}
.inner-flex > a > img{
  width:100%;
}
.music-class{
    border-top:var(--color-footerBG) 1px solid;
  
    padding:1rem 0;
    margin:2rem 0;
}
#beg-reg-content iframe{
  width:100%;
  display:none;
  overflow:hidden;
}
#int-reg-content iframe{
  width:100%;
  display:none;
  overflow:hidden;
}
#pri-reg-content iframe{
  width:100%;
  display:none;
  overflow:hidden;
}
#uke-reg-content iframe{
  width:100%;
  display:none;
  overflow:hidden;
}
.accordion {
  background-color: #e5e5e5;
  color: var(--color-navHover);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size:1.5rem;
  font-weight: 300;
  font-family:'Montserrat', sans-serif;
}
.active, .accordion:hover {
  background-color: #232323;
  color:#e5e5e5;
}
.panel {
 
  padding: 10px 18px;
  background-color: var(--color-footerText);
  display: none;
  overflow: hidden;

}
.panel h1, .panel h2{
  color:var(--color-text);
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
}
.panel img{
  width:250px;
  margin:0 auto;
  display:block;
}
.panel iframe{
  width:100%;
}
.accordion:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 2rem;
  color: var(--color-hover);
  float: right;
  margin-left: 5px;
  border-style:none;
}

.active:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
  color:#e5e5e5;
}
strong.teacher-id{
  color:var(--color-hyperlink);
  font-weight: 700;
}
.announcement p{
  font-size: 1.5rem;
  font-family: 'Source Sans Pro', sans-serif;
}
.social-bar #pay-button{
  width:auto;
  background-color:var(--color-headings);
  font-family: 'Montserrat', sans-serif;
  font-size:1.5rem;
}
#register-button{
  background-color:var(--color-navHover);
  font-family: 'Montserrat', sans-serif;
  color:#e5e5e5;
  border-radius: 5px;
  border:3px solid #232323;
}
  /* Optimized for cell phone */

@media all and (max-width:960px) {
    .logo-container {
      width:100%;
    }
    main{
        padding:1rem;
        box-sizing: border-box;
    }
    header h2 {
      font-size: 1.2rem;
    }
    .flex-nav ul {
      flex-direction: column;
    }  

    .flex-nav li {
      width:100%
    }
    .submenu{
      position:static;
      width:100%;
    }
    .inner-flex{
      flex-direction: column;
      flex-wrap: wrap;
    }
    body .padding-fix{
      padding:0 5%;
    }
    body {
      display: flex;
      flex-direction: column;
    }

    body > * {
      order: 9999;
    }
  
    .flex-nav {
      order: 1;
    }
    .flex-nav a {
      font-size: 1.2rem;
    }

   

    a.toggleNav {
    display: block;
  }

    .flex-nav > ul {
      display: none;
    }
    
      .flex-nav ul.open {
        display:flex;
      }
    
      .flex-nav li .submenu > li{
        display: block;
        top:0px;
      }
 
      
    .grid-item{
        grid-column: 1 / 4; 
        padding-top:0;
        padding-bottom:0;
    }
    body .grid-container, .grid-container-2{
      padding:0 5%;
    }
    body .inner-flex img{
      max-width:80%;
      margin:0 auto;
    }
  }