/* 
 * DO NOT EDIT THIS FILE.
 * The Airbus Web Experience use PostCSS to compile CSS
 * the same way as in the Drupal core except it use the .pcss extension.
 * Therefore, you are supposed to edit the pcss file of the same name.
 */

.awx-hero{
  --hero-height:calc(80svh - var(--awx-sp-v2));

  position:relative;
  display:block;
  overflow:clip;
  background-color:var(--awx-color-dominant);
  background-image:url("../../../../assets/images/airbus-carbon-grid-cropped.png");
  background-repeat:no-repeat;
  background-position:center 10rem;
  background-size:240%;
  background-blend-mode:normal;
}

.awx-hero.has-highlight{
    --hero-height:calc(100svh - var(--awx-sp-v2));
  }

.awx-hero .awx-button.awx-scroll-button{
    display:none;
  }

.awx-hero .awx-svg--preprocessed{
    --text-color:var(--awx-color-text-light);

    max-width:100%;
    height:2.25rem;
    margin-bottom:var(--awx-sp-v);
    filter:drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.5));
    filter:drop-shadow(0 0 0.5em rgb(0 0 0 / 0.5));
  }

.awx-hero__inner{
  position:relative;
  display:flow-root;
  box-sizing:border-box;
  width:100%;
  max-width:var(--awx-view-max-width);
  height:100svh;
  margin:0 auto;
}

.has-background .awx-hero__inner::after{
  position:absolute;
  display:block;
  content:"";
  opacity:0.9;
  background:linear-gradient(180deg, var(--awx-color-dominant) 0%, var(--awx-color-dominant-transparent) 100%);
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.awx-hero__body{
  position:absolute;
  z-index:2;
  top:calc(var(--awx-header-height-start) + 5%);
  padding:var(--awx-sp-v2) var(--awx-sp-h2);
}

.awx-hero__title,
.awx-hero__subtitle,
.awx-hero__meta-item{
  display:block;
  color:var(--awx-color-text-light);
  text-shadow:0 0 0.5em rgba(0, 0, 0, 0.5);
  text-shadow:0 0 0.5em rgb(0 0 0 / 0.5);
}

.awx-hero__meta-item{
  margin-bottom:var(--awx-sp-v0-25);
}

.awx-hero__meta-item:last-of-type{
  margin-bottom:0;
}

.awx-hero__title{
  margin-bottom:var(--awx-sp-v);
  font-size:2.25rem;
}

.awx-hero__subtitle{
  margin-bottom:var(--awx-sp-v);
  text-wrap:pretty;
  font-size:1.25rem;
  font-weight:400;
  line-height:1.4;
}

.awx-hero__meta{
  margin-bottom:var(--awx-sp-v3);
  font-size:1.25rem;
  line-height:1.7;
}

.awx-hero__location-label{
  position:relative;
  display:inline-block;
}

.awx-hero__location-label:after{
    position:absolute;
    bottom:3px;
    left:0;
    display:block;
    width:100%;
    height:1px;
    content:"";
    background-color:var(--awx-color-text-light);
  }

.awx-hero__location{
  -webkit-text-decoration:none !important;
  text-decoration:none !important;
}

.awx-hero__location:after{
    display:none !important;
  }

.awx-hero__location:hover,.awx-hero__location:active,.awx-hero__location:focus{
    color:var(--awx-color-text-light);
  }

.awx-hero__countdown{
  margin-bottom:var(--awx-sp-v3);
}

.awx-hero.has-highlight .awx-hero__countdown{
  display:none;
}

.awx-hero__cta{
  margin-top:var(--awx-sp-v2);
}

.awx-hero__inner,
.awx-hero .awx-fullscreen,
.awx-hero .awx-fullscreen > *{
  height:var(--hero-height) !important;
  min-height:var(--hero-height) !important;
  max-height:var(--hero-height) !important;
}

@media (orientation: landscape) and (max-width: 64em){
  .awx-hero{
    --hero-height:auto;
  }

    .awx-hero .awx-hero__inner{
      aspect-ratio:2/1;
      height:auto;
    }

    .awx-hero .awx-fullscreen{
      --hero-height:100%;

      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }

  .awx-hero__body{
    position:relative;
    top:auto;
    margin-top:calc(var(--awx-header-height-start) + 5%);
  }
}

@media (min-width: 48em){
  .awx-hero{
    background-position:center;
    background-size:contain;
  }

    .awx-hero .awx-button.awx-scroll-button{
      position:absolute;
      z-index:11;
      bottom:var(--awx-sp-v2);
      left:50%;
      display:block;
      margin-left:-1em !important;
    }

    .awx-hero .awx-svg--preprocessed{
      height:1.75rem;
    }

  .awx-hero__title{
    font-size:1.75rem;
  }

  .awx-hero__body{
    position:absolute;
    top:calc(var(--awx-header-height-start) + 4%);
    right:var(--awx-sp-h2);
    left:var(--awx-sp-h2);
    margin-top:auto !important;
  }

  .awx-hero__meta{
    margin-bottom:var(--awx-sp-v2);
    font-size:1rem;
  }

  .awx-hero__meta-item{
    display:inline-block;
  }

    .awx-hero__meta-item::before{
      display:inline-block;
      padding:0 var(--awx-sp-h0-5) 0 var(--awx-sp-h0-75);
      content:"-";
    }

    .awx-hero__meta-item:first-child::before{
      display:none;
    }

  .awx-hero__countdown{
    margin-bottom:var(--awx-sp-v);
  }

  .awx-hero.has-highlight .awx-hero__countdown{
    display:block;
  }
}

@media (min-width: 64em){
    .awx-hero .awx-svg--preprocessed{
      height:3rem;
    }

  .awx-hero__title{
    font-size:3rem;
    line-height:1.1;
  }

  .awx-hero__body{
    top:calc(var(--awx-header-height-start) + 7%);
    right:auto;
    left:100px;
    max-width:700px;
  }

  .awx-hero__meta{
    margin-bottom:var(--awx-sp-v2);
    font-size:1.25rem;
  }
}

@media (min-width: 80em){
  .awx-hero{
    --hero-height:calc(100svh - var(--awx-sp-v6));

    background-image:url("../../../../assets/images/airbus-carbon-grid-cropped-lg.png");
  }

  .awx-hero__body{
    top:calc(var(--awx-header-height-start) + 9%);
    left:130px;
  }
}

@media (min-width: 90em){
  .awx-hero__title{
    font-size:4rem;
  }

  .awx-hero__body{
    top:calc(var(--awx-header-height-start) + 12%);
    left:200px;
    max-width:900px;
  }

  .awx-hero__meta{
    margin-bottom:var(--awx-sp-v3);
  }
}

@media (min-width: 120em){
    .awx-hero .awx-fullscreen{
      height:var(--hero-height) !important;
    }

      .awx-hero .awx-fullscreen > *,.awx-hero .awx-fullscreen video,.awx-hero .awx-fullscreen img{
        height:var(--hero-height) !important;
      }
}

@media (min-width: 121em){
  .awx-hero{
    --hero-height:64em;

    background-image:url("../../../../assets/images/airbus-carbon-grid.png");
  }
      .awx-hero .awx-fullscreen video,.awx-hero .awx-fullscreen img{
        height:100% !important;
      }

  .awx-hero__inner{
    aspect-ratio:2/1;
    height:auto;
  }
}

@media (max-height: 40em) and (min-width: 40rem){
  .awx-hero{
    --hero-height:auto;
  }

  .awx-hero__inner{
    aspect-ratio:2/1;
  }
}