

/* Non-overridable properties */
amp-fx-flying-carpet {
  position: relative !important;
  box-sizing: border-box !important;
}

/* Clip the contents of the flying-carpet so it is only viewable "inside" */
amp-fx-flying-carpet > .i-amphtml-fx-flying-carpet-clip {
  /* Absolutely so clipping works */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  /*
   * Use the deprecated clip style for browsers that do not support clip-path.
   * Basically everything supports this, but we include clip-path to
   * future-proof.
   */
  clip: rect(0, auto, auto, 0) !important;
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%) !important;
}

/* Fixed position container that creates the scroll effect */
amp-fx-flying-carpet > .i-amphtml-fx-flying-carpet-clip > .i-amphtml-fx-flying-carpet-container {
  position: fixed !important;
  top: 0 !important;
  width: 100%;
  height: 100%;

  /* Center contents in the container */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*
 * Included to force slow webkit browsers (Android) into rendering the
 * container using the GPU.
 */
amp-fx-flying-carpet > .i-amphtml-fx-flying-carpet-clip > .i-amphtml-fx-flying-carpet-container.i-amphtml-fx-flying-carpet-container-fix {
  -webkit-transform: translateZ(0) !important;
}

.i-amphtml-fx-flying-carpet-container > .i-amphtml-layout-responsive,
.i-amphtml-fx-flying-carpet-container > .i-amphtml-layout-fixed-height {
  align-self: stretch;
}
