/*	==========================================================================
	Navigation
	========================================================================== */

/*-----Top Nav ---- */

#topnav {
    float: right;
    display: none;
    font-size: 0.9em;
    padding: 11px 0;
}
#topnav ul li {
    display: table-cell;
    line-height: 1.2em;
    color: #929bad;
}
#topnav ul li:after {
    content: "/";
    padding: 0 8px;
    color: #929bad;
}
#topnav ul li:last-child:after {
    content: "";
    padding: 0px
}
#topnav ul li a {
    color: #929bad;
    text-decoration: none;
}

#topnav ul li a:hover {
    color: #454545;
}

.mobilelogin {
    display: block;
    width: 38px;
    height: 38px;
    background-image: url(/images/structure/login-mobile.png);
    background-size: cover;
    padding: 20px;
    position: absolute;
    top:11px;
    right:11px;
    text-indent: 9999px;
    opacity: 0.7;
}

@media only screen and (min-width: 830px) {
    #topnav {
        display: inline-block;
    }

    .mobilelogin {
        display: none;
    }
}
@media only screen and (min-width: 1024px) {
    #topnav {
        padding: 19px 0;
    }
}
/*----- Main Nav ---- */

nav {
    width: 80px;
    clear: both;
    display: block;
    position: relative;
    z-index: 100;
}
nav ul {
    padding: 0;
    position: relative;
}
nav ul li {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li a {
    color: #fff;
    line-height: 1.2em;
    padding: 12px 14px;
    display: block;
    text-decoration: none;
    border-left: 3px solid transparent;
    font-weight: 600;
    text-transform: uppercase;
    text-rendering: auto;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-property: all;
    -moz-transition-duration: 0.3s;
    -o-transition-property: all;
    -o-transition-duration: 0.3s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    cursor: pointer;
}
nav ul li a:hover {
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #de5636;
    color: #de5636;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-property: all;
    -moz-transition-duration: 0.3s;
    -o-transition-property: all;
    -o-transition-duration: 0.3s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

nav ul li a.active {
    color: #fff;
    background: #de5636;
    border-left: 3px solid #de5636;
}

nav ul.subs a {
    padding: 0 14px;
}
nav ul.subs a:before {
    content: ">";
    font-size: .6em;
    margin-right: .5em;
}

nav ul.subs a strong {
    font-size: .7rem;
}

nav ul.subs p {
    display: none;
}

nav ul.subs li.webdesa {
    display: none;
}

@media only screen and (min-width: 830px) {
    nav {
        border-top: 1px solid #e2ebfa;
        height: 60px;
        width: 100%;
        position: relative;
        background: #f3f6f9;
    }
    nav ul {
        margin: 0 auto;
        width: 100%;
        text-align: center;
        display: table;
        margin-top: 8px;
    }
    nav ul li {
        border: none;
        padding: 0;
        display: table-cell;
        margin: 6px 1px 6px 0;
    }



    nav ul li:last-child {
        margin-right: 0;
    }
    nav ul li a {
        display: inline-block;
        font-size: .9em;
        padding: 10px;
        color: #33393f;
        border: 1px solid transparent;
        margin: 0;
    }
    nav ul li a:hover {
        background: #f7f7f7;
        text-decoration: none;
        border-radius: 0;
        border: 1px solid transparent;
        color: #424a51;
    }
    nav ul li a.active {
        color: #fff;
        background: #3ea1c3;
        text-decoration: none;
        border-radius: 4px;
        border: 1px solid transparent;
    }
    #show-nav {
        display: none;
    }
    nav ul li a.has-sub.open {
        background: #fff;
        height: 48px;
        position: relative;
        z-index: 100;
        box-shadow: 0 -1px 0px 1px rgba(0,0,0,.05);
        border-radius: 0px;
    }
    nav ul li a.has-sub.open.active {
        color: #3ea1c3;
    }
    nav ul.subs {
        position: absolute;
        z-index: 12;
        top: 35px;
        left: 0;
        width: 100%;
        max-width: 1340px;
        padding: 2%;
        color: #333;
        background-color: #fff;
        box-shadow: 0 14px 40px -6px rgba(0,0,0,.22);
        opacity: 0;
        display: block;
        pointer-events: none;
        text-align: left;
        transform: translateY(-20px);
        transition: all 300ms ease;
    }
    nav ul.subs.full {
        display: flex;
        flex-wrap: wrap;
    }
    nav ul.subs.active {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0px);
    }
    nav ul.subs a {
        padding: .8em 1em;
        border-radius: 0;
    }
    nav ul.subs a:before {
        content: none;
    }
    nav ul.subs a:hover {
        border: 1px solid #dadada;
    }
    nav ul.subs li {
        margin: 0;
        flex: 1 1 45%;
    }
    nav ul.subs a strong {
        text-transform: uppercase;
        font-size: 1rem;
        text-align: left;
    }
    nav ul.subs p {
        text-transform: none;
        font-size: .8rem;
        text-align: left;
        margin: 0;
        display: block;
        font-weight: 400;
    }
    nav ul.subs ul.left13 {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        width: 33%;
        float:left;
        text-align: left;
    }
    nav ul.subs ul.left23 {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        width: 66%;
        float:left;
        text-align: left;
    }
    nav ul.subs li.webdesa {
        display: block;
        float: right;
        width: 32.5%;
    }
}


    nav ul li.desktop-only {
        display: none;
    }
    nav.nav-scrolled ul li.desktop-only {
        display: table-cell;
    }
    nav.nav-scrolled ul li.desktop-only a {
        background: #DE5636;
        color: #fff;
        border-radius: 4px;
    }
    nav.nav-scrolled ul li.desktop-only a:hover {
        background: #f16240;
        color: #fff
    }

@media only screen and (min-width: 1024px) {
    nav ul {
        width: 1006px;
        margin-top: 12px;
    }
    nav ul li a {
        font-size: 12px;
        padding: 7px 7px;
                line-height: 1.6em;
    }
}
html,
body,
#sb-site,
.sb-site-container,
.sb-slidebar {
    /* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
}
html {
    height: 100%;
    /* Site is as tall as device. */
    overflow-x: hidden;
    /* Stops horizontal scrolling. */
}
body {
    min-height: 100%;
    height: auto;
    position: relative;
    /* Required for static Slidebars to function properly. */
}
/* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */

html.sb-scroll-lock.sb-active:not(.sb-static) {
    overflow: hidden;
}
/* ----------
 * 002 - Site
 */

#sb-site,
.sb-site-container {
    /* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
    z-index: 1;
    /* Site sits above Slidebars */
    background: #f3f3f5;
}
/* ---------------
 * 003 - Slidebars
 */

@media only screen and (max-width: 830px) {
    .sb-slidebar {
        height: 100%;
        overflow-y: auto;
        /* Enable vertical scrolling on Slidebars when needed. */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
        /* Slidebars sit behind sb-site. */
        display: none;
        /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
        background-color: #222222;
        /* Default Slidebars background colour, overwrite this with your own css. */
        -webkit-transform: translate(0px);
        /* Fixes issues with translated and z-indexed elements on iOS 7. */
    }
    .sb-left {
        left: 0;
        /* Set Slidebar to the left. */
    }
    html.sb-static .sb-slidebar,
    .sb-slidebar.sb-static {
        position: absolute;
        /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
    }
    .sb-slidebar.sb-active {
        display: block;
        /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
        left: -280px;
        overflow: visible;
        background: #222222;
    }
    .sb-style-overlay {
        z-index: 9999;
        /* Set z-index high to ensure it overlays any other site elements. */
    }
    .sb-momentum-scrolling {
        -webkit-overflow-scrolling: touch;
        /* Adds native momentum scrolling for iOS & Android devices. */
    }
    /* Slidebar widths for browsers/devices that don't support media queries. */
    .sb-slidebar {
        width: 280px;
    }
    /* ---------------
	 * 004 - Animation
	 */
    .sb-slide,
    #sb-site,
    .sb-site-container,
    .sb-slidebar {
        background: #222222;
        -webkit-transition: -webkit-transform 400ms ease;
        -moz-transition: -moz-transform 400ms ease;
        -o-transition: -o-transform 400ms ease;
        transition: transform 400ms ease;
        -webkit-transition-property: -webkit-transform, left, right;
        /* Add left/right for Android < 4.4. */
        -webkit-backface-visibility: hidden;
        /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
    }
    /* --------------------
	 * 005 - Helper Classes
	 */
    .sb-hide {
        display: none;
        /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
    }
}
.sb-toggle-left {
    padding: 20px;
}
.sb-toggle-left .navicon-line {
    background-color: rgba(255,255,255,0.7);
    border-radius: 1px;
    height: 4px;
    margin-bottom: 3px;
    width: 24px;
    cursor: pointer;
}
@media (min-width: 830px) {
    .sb-toggle-left {
        display: none;
    }

.nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
    z-index: 12;
    box-shadow: 0 0.03em 0.2em #000;
}

}
/*----- Sub Nav ---- */

.subnav {
    display: table;
    width: 90%;
    margin: 20px auto 0;
}
.subnav ul#nav {
    padding: 0;
    overflow: hidden;
    display: table-row;
    width: 100%;
    text-align: center;
}
.subnav ul#nav li {
    list-style: none;
    display: inline-block;
    width: auto;
    padding: 0;
}
.subnav ul#nav li a {
    display: block;
    padding: 18px 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    background-color: rgba(40, 40, 40, 0.6);
}
.subnav ul#nav li:first-child a {
    border-left: none;
    border-radius: 4px 0 0 0;
}
.subnav ul#nav li:last-child a {
    border-left: none;
    border-radius: 0 4px 0 0;
}
.subnav ul#nav li a:hover {
    color: #fff;
    background-color: rgba(40, 40, 40, 0.4)
}
.subnav ul#nav .active a,
.subnav ul#nav li.active a:hover {
    color: #2d3646;
    background-color: #fff;
}

@media only screen and (min-width: 768px) {
.subnav {
    margin: 0 auto;
}
}

@media only screen and (min-width: 860px) {
.subnav ul#nav li {
    list-style: none;
    display: table-cell;
    width: auto;
    padding: 0;
}

.subnav ul#nav li a {
    min-height: 40px;
}

.vps .subnav ul#nav li{
    width: 33%;
}

}

/*----- Mid Nav (normally knoww as main nav subnav ---- */
nav ul li .midnav {
    display: block;

}
nav ul li .midnav ul li a {
    font-size: 12px;
    color:#fff;
    text-transform: capitalize;
    background: #4f4f4f;
    }

@media (min-width: 830px) {
    nav ul li .midnav {
        display: none;
    }
}

/*----- Mid Nav in page---- */
   .midnav {
       display: none;
   }
@media (min-width: 830px) {
   .midnav {
        position: absolute;
        top:0;
        left:0px;
        width:100%;
        background: none;
        height: auto;
       margin-top: 0;
       background: rgba(0,0,0,0.33);
    display:block;
	z-index:20;
    }
   .midnav .inner {
        width:1002px;
        background: none;
       margin: 0 auto;
    }


   .midnav ul {
       width: auto;
       margin: 0 auto;
       padding: 11px 0;
       display: table;
    }

  .midnav ul li {
      height: auto;
      display: inline-block;
	  text-align:center;
  }

  .midnav ul li a {
      padding: 4px 14px;
      border-radius: 4px;
      background: none!important;
      color: #fff;
      text-decoration: none;
	  display:block;

    }

  .midnav ul li.active a,
  .midnav ul li.active:hover a{
              background: #DF5939!important;
    }

  .midnav ul li:hover a {
        background: rgba(255,255,255,0.19)!important;
    }
}


/*----- Bottom Nav ---- */

#bottom-nav {
    width: 100%;
    overflow: auto;
    clear: both;
    background: #e8eaee;
    display: none;
    margin-bottom: 30px;
}
#bottom-nav ul {
    padding: 0;
}
#bottom-nav ul li a {
    color: #5c719b;
    line-height: 1.6em;
    padding: 12px 10px;
}
#bottom-nav ul li a:hover {
    color: #fff;
}
#bottom-nav ul li a.active {
    color: #fff;
    background: #2d3646
}
@media only screen and (min-width: 768px) {
    #bottom-nav {
        width: 100%;
        display: block;
    }
    #bottom-nav ul {
        margin: 0 auto;
        text-align: center
    }
    #bottom-nav ul li {
        border-bottom: 0;
        padding: 0;
        display: inline-block;
        margin: 0;
    }
    #bottom-nav ul li a {
        display: inline-block;
        font-size: 1em;
    }
    #bottom-nav ul li a:hover {
        color: #5c719b;
        text-decoration: underline;
    }
}

li.new > a {
    position: relative;
}
li.new > a:after {
    content: "NEW";
    letter-spacing: .05em;
    position: absolute;
    top: -0.8em;
    right: -0.8em;
    background: red;
    color: #fff;
    padding: 0 3px;
    font-size: .75em;
    line-height: 1.6em;
    border-radius: 4px;
}