/*
===== COMMON =====
 */
.resp-nav { visibility: hidden; position: absolute; }
.resp-nav-load { position: absolute; top: 12px; left: -5px; cursor: pointer; display: none; }
.resp-nav-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(39,39,39,0.8); display: none; z-index: 100000; }
.resp-nav .desktop-only, .resp-nav .mobile-only { display: none; }


/*
===== DESKTOP =====
 */
.resp-nav.desktop .desktop-only { display: block; }
.resp-nav.desktop { width: 100%; height: 40px; margin: 0 auto; position: relative; background: #880034; visibility: visible; z-index: 10000; }
.device-md .resp-nav.desktop { height: 40px; }
.resp-nav.desktop li { position: relative; }
.resp-nav.desktop li:hover { z-index: 999; }
.resp-nav.desktop li:hover > .sub { display: block !important; }

.resp-nav.desktop nav { margin: 0 auto; z-index: 30; position: relative; }


/** Sticky */
.resp-nav-sticky .resp-nav.desktop { height: 40px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); }
.resp-nav-sticky .resp-nav.desktop nav>ul>li { line-height: 40px; }
.resp-nav-sticky .resp-nav.desktop nav>ul>li:before { height: 40px; }
.resp-nav-sticky .resp-nav.desktop nav>ul>li.last.right:after { height: 40px; }
.sticky-placeholder { height: 40px !important; }


/** Top level links */
.resp-nav.desktop nav>ul>li { float: left; }

.resp-nav.desktop nav>ul>li>a { height: 40px; position: relative; font-size: 12px; font-weight: 500; color: #ffffff; line-height: 24px; padding: 8px 10px; display: block; text-decoration: none; }
.device-md .resp-nav.desktop nav>ul>li>a { padding: 8px 5px; }
.resp-nav.desktop nav>ul>li>a.twolines { line-height: 14px; }
.resp-nav.desktop nav>ul>li>a.twolines .br { display: block; }
.resp-nav.desktop nav>ul>li.active>a { background: #000066; color: #ffffff; }
.resp-nav.desktop nav>ul>li:hover>a { background: #000066; color: #ffffff; }
.resp-nav.desktop nav>ul>li.highlight>a { background: #670c24; color: #ffffff; }
.resp-nav.desktop nav>ul>li.highlight2>a { background: #01ca0a; color: #ffffff; }


.resp-nav.desktop nav>ul>li:before { content: ""; height: 40px; border-left: 1px solid #993b5f; display: block; position: absolute; top: 0; left: -1px; }
.device-md .resp-nav.desktop nav>ul>li:before { height: 40px; }
.resp-nav.desktop nav>ul>li.right { border-left: 1px solid #993b5f; border-right: none; }
.resp-nav.desktop nav>ul>li.last.right:after { content: ""; height: 40px; border-right: 1px solid #993b5f; display: block; position: absolute; top: 0; right: -1px; }
.device-md .resp-nav.desktop nav>ul>li.last.right:after { height: 40px; }


/** Sub Nav Styles */
.resp-nav.desktop li li { font-size: 13px; font-weight: 400; text-transform: none; }
.resp-nav.desktop li li:last-child { }
.resp-nav.desktop li li a { line-height: 18px; padding: 5px 15px; text-decoration: none; color: #2c2c2c; display: block; }
.resp-nav.desktop li li:hover>a { text-decoration: underline; color: #2c2c2c; }
.resp-nav.desktop i { position: absolute; top: 5px; right: 5px; }


/** Sub Nav Positioning */
.resp-nav.desktop .sub { position: absolute; top: -1px; left: 100%; width: 100%; display: none; }
.resp-nav.desktop nav>ul>li>.sub { left: 0; top: 100%; }
.resp-nav.desktop .sub.right { left: auto; right: 0; }
.resp-nav.desktop .sub.right .sub { left: auto; right: 100%; }


/** Sub Nav Col Sizes */
.resp-nav.desktop .col-1 { width: 230px; }
.resp-nav.desktop .col-2 { width: 480px; }
.resp-nav.desktop .col-3 { width: 750px; }
.resp-nav.desktop .col-4 { width: 990px; }
.resp-nav.desktop .col-brand { width: 1140px; }


/** Sub Nav Colours */
.resp-nav.desktop .sub { padding: 10px; background: #ffffff; box-shadow: 0px 15px 30px 5px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 15px 30px 5px rgba(0,0,0,0.25);  -moz-box-shadow: 0px 15px 30px 5px rgba(0,0,0,0.25); }
.resp-nav.desktop .sub .sub { top: -10px; background: #ffffff; box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.25);  -moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.25); }
.resp-nav.desktop .sub .sub .sub { background: #ffffff; }
.resp-nav.desktop .sub .sub .sub .sub { background: #ffffff; }


/** Hides */
.resp-nav.desktop h2, .resp-nav.desktop button { display: none; }


/** Sub Nav Brands */
.resp-nav.desktop .brands .sub { padding: 15px; }
.resp-nav.desktop .brands li { border-bottom: none; }
.resp-nav.desktop .brands li a { padding: 0; text-decoration: none; }
.resp-nav.desktop .brands li:hover>a { background: none; }
.resp-nav.desktop .brands li a img { border: 1px solid transparent; }
.resp-nav.desktop .brands li:hover>a img { border: 1px solid #e5e5e5; }

.resp-nav.desktop .brands li span { display: none; }
.resp-nav.desktop .brands .view-all { clear: left; display: block; text-align: center; }

.resp-nav.mobile .brands img { display: none; }


/*
===== MOBILE =====
 */
.resp-nav-load.mobile { display: block; }
.resp-nav.mobile .mobile-only { display: block; }
.resp-nav.mobile { position: fixed; top: 0; left: -100%; width: 80%; height: 100%; background: #ffffff; z-index: 100001; overflow: hidden; }
.resp-nav.mobile nav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; }
.resp-nav.mobile nav>ul { height: 100%; overflow: auto; }
.resp-nav.mobile .load-nav { position: absolute; top: 0; left: 0; }
.resp-nav.mobile li { line-height: 20px; border-bottom: 1px solid #cccccc; }
.resp-nav.mobile li.right { float: none !important; }
.resp-nav.mobile li:hover { background: #f9f9f9; }
.resp-nav.mobile a { color: #2c2c2c; padding: 10px 25px 10px 15px; display: block; position: relative; text-decoration: none; }
.resp-nav.mobile a i { color: #2c2c2c; position: absolute; right: 15px; top: 50%; margin-top: -8px; }
.resp-nav.mobile ul { position: static; padding: 0; }

.resp-nav.mobile .sub { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; display: none; }
.resp-nav.mobile li.open>.sub { display: block; }

.resp-nav.mobile .sub-title { background: #f2f2f2; padding: 8px 0; border-bottom: 1px solid #cccccc; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }
.resp-nav.mobile button { background: #ffffff; border-radius: 5px; border: 1px solid #cccccc; position: absolute; top: 8px; left: 15px; padding-top: 2px; }
.resp-nav.mobile button.fwd { left: auto; right: 15px; }
.resp-nav.mobile button i { color: #2c2c2c; padding: 0; }
.resp-nav.mobile h2 { color: #2c2c2c; padding: 0 55px; text-align: center; line-height: 30px; height: 30px; overflow: hidden; margin: 0; }

.resp-nav.mobile .sub-links { height: 100%; padding-top: 47px; overflow: auto; margin: 0; }