/*!
 * delicious-hamburgers
 * @description Beautiful SASS powered hamburger menu toggle buttons
 * @author Kasper Koman
 * @link https://github.com/kapoko/delicious-hamburgers
 */button.hamburger, div.hamburger {
    width: 50px;
    /* height:50px; */
    /* margin-top: 20px; */
    /* margin-right: 10px; */
}

div.hamburger > .inner {
    top:50%
}

.hamburger {
    border: 0 solid transparent;
    padding: 5px;
    display: inline-block;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-transform: none;
    margin: 0;
    overflow: visible;
    opacity: 1;
    transition:opacity .2s cubic-bezier(.645, .045, .355, 1), background .2s cubic-bezier(.645, .045, .355, 1)
}

.hamburger, .hamburger.active {
    background:transparent
}

.hamburger.active span.bar {
    background-color:#000
}

.hamburger > .inner {
    position: relative;
    width: 100%;
    margin:-1px 0 0
}

.hamburger span.bar {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    background-color: #000;
    border-radius:0
}

.hamburger span.bar:first-child {
    top:-5px
}

.hamburger span.bar:nth-child(3) {
    top:5px
}

.hamburger:focus {
    outline:0
}

.hamburger:hover {
    opacity:1
}

.hamburger--default.active span.bar {
    top:0
}

.hamburger--default.active span.bar:first-child {
    transform:rotate(45deg)
}

.hamburger--default.active span.bar:nth-child(2) {
    opacity:0
}

.hamburger--default.active span.bar:nth-child(3) {
    transform:rotate(-45deg)
}

.hamburger--criss-cross > .inner:after, .hamburger--criss-cross > .inner:before {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    background-color: #000;
    border-radius: 0;
    left: 5.85786px;
    transform-origin: 0 50%;
    transition: opacity .4s cubic-bezier(.645, .045, .355, 1), width .4s cubic-bezier(.645, .045, .355, 1);
    width: 0;
    opacity:0
}

.hamburger--criss-cross > .inner:before {
    transform: rotate(45deg);
    top:-14.14214px
}

.hamburger--criss-cross > .inner:after {
    transform: rotate(-45deg);
    top: 14.14214px;
    transition-delay:.1s
}

.hamburger--criss-cross span.bar {
    transition:transform .4s cubic-bezier(.645, .045, .355, 1), opacity .4s cubic-bezier(.645, .045, .355, 1), width .4s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--criss-cross span.bar:first-child {
    transition-delay:.33s
}

.hamburger--criss-cross span.bar:nth-child(2) {
    transition-delay:.36s
}

.hamburger--criss-cross span.bar:nth-child(3) {
    transition-delay:.39s
}

.hamburger--criss-cross.active > .inner:after, .hamburger--criss-cross.active > .inner:before {
    opacity: 1;
    width:100%
}

.hamburger--criss-cross.active > .inner:before {
    transition-delay:.4s
}

.hamburger--criss-cross.active > .inner:after {
    transition-delay:.5s
}

.hamburger--criss-cross.active span.bar {
    transform: translate3D(-10px, 0, 0);
    opacity: 0;
    width:50%
}

.hamburger--criss-cross.active span.bar:first-child {
    transition-delay:0s
}

.hamburger--criss-cross.active span.bar:nth-child(2) {
    transition-delay:.2s
}

.hamburger--criss-cross.active span.bar:nth-child(3) {
    transition-delay:.1s
}

.hamburger--apple > .inner {
    transition:transform .5s cubic-bezier(.645, .045, .355, 1), top .5s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--apple span.bar:first-child {
    top: -5px;
    transition:top .5s cubic-bezier(.645, .045, .355, 1), transform .25s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--apple span.bar:nth-child(2) {
    display:none
}

.hamburger--apple span.bar:nth-child(3) {
    top: 5px;
    transition:top .5s cubic-bezier(.645, .045, .355, 1), transform .35s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--apple.active > .inner {
    transition: transform .35s cubic-bezier(.645, .045, .355, 1);
    transform:rotate(90deg) translate3d(1px, -1px, 0)
}

.hamburger--apple.active span.bar {
    transition:top .5s cubic-bezier(.645, .045, .355, 1), transform .35s cubic-bezier(.645, .045, .355, 1) .15s
}

.hamburger--apple.active span.bar:first-child {
    top: 0;
    transform:rotate(45deg)
}

.hamburger--apple.active span.bar:nth-child(3) {
    top: 0;
    transform:rotate(-45deg)
}

.hamburger--arrow-right > .inner, .hamburger--arrow > .inner {
    transition:transform .5s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--arrow-right span.bar, .hamburger--arrow span.bar {
    transition: transform .3s cubic-bezier(.645, .045, .355, 1), width .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), right .3s cubic-bezier(.645, .045, .355, 1);
    transition-delay:.1s
}

.hamburger--arrow-right span.bar:first-child, .hamburger--arrow span.bar:first-child {
    transform-origin: 100% 0;
    right:0
}

.hamburger--arrow-right span.bar:nth-child(3), .hamburger--arrow span.bar:nth-child(3) {
    transform-origin: 100% 100%;
    right:0
}

.hamburger--arrow-right.active span.bar, .hamburger--arrow.active span.bar {
    transition-delay:0s
}

.hamburger--arrow-right.active span.bar:first-child, .hamburger--arrow.active span.bar:first-child {
    transform: rotate(45deg);
    top: 1px;
    width:40%
}

.hamburger--arrow-right.active span.bar:nth-child(2), .hamburger--arrow.active span.bar:nth-child(2) {
    width:38px
}

.hamburger--arrow-right.active span.bar:nth-child(3), .hamburger--arrow.active span.bar:nth-child(3) {
    transform: rotate(-45deg);
    top: -1px;
    width:40%
}

.hamburger--arrow-right.active > .inner, .hamburger--arrow.active > .inner {
    transform:rotate(180deg) translate3d(0, -2px, 0)
}

.hamburger--arrow-right span.bar:first-child {
    transform-origin: 0 0;
    left:0
}

.hamburger--arrow-right span.bar:nth-child(2) {
    right:0
}

.hamburger--arrow-right span.bar:nth-child(3) {
    transform-origin: 0 100%;
    left:0
}

.hamburger--arrow-right.active span.bar:first-child {
    transform:rotate(-45deg)
}

.hamburger--arrow-right.active span.bar:nth-child(3) {
    transform:rotate(45deg)
}

.hamburger--arrow-right.active > .inner {
    transform:rotate(-180deg) translate3d(0, -2px, 0)
}

.hamburger--spin > .inner {
    transition:transform .5s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--spin span.bar {
    transition:transform .5s cubic-bezier(.645, .045, .355, 1), top .25s cubic-bezier(.645, .045, .355, 1) .25s, opacity .25s cubic-bezier(.645, .045, .355, 1) .25s
}

.hamburger--spin.active span.bar {
    top: 0;
    transition:transform .5s cubic-bezier(.645, .045, .355, 1), top .25s cubic-bezier(.645, .045, .355, 1), opacity .25s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--spin.active span.bar:first-child {
    transform:rotate(135deg)
}

.hamburger--spin.active span.bar:nth-child(2) {
    opacity:0
}

.hamburger--spin.active span.bar:nth-child(3) {
    transform:rotate(45deg)
}

.hamburger--spin.active > .inner {
    transform:rotate(180deg) translate3d(0, -2px, 0)
}

.hamburger--collapse span.bar {
    transition:transform .4s cubic-bezier(.645, .045, .355, 1), top .25s cubic-bezier(.645, .045, .355, 1) .25s, opacity .25s cubic-bezier(.645, .045, .355, 1) .25s
}

.hamburger--collapse.active span.bar {
    top: 0;
    transition:transform .4s cubic-bezier(.645, .045, .355, 1) .1s, top .25s cubic-bezier(.645, .045, .355, 1), opacity .25s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--collapse.active span.bar:first-child {
    transform:rotate(135deg)
}

.hamburger--collapse.active span.bar:nth-child(2) {
    opacity:0
}

.hamburger--collapse.active span.bar:nth-child(3) {
    transform:rotate(45deg)
}

.hamburger--minimal span.bar {
    transition:transform .5s cubic-bezier(.645, .045, .355, 1), opacity .35s cubic-bezier(.645, .045, .355, 1) .15s
}

.hamburger--minimal span.bar:first-child {
    top:-8px
}

.hamburger--minimal span.bar:nth-child(2) {
    display:none
}

.hamburger--minimal span.bar:nth-child(3) {
    top:8px
}

.hamburger--minimal.active span.bar {
    transition:transform .5s cubic-bezier(.645, .045, .355, 1), opacity .35s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--minimal.active span.bar:first-child {
    transform:translate3d(0, 8px, 0)
}

.hamburger--minimal.active span.bar:nth-child(3) {
    transform: translate3d(0, -8px, 0);
    opacity:0
}

.hamburger--dive span.bar {
    transition:transform .4s cubic-bezier(.645, .045, .355, 1), top .4s cubic-bezier(.645, .045, .355, 1), right .4s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--dive span.bar:first-child {
    top:-8px
}

.hamburger--dive span.bar:nth-child(2) {
    display:none
}

.hamburger--dive span.bar:nth-child(3) {
    transform-origin: 100% 50%;
    top: 8px;
    right:0
}

.hamburger--dive.active span.bar:first-child {
    transform: rotate(135deg);
    top:0
}

.hamburger--dive.active span.bar:nth-child(3) {
    transform: rotate(45deg);
    right: 5.85786px;
    top:14.14214px
}

.hamburger--stack span.bar {
    transition:transform .3s cubic-bezier(.645, .045, .355, 1), top .4s cubic-bezier(.645, .045, .355, 1) .3s
}

.hamburger--stack.active span.bar {
    transition:transform .3s cubic-bezier(.645, .045, .355, 1) .4s, top .4s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--stack.active span.bar:first-child {
    transform: rotate(45deg);
    top:0
}

.hamburger--stack.active span.bar:nth-child(2) {
    transform:rotate(45deg)
}

.hamburger--stack.active span.bar:nth-child(3) {
    transform: rotate(-45deg);
    top:0
}

.hamburger--converge span.bar {
    transition:transform .4s cubic-bezier(.645, .045, .355, 1), top .4s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--converge.active span.bar {
    top:0
}

.hamburger--converge.active span.bar:first-child {
    transform:rotate(135deg)
}

.hamburger--converge.active span.bar:nth-child(2) {
    transform:scale(0)
}

.hamburger--converge.active span.bar:nth-child(3) {
    transform:rotate(-135deg)
}

.hamburger--twist span.bar {
    transition:transform .6s cubic-bezier(.645, .045, .355, 1), top .6s cubic-bezier(.645, .045, .355, 1), left .6s cubic-bezier(.645, .045, .355, 1)
}

.hamburger--twist span.bar:first-child {
    transform-origin: 0 50%;
    left:0
}

.hamburger--twist span.bar:nth-child(2) {
    opacity: 1;
    transition:opacity .2s cubic-bezier(.645, .045, .355, 1) .4s
}

.hamburger--twist.active span.bar:first-child {
    transform: rotate(45deg);
    left: 5.85786px;
    top:-14.14214px
}

.hamburger--twist.active span.bar:nth-child(2) {
    transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
    opacity:0
}

.hamburger--twist.active span.bar:nth-child(3) {
    transform: rotate(-225deg);
    top: 0
}