.sidebar {
  background-color: $black;
  text-align: center;
  position: absolute;
  z-index: $zIndex--4;
}

.sidebar.g-sidebar {
  width: 200px;
  height: 165px;
  top: -70px;
  left: -85px;
  border-radius: 50%;
}

.sidebar.i-sidebar {
  width: 70px;
  height: 100%;
}

.f-logo {
  border: none;
}

.sidebar.i-sidebar .f-logo {
  position: relative;
  top: 2em;
}

.sidebar.g-sidebar .f-logo {
  position: absolute;
  top: 90px;
  left: 79px;
  width: 95px;
  height: 55px;
}

.f-logo svg {
  width: 36px;
  height: 36px;
  fill: $golden;
  margin-right: .3em;
}

.f-logo:hover svg {
  fill: $white;
}

.share-wrapper {
  cursor: pointer;
  z-index: $zIndex--4;
}

.i-sidebar .share-wrapper {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 1.5em;
  text-align: center;
}

.share__toggle {
  color: $golden;
}

.icon-share {
  margin: .2em 0 0 -.1em;
  fill: $white;
  width: 25px;
  height: 25px;
    &:hover {
      fill: $golden;
    }
}

.share:hover svg {
  fill: $white;
}

.i-sidebar .share:hover svg {
  fill: $golden;
}

@media screen and (max-width: $mq-small) {
  .sidebar.g-sidebar {
    width: 170px;
    top: -80px;
    left: -75px;
  }

  .sidebar.g-sidebar .f-logo {
    top: 97px;
    width: 70px;
  }
}

@media screen and (max-width: $mq-xsmall) {
  .u-extra {
    margin-bottom: 0;
  }

  .share__toggle svg {
    width: 20px;
    height: 20px;
  }
}