.category-section{
  position: relative;
  border-color: $themePrimary;

  .background-graphic{
    position: absolute;
    height: calc(100% - 30px);
    z-index: -1;
    &:before{
      position: absolute;
      content: "";
      width: 60%;
      height: 30px;
      background-color: $themeSecondary;
      bottom: 0px;
      left: 0;
    }
  }

  p{
    text-align: left;
    text-transform: uppercase;
    padding-top: $sizeLarge;
    font-size: 1em;
  }

  .services-wrapper{
    //padding-left: $sizeLarge*4;
    padding-bottom: $sizeLarge*4;
  }

  .services-outer{
    margin-top: $sizeLarge*2;
  }

  &:before, &:after{
    content: "";
    position: absolute;
  }

  &:before{
    height: 90%;
    width: 150px;
    background-color: $themeSecondary;
    left: 0;
    top: -150px;
    z-index: -1;
  }

  &:after{
    bottom: -30px;
    width: 80%;
    height: 60px;
    left: 0;
    background-color: $themePrimary;
  }

  @include media-breakpoint-up(lg) {
    &:nth-child(even){
      .services-wrapper{
        padding-left: 140px;
      }
    }
    &:nth-child(odd){
      .services-wrapper{
        padding-right: 40px;
      }
    }
  }

  @include media-breakpoint-down(md) {
    margin-top: $sizeLarge*2;

    .services-wrapper{
      padding: 0;
    }
    .background-graphic{
      display: none;
    }
    &:before, &:after{
      display: none;
    }
  }

  &:nth-child(odd){
    border-color: $themeSecondary;
    margin-top: 300px;
    h3{
      color: $themeSecondary;
      text-align: right;
      padding-right: $sizeLarge;
      width: 100%;
    }

    p{
      text-align: right;
    }

    .background-graphic{
      &:before{
        display: none;
      }
    }

    &:before{
      height: calc(100% + 150px);
      width: 100px;
      background-color: $themePrimary;
      right: 0;
      left: unset;
      top: -150px;
      z-index: -1;
    }
    &:after{
      width: 20px;
      height: 40%;
      left: unset;
      right: 100px;
      bottom: 0;
      top: unset;
      background-color: $themeSecondary;
    }

    @include media-breakpoint-down(md) {
      margin-top: 100px;
      h3{
        padding-right: $sizeMedium;
      }
      .services-wrapper{
        padding: 0;
      }
    }
  }
}