@include breakpoint($mobile-breakpoint) {
  .open-nav{
    position: absolute;
    top:0;
    left:24%;

    width:50px;
    display: table-cell;
    height:100%;

    //Styles
    border-left:1px solid $top-nav-border;
    border-right:1px solid $top-nav-border;

    .icon-hamburger{
      //Layout
      width:50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      margin:0 auto;
      display: block;

      //Styles
      background:inline_image("svg/hamburger.svg") center center no-repeat;
      // background:url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'><style>.st0,.st1{display:none}.st1{stroke:#999;stroke-width:.1}.st1,.st2{fill:none;stroke-miterlimit:10}.st2{stroke:#FFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}</style><g id='grid'><path class='st0' d='M23-15.9c16.5 0 29.9 13.4 29.9 29.9S39.5 43.9 23 43.9-6.9 30.5-6.9 14 6.5-15.9 23-15.9m0-.1C6.4-16-7-2.6-7 14S6.4 44 23 44s30-13.4 30-30-13.4-30-30-30z'/><path class='st0' d='M23 4.1c5.5 0 9.9 4.4 9.9 9.9s-4.4 9.9-9.9 9.9-9.9-4.4-9.9-9.9 4.4-9.9 9.9-9.9m0-.1c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10S28.5 4 23 4z'/><path class='st0' d='M23-5.9C34-5.9 42.9 3 42.9 14S34 33.9 23 33.9 3.1 25 3.1 14 12-5.9 23-5.9m0-.1C12-6 3 3 3 14s9 20 20 20 20-9 20-20S34-6 23-6z'/><path class='st0' d='M53-16v60H-7v-60h60m0 0H-7v60h60v-60z'/><path class='st1' d='M-2-11l50 50m0-50L-2 39'/></g><path class='st2' d='M1 14h44M1 2h44M1 26h44' id='icons'/></svg>") center center no-repeat;
    }


    &:hover{
      background-color: $top-nav-hover;
    }
  }

  .nav-list{
    //layout
    position: absolute;
    top:100%;
    left:0;
    width:100%;

    //styling
    background-color: $mobile-nav-bg;

    li{

      a{
        display: block;
        padding:20px;
        width: calc(100% - 40px);

        //Styling
        text-decoration: none;
        font-size: 1.875em;
        color:$mobile-nav-txt;
        border-bottom: 1px solid $mobile-nav-brdr;

        &:hover{
          background:$mobile-nav-hover-bg;
          color:$mobile-nav-hover-txt;
        }

        &.has-subs{
          position: relative;

          &:after{
            content:"";
            position: absolute;
            width:15px;
            height:15px;
            top: 0;
            bottom: 0;
            right:30px;
            display: block;
            margin: auto;

            background:inline_image("svg/arrow_apple.svg") center center no-repeat;
            // background:url("data:image/svg+xml;utf8,<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-281 404.9 6.6 8.9\"><style>.st0{fill:none;stroke:#55a440;stroke-width:2;stroke-miterlimit:10}</style><path class=\"st0\" d=\"M-280 405.9l4 3.5-4 3.5\"/></svg>") center center no-repeat;
          }

          &:hover{
            &:after{
              background:inline_image("svg/arrow_white.svg") center center no-repeat;
              // background:url("data:image/svg+xml;utf8,<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-281 404.9 6.6 8.9\"><style>.st0{fill:none;stroke:#ffffff;stroke-width:2;stroke-miterlimit:10}</style><path class=\"st0\" d=\"M-280 405.9l4 3.5-4 3.5\"/></svg>") center center no-repeat;
            }
          }
        }

      }

      &.current-section{
        a{
          text-transform: uppercase;
          color: $mobile-nav-current-txt;


          &:hover{
            color:$mobile-nav-hover-txt;
          }
        }
      }

      &.previous-section{
        a{

          color: $mobile-nav-previous-txt;
          background:$mobile-nav-previous-bg;

          &:before {
            content:"";
            display: inline-block;
            width:15px;
            height: 15px;
            transform: rotate(180deg);
            margin:auto 8px auto 0;
            background:inline_image("svg/arrow_white.svg") center center no-repeat;
            // background:url("data:image/svg+xml;utf8,<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-281 404.9 6.6 8.9\"><style>.st0{fill:none;stroke:#fff;stroke-width:2;stroke-miterlimit:10}</style><path class=\"st0\" d=\"M-280 405.9l4 3.5-4 3.5\"/></svg>") center center no-repeat;
          }

          &:hover{
            color:$mobile-nav-hover-txt;
          }
        }
      }
    }
  }
}

@include breakpoint($mobile-and-tablet-breakpoint) {

}

@include breakpoint($tablet-and-desktop-breakpoint) {
  .primery-nav{
    position: relative;

     //Style
    background: $desktop-nav-bg;
    color:$desktop-nav-txt;


    .nav-holder{
      position: relative;
      float: left;
      left:50%;

      .primary-nav-list {
        position: relative;
        float: left;
        left:-50%;

      }
    }
  }

  .single{
    //Layout
    position: absolute;
    left:0;
    top:100%;
    width:100%;
    //style
    background: $desktop-nav-l1-bg;
    box-shadow: $desktop-nav-l1-shadow;
    // Level 1 Nav -
    .level-1 {
      .home-link{
        width:20%;
        height:50px;
        float:left;
        background: $desktop-nav-l1-home-bg;

        a{
          display: block;
          float: left;
          padding:15px 25px;

          //Styling
          text-decoration: none;
          color: $desktop-nav-l1-home-txt;
          font-size: 0.813em;
        }
      }
    }

    .touch-sub-nav{
      width: 80%;
      float: right;
      .list-holder{
        width: calc(100% - 100px);
        overflow: hidden;
        float: left;
        position: relative;
        height:40px;
      }

      .nav-mover{
        // normalize resets
        @include reset-normalize;

        // layout
        float: left;
        position: relative;
        margin:15px;
        width:10px;
        height:20px;

        // styling
        font-size: 1.25em; /* 20px */
        font-weight: 300;
        line-height: 1em;
        background-size: contain;

        &:after{
          content:"";
          position: absolute;

          top:0;
          // left:0;
          // right:0;
          width:1px;
          height:20px;

          background-color:$weekly-prog-nav-border;
       }

        &.move-left{
          background:inline_image("svg/move-left.svg") center center no-repeat;

           &:after{
              right:-20px;
           }

        }

         &.move-right{
           float:right;
           background:inline_image("svg/move-right.svg") center center no-repeat;


           &:after{
              left:-20px;
           }

        }
      }
    }

    .secondary-nav-touch-list{
        @include reset-normalize;
        position: absolute;
        left:0;
        height:50px;
        transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);

        li{
          float:left;
          display: inline-block;

          a{
            display: block;
            float: left;
            padding:10px 25px;

            //Styling
            text-decoration: none;
            color: $desktop-nav-l1-txt;
            font-size: 1em;


          }
        }

        .secondary-nav-list{
          &.level-1{

            //style
            li{
              float:left;
              display: inline-block;

              a{
                display: block;
                float: left;
                padding:20px 30px;

                //Styling
                text-decoration: none;
                color: $desktop-nav-l1-txt;
                font-size: 1.154em;
              }
            }
          }
        }
      }

    // Level 2 0r more nav
    .level-2 {


      // .title-link{
      //   background-color: $desktop-nav-list;
      // }

      .home-link{
        margin: 0 20px;
        padding:30px 0;

        a{
          font-size: 1.438em;
          text-transform: uppercase;
          text-decoration: none;
          font-weight: 300;
        }
      }

      .nav-list{
        @include reset-normalize;
        //styling
        background-color: $desktop-nav-list;


        float:left;
        margin-top:20px;

        //styling
        background-color: $desktop-nav-list;


        .secondary-nav-list{
           margin-top:20px;
        }
      }



      .secondary-nav-list{
        border-bottom: 1px solid $desktop-nav-l2-brdr;
        li{
          @include clearfix;
          position: relative;

          border-top: 1px solid $desktop-nav-l2-brdr;
          border-right: 1px solid $desktop-nav-l2-brdr;


          &.active, &:hover{
            a{
              &:after{
                content: "";
                position: absolute;
                top:0;
                bottom:0;
                right:0;
                width:10px;
                height:100%;
                display: block;

                background-color: $desktop-nav-l2-hover;
              }
            }

          }


          a{
            display: block;
            margin: 10px 10px 10px 30px;
            text-decoration: none;
            color:$desktop-nav-l2-txt;
            // font-weight: 300;


          }
        }
      }
    }

    .levels{


      .home-link, .title-link{

        border-bottom:1px solid $desktop-nav-l2-home-border;
        box-shadow: $desktop-nav-l2-home-brdr-sh;
        &:before{
          content:"";
          display: inline-block;
          width:10px;
          height:10px;
          margin: 3px 10px 3px 0;
          background:inline_image("svg/arrow_apple.svg") center center no-repeat;

          background-size: cover;

        }

        a{
          //Styles
          color: $desktop-nav-l2-home-txt;
          text-decoration: none;
        }
      }

      .title-link{
        margin: 0 20px;
        padding: 15px 0;
      }
    }

    .level-3, .level-4{
      margin-top: 20px;

      //styling
      background-color: $desktop-nav-list;



      .nav-list{
        // margin:10px 20px;

        li{
          a{
            //layout
            display: block;
            padding: 5px 20px;

            //Styles
            text-decoration: none;
            color:$desktop-nav-l2-txt;

            &.has-subs{
              position: relative;

              &:after{
                content:"";
                position: absolute;
                width:10px;
                height:10px;
                top: 0;
                bottom: 0;
                right:20px;
                display: block;
                margin: auto;
                background:inline_image("svg/arrow_apple.svg") center center no-repeat;

              }


            }


          }

          &.active, &:hover {
              a{
                //style
                background-color: $desktop-nav-l3-hover-bg;
                color:$desktop-nav-l3-hover-txt;

                &.has-subs{
                  &:after{
                    background:inline_image("svg/arrow_white.svg") center center no-repeat;

                }

                }
              }

            }
        }
      }
    }

    .level-3 {
      border-right: 1px solid $desktop-nav-l2-home-border;

    }

  }

}

@include breakpoint($tablet-breakpoint) {
  .single{
    .level-2 {
      .nav-list{
        width:33.33%;
      }
    }

    .level-3 {
      width: 33.33%;
      float:left;

    }

    .level-4 {
      // $width: percentage(6/12);
      width:calc(33.33% - 2px);
      float:left;

      // .nav-list{
      //   // margin:10px 20px;

      //   li{
      //     width:50%;
      //     float:left;
      //   }
      // }
    }
  }
}

@include breakpoint($desktop-breakpoint) {
  .single{
    .level-2 {
      .nav-list{
        width:percentage(3/12);
      }
    }

    .level-3 {
      width: percentage(3/12);
      float:left;

    }

    .level-4 {
      // $width: percentage(6/12);
      width:calc(50% - 2px);
      float:left;

      .nav-list{
        // margin:10px 20px;

        li{
          width:50%;
          float:left;
        }
      }
    }
  }
}