#header-menu-mobile {
  display: none;
  position: relative;
  @media (max-width: 900px) or (pointer: coarse) {
    display: flex;
  }
  > .bar {
    background-color: var(--colorBlue);
    border-radius: 1.5px;
    display: none;
    height: 3px;
    position: absolute;
    right: 10px;
    transition: all 0.2s ease;
    width: 35px;
    z-index: 1;
    @media (max-width: 900px) or (pointer: coarse) {
      display: block;
    }
    &:nth-of-type(1) {
      top: 10px;
    }
    &:nth-of-type(2) {
      top: 26px;
    }
    &:nth-of-type(3) {
      top: 42px;
    }
  }
  > input {
    cursor: pointer;
    display: none;
    height: 55px;
    margin: 0px;
    width: 55px;
    opacity: 0;
    z-index: 2;
    @media (max-width: 900px) or (pointer: coarse) {
      display: block;
    }
    &:checked {
      ~ .bar {
        background-color: white;
        &.bar:nth-of-type(1) {
          transform: translate(0px, 16px) rotate(45deg);
          transform-origin: 17.5px 1.5px;
        }
        &.bar:nth-of-type(2) {
          opacity: 0;
          visibility: hidden;
        }
        &.bar:nth-of-type(3) {
          transform: translate(0px, -16px) rotate(-45deg);
          transform-origin: 17.5px 1.5px;
        }
      }
      ~ .services-menu {
        width: 300px;
      }
    }
  }
  > .services-menu {
    background-color: var(--colorBlue);
    box-shadow: -1px 0px 3px var(--colorBlue);
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    right: 0px;
    top: 0px;
    transition: all 0.2s ease;
    width: 0px;
    > div {
      align-items: flex-end;
      display: flex;
      flex: 0 1 1030px;
      flex-direction: column;
      height: 100%;
      padding: 0px 15px 0px 15px;
      > div {
        margin: 100px 0px 0px 0px;
        overflow: auto;
        > a {
          color: white;
          display: block;
          text-decoration: none;
          @media (pointer: fine) {
            &:hover {
              color: var(--colorGreen);
            }
          }
          &.first {
            font-size: 2rem;
            padding: 10px 40px 10px 20px;
          }
          &.second {
            padding: 10px 20px 10px 40px;
          }
        }
      }
    }
  }
}