/*
 * inwendo Base Theme - Mobile Navigation - Styles
 *
 ********************************************************/

/* Mobile Menu  - Button */
button.mobile_navigation_button {
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
    border: 0;
    -webkit-border-radius: 0;
    background: transparent;
    position: absolute;
    right: 15px;
    padding: 0;
    cursor: pointer;
}

button.mobile_navigation_button.open {
    right: 15px;
    padding: 0;
}

button.mobile_navigation_button.close {
    right: 15px;
    padding: 0;
    z-index: 12;
    top: 15px;
    position: fixed;
}

.iw-widget.mobile_menu_buttons {
    display: none;
    opacity: 0;
    -webkit-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
}

.iw-widget.mobile_menu_buttons button.mobile_navigation_button.open,
.iw-widget.mobile_menu_buttons button.mobile_navigation_button.close {
    width: 64px;
    height: 64px;
    background-color: #EF17EF;
    position: fixed;
    top: unset;
    bottom: 15px
}

button.mobile_navigation_button.close svg {
    fill: #000;
}

button.mobile_navigation_button:focus {
    outline: 0;
}

button.mobile_navigation_button .open_mobile_menu,
button.mobile_navigation_button .close_mobile_menu {
    opacity: 0;
    -webkit-transition: visibility 0s, opacity 0.5s linear;
    -o-transition: visibility 0s, opacity 0.5s linear;
    transition: visibility 0s, opacity 0.5s linear;
}

.header_area button.mobile_navigation_button svg {
    fill: #000;
    height: 24px;
    width: 24px;
}

.header_area.transparent button.mobile_navigation_button svg {
    fill: #fff;
}

.header_area.transparent.sticky button.mobile_navigation_button svg {
    fill: #000;
}

/* Mobile Menu - Side Navigation */
nav.side_nav {
    height: 100%;
    width: 270px;
    background-color: #fff;
    right: -270px;
    position: fixed;
    z-index: 11;
    top: 0;
    display: none;
    overflow-x: scroll;
    -webkit-box-shadow: -5px 5px 10px rgba(0, 0, 0, .10);
    box-shadow: -5px 5px 10px rgba(0, 0, 0, .10);
}

/* Mobile Menu - Fullscreen Navigation */
nav.fullscreen_nav {
    background: #efef17;
    position: fixed;
    top: 0;
    z-index: 11;
    height: 0;
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0, 1);
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    width: 100%;
    overflow: scroll;
}

/* Fullscreen Layer to close Mobile Menu if clicked (js) */
.closing_layer {
    height: 100%;
    width: 100%;
    right: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    display: none;
}

/* Generell Mobile Menu Styles */
/* Mobile Menu - List Wrapper */
ul.mobile-menu {
    list-style-type: none;
    padding: 17px;
    margin: 0;
    display: none;
}

ul.mobile-menu:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

/* Mobile Menu - List Element */
ul.mobile-menu > li {
    padding: 17px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s, opacity .6s linear;
    -o-transition: visibility 0s, opacity .6s linear;
    transition: visibility 0s, opacity .6s linear;
}

/* -- Mobile Menu Link - Standard */
ul.mobile-menu > li .menu-item-link-wrapper > a {
    text-decoration: none;
    color: #17efef;
}

/* -- Mobile Menu Link - Hover and Focus */
ul.mobile-menu > li .menu-item-link-wrapper > a:hover,
ul.mobile-menu > li .menu-item-link-wrapper > a:focus {
    text-decoration: none;
    color: #ef17ef;
}

/* -- Active Mobile Menu Link - Standard, Hover and Focus */
/* -- Active Mobile Menu Link -> If dropdown-menu Link is active */
ul.mobile-menu > li.active .menu-item-link-wrapper > a,
ul.mobile-menu > li.active .menu-item-link-wrapper > a:hover,
ul.mobile-menu > li.active .menu-item-link-wrapper > a:focus,
ul.mobile-menu > li.current_page_parent .menu-item-link-wrapper > a {
    color: #ef17ef;
}

/* Dropdown Menu */
/* Dropdown Menu - List Wrapper */
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu {
    list-style-type: none;
    padding: 17px;
}

/* dropdown-menu in Mobile Menu - List Element */
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu > li {
    text-align: center;
}

/* -- Standard dropdown-menu in Mobile Menu Link */
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu > li .menu-item-link-wrapper > a {
    text-decoration: none;
    color: #17efef;
}

/* -- Dropdown Menu Link - Hover and Focus */
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu li .menu-item-link-wrapper > a:hover,
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu li .menu-item-link-wrapper > a:focus {
    text-decoration: none;
    color: #ef17ef;
}

/* -- Active Dropdown Menu Link - Standard, Hover and Focus */
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu > li.active .menu-item-link-wrapper > a,
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu > li.active .menu-item-link-wrapper > a:hover,
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu > li.active .menu-item-link-wrapper > a:focus,
ul.mobile-menu > li .menu-item-link-wrapper > ul.dropdown-menu > li.current_page_parent .menu-item-link-wrapper > a {
    text-decoration: none;
    color: #ef17ef;
}