.animated-svg {
  max-width: 100%;
  margin: auto; }
  .acf-block-preview .animated-svg {
    position: relative;
    padding-top: 20%;
    background-color: rgba(255, 255, 255, 0.5); }
    .acf-block-preview .animated-svg::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      border: 2px solid rgba(204, 204, 204, 0.75);
      background-image: linear-gradient(to bottom right, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0) calc(50% - 1px), rgba(204, 204, 204, 0.75) calc(50% - 1px), rgba(204, 204, 204, 0.75) calc(50% + 1px), rgba(204, 204, 204, 0) calc(50% + 1px)), linear-gradient(to bottom left, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0) calc(50% - 1px), rgba(204, 204, 204, 0.75) calc(50% - 1px), rgba(204, 204, 204, 0.75) calc(50% + 1px), rgba(204, 204, 204, 0) calc(50% + 1px));
      content: ''; }
    .acf-block-preview .animated-svg::after {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      color: #000;
      font-size: 9px;
      font-weight: 700;
      white-space: nowrap;
      text-align: center;
      text-shadow: 0 0 1px #fff,  0 0 1px #fff,  0 0 1px #fff;
      content: attr(data-animation); }


/*# sourceMappingURL=animated-svg.scss.css.map*/