/************************************************************************************

DevPortal Navbar Menu Button

Only appears in the mobile view.

Looks like the traditional hamberger menu icon, but animates to an
'x' when the menu is open.  This is done using css transitions to animate
a span and it's :before and :after psudo:elements.

**************************************************************************************/ .dp-navbar-mobile-menu-toggle {

font-size: 18px;
padding: 12px 16px;
display: inline-block;
position: relative;
z-index: 110;
outline: none;
background-color: transparent;
top: 2px;
border: none; }
@media (min-width: 992px) {
  .dp-navbar-mobile-menu-toggle {
    display: none; } }

.dp-navbar-menu-toggle-image {

width: 21px;
height: 21px;
vertical-align: middle;
fill: #333; }

.dp-navbar-mobile-menu-toggle:hover {

background-color: rgba(0, 0, 0, 0.05); }

.dp-navbar-menu-toggle-icon {

position: relative;
display: inline-block;
width: 21px;
height: 21px;
vertical-align: middle; }

.dp-navbar-menu-toggle-icon span {

margin: 0 auto;
position: relative;
top: 6px; }

.dp-navbar-menu-toggle-icon span:before, .dp-navbar-menu-toggle-icon span:after {

position: absolute;
content: ''; }

.dp-navbar-menu-toggle-icon span, .dp-navbar-menu-toggle-icon span:before, .dp-navbar-menu-toggle-icon span:after {

width: 20px;
height: 2px;
background-color: #333;
display: block; }

.dp-navbar-postlogin .dp-navbar-menu-toggle-icon span, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon span:before, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon span:after {

background-color: #e2e2e2; }

.dp-navbar-menu-toggle-icon:hover span, .dp-navbar-menu-toggle-icon:hover span:before, .dp-navbar-menu-toggle-icon:hover span:after {

background-color: #222; }

.dp-navbar-postlogin .dp-navbar-menu-toggle-icon:hover span, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon:hover span:before, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon:hover span:after {

background-color: white; }

.dp-navbar-menu-toggle-icon span:before {

margin-top: -6px; }

.dp-navbar-menu-toggle-icon span:after {

margin-top: 6px; }

.dp-navbar-menu-toggle-icon span {

-webkit-transition-duration: 0s;
transition-duration: 0s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s; }

.dp-navbar-menu-toggle-icon.dp-navbar-menu-toggle-icon–open span {

background-color: transparent;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s; }

.dp-navbar-menu-toggle-icon span:before {

-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0s;
transition-delay: 0.2s, 0s; }

.dp-navbar-menu-toggle-icon–open span:before {

margin-top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-delay: 0s, 0.2s;
transition-delay: 0s, 0.2s; }

.dp-navbar-menu-toggle-icon span:after {

-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0s;
transition-delay: 0.2s, 0s; }

.dp-navbar-menu-toggle-icon–open span:after {

margin-top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-delay: 0s, 0.2s;
transition-delay: 0s, 0.2s; }

/*# sourceMappingURL=menu-button.css.map */