.call-to-action {
  padding: 10px 15px;
  &__hyperlink {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    &:hover, &:active, &:focus {
      text-decoration: underline;
    }
  }
  &__nav {
    font-weight: 500;
    &-item--replies-counter {
      color: $color-blue;
      float: right;
    }
    &-item-share {
      font-weight: 500;
      opacity: 1;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      &:hover, &:active, &:focus {
        opacity: 0.5;
      }
      &--twitter {
        background: url(/static/img/icons/tanzania/social-media.svg) no-repeat 0 0 / 100px;
        height: 30px;
        width: 30px;
        display: inline-block;
        vertical-align: middle;
      }
      &--facebook {
        background: url(/static/img/icons/tanzania/social-media.svg)  no-repeat 105% 0 / 100px;
        height: 30px;
        width: 30px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    &-item-text {
      color: $color-blue;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      display: block;
      margin: 1em auto 1.5em;
      font-weight: 500;
      &:hover, &:active, &:focus {
        text-decoration: underline;
      }
      &--right {
        color: $color-blue;
        text-align: right;
        &:after {
          background-image: url(/static/img/icons/tanzania/icon-sprite.png);
          background-position: 0 -28em;
          background-size: 265px;
          background-repeat: no-repeat;
          display: inline-block;
          content: " ";
          width: 40px;
          height: 25px;
          vertical-align: middle;
          margin: 0 15px 0;
        }
      }
      &--left {
        color: $color-blue;
        text-align: left;
        &:before {
          background-image: url(/static/img/icons/tanzania/icon-sprite.png);
          background-position: 0 -28em;
          background-size: 265px;
          background-repeat: no-repeat;
          display: inline-block;
          content: " ";
          width: 40px;
          height: 25px;
          vertical-align: middle;
          margin: 0 -10px 0;
          transform: rotate(180deg);
        }
      }
      &--readmore {
        text-align: left;
        padding: 0 10px;
      }
      &--disabled {
        color: $color-grayish-blue;
        cursor: auto;
        &:hover, &:active, &:focus {
          color: $color-grayish-blue;
        }
      }
    }
  }
  &__item {
    color: $color-blue;
    font-weight: 500;
  }
  &__button {
    border: none;
    color: $color-blue;
    text-align: center;
    text-transform: uppercase;
    padding: 0.5em 1em;
    display: block;
    text-decoration: none;
    &-text {
      display: block;
      text-align: center;
      font-weight: 500;
      transition: color .2s ease-out, text-decoration .2s ease-out;
      &:hover, &:active, &:focus {
        text-decoration: underline;
        text-underline-position: below;
      }
      &--primary {
        color: #fff;
      }
      &--hyperlink {
        background: transparent;
        //PROFILES ONLY?
        &:before {
          background-image: url(/static/img/icons/tanzania/icon-sprite.png);
          background-position: 0 -28em;
          background-size: 265px;
          background-repeat: no-repeat;
          display: inline-block;
          content: " ";
          width: 40px;
          height: 25px;
          vertical-align: middle;
          margin: 0 -10px 0;
          transform: rotate(180deg);
        }
      }
    }
    &--yellow,
    &--primary {
      background: $color-blue;
      color: #fff;
      cursor: pointer;
      height: 50px;
      padding: 1em;
      margin: 2em auto;
      position: relative;
      width: 90%;
      z-index: 99999999;

      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      &:hover, &:active, &:focus {
        background: $color-dar-blue;
        .call-to-action__button-text {
          text-decoration: none;
          color: #fff;
        }
      }
      &.call-to-action__button--loader {
        background: $color-blue url('/static/img/three-dots.svg') no-repeat center center/25%;
        color: #fff;
      }
      &.active {
        animation: pulse 0.5s ease 0s 1;
      }
    }
  }
  &__hyperlink {
    color: $color-blue;
  }
}
