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

Name:     Responsive Navigation responsive styles
Designer: responsive-navigation.com
Copyright 2017 Responsive-Navigation.com, All rights reserved.

----------------------------------------------- */
/* text and divider lines */
/* +/- button and hover */
/* background color */
/* All screen sizes
================================================== */
/*  Main Web View
================================================== */
@media screen and (min-width: 992px) {
  /* mobile button */
  nav .touch-btn {
    display: none;
  }
  .main-nav {
    display: block !important;
  }
  /* this style is needed in case a user hides the main nav in the mobile view then expands the window */
  /* ----------------------------------------------- primary level ----------------------------------------------- */
  nav ul li {
    display: inline-block;
    position: relative;
  }
  /* ----------------------------------------------- secondary level ----------------------------------------------- */
  nav ul li ul {
    position: absolute;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    margin: 0px 0 0 0;
    opacity: 0;
    -webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
    -moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
    box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
  }
  nav ul li:hover > ul {
    max-height: 1000px;
    overflow: visible;
    margin: 0;
    opacity: 1;
  }
  /* add arrow to parent items */
  ul li ul li a.parent {
    background: url(../images/arrow-parent.gif) no-repeat 97% 50%;
  }
  /* ----------------------------------------------- tertiary level ----------------------------------------------- */
  nav ul li ul li ul {
    float: left;
    position: absolute;
    left: 250px;
    top: 0;
    width: 0;
    margin: 0 0 0 -20px;
  }
  nav ul li ul li:hover > ul {
    margin: 0;
    width: 250px;
  }
  nav ul li ul li {
    width: 250px;
  }
}
/*  #Mobile View
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 991px) {
  nav {
    margin: 0;
    background-color: #0e76bc;
  }
  nav ul li {
    list-style: none;
    border-top: solid 1px #ffffff;
  }
  nav ul li a {
    color: #ffffff !important;
  }
  nav ul li ul {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    border-left: 5px solid #ffffff;
  }
  nav > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
  }
  nav ul li ul li {
    border-top: dashed 1px #0e76bc !important;
    background-color: #ffffff !important;
  }
  nav ul li ul li a {
    background: url(../images/bullet-sub.gif) no-repeat 16px 40% #0e76bc;
    padding: 5px 5px 5px 28px;
  }
  nav ul li ul li a:hover {
    background: url(../images/bullet-sub.gif) no-repeat 16px 40% #68cadb !important;
  }
  nav > ul.active {
    max-height: 1000px;
  }
  nav ul li.active > ul {
    max-height: 1000px;
  }
  span.touch-btn {
    float: right;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    display: block;
    overflow: hidden;
    margin-top: 0px;
    /* Adjust the top/bottom position of the +/- button */
    /* comment these lines to change the +/- to an arrow (see also comments below)*/
    text-indent: -9999px;
    background: url(../images/plus-minus.gif) no-repeat 50% 2px #68cadb;
  }
  /* Rotate arrow on click/tap */
  nav ul li.active > a.parent span.touch-btn {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background-position: 50% -18px;
    /* this line is only needed if +/- is used instead of arrows */
  }
  a.toggleMenu span.touch-btn {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background-position: 50% -18px;
    /* this line is only needed if +/- is used instead of arrows */
  }
  a.toggleMenu.active span.touch-btn {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    background-position: 50% 2px;
    /* this line is only needed if +/- is used instead of arrows */
  }
}
/* css rules for ipad portrait */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  /* This fixes drop menus so they work on ipads */
  nav ul li ul {
    display: none;
  }
  nav ul li:hover > ul {
    display: block;
  }
}
/* css rules for ipad landscape */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  /* This fixes drop menus so they work on ipads */
  nav ul li ul {
    display: none;
  }
  nav ul li:hover > ul {
    display: block;
  }
}