.b1 {border: 1px solid red }

/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar {
    margin-bottom: 0;
    border-radius: 0;
  }
  
  /* Add a gray background color and some padding to the footer */
  footer {
    background-color: #f2f2f2;
    padding: 25px;
  }

  /*  Masthead image and text*/
  .masthead-image img {
    display:block;
    height:100%;
    width:100%;
    object-fit:cover;
  }

.container-img {
  width: 100%;
  position: relative;
}

.container-header {
  padding: 0;
  text-align: center;
}

/* Navbar colors*/
.navbar-custom {
  background-color: #00a2ff;
}

.nav-link {
  color: white !important;
}

.nav-link:hover {
  text-decoration: underline !important;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: #000000;
}

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
  color: #000000;
  padding: .75rem 1rem;
}

/* change the color and bg color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: #000000;
  background-color: #ffffff;
}

.bg-blue {
    background-color: #9bbef3;
}

.box {
  border: 1px solid blue !important;
}

.testimonial {
  width: 60%;
  margin: 0 auto;
}

p.text-danger {
  color: orange;
}

/* Image to replace recorder Lessons*/
.flute-image img {
  max-width: 100%;
}

/* Social Media */
.fa {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0 1rem;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
    background: #cd486b;
  color: white;
}
/* End Social Media*/

.bigger_p {
  font-size: 1.2em !important;
}

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

  .desktop {display: block;}
  .mobile {display: none;}

}

/*  Make headings smaller at less than 768 */

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .container-header h1{
        font-size: 2em;
    }

    .container-header h3 {
        font-size: 1.3em;
    }

    .img_small {
       height: 30px !important;
       width: 30px  !important;
    }

}

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

    .container-header h1{
        font-size: 1.8em;
    }

    .container-header h3 {
        font-size: 1em;
    }

    .custom-mb {
      margin-bottom: 10px!important;
    }

    .testimonial {
      width: 100%;
      margin: 0 auto;
    }

    .img_small {
       height: 30px !important;
       width: 30px  !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {


    .container-header h1{
        font-size: 1.5em;
    }

    .container-header h3 {
        font-size: .9em;
    }

    .container-header {
      position:static;
      transform:none;
      margin: 0 auto;
      width: 95%;
    }
   
    .custom-mb {
      margin-bottom: 10px!important;
    }

    .testimonial {
      width: 100%;
      margin: 0 auto;
    }

    .img_small {
       height: 30px !important;
       width: 30px  !important;
    }
}

@media only screen and (min-width: 380px) and (max-width: 575px) {

    .container-header h1{
        font-size: 1.3em;
    }

    .container-header h3 {
        font-size: .8em;
    }

    .container-header {
      position:static;
      transform:none;
      margin: 0 auto;
      width: 95%;
    }

    .custom-mb {
      margin-bottom: 10px!important;
    }

    .testimonial {
      width: 100%;
      margin: 0 auto;
    }

    .img_small {
       height: 30px !important;
       width: 30px  !important;
    }

}

/* iPhone Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .container-header h1{
      font-size: 1.3em;
  }

  .container-header h3 {
      font-size: .8em;
  }

  .container-header {
    position:static;
    transform:none;
    margin: 0 auto;
    width: 95%;
  }
  
  .custom-mb {
    margin-bottom: 10px!important;
  }

  .testimonial, .carousel-slide {
    width: 100%;
    margin: 0 auto;
  }

   .img_small {
       height: 30px !important;
       width: 30px  !important;
    }

}