.posts-structure-explainer-component {
  height: 400px;
  padding: 40px 100px 40px 10px;
  background-color: #18898d;
  border: 15px solid #1fcd98;
  border-radius: 20px;
  color: white; }
  .posts-structure-explainer-component .explains-container {
    height: 100%;
    position: relative; }
    .posts-structure-explainer-component .explains-container .explain-type-structure {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      opacity: 0; }
      .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper {
        width: 350px;
        margin: 0px auto;
        position: relative;
        height: 200px; }
        .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .node-item {
          width: 30px;
          height: 30px;
          position: absolute;
          font-size: 1.5rem;
          z-index: 3; }
          .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .node-item .node-point-txt {
            position: absolute;
            bottom: calc(100% + 5px);
            left: calc((100% - 60px) / 2);
            width: 60px;
            text-align: center; }
          .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .node-item.type-post .node-point-type-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #1fcd98; }
          .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .node-item.type-form {
            width: 50px;
            height: 50px; }
            .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .node-item.type-form .node-point-type-img {
              width: 50px;
              height: 50px;
              background-image: url("../../images/global-icons/tree/list.svg");
              background-size: 100% 100%;
              background-position: center center; }
        .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .line {
          height: 2px;
          transform-origin: left center;
          position: absolute;
          z-index: 1; }
          .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .line:before {
            content: '';
            display: block;
            position: absolute;
            left: 20px;
            top: 0px;
            width: calc(100% - 20px * 2);
            height: 100%;
            background-image: linear-gradient(to right, #fff 7px, transparent 0%);
            background-size: 10px 2px;
            background-repeat: repeat-x; }
        .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .skip-bow {
          position: absolute;
          overflow: hidden;
          transform-origin: left top; }
          .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .skip-bow .skip-arrow {
            position: absolute;
            right: 3px;
            top: 1px;
            width: 15px;
            height: 15px;
            transform-origin: right top;
            transform: rotate(-20deg); }
            .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .skip-bow .skip-arrow:before, .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .skip-bow .skip-arrow:after {
              content: '';
              display: block;
              position: absolute;
              top: 0px;
              right: 0px;
              width: 15px;
              height: 2px;
              transform-origin: right top;
              background-color: white; }
            .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .skip-bow .skip-arrow:after {
              transform: rotate(-40deg); }
          .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-items-wrapper .skip-bow .bow-circle {
            position: absolute;
            border: 2px solid white;
            border-radius: 50%;
            bottom: 0px; }
      .posts-structure-explainer-component .explains-container .explain-type-structure .node-type-explain-txt {
        font-size: 2.5rem;
        line-height: 1.5;
        letter-spacing: 1px; }
      .posts-structure-explainer-component .explains-container .explain-type-structure.type-journey {
        opacity: 1;
        animation-name: journeyAnimation;
        animation-duration: 30s;
        animation-iteration-count: infinite; }
@keyframes journeyAnimation {
  0% {
    opacity: 1; }
  15% {
    opacity: 1; }
  20% {
    opacity: 0; }
  95% {
    opacity: 0; }
  100% {
    opacity: 1; } }
        .posts-structure-explainer-component .explains-container .explain-type-structure.type-journey .node-type-items-wrapper .node-number-2, .posts-structure-explainer-component .explains-container .explain-type-structure.type-journey .node-type-items-wrapper .line-1-2 {
          animation-name: journeyGlitter;
          animation-duration: 30s;
          animation-iteration-count: infinite; }
@keyframes journeyGlitter {
  0% {
    opacity: 1; }
  5% {
    opacity: 1; }
  6% {
    opacity: 0; }
  7% {
    opacity: 1; }
  11% {
    opacity: 1; }
  12% {
    opacity: 0; }
  14% {
    opacity: 1; }
  100% {
    opacity: 1; } }
      .posts-structure-explainer-component .explains-container .explain-type-structure.type-fork {
        animation-name: forkAnimation;
        animation-duration: 30s;
        animation-iteration-count: infinite; }
@keyframes forkAnimation {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  25% {
    opacity: 1; }
  40% {
    opacity: 1; }
  45% {
    opacity: 0; }
  100% {
    opacity: 0; } }
        .posts-structure-explainer-component .explains-container .explain-type-structure.type-fork .node-type-items-wrapper .node-number-0, .posts-structure-explainer-component .explains-container .explain-type-structure.type-fork .node-type-items-wrapper .line-0-1, .posts-structure-explainer-component .explains-container .explain-type-structure.type-fork .node-type-items-wrapper .line-0-2, .posts-structure-explainer-component .explains-container .explain-type-structure.type-fork .node-type-items-wrapper .line-0-3 {
          animation-name: forkGlitter;
          animation-duration: 30s;
          animation-iteration-count: infinite; }
@keyframes forkGlitter {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  25% {
    opacity: 1; }
  29% {
    opacity: 1; }
  30% {
    opacity: 0; }
  31% {
    opacity: 1; }
  35% {
    opacity: 1; }
  36% {
    opacity: 0; }
  37% {
    opacity: 1; }
  40% {
    opacity: 1; } }
      .posts-structure-explainer-component .explains-container .explain-type-structure.type-skip {
        animation-name: skipAnimation;
        animation-duration: 30s;
        animation-iteration-count: infinite; }
@keyframes skipAnimation {
  0% {
    opacity: 0; }
  45% {
    opacity: 0; }
  50% {
    opacity: 1; }
  65% {
    opacity: 1; }
  70% {
    opacity: 0; }
  100% {
    opacity: 0; } }
        .posts-structure-explainer-component .explains-container .explain-type-structure.type-skip .node-type-items-wrapper .skip-bow {
          animation-name: skipGlitter;
          animation-duration: 30s;
          animation-iteration-count: infinite; }
@keyframes skipGlitter {
  0% {
    opacity: 0; }
  45% {
    opacity: 1; }
  50% {
    opacity: 1; }
  55% {
    opacity: 1; }
  56% {
    opacity: 0; }
  57% {
    opacity: 1; }
  60% {
    opacity: 1; }
  61% {
    opacity: 0; }
  62% {
    opacity: 1; }
  65% {
    opacity: 1; }
  70% {
    opacity: 0; }
  100% {
    opacity: 0; } }
      .posts-structure-explainer-component .explains-container .explain-type-structure.type-form {
        animation-name: formAnimation;
        animation-duration: 30s;
        animation-iteration-count: infinite; }
@keyframes formAnimation {
  0% {
    opacity: 0; }
  70% {
    opacity: 0; }
  75% {
    opacity: 1; }
  90% {
    opacity: 1; }
  95% {
    opacity: 0; } }
        .posts-structure-explainer-component .explains-container .explain-type-structure.type-form .node-type-items-wrapper .node-number-1 {
          animation-name: formGlitter;
          animation-duration: 30s;
          animation-iteration-count: infinite; }
@keyframes formGlitter {
  0% {
    opacity: 0; }
  70% {
    opacity: 1; }
  75% {
    opacity: 1; }
  80% {
    opacity: 1; }
  81% {
    opacity: 0; }
  82% {
    opacity: 1; }
  85% {
    opacity: 1; }
  86% {
    opacity: 0; }
  87% {
    opacity: 1; }
  90% {
    opacity: 1; }
  95% {
    opacity: 1; } }

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