.airflow .m-hero-item.f-transparent:before {
    padding-bottom: 60.2% !important;
}

@media screen and (min-width: 768px) {
    .airflow .m-hero-item.f-transparent:before {
        padding-bottom: 60.2% !important;
    }
}

@media screen and (min-width: 1084px) {
    .airflow .m-hero-item.f-transparent:before {
        padding-bottom: 60.2% !important;
    }
}
@media only screen and (min-width: 1083px) {
 .airflow  .m-hero-item>div>div {
  width: 35%;
 }
}

@media only screen and (min-width: 1400px) {
 .airflow  .m-hero-item>div>div {
  max-width: 420px;
 }
}

@media only screen and (min-width: 1600px) {
 .airflow  .m-hero-item>div>div {
  max-width: 465px;
 }
}


  /* =============================================*/
  /* BEGIN increase hero breakpoint */
  /* Preface these with your relevant class name instead of what's here */
  /* Note that no set height is required on the >div>div content element. Any amount of content will flow. */
  /* =============================================*/
  
  @media screen and (max-width: 1083px) {
    .airflow .m-hero-item {
        padding-left: 0;
        padding-right: 0;
    }
    .airflow .m-hero-item:before {
        display: none;
    }
    .airflow .m-hero-item>div,
    .airflow .m-hero-item>div>div,
    .airflow .m-hero-item>div>div,
    .airflow .m-hero-item>picture img,
    .airflow .m-hero-item>img,
    .airflow .m-hero-item>picture {
        /* Some of these styles are redundant for some of these elements, but it doesn't hurt to pile them up in one place */
        position: relative;
        top: -10px;
        transform: none;
        overflow: visible;
        height: auto;
    }
    .airflow .m-hero-item>div>div {
        /* Making content narrower than full-width */
        max-width: 75%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
  top: auto !important;
  bottom: auto;
  transform: none !important;

    }
    .airflow .m-hero-item>div>div [class^="c-heading"] {
        padding-top: 36px;
    }
  }
  
  @media screen and (max-width: 539px) {
    .airflow .m-hero-item>div>div {
        max-width: 100%;
    }
  }

  @media screen and (max-width: 767px) {
 .airflow .m-hero-item>div {
        margin: 0;
  padding-left: 5%;
  padding-right:5%;
    }

    .airflow .m-hero-item>div>div {
        text-align: left;
  width: 65%;
  min-width: 288px;
  margin:0 !important;
    }
  }
  
  
  /* =============================================*/
  /* END increase hero breakpoint */
  /* =============================================*/