#home {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  #services {
    display: flex;
    justify-content: space-between;
    max-width: 1220px;
    padding: 0px 10px 10px 10px;
    width: 100%;
    @media (max-width: 800px) {
      align-items: center;
      flex-direction: column;
      > #spacer {
        display: none;
      }
    }
    > div:not(#spacer) {
      display: flex;
      flex-direction: column;
      margin: 10px 0px 0px 0px;
      flex: 1;
      width: 100%;
      > div {
        > a {
          align-items: center;
          display: flex;
          position: relative;
          text-decoration: none;
          @media (pointer: fine) {
            &:hover {
              cursor: pointer;
              > .hover {
                z-index: 1;
              }
            }
          }
          > .border {
            height: 100%;
            position: absolute;
            top: 0px;
            width: 40%;
          }
          > img {
            width: 100px;
            @media (pointer: coarse) {
              &.hover {
                z-index: 1;
              }
            }
            &.hover {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              z-index: -1;
            }
          }
          > h2 {
            text-align: right;
          }
        }
      }
      > .level-one {
        > a {
          padding: 20px 20px 20px 20px;
          top: 2px;
          &:not(:first-of-type) {
            margin: 50px 0px 0px 0px;
          }
          > .background {
            background-color: var(--colorGreyTranslucent);
            border-radius: 0px 0px 30px 30px;
            height: calc(100% - 20px);
            left: 10px;
            position: absolute;
            top: 10px;
            width: calc(100% - 20px);
          }
          > .border {
            border-bottom: 2px solid var(--colorGreen);
            border-left: 2px solid var(--colorGreen);
            border-radius: 0px 0px 0px 40px;
            left: 0px;
          }
          > .hover {
            left: 20px;
          }
        }
      }
      > .level-two {
        display: flex;
        flex: 1;
        flex-direction: column;
        position: relative;
        > a {
          justify-content: flex-end;
          padding: 15px 20px 15px 20px;
          &:nth-of-type(1) {
            > .border {
              border-radius: 0px 40px 0px 0px;
              border-top: 2px solid var(--colorGreen);
            }
          }
          > .border {
            border-right: 2px solid var(--colorGreen);
            right: 0px;
          }
          > .hover {
            right: 20px;
          }
        }
        > .background {
          background-color: var(--colorGreyTranslucent);
          border-radius: 30px 30px 0px 0px;
          height: calc(100% - 20px);
          left: 10px;
          position: absolute;
          top: 10px;
          width: calc(100% - 20px);
        }
        > #filler {
          flex: 1;
          border-right: 2px solid var(--colorGreen);
        }
      }
    }
    #spacer {
      width: 20px;
      height: 100%;
    }
  }
  #servicesTitle {
    display: flex;
    justify-content: center;
    padding: 20px 20px 0px 20px;
    width: 100%;
    > div {
      background-color: var(--colorGreyTranslucent);
      border-radius: 30px 30px 0px 0px;
      max-width: 1180px;
      padding: 30px 10px 30px 20px;
      width: 100%;
    }
  }
}