hgroup{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
}

/*for mobile phone*/
@media (max-width: 767px){
  .hero.gallery{
    padding-top: 3.5rem;
    padding-bottom: 14.5rem;
  }
  #footer-navbar ul li{
    display: block;
    width: 65%;
    margin-left: 18px;
    margin-right: 18px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  #footer-navbar ul{
    padding-left: 13px;
  }

  /*for amenities*/
/*  .carousel-indicators{
    display: none;
  }*/
  .amenities{
    margin-right: 0px;
    margin-left:0px;
  }

}
/*end of for mobile phone*/
/*for tablet*/
@media (max-width: 991px) and (min-width: 768px){
}
/*end of for tablet*/
/*for larger dimension (iPad Pro)*/
@media (max-width: 1199px) and (min-width: 992px){
  
}

@media (min-width: 992px){
  .photo-frame{
    padding-left: 90px;
  }
}
/*end of for iPad Pro*/

.hero.gallery {
  background-color: rgba(48, 55, 111, 0.81);
}


/*Additional carousel media queries*/

  @media screen and (max-width: 991px) {
    }

    @media screen and (max-width: 979px) {

      .hero.gallery {
        width: 80%;
      } 
    }

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

        /*.hero.gallery {
          margin-top: 6rem;
        }*/

    }

    @media screen and (max-width: 660px) {
    }

    @media screen and (max-width: 640px){

        .hero.gallery { 
            width: 100%;
            padding-top: 5.3rem; 
            padding-bottom: 5.3rem;
        }

        hgroup{
          /*padding: 1rem;*/
        }    
    }

/*    @media screen and (max-width: 583px) {
      .hero.gallery {
          padding-top: 4.5rem; 
          padding-bottom: 4.5rem;
        }
    }

    @media screen and (max-width: 572px) {

      .hero.gallery {
          padding-top: 3.6rem; 
          padding-bottom: 3.6rem;
        }
    }*/

    @media screen and (max-width: 530px) {
    }

/*     @media screen and (max-width: 524px) {

      .hero.gallery {
          padding-top: 3.6rem; 
          padding-bottom: 3.6rem;
        }
    }

    @media screen and (max-width: 523px) {
      .hero.gallery {
          padding-top: 2.8rem; 
          padding-bottom: 2.8rem;
        }
    }*/
    @media screen and (max-width: 767px) {
        .hero h1{
          font-size: 27px;
        }

        .hero h4{
          font-size: 13px;
        }

/*        .hero.gallery {
          padding-top: 7rem; 
          padding-bottom: 7rem;
        }*/
    }
     @media screen and (max-width: 491px) {
        .hero h1{
          font-size: 27px;
        }

        .hero h4{
          font-size: 13px;
        }

/*        .hero.gallery {
          padding-top: 7rem; 
          padding-bottom: 7rem;
        }*/
    }

/*    @media screen and (max-width: 455px) {

        .hero.gallery {
          padding-top: 6.2rem; 
          padding-bottom: 6.2rem;
        }
    }*/

/*    @media screen and (max-width: 450px) {

        .hero.gallery {
          padding-top: 6.2rem; 
          padding-bottom: 6.2rem;
        }
    }*/

/*    @media screen and (max-width: 417px) {

        .hero.gallery {
          padding-top: 5.5rem; 
          padding-bottom: 5.5rem;
        }
    }*/

    @media screen and (max-width: 384px) {

/*      .home-buttons{
        display: none;
      }*/

/*        .hero.gallery {
          padding-top: 5.5rem; 
          padding-bottom: 5.5rem;
        }*/
        #footer-navbar ul li{
          display: block;
          width: 65%;
          margin-left: 18px;
          margin-right: 18px;
          margin-top: 5px;
          margin-bottom: 5px;
        }
            
        .btn_ft{
          position: absolute;
          left: 16px;
          margin-top: -5rem;
          margin-bottom: -5rem; 
        }

        .btn_vw{
          position: relative;
          left: 0;
      
        }
    }

    @media screen and (max-width: 372px) {

        .hero h1{
          font-size: 20px;
        }
/*        .hero.gallery {
          padding-top: 7.5rem; 
          padding-bottom: 7.5rem;
        }*/

        .hero h4{
          font-size: 12px;
        }
    }

    @media screen and (max-width: 354px) {

/*        .hero.gallery {
          padding-top: 6.7rem; 
          padding-bottom: 6.7rem;
        }*/

        .hero h4{
          font-size: 12px;
        }
    }

    @media screen and (max-width: 341px) {

/*        .hero.gallery {
          padding-top: 6.7rem; 
          padding-bottom: 6.7rem;
        }*/

        .hero h4{
          font-size: 12px;
        }
    }

    @media screen and (max-width: 330px) {
/*        .hero.gallery {
          padding-top: 5.5rem; 
          padding-bottom: 5.5rem;
        }*/

        .hero h4{
          font-size: 12px;
        }

        .btn_ft{
          left: -11px;
        }

        .btn_vw{
          position: relative;
          left: 7rem;
      
        }
    }

    @media screen and (max-width: 320px) {

/*        .hero.gallery {
          padding-top: 5.5rem; 
          padding-bottom: 5.5rem;
        }*/

        .hero h4{
          font-size: 12px;
        }

        .btn_ft{
          left: 4px;
        }

        .btn_vw{
          position: relative;
          left: 0.5rem;
      
        }
    }