.navbar-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: #000; }
.site-header { height: 100px; }
.dropdown-menu-inner {display: flex; }
{# default navbar styling #}
.navbar { line-height: 1.5; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.navbar-nav { padding: 10px 0; justify-content: flex-end; display: flex; flex-direction: column; margin: 0; list-style: none; }
.navbar-nav .nav-link { text-decoration: none; display: block; }
.navbar-nav .dropdown-menu { position: static; float: none; }
.navbar-brand { max-height: 40px; }

{# utility #}

@media only screen and (max-width: 545px) {
  .navbar--hide-nav { justify-content: center; align-items: center; }
  .navbar--hide-nav .navbar-nav-wrapper,
  .navbar--hide-nav button { display: none; }
}

{# toggler #}
.navbar-toggler { cursor: pointer; margin-left: auto; padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; cursor: pointer; }
.navbar-toggler:hover, 
.navbar-toggler:focus { text-decoration: none; }
.navbar-toggler { height: 44px; width: 54px; position: relative; transition: .5s ease-in-out; cursor: pointer }
.navbar-toggler span { transition: all 150ms ease-in-out; transform-origin: 50% 50%; opacity: 1; top: 50%; position: absolute; height: 2px; left: 50%; margin-left: -12px; width: 24px }
.navbar-toggler span:nth-child(1) { opacity: 0; margin-top: -8px; transform: scale(.3)}
.navbar-toggler span:nth-child(2) { opacity: 0; transform: scale(.3); }
.navbar-toggler span:nth-child(3) { opacity: 0; margin-top: 8px; transform: scale(.3); }

.navbar-toggler span:nth-child(4) { margin-top: 0; transform: rotate(-45deg) scale(1); }
.navbar-toggler span:nth-child(5) { margin-top: 0; transform: rotate(45deg)  scale(1); }

.navbar-toggler.collapsed span:nth-child(1),
.navbar-toggler.collapsed span:nth-child(2),
.navbar-toggler.collapsed span:nth-child(3) { opacity: 1;  transform: scale(1); }

/* .navbar-toggler.collapsed  span:nth-child(1) { transform: rotate(0); }
.navbar-toggler.collapsed  span:nth-child(3) { transform: rotate(0); } */


.navbar-toggler.collapsed  span:nth-child(4),
.navbar-toggler.collapsed  span:nth-child(5) { opacity: 0; transform: scale(.3); }

{# dropdown #}
.dropdown { position: relative; }
.dropdown-toggle:after { display: inline-block; width: 0; height: 0; margin-left: 0.255em; vertical-align: 2px; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }
.dropdown-toggle:empty:after { margin-left: 0; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; margin: 0.125rem 0 0; font-size: 1rem; text-align: left; list-style: none; background-clip: padding-box; }
.dropdown-item { box-sizing: border-box; text-decoration: none; display: block; width: 100%; clear: both; background-color: transparent; border: 0; }
.dropdown-menu.navbar-show { display: block; }