/* 
 * 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-mission{
  position:relative;
  height:100%;
  padding-bottom:var(--awx-sp-v2);
  transition:all 1s;
}

.awx-mission .awx-media,.awx-mission .awx-image,.awx-mission picture,.awx-mission img{
    width:100%;
    height:auto;
  }

.awx-mission > .awx-media,.awx-mission > .awx-image,.awx-mission picture{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    transition:opacity 600ms var(--awx-ease-in-out) 300ms;
    opacity:1;
  }

.awx-mission picture::before{
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    bottom:0;
    left:0;
    content:"";
    transition:opacity 600ms var(--awx-ease-in-out) 300ms;
    opacity:0.5;
    background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--awx-black) 100%), var(--awx-color-dominant-faded);
    mix-blend-mode:multiply;
  }

@supports (color: rgb(0 0 0 / 0)){
.awx-mission picture::before{
    background:linear-gradient(180deg, rgb(0 0 0 / 0) 0%, var(--awx-black) 100%), var(--awx-color-dominant-faded);
  }
}

.awx-mission img{
    position:absolute;
    top:50%;
    left:50%;
    height:100%;
    transform:translate(-50%, -50%);
  }

.awx-mission-toggler{
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  bottom:0;
  left:0;
  color:var(--awx-color-text-light);
}

.awx-mission-state:checked ~ .awx-mission-toggler,
.awx-mission-state:target ~ .awx-mission-toggler{
  z-index:3;
  bottom:auto;
  height:var(--awx-sp-v4);
}

.awx-mission-toggler__icon{
  position:absolute;
  top:var(--awx-sp-v1-25);
  right:var(--awx-sp-h1-25);
  font-size:1.75rem;
}

.awx-mission-toggler__icon.awx-close{
  color:var(--awx-color-accent);
}

.awx-mission__headline{
  position:absolute;
  z-index:2;
  top:var(--awx-sp-v5);
  right:var(--awx-sp-h3);
  bottom:auto;
  left:var(--awx-sp-h1-5);
  transition:z-index 0s 0ms;
  pointer-events:none;
  color:var(--awx-color-text-light);
  text-shadow:0 0 0.75em var(--awx-color-dominant);
  font-size:1.125rem;
}

.awx-mission-state:checked ~ .awx-mission__headline,
.awx-mission-state:target ~ .awx-mission__headline{
  z-index:0;
  transition:z-index 0s 700ms;
}

.awx-mission__panel{
  position:absolute;
  z-index:-1;
  top:var(--awx-sp-v);
  display:flex;
  visibility:hidden;
  overflow:auto;
  flex-direction:column;
  width:calc(100% - var(--awx-sp-h1-5));
  height:100%;
  margin:0 var(--awx-sp-h0-75);
  padding:var(--awx-sp-v4) var(--awx-sp-h0-75) var(--awx-sp-v0-75);
  opacity:0;
  border-radius:var(--awx-border-radius);
  background-color:var(--awx-color-light-faded);
  box-shadow:0 0 3em -0.2em var(--awx-color-dominant-shadow);
}

.awx-mission__panel .awx-button{
    position:absolute;
    z-index:-1;
    visibility:hidden;
    align-self:flex-end;
    height:auto;
    margin-top:auto;
    padding:var(--awx-sp-v0-75) var(--awx-sp-h);
    white-space:balance;
    opacity:0;
    line-height:1.3;
  }

.awx-mission__panel-headline{
  padding-right:var(--awx-sp-h1-5);
  color:var(--awx-color-accent);
  font-size:1.125rem;
}

.awx-mission__subtitle{
  z-index:-1;
  visibility:hidden;
  width:auto;
  white-space:balance;
  opacity:0;
  color:var(--awx-color-text);
}

.awx-mission__paragraph{
  position:absolute;
  z-index:-1;
  visibility:hidden;
  overflow:auto;
  margin-bottom:var(--awx-sp-v);
  opacity:0;
  color:var(--awx-color-text);
  font-size:0.875rem;
}

.awx-mission-state:checked ~ .awx-mission__panel,
.awx-mission-state:target ~ .awx-mission__panel{
  position:relative;
  z-index:2;
  visibility:visible;
  transition:visibility 0s 100ms, z-index 0s 100ms, opacity 300ms var(--awx-ease-in-out) 111ms;
  opacity:1;
}

.awx-mission-state:checked ~ .awx-mission__panel .awx-mission__subtitle{
    position:relative;
    z-index:2;
    visibility:visible;
    height:auto;
    transition:visibility 0s 700ms, z-index 0s 700ms, position 0s 690ms, opacity 300ms var(--awx-ease-in-out) 777ms;
    opacity:1;
  }

.awx-mission-state:target ~ .awx-mission__panel .awx-mission__subtitle{
    position:relative;
    z-index:2;
    visibility:visible;
    height:auto;
    transition:visibility 0s 700ms, z-index 0s 700ms, position 0s 690ms, opacity 300ms var(--awx-ease-in-out) 777ms;
    opacity:1;
  }

.awx-mission-state:checked ~ .awx-mission__panel .awx-mission__paragraph{
    position:relative;
    z-index:2;
    visibility:visible;
    height:auto;
    transition:visibility 0s 700ms, z-index 0s 700ms, position 0s 690ms, opacity 300ms var(--awx-ease-in-out) 777ms;
    opacity:1;
  }

.awx-mission-state:target ~ .awx-mission__panel .awx-mission__paragraph{
    position:relative;
    z-index:2;
    visibility:visible;
    height:auto;
    transition:visibility 0s 700ms, z-index 0s 700ms, position 0s 690ms, opacity 300ms var(--awx-ease-in-out) 777ms;
    opacity:1;
  }

.awx-mission-state:checked ~ .awx-mission__panel .awx-button{
    position:relative;
    z-index:2;
    visibility:visible;
    height:auto;
    transition:visibility 0s 700ms, z-index 0s 700ms, position 0s 690ms, opacity 300ms var(--awx-ease-in-out) 777ms;
    opacity:1;
  }

.awx-mission-state:target ~ .awx-mission__panel .awx-button{
    position:relative;
    z-index:2;
    visibility:visible;
    height:auto;
    transition:visibility 0s 700ms, z-index 0s 700ms, position 0s 690ms, opacity 300ms var(--awx-ease-in-out) 777ms;
    opacity:1;
  }

.pattern-preview__markup--mission .awx-missions__item{
    max-width:calc(var(--awx-body-max-width)/3);
    margin:0 auto;
  }

.pattern-preview__markup--mission .awx-mission__panel,.pattern-preview__markup--mission .awx-mission__subtitle,.pattern-preview__markup--mission .awx-mission__paragraph,.pattern-preview__markup--mission .awx-button{
    position:relative;
  }

.is-small-width .awx-mission-toggler,.is-small-width .awx-mission__paragraph{
    display:none;
    pointer-events:none;
  }

.is-small-width .awx-mission__headline{
    top:calc(var(--awx-sp-v) + var(--awx-sp-v0-75));
  }

.is-small-width .awx-mission__panel{
    padding-top:var(--awx-sp-v0-75);
  }

@media (min-width: 48em){
  .awx-mission__headline,
  .awx-mission__panel-headline{
    font-size:1.25rem;
  }
}

@media (min-width: 64em){
  .awx-mission{
    padding-bottom:var(--awx-sp-v2);
  }

    .awx-mission .awx-media,.awx-mission .awx-image,.awx-mission picture,.awx-mission img{
      height:100%;
      max-height:none;
    }

  .awx-mission__subtitle{
    flex:auto;
  }
    .awx-missions--5 .awx-mission__subtitle{
      font-size:0.875rem;
    }

  .awx-mission__paragraph{
    display:none;
  }
}

@media (min-width: 90em){
  .awx-mission-toggler__icon{
    top:var(--awx-sp-v1-5);
    right:var(--awx-sp-h2);
  }

  .awx-mission__headline{
    right:var(--awx-sp-h4);
    left:var(--awx-sp-h2);
    font-size:1.5rem;
  }

  .awx-mission__subtitle{
    flex-grow:initial;
    flex-grow:unset;
    font-size:1.125rem;
  }

  .awx-mission__paragraph{
    display:block;
    font-size:1rem;
  }

  .awx-mission__panel{
    top:var(--awx-sp-v);
    width:calc(100% - var(--awx-sp-h2));
    margin:0 var(--awx-sp-h);
    padding:var(--awx-sp-v4) var(--awx-sp-h) var(--awx-sp-v);
  }

  .awx-mission__panel-headline{
    padding-right:var(--awx-sp-h2);
    font-size:1.5rem;
  }
    .awx-missions--3 .awx-mission__headline,.awx-missions--3 .awx-mission__panel-headline{
      font-size:1.875rem;
    }

    .awx-missions--3 .awx-mission__subtitle{
      font-size:1.5rem;
      line-height:1.3;
    }
    .awx-missions--5 .awx-mission__subtitle{
      font-size:1.125rem;
    }
}