/* pantone palette: */
	
  /* 

            */
  /* #c79c69 is pale gold 
            .btn text,
            .highlight text,
            .active background,
            .fontawesome text
            */



  /* #84917d is logo teal */


  /* #fdfff5 or rgb(253,255,245) is milk
            body background-color,
            .wrapper background,
            header background,
            #main background,
            .btn background,
            .showcase-text-only text,
            .question a:hover text,
            .centered text,
            .centered:hover background,
            .topmusician text,
            .showcase-text-right text,
            .musician1 img:hover background,
            .position1 img:hover background,
            footer text,

  #dce0f3 is very light robin's egg blue
            tbody tr:hover background,

  #666666 is close to 58575c
            thead border,      

  #6b6a70 is close to the #58575C but 6b6 is lighter and bluer
           ac a:hover text,
            .navbar a:hover text,
            .side-nav a:hover text,
            .longnavbar a:hover text,


   rgba(88,87,92,.8) is
            .centered: hover text      
           
        #bbbbbb is a light gray
            a text,
            .navbar a text,
            .side-nav a text,
            .longnavbar a text,

        /* #bac2d7 is xenon blue (a light blue gray)
      th (the table header cell background)
      .btn hover


      #58575C rgb(88,87,92) is blackened pearl (charcoal)
            table header (th) text, 
            table body (tbody) text, 
            .active text,
            .showcase-text-only background,
            .tableWrapper h3 text,
            .question p text,
            .center border
            .topmusician background,
            .sidebar background,
            .showcase-text-right background,
            footer background,

         #111 is black
            .side-nav background-color,
           
            */

  @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
  @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

/*Global Body Styling*/
body {
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background-color: #fdfff5;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  }
  

/*Global Header Styling*/
/* wrapper contains everything displayed, including logo & top nav down through and including footer. */

.wrapper {
  /* background:#fdfff5; */
  overflow: hidden;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
  }

.wrapper > * {
  grid-column: 1/13;
}

header {
 padding: 10px 10px;
 box-sizing: border-box;
 /* background:#fdfff5; */
 overflow: visible;
 display: grid;
 grid-gap: 10px;
 grid-template-columns: repeat(12, 1fr);
}

/*Global Navigation Styling*/

#branding { 
  grid-column: 8 / 13;
  grid-row: 1 / 4;
 }

.navbar { 
grid-column: 1 / 13;
grid-row: 4 / 5;
}

.longnavbar { 
  grid-column: 1 / 13;
  grid-row: 4 / 5;
 }

/* .top-pic {
  grid-column: 1 / 13;
  grid-row: 1 / 3;
  border: 20px solid yellow;
  display: none;
}

.facebook {
    grid-column: 3/ 4;
    grid-row: 3 / 4;
}

.instagram {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
} */

.navbar{
  overflow:hidden;
  height:63px;
}

.navbar a{
  float:left;
  display:block;
  color:#bbbbbb;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
}

.navbar ul{
  margin:8px 0 0 0;
  list-style:none;
}

.navbar a:hover{
  color:#6b6a70;
}

.side-nav{
  height:100%;
  width:0;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  background-color:#111;
  opacity:0.9;
  overflow-x:hidden;
  padding-top:60px;
  transition:0.5s;
}

.side-nav a{
  padding:10px 10px 10px 30px;
  text-decoration:none;
  font-size:22px;
  color:#bbbbbb;
  display:block;
  transition:0.3s;
}

.side-nav a:hover{
  color:#6b6a70
}

.side-nav .btn-close{
  position:absolute;
  top:0;
  right:22px;
  font-size:36px;
  margin-left:50px;
}
/*Global Image Styling*/

 /*In image style below I used max-width instead of width. Width can be scaled up larger than the original size, which can degrade resolution. Max-width can scale down, but will never scale higher than the original size. Aspect ratio is preserved with height: auto. If this doesn't work, try max-height 100% and width:auto.*/

 img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

hr.divider{
	border-top: 1px solid #8c8b8b;
}

/*Global Link Styling*/

a {
  text-decoration: none;
  color: #bbbbbb;
  transition: color 0.3s ease;
}

a:hover {
  color:#6b6a70;
}

/*Main is required for contents to shift right and left when hamburger is selected for left nav pane*/

#main{
  transition:margin-left 0.5s;
  overflow:hidden;
  width:100%;
  padding: 10px 10px;
  box-sizing: border-box;
  /* background:#fdfff5; */
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
}



/*====================================================================*/
/*Classes of tableWrapper & paymentTable are only used on payments    */
/*pages. musicTable is used on pages with repertoire tables.          */	/*====================================================================*/

.tableWrapper { 
  margin-bottom:3rem; 
  line-height:1.277; 
}

.tableWrapper h3 {
  padding: 0px;
  margin: 10px;
  color: #58575C;
  }

.tableWrapper {
  grid-column: 1 / 13;
  grid-row: 5;
  background-size: cover;
  padding: 20px;
 }

.paymentTable {
  width:100%; 
  /* background-color:#fdfff5;  */
  border-collapse:separate; 
  border-spacing:0; 
}

.musicTable { 
  width:100%; 
  /* background-color:#fdfff5;  */
  border-collapse:separate; 
  border-spacing:0; 
  margin-bottom: 10px; }

/*====================================================================*/
/*thead is only used on the payments page and repertoire              */
/*pages.                                                              */
/*====================================================================*/	

thead { 
  border:1px solid #666666; 
  font-size:1em; 
  font-weight:700; 
  background-clip:padding-box; 
}

/*====================================================================*/
/*th is a header cell in a table.                                     */
/*====================================================================*/	  

th[scope=col] { 
  text-align:left; 
  padding:.5rem 1rem; 
  font-weight:700; 
  background:#bac2d7; 
  color:#58575C;
}

th[scope=col]:first-child { width:250px; }
th[scope=col]:nth-child(2) { width:120px; text-align:left; }

/*====================================================================*/
/*this for styling a table body, table data and table row             */
/*====================================================================*/	

tbody { 
  font-size:1em; 
  font-weight:300; 
  color:#58575c; 
  text-align:left; 
}

tbody td:nth-child(2) { text-align:left; }
tbody td { border-width:0 1px 1px 0; border-style:solid; border-color:#bbbbbb; padding:.5rem 1rem; }
tbody td:first-child { border-left:1px solid #bbbbbb; }
tbody tr:last-child { border-bottom:1px solid #bbbbbb; }

.zebra, tbody tr:nth-child(odd) { background-color: 
	#DCE0EB; background-clip:padding-box; }
/* .zebra, tbody tr:nth-child(odd) { background-color: #fdfff5; background-clip:padding-box; } */
tbody tr { transition:all 1s ease; will-change:background, border-color, color; }

tbody tr:hover td { background:#B0B3BC; 
  /* tbody tr:hover td { background:#DCE0F3;  */
  border-color: #BAC2d7; background-clip:padding-box; }

thead th:first-child { border-radius:5px 0 0 0; }
thead th:last-child { border-radius:0 5px 0 0; }
tr:last-child td:first-child { border-radius:0 0 0 5px; }

tr:last-child td:last-child { 
  border-radius:0 0 5px 0;
 }

 td a { 
  color: #fa7268;
 }

 td a:hover { 
  color: #c85b53;
 }

/*Global Button and Highlighting*/
.btn {
  background: #fdfff5;
  color: #c79c69;
  padding: 0.6rem .3rem;
}

.btn:hover { 
  color:#bac2d7
}

.highlight{
  color:#c79c69;
  color:#fa7268;
}

/* .active {
  background: #c79c69;
  color: #58575C; 
} */

.active {
  color: #58575C; 
  margin-bottom: 20px;
}

/* DEFAULT is BABY BEAR -- MOBILE FIRST */
/* DEFAULT is BABY BEAR -- MOBILE FIRST */


/*Try background-size: contain. It will scale the image to fit the content area while keeping the aspect ratio. with background-size:cover, when the image scales to fit the content area it may result in clipping. try background-repeat: no-repeat. */


/* .showcase-text-only {
  grid-column: 1 / 13;
} */

.showcase, .showcase-text-only {
  grid-column: 1 / 13;
}

.showcase{
  margin: auto;
  box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

.showcase-text-only {
  background: #fdfff5;
  border-radius: 4px;
  background-size: cover;
  padding: 20px;
  color: #58575C;
  text-align: left;
}

.showcase-text-only h1 {
  font-size: 1.8em;
/* 
  padding: 0px;
  margin: 0px; */
}

.showcase-text-only h2 {
  font-size: 1.6em;
  font-style: italic;
  /* padding: 0px;
  margin: 0px;
   */
}

.showcase-text-only a {
  color: #fa7268;

}

.showcase-text-only a:hover {
  color: #c85b53;
}
.question {
  background: #fdfff5;
  border-radius: 4px;
  /* padding: .8rem 1.8rem; */
  margin: 10px;
}

.question h2 {
  color: #58575C;
  text-align: left;
  padding-top: 20px;

}

.question p {
  color: #58575C;
  text-align: left;
}

.question a {
  color: #fa7268;

}

.question a:hover {
  color: #c85b53;
}

/* Centered text */
.centered {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fdfff5;
  font-size: .8em;
  background: rgba(88,87,92,.8);
  border-radius: 4px;
  border: 1px solid #58575C;
  padding: 10px;
  
}

.centered:hover {

  color: rgba(88,87,92,.8); 
  font-size: .8em;
  background: #fdfff5;
  border-radius: 4px;
  padding: 10px;
  
}


.topmusician {
  grid-column: 1 / 13;
  /* background: #58575C; */
  border-radius: 4px;
  color: #514c48;
  /* padding: 20px; */
  text-align: center;
  padding: 0px;
  margin: 0px;
}

.topmusician h1 {
  font-size: 1.8em;

}

.topmusician h2 {
  font-size: 1.4em;
  font-style: italic;

}

.sidebar {
  grid-column: 1 / 13;
  /* grid-row: 2 / 4; */
  background: #58575C;
  border-radius: 4px;

}


.showcase-text-right {
  grid-column: 1 / 13;
  /* grid-row: 4 / 5; */
  /* background: #79726c; */
  border-radius: 4px;
  padding: 20px 20px 0px 20px;
  color:  #79726c;;
} 

/* .showcase-text-right h1 {
  display:none;
} */

.showcase-text-right h2 {
  margin: 0px 0px;
}

/*====================================================================musician1, 2, and 3 are for styling the musicians' pages (for example chelsea.html) where one musician is featured at the top (class="topmusician") and the other three people (class="musician1, etc.) are below.  */
/*====================================================================*/	
.musician1, .position1 {
  grid-column: 1 / 13;
  /* grid-row: 5;  */


  
    position: relative;
    text-align: center;
    color: #fdfff5;
  
}

.musician2, .position2 {
  grid-column: 1 / 13;
  /* grid-row: 6;  */
  

  
  position: relative;
  text-align: center;
  color: #fdfff5;

}

.musician3, .position3 {
  grid-column: 1 / 13;
  /* grid-row: 7;  */


  
  position: relative;
  text-align: center;
  color: #fdfff5;

}

.position4 {
  grid-column: 1 / 13;
  /* grid-row: 7;  */


  
  position: relative;
  text-align: center;
  color: #fdfff5;

}


.musician1 img:hover, .position1 img:hover {
  /* box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); */
  /* border: 1px solid #58575C; */

  background: #fdfff5;
  color: rgb(88,87,92);

}

.musician2 img:hover, .position2 img:hover {
  /* box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); */
  /* border: 1px solid #58575C; */
}
.musician3 img:hover, .position3 img:hover {
  /* box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
  border: 1px solid #58575C; */
  
}

.position4 img:hover {
  /* box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
  border: 1px solid #58575C; */
  
}

.fontawesome {
  color: #c79c69;
}

.address p{
  text-align: left;
}

/* Footer */
footer {
  background: #58575C;
  color: #fdfff5;
  text-align: center;
  padding: 1rem;
  font-size: 1.2rem;
  grid-row: 6;
}

/* Media Queries */

/* babybear is for mobile */
/* the non-fas-menu, non font awesome menu items like the words, home, contact, music, etc. are not displayed on babybear sized screens. */

@media only screen and (max-width:767px) {
.longnavbar { 
  display:none;
}
}


/* GRANDDADDY is for DESKTOP */
/* GRANDDADDY is for DESKTOP */
/* GRANDDADDY is for DESKTOP */
/* Min-width 768px means     */
/* for screens 768 or wider  */


@media only screen and (min-width:768px)
{

.navbar {
  display: none;
}

.longnavbar {
  overflow:hidden;
  height:63px;
}

.longnavbar a{
  float:left;
  display:block;
  color:#bbbbbb;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
}

.longnavbar ul{
  margin:8px 0 0 0;
  list-style:none;
}

.longnavbar a:hover{
  color:#6b6a70;
}

.longnavbar .active{
  color:#6b6a70;
}
/* Sidebar, showcase-text-right, and musician1,2,and 3 are all used in the pages that highlights one musician with the other three on the bottom. */

.topmusician {
  grid-column: 1 / 13;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.topmusician h1, h2 {
  padding: 0px;
  margin: 0px;

}


.topmusician h1 {
  font-size: 2.1em;

}

.topmusician h2 {
  font-size: 1.6em;
  font-style: italic;

}

.showcase-text-only h1 {
  font-size: 2.1em;

}

.showcase-text-only h2 {
  font-size: 1.2em;
  font-style: italic;

}
  
/*====================================================================*/
/*.sidebar is for the featured musician picture on the left of individual musician page.*/
/*====================================================================*/	
.sidebar {
  grid-column: 1 / 5;
  border-radius: 4px;
}

.showcase-text-right {
  grid-column: 5 / 13;
  border-radius: 4px;
  padding: 20px 20px 0px 20px;
} 

/* .showcase-text-right h1 {
  display:none;
} */

.showcase-text-right h2 {
  margin: 0px 0px;
}


.musician1 {
  grid-column: 1 / 5;
  /* grid-row: 5;  */

/* relative, center, #fdfff5 is for the the name tag on the musician pictures */
  
    position: relative;
    text-align: center;
    color: #fdfff5;
  
}

.musician2 {
  grid-column: 5 / 9;
  /* grid-row: 5;  */
  
/* relative, center, #fdfff5 is for the the name tag on the musician pictures */
  
  position: relative;
  text-align: center;
  color: #fdfff5;

}

.musician3 {
  grid-column: 9 / 13;
  /* grid-row: 5;  */

/* relative, center, #fdfff5 is for the the name tag on the musician pictures */
  
  position: relative;
  text-align: center;
  color: #fdfff5;

}

.phone, .email, .address {
  font-size: 1.5em;
  /* padding: 10px; */
}

/*====================================================================position1, 2, 3, and 4 are for styling the musicians.html page where each of the four musicians is lined up above the footer.  */
/*====================================================================*/

.position1 {
  grid-column: 1 / 4;

/* relative, center, #fdfff5 is for the the name tag on the musician pictures */

  position: relative;
  text-align: center;
  color: #fdfff5;

}

.position2 {
  grid-column: 4 / 7;

/* relative, center, #fdfff5 is for the the name tag on the musician pictures */ 
 
  position: relative;
  text-align: center;
  color: #fdfff5;

}

.position3 {
  grid-column: 7 / 10;

/* relative, center, #fdfff5 is for the the name tag on the musician pictures */
  
  position: relative;
  text-align: center;
  color: #fdfff5;

}

.position4 {
  grid-column: 10 / 13;

/* relative, center, #fdfff5 is for the the name tag on the musician pictures */
  position: relative;
  text-align: center;
  color: #fdfff5;

}

footer {
  grid-column: 1 / 13;
  grid-row: 6;
}
}