/*
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------
     FIXED HEADER
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

header_menu {
  background: #03056B;                                           /* Menu background color */
  position: fixed;
  z-index: 3;
  width: 100%;
  left: 0;
  top: 0;
  padding-top: 10px;                              /* Gap from top to banner */
  padding-bottom: 10px;                           /* Gap from top to banner */
}

/*
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------
     NAVIGATION STYLES
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

div
,nav ul
,nav li
,nav,output
,ul{list-style:none;margin:0;padding:0;}

a{text-decoration:none;}

nav.vertical   ul li{ display:inline-block;}                     /* vertical menu */
nav.horizontal ul li{ display:inline-block;}                     /* horizontal menu */

.toggleMenu {
    display:  none;
    width: 100%;
    color: #fff;
}
.nav {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    width: 52em;                             /* Set this to the width of the menu - allows it to be centered correctly */
}
.nav>li>a.active                             /* background of the ACTIVE menu item - david */
{
    background: #5555FF;
    background: linear-gradient(top,         #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    background: -webkit-linear-gradient(top, #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    background: -moz-linear-gradient(top,    #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    background: -o-linear-gradient(top,      #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    background: -ms-linear-gradient(top,     #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    background: linear-gradient(top,         #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    -svg-background: linear-gradient(top,    #7DA7FC 0, #537EFD 75%, #5555FF 100%) no-repeat;
    color: #FFFFFF;                   /* Color of the text */
    text-decoration: none;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
list-style: none;
    width: 12em;
}
.nav li a {
    display: block;
    padding: 10px 34px 4px 34px;                                /* Location of menu text */
    color: #fff;
    font-size:1em;
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-right:1px solid #92713C;                             /* Separator bar */
}
.nav > li:last-child {                                          /* Clear out last separtor bar so it does not show */
  border-right:0px;
}
.nav > li > a.parent {
    background: url(../images/arrow.gif);                       /* Location of ARROW sign on menu */
    background-repeat: no-repeat;
    background-position: right 16px;                            /* first percentage controls left/right location */
}
.nav > li > a:hover{
    color:#00;                                                  /* font color when mouse is over link */
    background: #AF2C2C;
    background: linear-gradient(top,         #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;
    background: -webkit-linear-gradient(top, #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;
    background: -moz-linear-gradient(top,    #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;
    background: -o-linear-gradient(top,      #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;
    background: -ms-linear-gradient(top,     #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;
    background: linear-gradient(top,         #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;
    -svg-background: linear-gradient(top,    #537EFD 0, #2A7FFE 15%, #0000FF 100%) no-repeat;  /* background settings for the menu item - david */
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left:0px;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
    -webkit-transition: background .2s linear;
     -moz-transition: background .2s linear;
     -ms-transition: background .2s linear;
     -o-transition:  background .2s linear;
     transition: background .2s linear;
}
.nav li li a {
     font-size: 0.8725em;
     padding: 10px;
     width: 100%;
     display: block;
     color:#fff;                                                 /* Font color of dropdown menu text */
     background:#6E7FC2;                                         /* Dropdown background color */
     position: relative;
     z-index:9999;
     border-top: 1px solid rgba(233, 233, 233, 0.09);
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -ms-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}
.nav li li a:hover{
     background:#000;                                            /* Dropdown background color when mouse over link */
     color:#fff;
     border-bottom:none;
}

/*
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------
     MEDIA QURIES
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

@media screen and (max-width: 1024px)  {

     .nav {
         margin-left: auto;
         margin-right: auto;
         width: 44em;                                                /* Set this to the width of the menu - allows it to be centered correctly */
     }
     .nav li a {
         display: block;
         padding: 10px 23px 4px 25px;                                /* Location of menu text */
     }

}

/* ----------------------------------------------------- */

@media screen and (max-width: 783px) {

     header_menu {
          padding-top: 7px;                                         /* Gap from top to banner */
          padding-bottom: 7px;                                      /* Gap from top to banner */
     }
     .toggleMenu {
          padding: 10px 15px;
          text-align: right;
          width: 85%;
     }
     .nav li a {
          padding: 10px 15px;
     }
     .nav {
        /*  width: 100%;  */                                          /* Set this to the width of the menu - allows it to be centered correctly */
          background: #495DAD;
          overflow-x: hidden;                                         /* makes the menu scrollable for small screens like iphones */
          overflow-y: scroll;
          height: 90vh;                                               /* display 100% of the visual height */
          width: 100vw;                                               /* display 100% of the visual width */
     }
     .active {
          display: block;
     }
     .nav > li {
          float: none;
     }
     .nav > li > a.parent {
          background: url(../images/arrow.gif);                      /* Location of ARROW sign on menu */
          background-repeat: no-repeat;
          background-position: 100px;                                /* Arrow in mobile menu - first percentage controls left/right location */
     }
     .nav ul {
          display: block;
          width: 98%;
     }
     .nav > li.hover > ul , .nav li li.hover ul {
          position: static;
     }
}