@charset "UTF-8";
.wp-admin [data-type="acf/stories"]:not(.is-selected)::before, .wp-admin [data-type="acf/stories"]:not(.is-selected)::after {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-admin [data-type="acf/stories"]:not(.is-selected)::before, .wp-admin [data-type="acf/stories"]:not(.is-selected)::after {
  flex-direction: column;
}

[data-type="acf/stories"] tr.acf-row:nth-child(even) > td.acf-fields {
  background-color: #fdf8ee;
}

[data-type="acf/stories"] {
  --block-name: none;
  --editor-no-preview: "ⓘ⠀Full preview unavailable for this block.";
  --bg-color: #fef3cd;
  z-index: 10;
  min-height: 100px;
  background-color: var(--bg-color);
}
.wp-admin [data-type="acf/stories"] {
  position: relative;
  min-height: 80px;
}
.wp-admin [data-type="acf/stories"]:not(.is-selected)::before, .wp-admin [data-type="acf/stories"]:not(.is-selected)::after {
  position: absolute;
  left: 0;
  right: auto;
  padding: 0 var(--gap-largest) 0 var(--gap);
  background-color: var(--bg-color);
  border-bottom: 7px solid #ffbc26;
  max-width: 900px;
  height: 40px;
  margin: 0 auto;
  cursor: pointer;
  align-items: flex-start;
}
.wp-admin [data-type="acf/stories"]:not(.is-selected)::before {
  content: var(--block-name);
  top: 0;
  font-weight: bold;
  font-variant: all-small-caps;
}
.wp-admin [data-type="acf/stories"]:not(.is-selected)::after {
  content: var(--editor-no-preview);
  top: 40px;
}
.wp-admin [data-type="acf/stories"] .acf-block-preview {
  display: none;
}
[data-type="acf/stories"] {
  --block-name: "Stories";
}

.stories__container {
  margin: 0 auto;
  max-width: 600px;
  background-color: #fff;
  padding: var(--gap);
  position: relative;
  display: grid;
  grid-gap: 3rem;
  grid-template-areas: "pic" "nav" "story";
}
@media (min-width: 64em) {
  .stories__container {
    max-width: 1000px;
    padding-left: calc(180px + var(--gap));
    padding-bottom: 0;
    border-bottom: var(--gap) solid #fff;
    grid-gap: var(--gap);
    row-gap: 0;
    overflow: hidden;
    grid-template-rows: 180px 1fr;
    grid-template-areas: "pic nav nav" "pic story story";
  }
}
.stories__pics, .stories__nav, .stories__stage {
  overflow: hidden;
}
.stories__stage {
  cursor: grab;
}
.stories__pic-wrap {
  overflow: hidden;
}
.stories__pic-wrap img {
  width: 100%;
}
.stories__pics {
  grid-area: pic;
}
@media (min-width: 64em) {
  .stories__pics {
    width: 180px;
    position: absolute;
    top: 0;
    left: -180px;
  }
}
.stories__pics img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.stories__pics .slick-list,
.stories__pics .slick-track {
  height: 100%;
}
.stories__nav-container {
  grid-area: nav;
  overflow: hidden;
}
@media (max-width: 63.99em) {
  .stories__nav-container {
    display: flex;
  }
}
.stories__nav {
  --nav-thumb-height: 40px;
  grid-area: nav;
  width: calc(100% - 40px);
  max-width: 580px;
  position: relative;
}
@media (min-width: 64em) {
  .stories__nav {
    width: 100%;
    max-width: none;
  }
  .stories__nav::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 70%);
    width: 200px;
    height: 100%;
    pointer-events: none;
  }
}
.stories__nav img {
  width: 50px;
  height: var(--nav-thumb-height);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  margin-right: 1.5rem;
  cursor: pointer;
}
@media (min-width: 64em) {
  .stories__nav img {
    --nav-thumb-height: 100px;
    width: 125px;
    margin-right: var(--gap-element);
  }
}
@media (max-width: 63.99em) {
  .stories__nav img:not(.slick-current) {
    filter: grayscale(1) brightness(0.6);
  }
}
.stories__nav-controls {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 2;
  background-color: #fff;
}
.stories__nav-controls .slick-next {
  right: 0;
}
.stories__nav-controls .slick-next::before {
  display: none;
}
.stories__nav-controls .slick-next,
.stories__nav-controls .slick-prev {
  top: 0;
  position: relative;
  transform: unset;
}
@media (min-width: 64em) {
  .stories__nav-controls {
    display: block;
  }
}
.stories__stage {
  grid-area: story;
  padding-top: 1.5rem;
}
.stories .stories__content-container h3,
.stories .stories__content-container h4 {
  margin-bottom: 1.5rem;
}
.stories .stories__content-container h3 {
  font-size: 2.2rem;
}
.stories .stories__content-container h4 {
  font-family: effra, proxima-nova, Helvetica, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #4b4b4b;
}
.stories button.slick-next {
  width: 24px;
  height: 24px;
  --btn-margin: 0 0 0 var(--gap-element);
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url("../../../src/img/chevron-button-right.png");
  background-size: contain;
  background-repeat: no-repeat;
}
@media (min-width: 64em) {
  .stories button.slick-next {
    width: 33px;
    height: 33px;
    margin-top: 2rem;
    font-size: 2rem;
  }
}
.stories .stories__content-container:not(:focus-visible),
.stories button.slick-next:not(:focus-visible),
.stories .slick-track > img:not(:focus-visible) {
  outline: none;
}

/*# sourceMappingURL=stories.css.map*/