/* colors */
/* ------ */
/* togle menu button for narrow screens */
.toggleMenu {
  background: #10a5c3;
  color: #fff;
  border-radius: 25px;
  border-top-left-radius: 0;
  border: 2px solid #eee;
}
/* general navigation background colors */
.nav {}
/* general navigation link font color */
.nav a {
  color: #000;
}
/* first level items borders */
.nav > li {
  color: #000;
  position: relative;
  width: 100%;
  text-align: left;
  border-radius: 25px;
  border-top-left-radius: 0;
}
.nav > li:not(:first-child) {
  margin-top: 5px;
}
.nav > li:hover {}
.nav > li:hover > a {
  color: #000;
}
/* navigation hover colors */
.nav a:hover {}
/* second level navigation colors */
.nav li li a {
  padding: 10px;
  display: block;
}
/* third level navigation colors */
.nav li li li a {
  background: #cccccc;
  border-bottom: 1px solid #c0c0c0;
}
/* ---------------- */
/*      layout      */
/* -----------------*/
/* main div */
.dropdowns {
  width: auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* small screens menu button */
a.toggleMenu {
  padding: 10px;
  width: 100%;
  text-align: center;
  color: #fff;
  position: relative;
  padding: 15px;
}
.toggleMenu i {
  display: block;
  font-size: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}
/* second and third level menus */
.nav ul {
  width: 9em;
}
/* general paddings and other stuff */
.nav a {
  padding: 0px;
}
/* parents that have submenus */
.nav > li > .parent {
  background-position: 90% 50%;
}
/* small screen adjustments*/
.nav li.current a {
  background: #c59e13;
}
.nav li.current a {
  color: #fff;
}
@media (max-width: 992px) {
  .nav {
    position: absolute;
    top: calc(100% - 30px);
    left: 0;
    z-index: -1;
    padding-top: 30px;
    display: none;
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
  }
  .nav ul {
    width: 100%;
  }
  .nav > li {
    background: none;
    border: none;
    margin: 0px;
  }
  .nav > li:not( :last-child) {
    border-bottom: 1px solid #d3d3d3;
    border-radius: 0px;
  }
  .nav > li:not(:first-child) {
    margin: 0px;
  }
  .nav > li:hover {
    border-radius: 0px;
  }
  .nav li.current {
    border-radius: 0px;
  }
  .nav li.current a {
    background: #fff;
    color: #c8a31f;
  }
  .nav > li > a {
    border: none;
    border-radius: 0;
  }
}