.nav_container{float:left;width:100%;margin-top:3px;margin-bottom:3px;
  background-color:none;}
  
.nav-bar { display: none; }

nav {
  background: none;
  z-index: 100;
  width: 800px;margin:auto;}

nav ul { list-style: none;}

nav ul li {float: left;position: relative;}

nav:after {content: "";display: block;clear: both;}

/*#780434 red, #86D1E3 blue #f7f5e6 cream*/

nav ul li a {
  color: white;/*#0c045a*/
  display: block;
  padding: 10px 33px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Barlow';
  }
 nav ul li a:hover {color:papayawhip;} 

nav ul li:hover { background: none;z-index:100;}

nav ul li:hover i { color: papayawhip;}

nav ul li i { margin-right: 10px;}

nav ul li:hover .children { display: block;color: #5c4d00;}

nav ul li .children {
  display: none;
  background-color: pink;/*#f7f5e6rgba(250,248,241)*/
  position: absolute;
  width: 100%;
  z-index: 1;
}

nav ul li .children span { display: none; }

nav ul li .children li {background-color: #5c4d00;
  display: block;
  width: 100%;
  border-bottom: 1px solid white;
  }

nav ul li .children li a { margin-left:0px; }

nav ul li .fa-angle-down {
  position: relative;
  top: 3px;left:1px;
}

/*responsive nav style*/

@media all and (max-width: 800px) {

.nav_container{text-align:center;}

.nav-bar {
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  background: none;/*background: #3498db;*/
  transition: .9s ease;
}

.nav-bar span {
  float: left;
  font-size: 20px;
  padding: 20px;
  color: #fff;
}

.nav-bar .fa-bars {
  display: block;
  padding: 10%;
  color: white; /*#780434*/
  overflow: hidden;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  float: right;
}

nav {/*slide in mobile nav*/
  width: 100%;
  height: auto;
  position: absolute;
  right: 100%;
  top :11rem;
  overflow: hidden;
  height: 100%;
  margin:auto;background-color:#5c4d00;
}

nav ul li {
  display: block;
  border-bottom: 1px solid white;
  width: 100%;
}

ul li a { display: block;padding: 50px; }

nav ul li .children {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: none;
}

nav ul li:hover .children { display: none; }

nav ul li ul li:first-child { border-top: 1px solid white; }

nav ul li .children span {
  display: inline-block;
  margin-right: 10px;
}

nav ul li .children a {
  margin-left: -10px;
  padding: 5px 0;
}

nav ul li .fa-angle-down {
  position: relative;
  top: 3px;
}
}