.ddsmoothmenu {
  /*background of menu bar (default state)*/
  width: 100%;
  display: none;
}

.ddsmoothmenu ul {
  width: 100%;
  z-index: 100;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.ddsmoothmenu>ul {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

/*Top level list items*/
.ddsmoothmenu ul li {
  position: relative;
  display: inline-block;
  /* float: left; */
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a {
  cursor: pointer;
  display: block;
  /*background of menu items (default state)*/
  color: rgb(255, 255, 255, .9);
  padding: 8px 0;
  text-decoration: none;
  /* letter-spacing: .050rem; */
  /* font-size: 110%; */
}

.ddsmoothmenu>ul>li>a {
  font-size: 80%;
  text-transform: capitalize;
  padding: 14px 0;
}

.ddsmoothmenu ul li a .selected {
  /*CSS class that's dynamically added to the currently active menu items' LI A element*/
  color: #FFF;
}

.ddsmoothmenu ul li a:hover {
  /*background of menu items during onmouseover (hover state)*/
  color: #FFF;
}

/* sub menus */
.ddsmoothmenu ul li ul {
  width: 300px !important;
  position: absolute;
  display: none;
  /*collapse all sub menus to begin with*/
  visibility: visible;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  background: #fff;
}

.ddsmoothmenu ul li ul li {
  display: list-item;
  float: none;
  padding: 0 10px;
}

.ddsmoothmenu ul li ul li ul {
  top: 0;
}

.ddsmoothmenu ul li ul li a {
  min-width: 160px;
  /*width of sub menus*/
  color: rgba(0, 0, 0, .8);
  padding: 8px 10px;
  border-top-width: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ddsmoothmenu ul li ul li a:hover,
.ddsmoothmenu ul li ul li a.selected {
  color: #000;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu {
  height: 1%;
}

/*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass {
  position: absolute;
  top: 12px;
  right: 7px;
}

.rightarrowclass {
  position: absolute;
  top: 6px;
  right: 5px;
}

.leftarrowclass {
  margin-right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: #ccc;
  /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */
}

.toplevelshadow {
  margin: 5px 0 0 5px;
  /* in NON CSS3 capable browsers gives the offset of the shadow */
  opacity: 0.8;
  /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */
}

.ddcss3support .ddshadow.toplevelshadow {
  margin: 0;
  /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */
  /* opacity: 1; */
  /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */
}

.ddcss3support .ddshadow {
  background-color: transparent;
  box-shadow: 5px 5px 5px #aaa;
}

/* ######### Mobile menu container CSS ######### */
div.ddsmoothmobile::before {
  position: fixed;
  content: "";
  background: #2b2f3a;
  width: 250px;
  height: 100%;
  opacity: 0.5;
}

div.ddsmoothmobile {
  /* main mobile menu container */
  background: #fff;
  color: #000;
  position: fixed;
  top: 0;
  /*  left: 0; */
  right: 0;
  width: 300px;
  /* width of mobile menu */
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  border-radius: 0;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
}

div.ddsmoothmobile a {
  color: #000;
  text-decoration: none;
  /*  font-weight: 400; */
}

div.ddsmoothmobile div.topulsdiv {
  /* Single DIV that surrounds all top level ULs before being flattened, or the ULs on the "frontpage" of the menu */
  position: relative;
  background: #EFEFEF;
    overflow-y: auto;
  width: 100%;
  height: 100%;
}

div.ddsmoothmobile ul {
  /* style for all ULs in general inside mobile menu */
  list-style: none;
  width: 100%;
  top: 0;
  left: 0;
  background: #fff;
  margin: 0;
  padding: 0;
}

/*
div.ddsmoothmobile div.topulsdiv ul.submenu {
     top level ULs style
}
*/
div.ddsmoothmobile ul.submenu {
  /* sub level ULs style */
  position: absolute;
  height: 100%;
  overflow-y: auto;
}

div.ddsmoothmobile ul li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  /* font-weight: bold; */
}

div.ddsmoothmobile ul li.breadcrumb {
  /* breadcrumb LI that's added to the top of every sub level UL */
  cursor: pointer;
  padding: 13px 25px;
  background: #2b2f3a;
  border-radius: 0 !important;
  position: relative;
  color: #fff;
}

div.ddsmoothmobile ul li.breadcrumb::before {
  background: url(https://img.icons8.com/ios/50/ffffff/back--v1.png) center center no-repeat !important;
}

div.ddsmoothmobile ul li.breadcrumb::before,
div.ddsmoothmobile li a .arrow-img-box:before {
  position: absolute;
  content: "";
  background: url(https://img.icons8.com/ios/50/000000/back--v1.png) center center no-repeat;
  width: 31px;
  height: 100%;
  left: 0;
  top: 0;
  background-size: 56% !important;
}

div.ddsmoothmobile li a .arrow-img-box:before {
  left: auto !important;
  right: 0;
  transform: rotate(180deg);
}

div.ddsmoothmobile ul li a {
  display: block;
  padding: 13px 25px;
  color: inherit;
}

div.ddsmoothmobile ul li a:hover {
  background: #2b2f3a;
  color: #fff !important;
}

div.ddsmoothmobile ul li a:hover .arrow-img-box {
/*   filter: invert(1); */
}

/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */
/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */
.animateddrawer {
  font-size: 10px;
  /* Base font size. Adjust this value to modify size of drawer icon */
  width: 3em;
  height: 2.2em;
  outline: none;
  position: relative;
  /* BY default, make toggler fixed on screen */
  /* display: none; */
  top: auto;
  /* Position at upper right corner */
  right: 0px;
  background: transparent;
  z-index: 1000;
}

.animateddrawer:before,
.animateddrawer:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  /* height of top and bottom drawer line */
  background: #6c757d;
  border-radius: 2px;
  top: 0;
  left: 0;
  opacity: 1;
  /* set transition type and time */
  transition: all 0.3s ease-in;
}

.animateddrawer:after {
  top: auto;
  bottom: 0;
}

.animateddrawer span {
  width: 100%;

  height: 2px;
  /* height of middle drawer line */
  background: #6c757d;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.1em;
  /* set this to - half of middle drawer line height */
  border-radius: 2px;
  transform-origin: 50% 50%;
  /* set transition type and time */
  transition: all 0.3s ease-in 0.3s;
}

.animateddrawer span::after {
  content: "";
  display: block;
  width: 100%;

  height: 2px;
  /* height of middle drawer line */
  background: #6c757d;
  border-radius: 2px;
  position: absolute;
  transform-origin: 50% 50%;
  transition: all 0.3s ease-in 0.3s;
}

/*
.animateddrawer.open {}
 */
.animateddrawer.open:before {
  /* style when .open class is added to button */
  top: 50%;
  margin-top: -0.3em;
  /* set this to - half of top drawer line height */
  opacity: 0;
}

.animateddrawer.open:after {
  /* style when .open class is added to button */
  bottom: 50%;
  opacity: 0;
}

.animateddrawer.open span {
  transform: rotate(-45deg);
}

.animateddrawer.open span:after {
  transform: rotate(-90deg);
}
.fa.fa-user-circle.fa-2x {
  color: #208050;
}

.fa-2x {
  color: #208050;

}