mainNav {

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.navbar-toggler-icon {

display: inline-block;
width: 1.5em;
height: 1.5em;
content: "Menu";
vertical-align: middle;
background: no-repeat 50%;
background-size: 100% 100%

}

.navbar-brand h2{

color: #fff;

}

// .nav-item a { // text-transform: uppercase; // }

.fixed-top {

position: fixed;
z-index: 1030;
right: 0;
left: 0;

}

.navbar {

position: relative;
padding: 1.25rem 1rem;
transition: background-color .5s ease-in-out 0.05s, padding .75s ease-in-out;

.nav-item-divider {
  display: none;
  .nav-link > span {
    border-left: 1px solid
  }
  .nav-link {
    opacity: .25
  }
}

}

/////////////// Both ///////////////

.navbar-nav {

.nav-link {
  padding-right: 1rem;
  padding-left: 1rem
}
.nav-item {
  padding: 0 0.75rem;
}

.active > .nav-link, .nav-link.active, .nav-link.show, .show > .nav-link{
  color: #007bff!important;
}

}

/////////////// Dark ///////////////

.navbar-dark {

color: #fff;
background-color: transparent;

.navbar-nav {
  .nav-link {
    color: $white;
  }
}

}

/////////////// Light ///////////////

.navbar-light {

background-color: #fff;
color: #212529;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.03) !important;
.navbar-brand h2{
  color: #111;
}
.navbar-nav {
  .nav-link , .nav-link:hover, .nav-link:focus{
    color: $black;
  }
}

}

.navbar-light::before {

opacity: 1;

}

/////////////// Media ///////////////

@media (min-width:1200px) {

.navbar .nav-item-divider {
    display: block
}

}

@media (max-width:1199.98px) {

.navbar .dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
    border: 0
}

}

@media (min-width:1200px) {

.navbar .dropdown-menu {
    transform: translateY(.5rem);
    opacity: 0
}
.navbar .dropdown-menu.show {
    animation: .2s forwards d
}
@keyframes d {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

}

/* ================================================== Responsive styles

*/

@media (min-width : map_get($grid-breakpoints, lg)) { }

@media (min-width : map_get($grid-breakpoints, md)) and (max-width: map_get($grid-breakpoints, lg)) {

 .navbar-light .navbar-toggler{
     color: rgba(0,0,0,.5);
     border-color: rgba(0,0,0,.1);
     padding: 10px 10px;
      border-radius: 0px;
 }

 .navbar-nav{
     background: #000;
 }

 .navbar-light .navbar-nav{
     background: #fff;
 }

.navbar-light .navbar-toggler-icon-bar{
    background: #fff;
    height: auto;
 }

}

@media (min-width : map_get($grid-breakpoints, sm)) and (max-width: map_get($grid-breakpoints, md)) {

 .navbar-light .navbar-toggler {
     color: rgba(0,0,0,.5);
     border-color: rgba(0,0,0,.1);
     padding: 10px 10px;
      border-radius: 0px;
 }

 .navbar-nav{
     background: #000;
 }

 .navbar-light .navbar-nav{
     background: #fff;
 }

.navbar-light .navbar-toggler-icon-bar{
    background: #fff;
    height: auto;
 }

}

@media (min-width : map_get($grid-breakpoints, xs)) and (max-width: map_get($grid-breakpoints, sm)) {

 .navbar-light .navbar-toggler {
     color: rgba(0,0,0,.5);
     border-color: rgba(0,0,0,.1);
     padding: 10px 10px;
     border-radius: 0px;
 }

 .navbar-nav{
     background: #000;
 }

 .navbar-light .navbar-nav{
     background: #fff;
 }

.navbar-light .navbar-toggler-icon-bar{
     background: #fff;
    height: auto;
 }

}