@media all {
  .header__side-buttons .container .caption {
    display: table-cell;
    vertical-align: middle;
  }
}
@media (min-width: 850px) {
  .header__side-buttons.hover .container,
  .header__side-buttons .container:hover {
    width: 165px;
  }
  .header__side-buttons .container .buttons {
    width: 165px;
  }
  .header__side-buttons .container .button {
    cursor: pointer;
  }
  .header__side-buttons .container .button:hover {
    background-color: #AE90FA;
  }
  .header__side-buttons .container .caption {
    font-size: 11px;
  }
}
@media (max-width: 849px) {
  .header__side-buttons .container {
    top: 54px;
    transition: width cubic-bezier(0.2, 0.01, 0.45, 1) 0.15s;
  }
  .header__side-buttons .container .buttons {
    width: 150px;
  }
  .header__side-buttons .container .button {
    width: 100%;
    height: 50px;
    padding-left: 50px;
  }
  .header__side-buttons .container .picto {
    height: 18px;
  }
  .header__side-buttons .container .caption {
    font-size: 10px;
  }
  .header__side-buttons .background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity cubic-bezier(0.2, 0.01, 0.45, 1) 0.15s, visibility cubic-bezier(0.2, 0.01, 0.45, 1) 0.15s;
  }
  .header__side-buttons.open .container {
    width: 150px;
  }
  .header__side-buttons.open .background {
    opacity: 1;
    visibility: visible;
  }
}