.container {
  display: block;
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  z-index: 10;
  transform: translateX(calc(var(--customiser-transform) - 500px));
  transition: transform 0.25s ease-out;

  &.hidden {
    a {
      opacity: 0;
      transform: rotate(45deg) translate3d(0, -170px, 0);
    }
  }

  a {
    position: absolute;
    display: block;
    width: 200%;
    left: -20%;
    top: -30%;
    z-index: 901;
    cursor: pointer;
    background-color: #5c5c5c;
    color: #f0f0f0;
    padding: 0;
    line-height: inherit;
    text-decoration: none;
    text-align: center;
    font-family: montserrat, tahoma, sans-serif;
    font-weight: bold;
    font-size: 14px;
    box-shadow: -2px 3px 1px rgba(0, 0, 0, 0.23);
    opacity: 1;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0) rotate(45deg);
    transform-origin: 0 0;
    height: 44px;
    line-height: 47px;
    transition:
    background-color 0.2s ease-out 0s,
    transform 0.7s cubic-bezier(.7, 0, .25, 1),
    opacity 0.2s ease-out;

    &:hover {
      background-color: #4b4b4b;
      color: #FFF;
    }

    &:after,
    &:before {
      content: " ";
      position: absolute;
      z-index: 1;
      left: 0;
      width: 100%;
      height: 1px;
    }

    &:before {
      top: 3px;
    }

    &:after {
      bottom: 3px;
    }

    @media all and (max-width: 1920px) {
      width: 220%;
      left: -35%;
      top: -20%;
    }

    @media all and (max-width: 1460px) {
      width: 200%;
      left: -10%;
      top: -32%;
    }

    @media all and (max-width: 1024px) {
      width: 200%;
      left: -12%;
      top: -29%;
    }

    @media all and (max-width: 740px) {
      width: 200%;
      left: -10%;
      top: -31%;
    }

    @media all and (max-width: 560px) {
      width: 200%;
      left: -4%;
      top: -37%;
    }
  }
}