.btn-mediaobject {
  margin: 20px auto;
}

.btn-mediaobject, .btn-carousel, .btn-article {
  width: em(80px);
  display: block;
  text-align: left;
  position: relative;

  &:hover {
    a {
      color: $red-logo;
      text-decoration: none;
    }
    .btn-line {
      background-color: $red-logo;
      transform: translateX(20%);

      .btn-arrow-up, .btn-arrow-down {
        background-color: $red-logo;
      }
      .btn-arrow-up {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
      }
      .btn-arrow-down {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
      }
    }
  }

  a {
    color: $footer-color;
    text-decoration: none;
    font-family: $second-font;
    text-transform: uppercase;
    font-size: em(12px);
    transition: color $speed;
    font-weight: bold;

    &:focus {
      color: $footer-color!important;
      text-decoration: none!important;
    }
  }


  .btn-line {
    position: absolute;
    top: 50%;
    right: em(15px);
    width: em(20px);
    height: 2px;
    margin-top: -1px;
    background-color: $footer-color;
    transition: all $speed;

    .btn-arrow-up {
      @include transform(rotate(45deg));
      transform-origin: right top;
    }
    .btn-arrow-down {
      @include transform(rotate(-45deg));
      transform-origin: right bottom;
    }
    .btn-arrow-up, .btn-arrow-down {
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 8px;
      height: 2px;
      background-color: $footer-color;
      transition: all $speed;
    /*  @include transform-origin(right);*/
    }
  }
}

.btn-article {
  width: em(180px);
  margin-top: em(15px);
  margin-bottom: em(15px);
  cursor: pointer;
}



.aui .btn {
  /*@media (max-width: 979px) {*/
    padding: 6px 8px!important;
 /* }*/
}