.helpbar {
  position: fixed;
  right: 1em;
  top: 290px;
  width: 48px;
}

.helpbar > ul {
  margin: 0;
  padding: 0;
}

.helpbar > ul:after {
  content: "";
  clear: both;
  display: block;
}

.helpbar__item {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.helpbar__item + .helpbar__item {
  margin-top: 6px;
}

.helpbar__ctrl {
  display: block;
  width: 48px;
  height: 48px;
  background: #f0483c none no-repeat center;
  background-size: 36px 36px;
  border-radius: 50%;
  color: white;
  position: relative;
  left: 0;
  transition: left .33s;
}

.helpbar__ctrl:focus,
.helpbar__ctrl:hover {
  left: -4px;
  box-shadow: 0 0 20px rgba(255,255,245,.5) inset;
}

.helpbar__ctrl--phone {
  /* material:phone */
  background-image: url(data:image/svg+xml,%3Csvg%20fill=%22white%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%3E%3Cpath%20d=%22M13.25%2021.59c2.88%205.66%207.51%2010.29%2013.18%2013.17l4.4-4.41c.55-.55%201.34-.71%202.03-.49C35.1%2030.6%2037.51%2031%2040%2031c1.11%200%202%20.89%202%202v7c0%201.11-.89%202-2%202C21.22%2042%206%2026.78%206%208c0-1.11.9-2%202-2h7c1.11%200%202%20.89%202%202%200%202.49.4%204.9%201.14%207.14.22.69.06%201.48-.49%202.03l-4.4%204.42z%22/%3E%3C/svg%3E);
}

.helpbar__ctrl--chat {
  /* material:chat */
  background-image: url(data:image/svg+xml,%3Csvg%20fill=%22white%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%3E%3Cpath%20d=%22M40%204H8C5.79%204%204.02%205.79%204.02%208L4%2044l8-8h28c2.21%200%204-1.79%204-4V8c0-2.21-1.79-4-4-4zM12%2018h24v4H12v-4zm16%2010H12v-4h16v4zm8-12H12v-4h24v4z%22/%3E%3C/svg%3E);
}

.helpbar__ctrl--info {
  /* material:info_outline */
  background-image: url(data:image/svg+xml,%3Csvg%20fill=%22white%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%3E%3Cpath%20d=%22M22%2034h4V22h-4v12zm2-30C12.95%204%204%2012.95%204%2024s8.95%2020%2020%2020%2020-8.95%2020-20S35.05%204%2024%204zm0%2036c-8.82%200-16-7.18-16-16S15.18%208%2024%208s16%207.18%2016%2016-7.18%2016-16%2016zm-2-22h4v-4h-4v4z%22/%3E%3C/svg%3E);
}

.helpbar__ctrl--callback {
  /* material:phone_forwarded */
  background-image: url(data:image/svg+xml,%3Csvg%20fill=%22white%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%3E%3Cpath%20d=%22M36%2022l10-10L36%202v6h-8v8h8v6zm4%209c-2.49%200-4.89-.4-7.14-1.14-.69-.22-1.48-.06-2.03.49l-4.4%204.41c-5.67-2.88-10.29-7.51-13.18-13.17l4.4-4.41c.55-.55.71-1.34.49-2.03C17.4%2012.89%2017%2010.49%2017%208c0-1.11-.89-2-2-2H8c-1.11%200-2%20.89-2%202%200%2018.78%2015.22%2034%2034%2034%201.11%200%202-.89%202-2v-7c0-1.11-.89-2-2-2z%22/%3E%3C/svg%3E);
}

.helpbar__ctrl--mail {
  /* material:mail_outline */
  background-image: url(data:image/svg+xml,%3Csvg%20fill=%22white%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%3E%3Cpath%20d=%22M40%208H8c-2.21%200-3.98%201.79-3.98%204L4%2036c0%202.21%201.79%204%204%204h32c2.21%200%204-1.79%204-4V12c0-2.21-1.79-4-4-4zm0%2028H8V16l16%2010%2016-10v20zM24%2022L8%2012h32L24%2022z%22/%3E%3C/svg%3E);
}

.helpbar__label,
.helpbar__content {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 9px;
  right: 75px;
  transition: all .5s;
  background: rgba(0,0,0,.6667);
  border-radius: 1px;
  padding: 5px 10px;
  color: white;
  font-size: 14px;
  line-height: 19px;
  white-space: nowrap;
}

.helpbar__label--double,
.helpbar__content--double {
  top: 0;
}

.helpbar__ctrl:hover .helpbar__label {
  opacity: 1;
  right: 49px;
}

.helpbar__item--active .helpbar__ctrl .helpbar__label {
  opacity: 0;
  right: 75px;
}

.helpbar__item--active .helpbar__content {
  opacity: 1;
  right: 53px;
  pointer-events: auto;
}

@media (max-width: 959px) {
  .helpbar {
    background: #222222;
    position: static;
    width: 100%;
  }

  .helpbar__item {
    float: left;
  }

  .helpbar__item + .helpbar__item {
    margin-top: 0;
    margin-left: 1px;
  }

  .helpbar__ctrl {
    top: 0;
    transition: top .33s;
  }

  .helpbar__ctrl:focus,
  .helpbar__ctrl:hover {
    top: -4px;
    left: 0;
  }

  .helpbar__label,
  .helpbar__content {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 75px;
    left: 0;
  }

  .helpbar__label--double,
  .helpbar__content--double {
    top: auto;
  }

  .helpbar__ctrl:hover .helpbar__label {
    right: auto;
    bottom: 49px;
  }

  .helpbar__item--active .helpbar__ctrl .helpbar__label {
    right: auto;
    bottom: 75px;
  }

  .helpbar__item--active .helpbar__content {
    right: auto;
    bottom: 53px;
  }
}