/*---mega menu --*/
.mega-menu .vnav--level2 {
    width:100%;
    background:white;
    padding: 20px;
}
.mega-menu .vnav__subnav.vnav--level2 {
    -webkit-transition: all .3s;
    transition: all .3s;
    visibility: hidden;
    opacity: 0;
    display: block !important;
}
.mega-menu .vnav__item:hover .vnav__subnav.vnav--level2,
.mega-menu .vnav__item.hovered .vnav__subnav.vnav--level2 {
    opacity: 1;
    visibility: visible;
}
.mega-menu .vnav__item {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.mega-menu .vnav__item:hover {
    background: none;
}
.mega-menu .vnav--level3 .vnav__item {
    display: block !important;
}
.mega-menu .vnav__subnav.vnav--level3,
.mega-menu .vnav__subnav.vnav--level4 {
    border: none;
    position: static;
    display: block;
}
.mega-menu .vnav__item:nth-last-child(2) > .vnav__subnav.vnav--level2 {
    left: auto;
    right: 0;
}
.lt-ie10 .mega-menu .vnav--level2 {
    min-width: 500px;
}
.lt-ie10 .mega-menu .column.first {
    min-width: 200px;
}

#main-nav .vnav__subnav.vnav--level2 > .vnav__item > .vnav__link { display:block;text-align:center}
#main-nav .vnav__subnav.vnav--level2 > .vnav__item > .vnav__link:before {
    display:block;
    margin:0 auto}

/*portable power*/
#main-nav .vnav__subnav--power > .vnav__item > .vnav__link[href*="portable-charger"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/reeljuice.jpg')}
#main-nav .vnav__subnav--power > .vnav__item > .vnav__link[href*="power-bank"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/reeljuice-wc.jpg')}
/*stylus*/
#main-nav .vnav__subnav--stylus > .vnav__item > .vnav__link[href*="Apex-Fine-Point-Active-Stylus"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/apex.jpg')}
#main-nav .vnav__subnav--stylus > .vnav__item > .vnav__link[href*="TruGlide-Fiber-Tip-Stylus"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/truglide.jpg')}
#main-nav .vnav__subnav--stylus > .vnav__item > .vnav__link[href*="kickstarter-flip-stylus"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/flip.jpg')}
/*stand*/
#main-nav .vnav__subnav--stand > .vnav__item > .vnav__link[href*="360-universal-tablet-ipad-stand-and-holder"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/gripstand.jpg')}
#main-nav .vnav__subnav--stand > .vnav__item > .vnav__link[href*="Smartphone-Ring-Stand"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/ringstand.jpg')}
/*accessories*/
#main-nav .vnav__subnav--accessories > .vnav__item > .vnav__link[href*="microfiber-cleaning-cloths-for-touchscreens"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/smartie.jpg')}
#main-nav .vnav__subnav--accessories > .vnav__item > .vnav__link[href*="ipad-cases-with-stylus-holder"]:before {
    content:url('/v/vspfiles/templates/arrival/images/menu/case.jpg')}
/*---mega menu end --*/

#main-nav {
  font-family: inherit; }
  #main-nav .vnav {
    list-style: none;
    padding: 0;
    margin: 0; }
    #main-nav .vnav__item {
      background: transparent;}
    #main-nav .vnav__item:hover {
      background: transparent; }
    #main-nav .vnav__link {
      color: black;
      background: transparent;
      display: block;
      padding: 40px 25px;
      text-decoration: none;
      text-align: center;
      font-size: 1vw;
      letter-spacing: 0.05em; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        #main-nav .vnav__link {
          font-size: 1.4vw;
          padding: 29px 20px; } }
      #main-nav .vnav__link:hover {
        color: black;
        text-decoration: none; }
    #main-nav .vnav__item:hover > .vnav__subnav {
      display: block; }
    #main-nav .vnav__subnav {
      background: white;
      display: none;
      position: absolute;
      z-index: 1; }
    #main-nav .vnav__subnav .vnav__item {
      display: inline-block; }
    #main-nav .vnav__subnav .vnav__item:first-child {
      margin-left:8.3333%; }
    #main-nav .vnav__subnav .vnav__link {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: transparent;
      color: black;
      white-space: nowrap;
      text-align: left;
      font-size: 1vw;
      padding: 11px 15px; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        #main-nav .vnav__subnav .vnav__link {
          font-size: 1.4vw; } }
      #main-nav .vnav__subnav .vnav__link:hover {
        color: #666;
        background: white;
        text-decoration: none; }
    #main-nav .vnav--level1 {
      position: static;
      display: inline-table; }
    #main-nav .vnav--level1 > .vnav__item {
      position:static;
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline; }
    #main-nav .vnav--level1 > .vnav__item > .vnav__link {
        color:white;
    }
    #main-nav .vnav--horizontal .vnav__subnav {
      left: 0;
      top: 100%; }
    #main-nav .vnav--horizontal .vnav--level3, #main-nav .vnav--horizontal .vnav--level4 {
      left: 100%;
      top: 0; }
    #main-nav .vnav--vertical .vnav__item {
      display: block; }
    #main-nav .vnav--vertical .vnav__subnav {
      left: 100%;
      top: 0px; }
    .vnav--level1 > .vnav__item > .vnav__link {
        position:relative;
    }
    .vnav--level1 > .vnav__item:hover > .vnav__link:after {
      opacity:1;
      }
    .vnav--level1 > .vnav__item > .vnav__link:after {
      content:"";
      opacity:0;
      transition:all .3s;
      position:absolute;
      bottom:-1px;
      left:50%;
      transform:translateX(-50%);
        width: 0; 
        height: 0; 
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-bottom: 25px solid white;
    }
     .vnav--level2 > .vnav__item > .vnav__link {
        padding:20px;
    }
    .vnav--level1 > .vnav__item > .vnav__link:only-child:after {
        border-left: 35px solid white;
        border-right: 35px solid white;
        border-bottom: 5px solid white;
    }
    #main-nav .vnav__link--active:after {
      opacity:1;
      border-left: 35px solid white;
      border-right: 35px solid white;
      border-bottom: 5px solid white;
    }
    .vnav__subnav--support {
        text-align:center;
    }
    .vnav__subnav--support > .vnav__item {
        margin:0 100px 0 !important;
    }
    #main-nav .vnav__item:hover .vnav__link--active:not(:only-child):after {
      border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-bottom: 25px solid white;
    }