@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  
  
  }
  
  @media only screen and (max-width: 600px) {
      .social-bar{
          margin-left: auto;
        }
        .craig-banner img {
          max-width: 160px;
          margin-top: 45px;
        }
        .dots{
          text-align: right;
          margin-top: -80px;
          margin-right: 25px;
          padding-bottom: 20px;

        }

        .craig-name{
          margin-top: 5px;
      }
        .bg-inverse {
          padding-bottom: 15px;
        }
  
        .sectionTitle{
            font-size: calc( 7vw);
        }

        .mySlides{
          background-position: 60% bottom !important;
        }
        .bg3{
          background-position: 31% bottom !important;
        }
        .bg1{
          background-position: 47% bottom !important;
        }
        .close{
            top: 60px;
        }
        .prev, .next {
            top: 70%;
            display: none;
        }
    
  }
  
  @media only screen and (max-height: 400px) {
        .craig-banner img {
          max-width: 150px;
          margin-top: 45px;
        }
        .prev, .next {
            top: 85%;
        }
        .craig-name{
          margin-top: 5px;
      }
  
        .bg1{
          background-position: center 25%;
        }
        .bg2{
          background-position: center 66%;
        }
        .bg3{
          background-position: center 25%;
        }
        .bg4{
          background-position: center 66% !important;
        }
        .close{
            top: 60px;
        }
       
       
  }
  


  @media only screen and (max-width: 1200px) {
    .bg4{
      background-position: center -150px;
    }
  }