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


/* Mobile first queries */
   #main-nav {
      width:100%;
      height:70px;
      background:#0995cf;
      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:15px;
      display:block;
      z-index:1000;
   }
    ul.nav {
      position:relative;
      top:70px;
      left:50%;
      width:50%;
   }
    ul.nav li {
      width:100%;
      border-bottom:1px dotted #9cbfda;
      text-align:left;
   }
    ul.nav li a {
      width:70%;
      color:#fff;
      padding:26px 10% 26px 20%;
      text-decoration:none;
      display:block;
   }
    ul.nav li a:hover {
       background-color:#0f6cb6;
    }
   #main-nav .main > ul li > a {
      background:#0f6cb6;
      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) {
    ul.nav li a {
      width:70%;
      color:#fff;
      padding:26px 13% 26px 17%;
      text-decoration:none;
      display: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;
   }
}

/* Tablet (iPad/iPad Mini) Landscape Mode */
@media (min-width: 850px) {
   .btn_nav_mobile {
      display:none;
   }
   #main-nav {
      width:100%;
      height:auto;
      min-height:56px;
      position:inherit;
      text-align:center;
   }
   #main-nav .main {
      max-width:1100px;
   }
   .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: 17px;
      text-transform:uppercase;
      line-height: 1.3;
      list-style: none;
   }
   #main-nav .main > ul li.has-sub ul {
      height:100%;
      overflow:visible;
   }
   #main-nav .main > ul li > a {
      display: block;
      color: #fff;
      text-decoration: none;
      height:100%;
      width:auto;
      background:none;
   }
   #main-nav .main > ul > li a:hover {
      background-color: #0b4c80;
      color: #fff;
      text-decoration: none;
   }
   #main-nav .main > ul > li a.active,
   #main-nav .main > ul > li a.active:hover {
      background:url("images/nav_arrow.png") no-repeat center bottom #0f6cb6;
      color: #fff;
      text-decoration: none;
      cursor:default;
   }
   #main-nav ul li {
      float: left;
      position: relative;
      z-index: 801;
      height: 20px;
      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,
   #main-nav ul li:hover a {
      background-color: #0776a4;
      color:#fff;
   }
   #main-nav ul li ul li a:hover {
      background-color: #0b4c80;
      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: 56px;
      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:#fff;
   }
   #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:18px 0;
   }
    ul.nav li a:hover {
       background-color:#0f6cb6;
    }
    ul.nav {
      position:relative;
      top:0;
      left:0;
      width:100%;
   }
    ul.nav li a {
      width:100%;
   }
    ul.nav li a:hover {
       background-color:#0f6cb6;
    }
   
   
   
   
   
}

/* Smaller Laptops */
@media (min-width: 1024px) {
}

/* Standard Laptop and Desktop */
@media (min-width: 1280px) {
    ul.nav li {
      width:auto;
      height:100%;
      float:left;
      border-bottom:none;
   }
    ul.nav li a {
      height:100%;
      width:auto;
      color:#fff;
      text-decoration:none;
      display:block;
   }
}
/* Larger Laptop and Desktop */
@media (min-width: 1360px) {
}

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