<!-- start Simple Custom CSS and JS -->
<style type="text/css">
@media only screen and (max-width: 767px) {
  .hero-wrapper .wpb_content_element {
     position: relative;
     height: 550px;
    width: 100%!important;
  }
  .hero-wrapper .wpb_content_element .wpb_wrapper > div {
     position: absolute!important;
    width: 100%!important;
  }
}
.owl-carousel {
  /* set height of hero */
  height: 550px;
}
.owl-stage-outer {
  height: 100%;
}
.owl-stage {
  height: 100%;
}
.owl-item {
  height: 100%;
}
.owl-item > div {
  height: 550px!important;
  min-height: 550px!important;
  margin: -50px 0%!important;
}
@media only screen and (max-width: 480px) {
  .owl-item > div {
    background-size: 370%!important;
  }
}
.hero-wrapper .vc_column_container {
  padding: 0; 
}
.slider-cta-wrapper {
  position: relative; 
  width: 100%;
  display: flex;
}
.slider-cta-wrapper p {
  margin: 0 auto;
}
.slider-cta-wrapper.slide_1 {
  margin-top: 360px;
}
@media only screen and (min-width: 400px) {
  .slider-cta-wrapper.slide_1 {
    margin-top: 390px;
  }  
}
@media only screen and (min-width: 600px) {
  .slider-cta-wrapper.slide_1 {
    margin-top: 404px;
  }
}
@media only screen and (min-width: 800px) {
  .slider-cta-wrapper.slide_1 {
    margin-top: 410px;
  }
}
@media only screen and (min-width: 1000px) {
  .slider-cta-wrapper.slide_1 {
    margin-top: 416px;
  }
}
@media only screen and (min-width: 1200px) {
  .slider-cta-wrapper.slide_1 {
    margin-top: 424px;
  }
}
@media only screen and (min-width: 1400px) {
  .slider-cta-wrapper.slide_1 {
    margin-top: 410px;
  }
}
@media only screen and (max-width: 600px) {
  .hero-wrapper .sa_owl_theme .owl-dots {
    bottom: 18px!important;
  }
}


</style>
<!-- end Simple Custom CSS and JS -->
