@charset "utf-8";
/* CSS Document */

html { font-size:1.000em; font-weight:100; letter-spacing:0.076em; }
footer .container { width:100%; }
.hideElement { display:none !important; visibility:hidden !important;  margin:0; padding:0; width:0px; height:0px !important;  float:none; clear:both; opacity:0; }
#page { overflow-x: hidden; position: relative; padding-top:48px; }
 /* shared Effect speed */
nav .container, div#mNav, div#mNav div:nth-child(1), div#mNav div:nth-child(2) {  -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; }
nav, nav .container { position:fixed !important; z-index:99999; top:0px !important;}
nav .container { 
    height: 48px !important;
    overflow: hidden;
    padding: 0;
    width: 100%;
    background-image: none !important;
    background-color: rgb(0,0,0) !important;
    background: #141414 !important;
}
nav .container.open { 
    height: auto !important;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    min-height: 390px !important;
    max-height: 100vh !important;
} 

div#mNav { 
    display: block;
    position: fixed !important;
    background-color: rgb(0,0,0) !important;
    z-index: 99999 !important;
    top: 0px !important;
    width: 100%;
    height: 48px;
    color: rgb(255,255,255);
    text-align: center;
    line-height: 42px;
    cursor: pointer;
    font-weight: 100;
    font-size: 14pt;
    box-sizing: border-box;
    padding: 0px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='red'%3E%3Cpath d='M140-254.62v-59.99h680v59.99H140ZM140-450v-60h680v60H140Zm0-195.39v-59.99h680v59.99H140Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 36px;
    background-position: 12px center;
} 
nav .container.open div#mNav { color:rgb(255,255,255); z-index:99999;  border-bottom:0.67px solid rgb(255,70,70) } 
nav .container      div#mNav:before { 
    content: 'MENÜ';
    font-size: 14pt;
    clear: both;
    z-index: 99999;
    text-align: left;
    position: relative;
    width: calc(100% - 64px) !important;
    display: block;
    box-sizing: border-box;
    padding: 5px 12px 4px 58px;
    color: red; 
    pointer-events: none; 
} 
nav .container.open div#mNav { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='red'%3E%3Cpath d='M256-213.85 213.85-256l224-224-224-224L256-746.15l224 224 224-224L746.15-704l-224 224 224 224L704-213.85l-224-224-224 224Z'/%3E%3C/svg%3E"); }
nav .container.open div#mNav:before { content:'CLOSE'; font-size:14pt; }

    
nav .container.open div#mNav:after, nav .container div#mNav:after { display:none; } 


nav .container      ul { position:relative !important; z-index:1; height:12px;} 
nav .container.open ul { 
    z-index: 999;
    height: auto !important;
    margin-top: 50px;
    display: flex !important;
    position: relative !important;
    box-sizing: border-box;
    padding: 2px 0px;
    margin: 68px 0px 0px 0px !important;
    flex-direction: column;
    justify-content: left;
    align-content: stretch;
    align-items: stretch;
} 
nav .container.open ul { min-height: 320px !important; } 
nav .container.open ul  li > ul          { display: none !important;  position: absolute !important; } 
nav .container.open ul li:hover, nav .container.open ul li.hover { background-color: #000 !important; } 

nav .container.open ul li:not(.parent):hover > ul, 
nav .container.open ul li.actual > ul, 
nav .container.open ul li.hover > ul { display: flex !important; padding: 22px 0px 12px 12px; } 


nav .container.open ul li > ul li > ul   { flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start; align-items: flex-start; align-content: flex-start; }
nav .container.open ul li > ul li > ul > li   { width: auto !important; padding: 0px 32px 0px 0px; }
/* Make Navi Scrollbar */
nav .container.open > ul { 
    padding: 0px 0px 22px 48px;
    width: auto !important;
    max-width: 280px !important;
    border-right: 1px solid rgba(255,255,255,0.2);
} 
nav .container.open ul li ul, nav .container.open ul li { overflow:visible !important; } 
nav .container.open ul > li { 
    display: block; 
    box-sizing: border-box; 
    padding: 0px 0px 0px 0px; 
    width: 100%; 
    margin: 0px 0px 0px 0px; 
    border: 0px !important; 
    overflow: visible !important; 
} 
nav .container.open > ul > li { 
    
    
    
} 
nav .container.open > ul > li.actual { 
    
    
    
} 








nav .container.open > ul > li > ul, 
nav .container.open > ul > li > ul > li > ul { 
    position: absolute !important;
    background-color: none !important;
    background: none !important;
    top: 0px;
    left: 100%;
    width: 100%;
    margin: 0px 0px !important;
    padding-bottom:32px;
} 


nav .container.open > ul > li > ul > li > ul { 
    width: calc(100vw - 600px) !important; 
    max-width: 560px !important;
}


nav .container.open ul li b, 
nav .container.open ul li b > span, 
nav .container.open ul li a, 
nav .container.open ul li a > span  { 
    color: white !important;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 0px 0px;
    margin: 0px 0px;
    opacity: 1 !important;
    text-transform: uppercase; 
    font-weight:400; 
} 

nav .container.open ul li b > span,
nav .container.open ul li a > span                  { padding: 8px 2px 8px 10px;    text-align: left; font-size: 1.25rem; } 
nav .container.open ul li > ul li b > span,
nav .container.open ul li > ul li a > span          { padding: 8px 0px  8px 14px;   font-size: 1.15rem; } 
nav .container.open ul li > ul li > ul li b > span, 
nav .container.open ul li > ul li > ul li a > span  { padding: 8px 16px 6px 10px;   min-width:240px; font-size: 1rem;} 




nav .container.open ul li.actual > b > span, nav .container.open ul li.actual > a > span { color:red !important; } 






/* /////////////////  TURN ICON from = to x ANIMATION ///////////////////////////////////////////  */
div#mNav div:nth-child(1) { 
    display: block; position: absolute; top: 0px; left: 0px; width: 280px; height: 48px; opacity: 0.1; background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
} nav .container.open div#mNav div:nth-child(1) { 
    opacity: 0.24; 
}



div#mNav div:nth-child(2) { 
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M252.31-100Q222-100 201-121q-21-21-21-51.31v-455.38Q180-658 201-679q21-21 51.31-21H330v-10q0-62.15 43.92-106.08Q417.85-860 480-860t106.08 43.92Q630-772.15 630-710v10h77.69Q738-700 759-679q21 21 21 51.31v455.38Q780-142 759-121q-21 21-51.31 21H252.31Zm0-60h455.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-455.38q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H630v90q0 12.77-8.62 21.38Q612.77-520 600-520t-21.38-8.62Q570-537.23 570-550v-90H390v90q0 12.77-8.62 21.38Q372.77-520 360-520t-21.38-8.62Q330-537.23 330-550v-90h-77.69q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v455.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85ZM390-700h180v-10q0-37.61-26.19-63.81Q517.62-800 480-800q-37.62 0-63.81 26.19Q390-747.61 390-710v10ZM240-160v-480 480Z'/%3E%3C/svg%3E");
    margin: 0px 0px;
    width: 64px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px 0px;
    box-sizing: border-box;
    opacity: 0.8;
    background-color: transparent !important;
    z-index: 99999999;
} 
div#mNav div:nth-child(2):hover { 
    cursor:poniter !important; 
    opacity: 0.8;
} 

div#mNav div:nth-child(2) > small { 
    
        display: block;
    box-sizing: border-box;
    text-align: right;
    padding: 4px 6px 20px 0px;
    position: relative;
    max-height: 46px;
    margin: 0px 0px;
    line-height: normal;
    width: 100%;
    font-weight:600;
} 

div#mNav div.cartButton.empty > small { 
    opacity:0.5;
} 


/* Transform to open Look */

@media only screen and (max-width: 1200px) { 
    
    nav .container.open {  min-height: 100vh !important; } 
    nav .container.open > ul { 
        padding: 10px 0px 10px 16px; 
        width: 100% !important; 
        max-width: 100% !important; 
        border-right: 0px solid rgba(255,255,255,0.2); 
    } 
    nav .container.open > ul > li > ul,
    nav .container.open > ul > li > ul > li > ul { position: relative !important; top: 0px; left: 0px; width: 100%; } 
    nav .container.open ul li.actual > ul ,
    nav .container.open ul li.hover > ul 
    { padding: 7px 0px 12px 12px; width: 100% !important; min-height: 20px !important; } 
    
    nav .container.open ul li:hover, nav .container.open ul li.hover { background-color: transparent !important; } 
    nav .container.open ul li > ul li b > span, 
    nav .container.open ul li > ul li a > span { padding: 4px 0px  2px 14px; }
    
    nav .container.open ul li > ul li > ul li b > span, 
    nav .container.open ul li > ul li > ul li a > span { padding: 2px 0px 2px 16px; min-width: 60px !important; }
    nav .container.open ul li > ul li > ul > li { padding: 0px 20px 0px 0px; }
    
    
    
    

}