/*
* frankenMenu v1.0 // Karmabunny Web Design // built by Luke Underwood
*/


/** Menu styling
===================================*/
#frankenmenu-list,
#frankenmenu-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

#frankenmenu-list a {
    text-decoration: none;
    display: block;
    font-size: 1.6rem;
}


/** Pop out side menu
===================================*/


/* Prevents font-boosting of menu items on Android */
#frankenmenu * {
    max-height: 999999px;
}

#wrap {
    background-color: #232121;
}
#frankenmenu {
    top: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    background-color: #1A1311;
    width: 0;
    z-index: 100;
    padding-top: 110px;
}
.pageHasScrolled #frankenmenu {
    padding-top: 72px;
}
.frankenmenu-mob-menu-visible #frankenmenu {
    width: 70%;
}
#frankenmenu .container {
    position: relative;
    padding: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    opacity: 0;
}

/* ---- Mobile header ---- */
#menu-expand {
    background-color: transparent;
    height: 48px;
    position: relative;
    z-index: 101;
}
.menu-button {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    border: none;
    padding: 0;
    text-indent: -9999px;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    position: absolute;
    top:2px;
    right: 48px;
    background: none;
    cursor: pointer;
}

.menu-button-top,
.menu-button-middle,
.menu-button-bottom {
    height: 2px;
    background-color: #fff;
    left: 2px;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    position: absolute;
    display: block;
    right: 2px;
}
.menu-button-top {
    top: 10px;
}
.menu-button-middle {
    top: 22px;
}
.menu-button-bottom {
    top: 34px;
}

/* Animations active */
.frankenmenu-mob-menu-animations .menu-button-top {
    -webkit-animation-name: mobileMenuBtnTopClose;
    animation-name: mobileMenuBtnTopClose;
}
.frankenmenu-mob-menu-animations .menu-button-middle {
    -webkit-animation-name: mobileMenuBtnMiddleClose;
    animation-name: mobileMenuBtnMiddleClose;
}
.frankenmenu-mob-menu-animations .menu-button-bottom {
    -webkit-animation-name: mobileMenuBtnBottomClose;
    animation-name: mobileMenuBtnBottomClose;
}

/* Close button */
.frankenmenu-mob-menu-visible .menu-button .menu-button-top {
    -webkit-animation-name: mobileMenuBtnTopOpen;
    animation-name: mobileMenuBtnTopOpen;
}
.frankenmenu-mob-menu-visible .menu-button .menu-button-middle {
    -webkit-animation-name: mobileMenuBtnMiddleOpen;
    animation-name: mobileMenuBtnMiddleOpen;
}
.frankenmenu-mob-menu-visible .menu-button .menu-button-bottom {
    -webkit-animation-name: mobileMenuBtnBottomOpen;
    animation-name: mobileMenuBtnBottomOpen;
}



@-webkit-keyframes mobileMenuBtnTopClose {
    0% {
        -webkit-transform: translate(0, 12px) rotate(45deg);
        transform: translate(0, 12px) rotate(45deg);
    }
    50%, 70% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}



@keyframes mobileMenuBtnTopClose {
    0% {
        -webkit-transform: translate(0, 12px) rotate(45deg);
        transform: translate(0, 12px) rotate(45deg);
    }
    50%, 70% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@-webkit-keyframes mobileMenuBtnTopOpen {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50%, 70% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    100% {
        -webkit-transform: translate(0, 12px) rotate(45deg);
        transform: translate(0, 12px) rotate(45deg);
    }
}
@keyframes mobileMenuBtnTopOpen {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50%, 70% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    100% {
        -webkit-transform: translate(0, 12px) rotate(45deg);
        transform: translate(0, 12px) rotate(45deg);
    }
}
@-webkit-keyframes mobileMenuBtnBottomClose {
    0% {
        -webkit-transform: translate(0, -12px) rotate(-45deg);
        transform: translate(0, -12px) rotate(-45deg);
    }
    50%, 70% {
        -webkit-transform: translate(0, -12px);
        transform: translate(0, -12px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@keyframes mobileMenuBtnBottomClose {
    0% {
        -webkit-transform: translate(0, -12px) rotate(-45deg);
        transform: translate(0, -12px) rotate(-45deg);
    }
    50%, 70% {
        -webkit-transform: translate(0, -12px);
        transform: translate(0, -12px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@-webkit-keyframes mobileMenuBtnBottomOpen {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50%, 70% {
        -webkit-transform: translate(0, -12px);
        transform: translate(0, -12px);
    }
    100% {
        -webkit-transform: translate(0, -12px) rotate(-45deg);
        transform: translate(0, -12px) rotate(-45deg);
    }
}
@keyframes mobileMenuBtnBottomOpen {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50%, 70% {
        -webkit-transform: translate(0, -12px);
        transform: translate(0, -12px);
    }
    100% {
        -webkit-transform: translate(0, -12px) rotate(-45deg);
        transform: translate(0, -12px) rotate(-45deg);
    }
}
@-webkit-keyframes mobileMenuBtnMiddleClose {
    0% {
        opacity: 0;
    }
    50%, 70%, 100% {
        opacity: 1;
    }
}
@keyframes mobileMenuBtnMiddleClose {
    0% {
        opacity: 0;
    }
    50%, 70%, 100% {
        opacity: 1;
    }
}
@-webkit-keyframes mobileMenuBtnMiddleOpen {
    0% {
        opacity: 1;
    }
    50%, 70%, 100% {
        opacity: 0;
    }
}
@keyframes mobileMenuBtnMiddleOpen {
    0% {
        opacity: 1;
    }
    50%, 70%, 100% {
        opacity: 0;
    }
}


/* ---- All level menu items ---- */
#frankenmenu-list, #frankenmenu-list ul {
    width: 100%;
}
ul#frankenmenu-list {
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
#frankenmenu-list .menu-item {
    position: relative;
    float: none;
    width: 100%;
}
#frankenmenu-list a {
    min-height: 40px;
    width: 100%;
    padding: 12px 64px 12px 24px;
    color: #fff;
}
#frankenmenu-list .menu-item.menu-current-item > a {
    color: #FFF;
}

/* ---- First level menu ---- */
#frankenmenu-list .menu-item-depth1 > a {
    font-size: 2rem;
}

/* ---- Submenus ---- */
#frankenmenu-list .sub-menu {
    display: none;
}
#frankenmenu-list .menu-current-item-ancestor > .sub-menu {
    display: block;
}

/* Depth differences */
#frankenmenu-list .menu-item-depth1 > a {
    padding-left: 20px;
}
#frankenmenu-list .menu-item-depth2 > a  {
    padding-left: 32px;
}
#frankenmenu-list .menu-item-depth3 > a  {
    padding-left: 40px;
}
#frankenmenu-list .menu-item-depth4 > a  {
    padding-left: 48px;
}
#frankenmenu-list .menu-item-depth5 > a  {
    padding-left: 56px;
}
#frankenmenu-list .menu-item-depth6 > a  {
    padding-left: 64px;
}

/* ---- Home link ---- */
.menu-home-page {
    display: none;
}

/* Expand buttons */
.submenu-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border: none;
    color: #FFF;
    font-size: 2.3rem;
    width: 55px;
    background: none;
    height: 39px;
    display: block;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    padding: 0;
}
.submenu-toggle:before,
.submenu-toggle:after {
    content: " ";
    width: 12px;
    height: 3px;
    display: block;
    position: absolute;
    background-color: #FFF;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 22px;
    -webkit-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.submenu-toggle:before {
    -webkit-transform: rotate(45deg) translateX(-5px);
    -ms-transform: rotate(45deg) translateX(-5px);
    transform: rotate(45deg) translateX(-5px);
}
.submenu-toggle:after {
    -webkit-transform: rotate(-45deg) translateX(5px);
    -ms-transform: rotate(-45deg) translateX(5px);
    transform: rotate(-45deg) translateX(5px);
}
.menu-item-submenu-open > .submenu-toggle:before,
.menu-item-submenu-open > .submenu-toggle:after {
    top: 15px;
}
.menu-item-submenu-open > .submenu-toggle:before {
    -webkit-transform: rotate(-45deg) translateX(-5px);
    -ms-transform: rotate(-45deg) translateX(-5px);
    transform: rotate(-45deg) translateX(-5px);
}
.menu-item-submenu-open > .submenu-toggle:after {
    -webkit-transform: rotate(45deg) translateX(5px);
    -ms-transform: rotate(45deg) translateX(5px);
    transform: rotate(45deg) translateX(5px);
}

/* ---- Sub-navigation ---- */
#frankenmenu-subnav-list {
    display: none;
}

/* ---- Menu positions ---- */

/* Left */
.frankenmenu-mobile-pos-left #frankenmenu {
    left: 0;
}
.frankenmenu-mobile-pos-left #frankenmenu .container {
    -webkit-transform: translate3d(-10%, 0, 0) scale(0.9);
    transform: translate3d(-10%, 0, 0) scale(0.9);
}
.frankenmenu-mobile-pos-left.frankenmenu-mob-menu-visible #wrap {
    -webkit-transform: translate3d(70%, 0, 0);
    transform: translate3d(70%, 0, 0);
}

/* Right */
.frankenmenu-mobile-pos-right #frankenmenu {
    right: 0;
}
.frankenmenu-mobile-pos-right #frankenmenu .container {
    -webkit-transform: translate3d(10%, 0, 0) scale(0.9);
    transform: translate3d(10%, 0, 0) scale(0.9);
}
.frankenmenu-mobile-pos-right .menu-button {
    float: right;
}

/* ---- Transitions ---- */
#frankenmenu,
#wrap,
#frankenmenu .container {
    -webkit-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    transition: all 350ms ease;
}
.js #frankenmenu {
    opacity: 0;
}

/* Menu open */
.frankenmenu-mob-menu-visible #frankenmenu {
    opacity: 1;
}
.frankenmenu-mob-menu-visible #frankenmenu .container {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}

/* ---- Moved elements ---- */
.frankenmove {
    display: none;
}

/* ---- Megamenu ---- */
.mega-menu-preview {
    display: none;
}
.mega-menu-preview-image {
    background-image: none !important;
}
.mega-menu-column-title {
    color: #FFF;
    font-size: 1.6rem;
    padding: 3px 20px;
    margin: 0;
    background: rgba(0,0,0,0.3);
}
#frankenmenu-list .mega-menu {
    display: none;
}
#frankenmenu-list .mega-menu ul {
    display: block;
}

/* ---- Header home link ---- */
.menu-expand__container {
    position: relative;
}
.menu-home-link {
    display: block;
	padding: 0;
	width: 40px;
	height: 40px;
    position: absolute;
    top:2px;
    right: 0px;
	background: none;
}
.menu-home-link__icon {
    display: inline-block;
}

@media screen and (min-width: 600px) {
    .frankenmenu-mob-menu-visible #frankenmenu {
        width: 320px;
    }
}
/* BP small */
@media screen and (min-width: 48em) { /* 768px */
    #frankenmenu {
        padding-top: 154px;
    }
    .pageHasScrolled #frankenmenu {
        padding-top: 95px;
    }
    #menu-expand {
    	margin-top: 16px;
    }
}
@media only screen and (min-width: 75em) {
    .frankenmenu-mob-menu-visible #frankenmenu {
        width: 30%;
    }
}