:root {
--nStepsLineColor: #CCCCCC;
--nStepsLineWidth: 10px;
}

  section.nSteps {
    padding-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
    }


  section.nSteps .nStepHolder {
      background: linear-gradient(to right, var(--nStepsLineColor), var(--nStepsLineColor));
      background-size: var(--nStepsLineWidth) 100%;
      background-position: center center;
      background-repeat: no-repeat;
      /* Voorkom herhaling van de gradient */
      padding-bottom: 3rem;
  }

  section.nSteps .nStepHolder:last-of-type{
    padding-bottom: 0;
  }

  section.nSteps .nStepHolder>[class^="nStep"]{
    background-color: #eeeeee;
    border-radius: 2em;
    padding: 2em;
    height: 100%;
    color: #FFF;
  }

  section.nSteps .nStepHolder h3 {
    font-size: 1.5em;
  }
  section.nSteps .nStepHolder p {
    font-size: 1em;
  }

  /* 1. Stijl voor de EVEN (.nStepHolder) elementen */
  section.nSteps .nStepHolder:nth-child(4n + 3) > [class^="nStep"] {
      background-color: var(--accent01);
      h5 { color:var(--dark01);}
  }

  /* 2. Stijl voor de ONEVEN (.nStepHolder) elementen */
  section.nSteps .nStepHolder:nth-child(4n + 1) > [class^="nStep"] {
      background-color: var(--dark01);
      h5 { color:#FFF;}
  }


  section.nSteps .bgHolder {
    display:none;
  }
  section.nSteps .bgDisplay {
overflow:hidden;

  }
  section.nSteps .bgDisplay svg path.connector-path {
    stroke:var(--nStepsLineColor) !important;
    stroke-width:var(--nStepsLineWidth) !important;

  }

  @media (min-width: 768px) {

      section.nSteps {
      .nStepHolder{
        padding-bottom: 0;
      }

        .bgHolder {
          display:none;
        }

       .bgHolder:nth-child(4n){
        flex-basis: 100%;
        height: 60px;
        display:flex;
        justify-content:center;

        .bgDisplay{

          margin:0 auto;
          height: 60px;
          width:50%;
         }
      }

      .nStepHolder:nth-child(4n + 1){
        background-size: 60% var(--nStepsLineWidth);
        background-position: right center;
      }

      .nStepHolder:nth-child(4n + 3){
             background-size: 60% var(--nStepsLineWidth);
             background-position: left center;
      }

      .nStepHolder:nth-child(4n + 1):last-of-type{
        background-size: 0 0;
      }

      .bgHolder:last-of-type{
            flex-basis: 100%;
            min-height: 50px;
            display:flex;
            justify-content:center;
          }
      }
    }

  @media (min-width: 992px) {

      section.nSteps .nStepHolder{

      }

    section.nSteps .row > .bgHolder {
    display:none;
    }

  section.nSteps .row > .bgHolder:nth-child(6n) {
     display: block; /* of display: flex, grid, etc. afhankelijk van de layout */

    .bgDisplay{
      margin:0 auto;
      height:80px;
      width:66.7%;
     }
   }

   section.nSteps .nStepHolder.s1,
   section.nSteps .nStepHolder.s4{
       background-size: 60% var(--nStepsLineWidth);
       background-position: right center;
    }
    section.nSteps .nStepHolder.s2,
    section.nSteps .nStepHolder.s5{
        background-size: 100% var(--nStepsLineWidth);
     }
    section.nSteps .nStepHolder.s3,
    section.nSteps .nStepHolder.s6{
        background-size: 60% var(--nStepsLineWidth);
        background-position: left center;
     }

    section.nSteps .nStepHolder:nth-child(6n - 1){
      background-size: 60% var(--nStepsLineWidth);
      background-position: left center;
    }

    section.nSteps .nStepHolder:last-child:nth-child(even){
      background-size: 0 0;
    }
}