.call-to-action {
    $block: unquote("#{&}");
    &--wide-back {
      padding: 10px;
      font-size: $font-x-small;
      background: #F1E5FF;
    }

    &__item {
      &-text {
        color: #7300FF;
        display: block;
        font-weight: 600;
        padding: 10px 15px;
        text-align: center;
        text-decoration: underline;
        text-transform: uppercase;
      }
      &-button--right,
      &-button--left {
        &:after {
          display: block;
          background-size:auto;
          position: absolute;
          top: 35%;
        }
      }
    }


    &__nav {
      &-item-text {
        cursor: pointer;
        text-transform: uppercase;
        text-decoration: underline;
        color: $springster-purple;
        font-size: $font-x-small;
        font-weight: bold;
        position: relative;
        display: block;
        text-align: center;
        &--article-comments {
          padding-bottom: 15px;
        }
        &--right {
          margin: 0 30px;
          line-height: 24px;
          &:after {
            background-image: url("/static/img/icons/icons.png"), url("/static/img/icons/icons.svg") linear-gradient(transparent, transparent);
            background-repeat: no-repeat;
            background-position: 50%;
            content:"";
            position: absolute;
            margin: 0 0 0 10px;
            width: 25px;
            height: 25px;
          }

          &-wide {
            margin: 0 30px;
            line-height: 24px;
            text-align: left;
            &:after {
              background-image: url("/static/img/icons/next.png"), url("/static/img/icons/next.svg") linear-gradient(transparent, transparent);
              background-repeat: no-repeat;
              background-position: 50%;
              content:"";
              position: absolute;
              right: 0;
              margin: 0 0 0 10px;
              width: 24px;
              height: 25px;
            }
          }
         }
         &--left {
           line-height: 24px;
           &:before {
            background-image: url("/static/img/icons/icons.png"), url("/static/img/icons/icons.svg") linear-gradient(transparent, transparent);
            background-repeat: no-repeat;
            background-position: 50%;
            content: "";
            position: absolute;
            left: 0;
            margin: 0 0 0 10px;
            width: 25px;
            height: 25px;
           }
         }
      }
    }

    &__button {
      cursor: pointer;
      text-align: center;
      display: block;
      width: 95%;
      border-radius: 5px;
      white-space: normal;
      &--primary {
        background-image: url('/static/img/buttons/button-sprite.png');
        background-size: 1870px 334px;
        background-color: $springster-purple;
        background-position: -792px -123px; //What should be doen with these
        border: none;
        color: #fff;
        font-size: $font-small;
        font-weight: bold;
        margin: 16px auto;
        height: 40px;
      }
      &--secondary {
        background-image: url('/static/img/buttons/button-sprite.png');
        background-size: 1870px 334px;
        background-color: #D7DBDD;
        background-position: -1728px -260px;
        color: $springster-purple;
        margin: 16px auto;
        height: 42px;
      }
      &-text {
        cursor: pointer;
        font-size: $font-small;
        color: #fff;
        padding: 8px 0 0;
        display: block;
        border-radius: 5px;
        input {
          border: 0;
          display: block;
          border: 3px solid red;
        }
        &--primary,
        &--secondary {
          color: #fff;
          background-color: $springster-purple;
        }
        &--hyperlink {
          background-color: $springster-purple;
          font-size: $font-x-small;
          color: $springster-purple;
          text-transform: uppercase;
          text-decoration: underline;
        }
        &--disabled {
          color: $cool-grey;
        }
        &--yellow {
          color: $springster-purple;
          background-color: $sunny-yellow;
          padding: 8px 0;
        }
      }
      &--yellow {
        background: url('/static/img/buttons/button-yellow.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center 50%;
        margin: 8px;
        width: 95%;
      }
    }
}
