moonleerecords/moonlee-website

.social-boxes {
  background-color: $color-gold;

  .social-box {
    display: block;
    float: left;
    height: 400px;
    margin-right: 2%;
    overflow: hidden;
    width: 32%;

    &:last-of-type {
      margin-right: 0;
    }

    .inner-box {
      float: left;
      height: 47%;
      margin-right: 6%;
      position: relative;
      width: 100%;

      &:hover .icon-yellow-link {
        color: $color-white;
      }
    }

    .medium-box {
      @extend .inner-box;

      &.twitter-box {
        background-color: $color-summer-green;
        box-sizing: border-box;
        padding: 20px 20px 46px;
      }
    }

    .small-box {
      @extend .inner-box;
      margin-bottom: 0;
      top: 6%;
      width: 47%;

      &:last-child {
        margin-right: 0;
      }
    }

    .social-content {
      background: no-repeat center center;
      background-size: cover;
      box-sizing: border-box;
      font-size: 20px;
      font-weight: lighter;
      height: 100%;
      width: 100%;
    }

    .social-type {
      bottom: 10px;
      left: 20px;
      position: absolute;
      z-index: 10;
    }
  }
}

@include respond-to(small) {
  .social-boxes {
    display: none;
  }
  //.social-boxes {
  //  .social-box {
  //    float: none;
  //    overflow: visible;
  //    width: 100%;
  //
  //    .medium-box {
  //      bottom: 6%;
  //      display: inline-block;
  //      width: 100%;
  //    }
  //
  //    .small-box {
  //      bottom: 6%;
  //      display: inline-block;
  //      width: 100%;
  //    }
  //
  //    div {
  //      width: 100%;
  //    }
  //  }
  //}
}