/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  .background-about{ background-position: 400px center; }
  .background-services{ background-position: -800px center; }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1024px) {
  .background-services{ background-position: -1000px center }
}

/* Medium Devices, Desktops : col-md */
@media only screen and (max-width : 992px) {
  .container{ max-width:100%;}
  .background-contact{ right: 30px; top: 0;}
  .background-about{ background-position: 200px center; }
  .banner{ height:auto; }
  .banner .gradient{ height:100%; }
  .banner .align-items-center{ padding-top: 40px;padding-bottom: 40px; }
}

/* Small Devices, Tablets : col-sm */
@media only screen and (max-width : 768px) {
  h1{ font-size: 2.5rem;}
  h2{ font-size: 2.0rem }
  h3{ font-size: 1.5rem; }
  h3.mt-5{ margin-top: 2rem !important; }
  .background-services{ background-position: -1100px center }
}

/* col-ms */
@media only screen and (max-width: 767px) {
  #innerCarousel .carousel-control-next{ right: -70px; }
  #innerCarousel .carousel-control-prev{ left: -70px; }
  .background-services{ background-position: -800px 250px }
  .background-about .page-filler,.background-services .page-filler{ display: none }
  .background-about{background-position: 0 center;}
  .background-about .background-grey, .background-services .background-grey{ padding-right: 1rem !important;padding-left: 1rem !important; }
  .background-grey.py-5{ padding-top: 2rem !important; padding-bottom: 2rem !important}
  .homeTagWrap{ margin-top: 0 !important }
  footer .logo-sabs img{ width: 100% }
  nav li{ margin: 0 0 0 1.7rem !important}
  nav li a{ font-size: 1rem;  }
  header .logo img{ width: 200px; }
  .banner{ background-position: -30px center; }
}

/* Extra Small Devices, Phones : col-xs */
@media only screen and (max-width: 575px) {
  footer .text-left,footer .text-right{ text-align: center !important }
  footer .logo-sabs{ margin-top: 25px !important }
  .background-contact{ padding-top: 2rem !important; padding-bottom: 2rem !important; background-color: #f9f9f9; position:relative; left: 0; top:0; margin-top: 0 !important}
  .background-contact .p-3{ padding:0 !important }
  #innerCarousel .carousel-control-prev{ left:-40px }
  #innerCarousel .carousel-control-next{ right:-40px }
  #innerCarousel{ height: 600px }
  .background-services .background-lightgrey,
  .background-services .background-darkgrey{ padding: 2rem 1rem !important}
  .homeTagWrap .col-12{ margin-bottom: 15px}
  .get-in-touch{ position: relative; left:0; top:0}
  #homeOffersContact,.homeTagWrap{ margin: 0 !important}
  main .shell .logo img{ width: 100% }
  .finesse-logo-mobile{ width: 50%; height: auto;}
  .banner{ background-position: 0px -10px; background-size: 140%; }
  .banner h3{ margin-bottom: 0; font-size: 1rem; line-height: 1.4rem; font-weight: 300; }
  .banner h1{ font-size: 1.5rem; font-weight: 300; }
  .banner .align-items-center{ padding-top: 250px }
  .banner .gradient{ background: rgb(127,193,223); background: linear-gradient(180deg, rgba(127,193,223,0) 25%, rgba(0,115,167,1) 100%); }
  .homeTagWrap{ padding-bottom: 0 !important;}
  .homeTagWrap .btn-link{ margin-bottom: 20px }
  nav li{ margin: 0 1.5rem 0 0 !important}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}