/* Hamburger via https://codepen.io/ahmadbassamemran/pen/VQwPGr */
/* nav-icon-8 */

.hamburger {
    position: relative;
    z-index: 4;
    float: right;
    width: 28px;
    height: 20px;
    margin: 0 -20px 0 0;
    padding: 20px;
    cursor: pointer;
    display: inline-block;
    box-sizing: content-box;
}

.hamburger span {
    width: 28px;
    height: 2px;
    background-color: rgba(0, 0, 0, 1);
    position: absolute;
    border-radius: 0px;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.site.lede_imagery .site-header.transparent .hamburger span, .site.lede_imagery .hamburger.active span {
    /*background-color: rgba(255, 255, 255, 1);*/
}

.site.lede_imagery .site-header.transparent .hamburger.active span, .site.lede_imagery .site-header.active .hamburger span,
.site.lede_imagery .hamburger.collapsed span, .site.lede_imagery .site-header.collapsed .hamburger span {
    /*background-color: rgba(0, 0, 0, 1);*/
}

.hamburger span:nth-child(1),
.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
    left: 20px;
}

.hamburger span:nth-child(1) {
    top: 20px;
}

.hamburger span:nth-child(2) {
    top: 29px;
}

.hamburger span:nth-child(3) {
    bottom: 20px;
}

.hamburger:hover span {
    background-color: #f0f;
}

.hamburger:not(.active):hover span:nth-child(1) {
    transform: scaleX(.8);
}

.hamburger:not(.active):hover span:nth-child(2) {
    transform: scaleX(.5);
}

.hamburger:not(.active):hover span:nth-child(3) {
    transform: scaleX(.8);
}

.hamburger.active span {
    background-color: #f0f;
}

.hamburger.active span:nth-child(1),
.site-header.expander .hamburger.collapsed span:nth-child(1) {
    top: 29px;
}

.hamburger.active span:nth-child(2),
.site-header.expander .hamburger.collapsed span:nth-child(2) {
    top: 29px;
}

.hamburger.active span:nth-child(3),
.site-header.expander .hamburger.collapsed span:nth-child(3) {
    top: 29px;
}

/* Hamburger border */
.hamburger.border {
    width: 36px;
    height: 24px;
    padding: 18px 12px;
}
.hamburger.border span {
    width: 32px;
    height: 2px;

    border: 2px solid #fff;
    box-sizing: content-box;
}

.hamburger.border span:nth-child(1),
.hamburger.border span:nth-child(2),
.hamburger.border span:nth-child(3) {
    left: 12px;
}

.hamburger.border span:nth-child(1) {
    top: 18px;
}

.hamburger.border span:nth-child(2) {
    top: 27px;
}

.hamburger.border span:nth-child(3) {
    bottom: 18px;
}

.hamburger.border.active span:nth-child(1) {
    top: 27px;
}

.hamburger.border.active span:nth-child(2) {
    top: 27px;
}

.hamburger.border.active span:nth-child(3) {
    top: 27px;
}