/* NAVIGATION CONTAINER */
header .sticky {
    width:100%;
    height:auto;
    position: fixed;
    z-index: 10000;
    top: 0;
    margin: 0;
    padding: 0;
    background: url(../images/layout/bg_nav_7.png) left bottom 4px no-repeat, url(../images/layout/bg_nav_gradient_1.png) left top / 100% 45px no-repeat var(--white);
}
header .phone_social a,
header .phone_social a:hover,
header .phone_social a:active,
header .phone_social a:visited {
    font-size:var(--text-font-size-small);
    color:var(--gray);
    padding:2px 5px;
}



/* TOGGLE */
.menuToggle {
    width: 80px;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    z-index: 1000000;
    background-color: none;
    /*
    background: url(../images/layout/bg_nav_menu.png) center top 15px no-repeat var(--white);
    */
    /*
    transform: translateY(-50%);
    */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
.menuToggle.open{
    background:none;
    margin-top: 45px;
    }
.menuToggle .menue-container {
    width: 100%;
    height:18px;
    color:var(--black50);
    background-color: none;
    font-size:12px;
    line-height:15px;
    text-align: center;
    text-transform: uppercase;
    }
.menuToggle input {
    display: flex;
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: pointer;
    opacity: 0; /* hide input */
    z-index: 1; /* top of the menu */
    }
.menuToggle span {
    width: 40px;
    height: 3px;
    margin-bottom: 6px;
    background-color: var(--black);
    border-radius: 0px;
    -webkit-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    -moz-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    -ms-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    -o-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    transition: all .5s cubic-bezier(.08,.81,.87,.71);
    }
#span1 {
    transform-origin: 4px 0px;
    }
#span3 {
    transform-origin: bottom right;
    }
.menuToggle input:checked ~ #span1 {
    background-color: var(--white) !important;
    transform: rotate(45deg) translate(3px);
    }
.menuToggle input:checked ~ #span2 {
    background-color: var(--white) !important;
    transform: rotate(495deg) translate(5px);   
    }
.menuToggle input:checked ~ #span3 {
    background-color: var(--white) !important;
    transform: rotate(45deg);
    opacity: 0;
    }
/* NAV */
nav#overlay {
    z-index:10000;
    background-color: var(--red95);
    }
nav {
    position: fixed;
    overflow: auto;
    background-color: var(--navigation-background);
    padding: 20px;
    width: calc(100% - 0em);
    height: calc(100vh - 0em);
    display: none;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    }

nav ul,
nav ul ul,
nav ul ul ul {
    list-style-type: none;
    padding: 0;
    width: 100%;
    margin: 15% auto 0 auto;
    display: inline-block;
    }
nav ul li,
nav ul li ul li,
nav ul li ul li ul li {
    opacity: 0;
    text-align: center;
    margin-bottom:0px;
    }
nav ul a {
    text-decoration: none;
    text-transform: uppercase;
    }
nav ul li a,
nav ul li a:hover {
    color: var(--white) !important;
    font-size: var(--font-size-headline-navigation) !important;
    line-height: var(--line-height-headline-navigation)  !important;
    background: none var(--trans);!important;
    margin:0;
    padding:0;
    }

nav ul li ul li a,
nav ul li ul li a:hover {
    color: var(--white) !important;
    font-size: var(--text-font-size-small) !important;
    line-height: var(--text-font-line-height-small) !important;
    margin:0;
    padding:0;
    }
nav ul li ul li a:hover {
    color: var(--black) !important;
    background:none var(--trans); !important;
    }



nav ul.sub-menu {
    margin:0 0 10px;
    }
nav ul.sub-menu li a {
    color: rgba(255,255,255,.55);
    display: inline-block;
    font-size: 13px;
    line-height: 22px;
    }
nav ul.sub-menu li.headline a {
    color: rgba(5,129,218,1);
    display: block;
    }
nav ul.sub-menu li.headline ul li a {
    color: rgba(255,255,255,.55);
    display: block;
    }
nav ul li i {
    margin-right:10px;
    }
.show-menu {
    display: block;
    -webkit-animation: slide-menu 0.5s ease-in forwards;
    animation: slide-menu 0.5s ease-in forwards;
    }
.show-menu .close-button {
    -webkit-animation: show-x 1s 1s forwards;
    animation: show-x 1s 1s forwards;
    }
.show-menu li:nth-of-type(1) {
    -webkit-animation: menu-item-anim .35s forwards .5s ease-in-out;
    animation: menu-item-anim .35s forwards .5s ease-in-out;
    }
.show-menu li:nth-of-type(2) {
    -webkit-animation: menu-item-anim .35s forwards 0.7s ease-in-out;
    animation: menu-item-anim .35s forwards 0.7s ease-in-out;
    }
.show-menu li:nth-of-type(3) {
    -webkit-animation: menu-item-anim .35s forwards 0.9s ease-in-out;
    animation: menu-item-anim .35s forwards 0.9s ease-in-out;
    }
.show-menu li:nth-of-type(4) {
    -webkit-animation: menu-item-anim .35s forwards 1.1s ease-in-out;
    animation: menu-item-anim .35s forwards 1.1s ease-in-out;
    }
.show-menu li:nth-of-type(5) {
    -webkit-animation: menu-item-anim .35s forwards 1.3s ease-in-out;
    animation: menu-item-anim .35s forwards 1.3s ease-in-out;
    }
.show-menu li:nth-of-type(6) {
    -webkit-animation: menu-item-anim .35s forwards 1.5s ease-in-out;
    animation: menu-item-anim .35s forwards 1.5s ease-in-out;
    }
.show-menu li:nth-of-type(7) {
    -webkit-animation: menu-item-anim .35s forwards 1.7s ease-in-out;
    animation: menu-item-anim .35s forwards 1.7s ease-in-out;
    }
.show-menu li:nth-of-type(8) {
    -webkit-animation: menu-item-anim .35s forwards 1.9s ease-in-out;
    animation: menu-item-anim .35s forwards 1.9s ease-in-out;
    }
.show-menu li:nth-of-type(9) {
    -webkit-animation: menu-item-anim .35s forwards 2.1s ease-in-out;
    animation: menu-item-anim .35s forwards 2.1s ease-in-out;
    }
.show-menu li:nth-of-type(10) {
    -webkit-animation: menu-item-anim .35s forwards 2.3s ease-in-out;
    animation: menu-item-anim .35s forwards 2.3s ease-in-out;
    }
@-webkit-keyframes slide-menu {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        }
    }
@keyframes slide-menu {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        }
    }
@-webkit-keyframes show-x {
    from {
        opacity: 0;
        }
    to {
        opacity: 1;
        }
    }
@keyframes show-x {
    from {
        opacity: 0;
        }
    to {
        opacity: 1;
        }
    }
@-webkit-keyframes menu-item-anim {
    from {
        -webkit-transform: translateY(70%);
        transform: translateY(70%);
        opacity: 0;
        }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        }
    }
@keyframes menu-item-anim {
    from {
        -webkit-transform: translateY(70%);
        transform: translateY(70%);
        opacity: 0;
        }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        }
    }
    
    
header.menu-open .row.navigation .navigation-background.navigation-height.middle{
   background: none;
}
header.menu-open .row.navigation .bg_nav_logo,
header.menu-open .row.navigation .menue-container {
   opacity: 0;
}


header.menu-open .row.navigation .navigation-height.navigation-top,
header.menu-open.shrink .row.navigation .navigation-height.navigation-top,
header.menu-open .row.navigation .navigation-background.booking,
header.menu-open.shrink .row.navigation .navigation-background.booking,header.menu-open .row.navigation .logo-background.vertical-align-middle,
header.menu-open.shrink .logo-background.vertical-align-middle{
    display: none;
}


header.menu-open .sticky {
    background: none var(--trans);
}
header.menu-open .sticky .logo img,
header.menu-open .sticky .menue-container {
    display: none;
}



/* =============================================
   ###
================================================ */
@media (max-width: 767px) {
    .menuToggle {
        background-color: none;
        margin-left: 0;
        border:0;

        }
    .menuToggle input {
        width: 50px;
        height: 50px;
        }
    .menuToggle span {
        background: var(--black) !important;
        }
    .menuToggle .menue-container {
        height:16px;
        font-size:10px;
        line-height:13px;
        }
    nav {
        padding: 10px;
        }
    nav ul,
    nav ul ul,
    nav ul ul ul {
        margin: 50px auto 0;
        }
    nav ul li a {
        font-size: 21px;
        }
    body nav#overlay,
    nav ul.sub-menu li a {
        line-height: 18px !important;
        }
    header .navigation-height,
    header .navigation-height.middle {
            height:30px;
        }
    header .navigation-height.middle {
            height:50px;
        }
    header .navigation-background.booking {
        background-position: 0px 20px;
        }
    header .phone_social a,
    header .phone_social a:hover,
    header .phone_social a:active,
    header .phone_social a:visited {
        color:var(--white);
    }

}

/* =============================================
   ###
================================================ */
@media (min-width: 768px) {
    .phone-special .container-center,
    .menuToggle {
        margin-top: 20px;
    }

}


/* =============================================
   ###
================================================ */
@media (min-width: 992px) {

    nav {
        padding: 30px;
    }
    nav ul {
        margin: 10% auto 0 auto;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (auto)[5];
        grid-template-columns: repeat(5, auto);
    }
    nav ul li,
    nav ul li ul li,
    nav ul li ul li ul li {
        text-align: left;
    }
    nav ul ul{
        display: block;
        -ms-grid-columns: inherit;
        grid-template-columns: inherit;
    }
    .phone-special .container-center,
    .menuToggle {
        margin-top: 20px;
    }
}

/* =============================================
   ###
================================================ */
@media (min-width: 1200px) {
    nav ul {
        width: 80%;
    }
    .phone-special .container-center,
    .menuToggle {
        margin-top: 30px;
    }
    
}