.cp-nav {
    width: 320px;
    position: fixed;
    z-index: 999;
    top:0;
    right:-320px;
    transition: right .3s ease;
    //background: $darkGray;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: scroll;
    .admin-bar & {
        top: 32px;
        @include mq(adminbar, max) {
            top: 46px;
        }
    }
    &.active {
        right:0;
        box-shadow: -1px 0px 5px #000000;
    }
    &__top {
        margin: 0;
    }
    &__title {
        position: relative;
        padding: 0 0 0 20px;
        display: inline-block;
    }
    &__username {
        display: inline-block;
        position: relative;
        @include font-quicksand(none,32px);
        word-break: break-all;
    }  
    &__game-playing {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        span {
            width: 100%;
        }
        &--line-1 {
            @include font-quicksand(#0E0E10,19px,300);
        }
        &--line-2 {
            @include font-quicksand(#2ecc71,13px,300);
            text-transform: capitalize;
        }
    }
    &__middle {
        margin: 20px 0;
    }
    &__offline {
        @include font-quicksand(red,13px,300);
        .online & {
            display: none;
        }
    }
    &__online {
        display: none;
        .online & {
            display: block;
        }
    }
    &__wrapper {
        div {
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: left;
            }
            > ul {
                border-top: solid 1px #EFEFEF;
                padding: 40px 20px 0;
                li {
                    margin: 0 0 22px;
                    position: relative;
                    a {
                        @include font-quicksand(none,19px,300);
                        text-transform: uppercase;
                        text-decoration: none;
                    }
                    &.menu-item-has-children {
                        & .menu-item-has-children--toggle {
                            cursor: pointer;
                            position: absolute;
                            top:0;
                            right:0;
                            width: 18px;
                            height: 18px;
                            background-size: 18px 18px;
                            transform: rotateX(0deg);
                            transition: .3s transform ease;
                            span {
                                font-size: 8px;
                            }
                        }
                    }
                    &.active {
                        ul {
                            display: block;
                        }
                        .menu-item-has-children--toggle {
                            transform: rotateX(180deg);
                        }
                    } 
                }
            }
            > ul ul {
                display: none;
                margin: 22px 0 0 15px;
            }
        }
    }
    &__bottom {
        display: none;
        .online & {
            display: block;
        }
        a {
            font-size: 14px;
        }
    }
    &__close--icon {
        display: flex;
        align-items: center;
        width: 20px;
        position: absolute;
        z-index: 102;
        top:10px;
        right:10px;
        span {
            color: #fff;
            width: 100%;
            height: auto;
            font-size: 20px;
        }
    }    
}

.cp-header {
    background-color: var(--navPrimaryBgColour);
    &__new-wrapper {
      width: calc(100%);
      max-width: 1440px;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: flex-end;
    }
    &__logo {
      max-width: 288px;
      height: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;        
      a {
        display: flex;
        align-items: center;
        max-height: 82px;
        max-width: 100%;
        position: relative;
        z-index: 1;
        img {
          width: 100%;
          max-height: 100%;
          vertical-align: top;
        }
      }
    }    
    &__navigation {
      width: calc(100% - var(--logoWidth));
      max-width: 1440px;
      // margin: 0 auto;
      padding: 10px;
      // @include mq(phone-wide, max) {
      //   width: 50%;
      // }
      // &.l-nav-both {
      //   width: auto;
      //   flex-grow: 1;
      //   nav {
      //     > ul > li {
      //       margin: 0 10px;
      //       padding: 0 10px;
      //     }
      //   }
      // }
      // &.l-nav-left {
      //   nav {
      //     text-align: left;
      //     > ul > li {
      //       margin-left: 0;
      //       padding-left: 0;
      //     }
      //   }
      //   @include mq(tablet-wide, max) {
      //     display: none;
      //   }      
      // }
      // &.l-nav-right {
      //   nav {
      //     text-align: right;
      //     > ul > li {
      //       margin-right: 0;
      //       padding-right: 0;
      //     }        
      //   }
      //   @include mq(tablet-wide, max) {
      //     display: none;
      //   }
      // }     
      // &.l-mobile-only {
      //   display: none;
      //   @include mq(tablet-wide, max) {
      //     display: block;
      //   }
      // }
      nav {
        height: 100%;
        width: 100%;
        text-align: right;
        .l-reverse & {
          text-align: left;
        }
        &.is-open + button {
          display: block;
        }
        ul {
  
        }
        ul li {
          list-style-type: none;
        }
        > ul {
          padding: 0;
          margin: 0;
          height: 100%;
          display: inline-block;
          vertical-align: middle;
        }
        > ul > li {
            margin: 0 20px;
            padding: 0 20px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            &:last-child {
              margin-right: 0;
            }
            &:first-child {
              .l-reverse & {
                margin-left: 0;
                padding-left: 0;
              }
            }          
            &:hover {
              > ul {
                visibility: visible;
                opacity: 1;
                max-height: 1000px;
                z-index: 99;
                > li {
                  opacity: 1;
                }
              }
            }
        }
        > ul > li > ul {
          visibility: hidden;
          opacity: 0;
          max-height: 0;
          transition: opacity 0.1s ease-out, max-height 2s ease-out;
          background-color: var(--navPrimaryBgColour);
          padding: 0 20px 10px;
          margin: 0;
          position: absolute;
          top:calc(100% + 8px);
          left:0;
          box-shadow: 2px 2px 2px 0px rgba(0,0,0,.2), -2px 2px 2px 0px rgba(0,0,0,.2);
          &:before {
            content: "";
            position: absolute;
            top: -20px;
            left:0;
            height: 20px;
            width: 100%;
          }
        }
        > ul > li > ul > li {
          text-align: left;
          white-space: nowrap;
          opacity: 0;
          transition: all .3s ease;
          transition-delay: .15s;
          position: relative;
          a {
            line-height: 40px;
          }
          &:hover {
            > ul {
              opacity: 1;
              visibility: visible;
              max-width: 1000px;
              > li {
                opacity: 1;
              }
            }
          }        
        }       
        > ul > li > ul > li > ul {
          opacity: 0;
          visibility: hidden;
          max-width: 0;
          transition: opacity 0.1s ease-out, max-width 2s ease-out;
          background-color: var(--navPrimaryBgColour);
          padding: 0 20px 10px;
          margin: 0;
          position: absolute;
          top:0;
          left:calc(100% + 20px);
          box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2),2px -2px 2px 0 rgba(0,0,0,.2);
          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: -20px;
            height: 100%;
            width: 20px;
          }        
        }
        > ul > li > ul > li > ul > li {
          text-align: left;
          white-space: nowrap;
          opacity: 0;
          transition: all .3s ease;
          transition-delay: .15s;
          position: relative;
          a {
            line-height: 40px;
          }
        }
        a {
              display: block;
            //   @include font-body();
              color: var(--navTextColour);
              text-decoration: none;
              position: relative;
              line-height: 60px;
        }
        > ul > li > a {
          &:before {
            backface-visibility: hidden;
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
            content: " ";
            position: relative;
            transition: all 0.25s ease-in-out;
            width: 0;
            margin: 0 auto;
            display: block;
            bottom: -50px;
          }
          &:hover {
            &:before {
              backface-visibility: hidden;
              border-color: var(--navtextUnderlineColour);
              transition: width 350ms ease-in-out;
              width: 100%;
            }              
          }
        }
        > ul > li > ul > li a {
          &:before {
            backface-visibility: hidden;
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
            content: " ";
            position: absolute;
            transition: all 0.25s ease-in-out;
            height: 0;
            width: 1px;
            display: block;
            bottom: 50%;
            left:-8px;
          }
          &:hover {
            &:before {
              backface-visibility: hidden;
              border-color: var(--navPrimaryBgColour);
              transition: all .35s ease-in-out;
              height: 80%;
              bottom: 10%;
            }              
          }
        }      
      }
    }
  }