//
// Icons
//

.icon {
  display: inline-block;
  height: 1em;
  fill: currentColor;
  vertical-align: baseline;
  width: auto;
  &--rotated {
    transform: rotate(180deg);
  }
  // Set width for icons to fix IE bug
  &-angle-double-down {
    width: (14.78em / 16);
  }
  &-angle-double-left {
    width: (17em / 16);
  }
  &-angle-double-right {
    width: (17em / 16);
  }
  &-arrow-down {
    width: (30em / 16);
  }
  &-bars {
    width: (22em / 16);
  }
  &-book {
    width: (16.55em / 16);
  }
  &-camera-retro {
    width: (18.67em / 16);
  }
  &-child {
    width: (16em / 16);
  }
  &-close {
    width: (16em / 16);
  }
  &-download {
    width: (17.33em / 16);
  }
  &-external-link {
    width: (18.67em / 16);
  }
  &-external-link-square {
    width: (16em / 16);
  }
  &-facebook {
    width: (18.31em / 16);
  }
  &-facebook-square {
    width: (16em / 16);
  }
  &-globe {
    width: (12em / 16);
  }
  &-handshake {
    width: (17.5em / 16);
  }
  &-headphones {
    width: (17.9em / 16);
  }
  &-home {
    width: (20em / 16);
  }
  &-instagram {
    width: (20em / 16);
  }
  &-lightbulb {
    width: (11.82em / 16);
  }
  &-linkedin {
    width: (16.74em / 16);
  }
  &-picture {
    width: (16.54em / 16);
  }
  &-search {
    width: (16em / 16);
  }
  &-soundcloud {
    width: (36.86em / 16);
  }
  &-spotify {
    width: (16em / 16);
  }
  &-star {
    width: (16.78em / 16);
  }
  &-theatre {
    width: (17em / 16);
  }
  &-trash {
    width: (13.61em / 16);
  }
  &-twitter {
    width: (19.7em / 16);
  }
  &-twitter-square {
    width: (16em / 16);
  }
  &-youtube-play {
    width: (22.76em / 16);
  }
}

.icon-css {
  display: inline-block;
  height: 1em;
  position: relative;
  vertical-align: middle;
  &-burger {
    background: currentColor;
    height: .16666667em;
    top: (.16666667em / -2);
    width: 1.375em;
    &:before,
    &:after {
      background: currentColor;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      width: 100%;
    }
    &:before {
      top: -200%;
    }
    &:after {
      bottom: -200%;
    }
  }
}