@import url(https://fonts.googleapis.com/css?family=Fjalla+One);


/* Mobile first queries */
   #main-nav {
      width:100%;
      height:65px;
      background: url(/images/main_nav_bg.png) repeat-x 0 0;
      z-index:100;
   }
   #main-nav_mobile {
      width:0;
      height:100%;
      position:fixed;
      top:0;
      right:0;
   }
   .btn_nav_mobile {
      width:120px;
      height:auto;
      border:none;
      position:absolute;
      top:-55px;
      right:25px;
      display:block;
      z-index:900;
      background: #eee;
      border-radius: 6px;
   }
    ul.nav {
      position:relative;
      top:65px;
      left:50%;
      width:50%;
      clear:both;
   }
    ul.nav li {
      width:100%;
      border-bottom:1px solid #f9b27c;
      text-align:left;
   }
    ul.nav li a {
      width:70%;
      color:#fff;
      padding:26px 10% 26px 20%;
      text-decoration:none;
      display:inline-block;
   }
    ul.nav li a:hover {
       background-color:#ed7b25;
    }
   #main-nav .main > ul li > a {
      background:#ed7b25;
      text-transform:uppercase;
   }
   #main-nav .main > ul li ul li {
      border-bottom:1px dotted #fff;
   }
   #main-nav .main > ul li ul li a {
      background:#333;
   }
   #main-nav .main > ul li ul li ul li {
      border-bottom:1px dotted #ddd;
   }
   #main-nav .main > ul li ul li ul li a {
      background:#777;
   }
   #main-nav .main > ul li.has-sub ul {
      height:0;
      overflow:hidden;
   }
   #main-nav .main > ul li.has-sub > a {
      background-image: url("../nav/images/nav_arrow_sub.png");
      background-position: 7% center;
      background-repeat: no-repeat;
   }
   #nav_mobile {
      width:0;
   }

/* Larger Mobile Devices (iPhone 6/6+) Portrait Mode */
@media (min-width: 400px) {

}


/* Tablet (iPad/iPad Mini) Portrait Mode and Larger Mobile Devices (iPhone 6/6+) Landscape Mode */
@media (min-width: 550px) {
   #main-nav {
      border-top:none;
   }
    ul.nav li a {
      width:70%;
      color:#fff;
      padding:26px 13% 26px 17%;
      text-decoration:none;
      display:inline-block;
   }
   #main-nav .main > ul li.has-sub > a {
      background-image: url("../nav/images/nav_arrow_sub.png");
      background-position: 7% center;
      background-repeat: no-repeat;
   }
   .btn_nav_mobile {
      right:30px;
   }
}

/* For All Mobile and Tablet Potrait Mode  */
@media (max-width: 1023px) {
   ul.nav > li {
      width:100%!important;
   }
}

/* Tablet (iPad/iPad Mini) Landscape Mode */
@media (min-width: 1024px) {
   #main-nav {
      width:93%;
      padding: 0 3.5%;
      height:auto;
      min-height:67px;
      position:inherit;
      text-align:center;
   }
   #main-nav .main {
      left:0;
   }
   .btn_nav_mobile {
      display:none;
   }
   .navArrow { 
      position: absolute; 
      bottom:0;
   }
   #main-nav .main > ul {
      padding: 0;
      font-family: 'Fjalla One', sans-serif;
      letter-spacing:0.05em;
      font-weight: 400;
      font-size: 15px;
      text-transform:uppercase;
      line-height: 1.3;
      list-style: none;
      display: flex;
      justify-content: center;
   }
   #main-nav .main > ul li.has-sub ul {
      height:100%;
      overflow:visible;
   }
   #main-nav .main > ul li > a {
      display: block;
      color: #000;
      text-decoration: none;
      height:100%;
      width:auto;
      background:none;
   }
   #main-nav .main > ul > li a:hover {
      text-decoration: none;
   }

   #main-nav .main > ul > li a.active,
   #main-nav .main > ul > li a.active:hover {
      text-decoration: none;
      cursor:default;
      background: #ed7b25;
   }
   #main-nav ul li {
      float: left;
      position: relative;
      z-index: 801;
      padding:0;
      text-align:center;
      width:auto;
      border-bottom:none;
   }
   #main-nav .main > ul li.has-sub > a {
      background-image: url("../nav/images/nav_arrow_sub_right.png");
      background-position: right 20px center;
      background-repeat: no-repeat;
   }
   #main-nav .main > ul > li.has-sub > a {
      background-image: none;
   }
   #main-nav ul li:hover a {
      background-color: #ed7b25;
      color:#fff;
   }
   #main-nav ul li:hover a.active {
      background-color: transparent;
      color:#000;
   }

   #main-nav ul li ul li a:hover {
      background-color: #f7b910;
      color:#fff;
   }
   #main-nav ul li ul {
      font-family: 'Roboto Condensed', sans-serif; 
      font-size: 15px;
      font-weight:400;
      letter-spacing:normal;
      text-transform:none;
      text-align: left;
      line-height: 1.3;
      position: absolute;
      display: none;
      top: 59px;
      left: 0;
      z-index: 300;
      width: 300px;
      padding-left: 0;
      margin-left: 0px;
      *margin-left: 0px;
      list-style: none;
   }
   #main-nav ul li ul a {
      padding: 8px 50px 8px 25px;
      display: block;
      color:#000;
   }
   #main-nav ul li ul li {
      width: 100%;
      height: auto;
      background: #005aad;
      text-align:left;
   }
   #main-nav ul li ul li:hover {
      background-color: #444;
   }
   #main-nav ul li ul li ul {
      top: 0;
      left: 100%;
      min-width: 280px;
   }
    ul.nav li a {
      padding:20px 0;
   }
    ul.nav li a:hover {
       background-color:#f7b910;
    }
    ul.nav {
      position:relative;
      top:1px;
      left:0;
      width:100%;
   }
    ul.nav li a {
      width:100%;
   }
    ul.nav li a:hover {
       background-color:#0f6cb6;
    }
   
   
   
   
   

/* Smaller Laptops */
@media (min-width: 1024px) {
   #main-nav {
      width:100%;
      padding:0;
      height:auto;
      min-height:67;
      position:inherit;
      text-align:center;
   }
}
   #main-nav .main > ul {
      font-size: 16px;
   }
    ul.nav li {
      width:auto;
      height:100%;
      float:left;
      border-bottom:none;
   }
    ul.nav li a {
      height:100%;
      width:auto;
      color:#000;
      text-decoration:none;
      display:block;
   }
}


/* Larger Laptop and Desktop */
@media (min-width: 1720px) {

}


/* Largest Desktop */
@media (min-width: 1920px) {
   
}