body{
  font-family: 'Sarabun', sans-serif;
  
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
  padding: 5px;
}
h6{
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
  padding: 3px 2px 0;
}

.logo{
  width: 200px;
}
.bg-nav{
  background-color: #263988;
  color: #fff;
}
.bg-nav li a{
  color: #fff;
  padding: 10px 8px;
}

.banner {
    width: 100%;
    height: 50vh;
    position: relative;
    /*background-image: url(images/hero_1.jpg) top center; */
    background: url(../images/MUSC.jpg) bottom right;
    background-size: cover;
    
  }
  .gold12 {   
    color:#BF8D2C ; 
  }
  .gold12-bg{
    background-color: #BF8D2C;
  }
  .blue17 {
    color:#14496B ; 
}
.blue17-bg{
  background-color: #14496B;
}

  @media (min-width: 1024px) {
    .banner {
          background-attachment: fixed;
      }
  }
  @media (max-width: 767px) {
    
    .banner {
        height: 35vh;
    }
    ..goal{
      width: 30%;
      text-align: center;
    }
    
}

.metric-wrap {
  position: relative; }
  .metric-wrap .metric {
    width: 5.882%;
    margin: 1px;
    
    background-size: cover;
    background-position: center; }
    @media (max-width: 991.98px) {
      h1 {
        font-size: 22px;
      }
      h3 {
        font-size: 18px;
      }
      .metric-wrap .metric {
        width: 9%;
        position: relative;
        float: left;
      margin: 0 auto; }
    .metric-wrap .metric.overlay-danger, .metric-wrap .metric.overlay-success, .metric-wrap .metric.overlay-warning {
      position: relative; }
      .metric-wrap .metric.overlay-danger:before, .metric-wrap .metric.overlay-success:before, .metric-wrap .metric.overlay-warning:before {
        opacity: .9;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        mix-blend-mode: screen; }
    
  .metric-wrap .text {
    position: absolute;
    bottom: 20px;
    left: 20px; }
    .metric-wrap .text .meta {
      color: #fff; }
    
    .progress{
      height: 7px;
      border-radius: 0;
}

    }
    
  .gray img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }  
 /*  .gray:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  } */  
 /* Gray Scale */
    figure {
      margin: 0;
      padding: 0;
      background: #fff;
      transition: transform .2s;
    }
    figure:hover+span {
      /* bottom: -36px; */
      opacity: 1;
     
    }
    .metric:hover img {
      transform: scale(1.2);
    }
	
.metric-wrap .metric1 {
    width: 5.882%;
    margin: 1px;
	
	
}

   /*  .hover08 figure img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
    }
     .hover08 figure:hover img {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }  */
    
.menu {
  padding: 5px;
}


    #myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 14px;
  border: none;
  outline: none;
  background-color:silver;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
    
    
.progress-bar{
  height: 5px;
  border-radius: 0px;
	
	
} 
.progress{
  height: 5px;
  border-radius: 0rem;
}
 /*  accordion */
/*------------------------------------------*/

.collapsible-link {
	width: 100%;
	position: relative;
  text-align: left;
  
}
 .collapsible-link::before {
 content: '\f107';
 position: absolute;
 top: 50%;
 right: 0.8rem;
 transform: translateY(-50%);
 display: block;
 font-family: 'FontAwesome';
 font-size: 1.1rem;
}
 .collapsible-link[aria-expanded='true']::before {
 content: '\f106';
}
 
.t-heading{
  margin-top: -50px;
}
.goal{
  width: 60%;
  text-align: center;
}
@media only screen and (max-width: 450px) {
  .goal{
    width: 30%;
  }
}   
 .text-indent-50{
    text-indent: 50px;
}
    