/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
   margin-bottom:.6rem;
}

.navbar-light .navbar-toggler {
margin-right: 1rem;
}

.navbar .dropdown-menu {
  border:none;
  border-radius: 0rem;
  background-color: #F0F0F0 !important;
}
  
/* breakpoint and up - mega dropdown styles */

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #E8E8E8;
    background-color: rgba(100,100,100,0.80);
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link {
    padding-left: .5rem;
}
@media screen and (min-width: 992px) {
  
  /* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
	padding-top: 0px;
	padding-bottom: 0px;
}
.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0rem 0rem !important;
}
/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
  padding: 0rem .2rem;
  margin: 0rem .2rem;
}

/* makes the dropdown full width  */
.navbar .dropdown {position:static;}

.navbar .dropdown-menu {
  width:100%;
  left:0;
  right:0;
/*  height of nav-item  */
  top:85px;
}
  
  /* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
  display:block!important;
}
  

}