@charset "utf-8";

@media only screen and (max-width:1200px){
  .image-card{
    height: 280px;
    width: 280px;
  }
}


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

  .image-card{
    height: 320px;
    width: 320px;
  }

  .gridBlock .background-heading{
    font-size: 5rem;
    margin: 0 0 0 -30px;
  }

  .gridBlock .heading-text h3 {
    margin: 0 0 0 0;
    font-size: 1.4rem;
  }



}


@media (min-width:768px) and (max-width:990px){
  .gridBlock .text-holder .no-image h2{
    font-size: 1.75rem;
  }

  .card-image{
    width: 350px;
  }
}

@media only screen and (max-width:767px){
  .image-card{
    height: 340px;
    width: 340px;
    margin: 0 auto;
  }

  .gridBlock .background-heading{
    font-size: 5rem;
    margin: 0 0 0 -20px;
  }

  .gridBlock .heading-text h3 {
    margin: 0 0 0 20px;
  }
  .card-image .card-text .overlay-text h2{
    font-size: 2.4rem;
  }

  .icon-item,
  .card-item{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}


@media only screen and (max-width:575px){
  .image-card{
    height: 280px;
    width: 280px;
    margin: 0 auto;
  }

  .gridBlock .background-heading{
    font-size: 5rem;
    margin: 6px 0 0 0;
  }

  .gridBlock .heading-text h3 {
    margin: 0 0 0 30px;
  }


  h1,
  .hero-image.page-hero .hero-text-container h1,
  .hero-text-container h1 {
    font-size: 3rem;
  }

  h2{
    font-size: 1.9rem;
  }

  h3{
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  h5{
    font-size: 1rem;
  }

  .client-feedback {
    font-size: 1rem;
  }

  .slick-slide img{
    display: inline-block;
  }

  .gridBlock .grid-image {
    min-height: 300px;
    height: auto!important;
    height: 300px;
  }


}

@media only screen and (max-width:400px){
  .top-nav .navbar-brand img,
  body.menu-open .fixed-top .navbar-brand img{
    width: 60px;
    height: 60px;
  }

  #menu-toggle{
    top: 24px;
  }

  .image-card{
    height: 270px;
    width: 270px;
    margin: 0 auto;
  }

  .gridBlock .text-holder .no-image h2{
    font-size: 1.5rem;
  }

  h1,
  .hero-image.page-hero .hero-text-container h1,
  .hero-text-container h1 {
    font-size: 2.4rem;
  }

  h2{
    font-size: 1.5rem;
  }

  .gridBlock .background-heading {
    font-size: 4rem;
  }
  .gridBlock .heading-text h3{
    font-size: 1.3rem;
  }
}
@media only screen and (max-width:350px){

  .top-nav .navbar-brand img,
  .top-nav.fixed-header .navbar-brand img,
  body.menu-open .fixed-top .navbar-brand img{
    width: 50px;
    height: 50px;
  }
  #menu-toggle {
    top: 20px;
  }

  .btn{
    width: 100%;
  }
}