/*
    DOT-ELEMENT #dotmenu
    Author: Štefan Miščík
    Website: https://dotsystems.sk/
    Email: info@dotsystems.sk

    Version: 1.1 stable
    
    You can edit as needed, but must preserve the author's header in CSS.
*/

/*
    VARIABLES - Edit the variables as needed.

    By editing these variables, you can create an amazing looking menu.
    All other aspects, such as element widths, padding, etc., will be computed based on your values.

    Here is bonus: PHP code to calculate clamp function for CSS font size if you plan to have large texts in sliders etc.

    <?php

        // Define the parameters
        $minFontSize = 2.5; // Minimum font size in rem
        $maxFontSize = 4;   // Maximum font size in rem
        $minViewportWidth = 1024; // Minimum viewport width in px
        $maxViewportWidth = 1980; // Maximum viewport width in px

        // Calculate the coefficient and intercept for the clamp function
        $viewportRange = $maxViewportWidth - $minViewportWidth;
        $fontSizeRange = $maxFontSize - $minFontSize;
        $vwCoefficient = $fontSizeRange / $viewportRange;
        $vwIntercept = $minFontSize - ($vwCoefficient * $minViewportWidth);

        // Format the output
        echo "font-size: clamp(" . number_format($minFontSize, 2) . "rem, " .
            number_format($vwIntercept, 2) . "rem + " . 
            number_format($vwCoefficient, 4) . "vw, " . 
            number_format($maxFontSize, 2) . "rem);";
    ?>
*/

dot-element[eid="dotmenu"] {
    /* Wrapper width. % of parent. Or any other settings as you want. If dot element is inside of your own wrapper, set this to 100% */
    --wrapper-desktop-width: var(--web-wrapper-width);
    --wrapper-mobile-width: var(--web-wrapper-width);

    /* <nav-above> */
    --nav-above-height: 50px; /* If you do not use <nav-above> tag, set to 0px */
    --nav-above-bg-color: transparent; /* Background color of */
    --nav-above-color: var(--web-secondary); /* Text color */
    --nav-above-icon-color: var(--web-primary); /* Icons color on left side */
    --nav-above-social-icon-color: var(--web-primary); /* Social icons color */
    --nav-above-social-icon-hover-color: var(--web-primary-hover); /* Social icons color on HOVERING mouse */
    --nav-above-wrapper-width: var(--wrapper-desktop-width); /* Wrapper inside of nav-above element width. */
    --nav-above-mobile-wrapper-width: var(--wrapper-mobile-width); /* Wrapper inside of nav-above element width on mobile phone. If not hidden */
    --nav-above-wrapper-padding: 10px; /* Padding of text of wrapper*/
    --nav-above-font-size: 1rem; /* Font size */
    --nav-above-font-weight: normal; /* Font weight */

    /* MENU ON DESKTOP */
    --nav-justify-content: space-between; /* space-between, start, center, space-around, space-evenly*/
    --nav-justify-items: rightcenter; /* stretch, center, start, end */
    --nav-align-items: center; /* stretch, center, start, end */
    --nav-menu-logo-order: 1;
    --nav-menu-menuitems-order: 2;
    --nav-menu-mobilemenu-toggler-order: 3;
    --nav-menu-logo-width: 220px; /* Logo width  */
    --nav-height: 60px; /* Height of navigation */
    --nav-height-sticky: 50px; /* Height of navigation */
    --nav-font-size: 1.1rem; /* Font size of navigation */
    --nav-font-weight: 500; /* Font weight of navigation */
    --nav-wrapper-width: var(--wrapper-desktop-width); /* Width of menu wrapper */
    --nav-wrapper-padding: var(--nav-above-wrapper-padding); /* padding in menu wrapper */
    --nav-background-color: transparent; /* Menu background before sticky */
    --nav-autosticky-background-color: #f9f9f9; /* Background of menu when become sticky */
    --nav-autosticky-shadow: 0px 0px 3px #bbbbbb;
    --nav-text-color: #2d2f3b; /* Menu TEXT color */
    --nav-text-color-active: var(--nav-above-icon-color); /* Text item menu color on hover or active */
    --nav-dropdown-menu-background: #2d2f3b; /* Background color */
    --nav-dropdown-menu-color: white; /* Text color */
    --nav-dropdown-menu-divider-color: white; /* Line color between menu items */
    --nav-dropdown-menu-hover-background: #6b81ff; /* Background color on hover */
    --nav-dropdown-menu-hover-color: rgb(35, 0, 161); /* Text color on hover */
    --nav-megamenu-background: #f9f9f9; /* Background of MEGA MENU */
    --nav-megamenu-color: #FFFFFF; /* TEXT Color in mega menu */
    --nav-megamenu-img-border-color: #4c5158; /* Border color around image */
    --nav-megamenu-img-border-color-active: var(--nav-above-icon-color); /* Border color around image when hovering */
    --nav-megamenu-img-font-size: 0.8rem; /* Size of font under images */

    /* MENU ON MOBILE */
    --nav-toggler-size: 40px;
    --nav-toggler-color: #2d2f3b;
    --nav-toggler-clicked-color: #0b1758;

    --nav-mobile-menu-logo-width: 180px;
    --nav-mobile-wrapper-width: var(--wrapper-mobile-width);
    --nav-mobile-text-color: #2d2f3b;
    --nav-mobile-height: 60px;
    --nav-mobile-height-sticky: 60px;
    --nav-mobile-font-size: 1.2rem;
    --nav-mobile-dropdown-font-size: 1.1rem;
    --nav-mobile-dropdown-text-color: #2d2f3b;
    --nav-mobile-megamenu-text-color: white;
    --nav-mobile-info-font-size: 1.1rem; /* Informations under menu items like email or phone */
    --nav-mobile-menu-background-color: #eeeeee;
    --nav-mobile-menu-drop-shadow: -0px 3px 2px rgba(10,10,10,0.1);
    --nav-mobile-menu-items-background-color: #eeeeee;
    --nav-mobile-menu-items-padding: 20px;
    --nav-mobile-menu-items-line-color: var(--web-divider-color);
    --nav-mobile-menu-items-dropdown-line-color: #e1e6ec;
    

    --menu-bg: #44444;
    
    --desktop: 1;
}

/*
    By length of your menu, set this to better fit while 
    coming from mobile to desktop size
*/

@media (min-width: 992px) {
    dot-element[eid="dotmenu"] {
        --wrapper-desktop-width: 95%;
    }
}

@media (min-width: 1170px) {
    dot-element[eid="dotmenu"] {
        --wrapper-desktop-width: 80%;
    }
}

@keyframes dot-element-eid-menu1-moveBackground {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 1% 1%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/*
    Element CSS style
    DO NOT TOUCH THIS CODE, ONLY IF YOU KNOW WHAT YOU ARE DOING ! 
*/

dot-element[eid="dotmenu"] {
    display: block;
    width: 100%;
    position: relative;
}

dot-element[eid="dotmenu"] * {
    box-sizing: border-box;
}

dot-element[eid="dotmenu"] > .row {
    margin-right: 0;
    margin-left: 0;
}

/* <NAV-ABOVE> ELEMENT */

    @media (max-width: 991.98px) {
        dot-element[eid="dotmenu"] nav-above .wrapper {
            width: var(--nav-above-mobile-wrapper-width,100%);
        }
    }

    @media (min-width: 992px) {
        dot-element[eid="dotmenu"] nav-above .wrapper {
            width: var(--nav-above-wrapper-width,100%);
        }
    }

    BODY.dot-element-eid-menu1-overflow-menu {
       overflow: hidden; 
    }

    dot-element[eid="dotmenu"] nav-above {
        display: block;
        width: 100%;
        background-color: var(--nav-above-bg-color);
        color: var(--nav-above-color);
    }

    dot-element[eid="dotmenu"] nav-above .wrapper {
        height: var(--nav-above-height);
        display: flex;
        margin: auto;
        justify-content: space-between;
        align-items: center;
        padding: var(--nav-above-wrapper-padding,10px) 0px;         /* Optional: Add some padding to the sides */
        box-sizing: border-box;  /* Ensure padding doesn't affect the width */
    }

    dot-element[eid="dotmenu"] nav-above .wrapper * {
        font-size: var(--nav-above-font-size);
        font-weight: var(--nav-above-font-weight);
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV > SPAN, dot-element[eid="dotmenu"] nav-above .wrapper UL {
        display: inline-block;
        font-size: var(--nav-above-font-size);
        font-weight: var(--nav-above-font-weight);
        margin: 0px;
        margin-right: 30px;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV > SPAN > SMALL {
        display: none;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV:first-of-type > SPAN {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV:first-of-type > SPAN I {
        color: var(--nav-above-icon-color);
        font-size: 1.3rem;
        margin-right: 5px;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV:last-of-type,
    dot-element[eid="dotmenu"] nav-above .wrapper DIV:first-of-type {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV:last-of-type A > I {
        color: var(--nav-above-social-icon-color);
        margin-right: 1px;
        -webkit-transition: .3s ease-in;
        transition: .3s ease-in;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV:last-of-type A:hover > I {
        color: var(--nav-above-social-icon-hover-color);
        margin-right: 1px;        
    }

    dot-element[eid="dotmenu"] nav-above .wrapper DIV > UL > LI > A > I {
        font-size: 1.5rem;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper A {
        display: inline-block;
        font-size: var(--nav-above-font-size);
        font-weight: var(--nav-above-font-weight);
        color: var(--nav-above-color);
        text-decoration: none;
    }

    dot-element[eid="dotmenu"] nav-above .wrapper UL LI {
        display: inline-block;
        list-style: none;
    }

    dot-element[eid="dotmenu"] .show-on-phone {
        display: none !important;
    }

    @media (max-width: 991.98px) {

        dot-element[eid="dotmenu"] nav-above .wrapper div.hide-on-phone:first-of-type + DIV:last-of-type {
            width: 100%;
        }

        dot-element[eid="dotmenu"] .hide-on-phone {
            display: none !important;
        }

        dot-element[eid="dotmenu"] .show-on-phone {
            display: block !important;
        }

        dot-element[eid="dotmenu"] {
            background-position: 70% 0px; /* Center the background image */
        }

    }

/* END <NAV-ABOVE> ELEMENT */

/* <NAV> ELEMENT - Menu */

dot-element[eid="dotmenu"] nav.autosticky {
    position: fixed !important;
    top: 0px;
}

dot-element[eid="dotmenu"] {
    --touch-screen: 1;
}

@media (hover: none) and (pointer: coarse) {
    /* Detection of touch screens */
    dot-element[eid="dotmenu"] {
        --touch-screen: 1;
    }
}

@media (max-width: 991.98px) {
    /* MOBILE VERSION */
    
    dot-element[eid="dotmenu"] {
        --desktop: 0;
    }
    
    dot-element[eid="dotmenu"] nav {
        position: relative;
        z-index: 99;
        background-color: var(--nav-background-color);
        display: block;
        width: 100%;
        -webkit-transition: .1s ease-in;
        transition: .1s ease-in;
        box-shadow: var(--nav-mobile-menu-drop-shadow);
    }

    dot-element[eid="dotmenu"] nav.sticky {
        position: relative;
        top: 0;
    }

    dot-element[eid="dotmenu"] nav.autosticky {
        background-color: var(--nav-autosticky-background-color);
        box-shadow: var(--nav-autosticky-shadow,none);
    }

    dot-element[eid="dotmenu"] nav.autosticky > .wrapper {
        height: var(--nav-mobile-height-sticky);
    }

    dot-element[eid="dotmenu"] nav.active {
        position: fixed;
        overflow-y: scroll;
        overflow-X: hidden;
        height: 100vh;
    }

    dot-element[eid="dotmenu"] nav > .wrapper {
        height: var(--nav-mobile-height);
        display: flex;
        width: 100%;
        justify-content: space-between;
        justify-items: start;
        align-items: center;
        flex-wrap: wrap;
        background-color: var(--nav-mobile-menu-background-color);
    }

    dot-element[eid="dotmenu"] nav.active > .wrapper {        
        align-items: center;
        padding-top: 10px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > .logo {
        margin-left: 20px;
        display: block;
        order: 1;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > .logo IMG {
        max-width: var(--nav-mobile-menu-logo-width);
    }

    dot-element[eid="dotmenu"] nav .wrapper .toggler {
        margin-right: 20px;
        display: flex;
        order: 2;
    }

    dot-element[eid="dotmenu"] nav > .wrapper UL, dot-element[eid="dotmenu"] nav > .wrapper UL LI, dot-element[eid="dotmenu"] nav > .wrapper UL LI A {
        display: block;        
        margin: 0;
        padding: 0;
        list-style: none;        
    }

    dot-element[eid="dotmenu"] nav > .wrapper UL LI A {
        color: var(--nav-mobile-text-color);
        text-decoration: none;
        font-weight: bold;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL {
        display: none;
        order: 3;
        min-height: 85vh;
        flex: 1 1 100%;
        width: 100%;
    }

    dot-element[eid="dotmenu"] nav.active > .wrapper > UL {
        display: block;
        visibility: visible;
        min-height: 90vh;
        overflow-y: scroll;
        top: 10px;
        position: relative;
        background-color: var(--nav-mobile-menu-items-background-color);
        padding-bottom: calc(5vh + var(--nav-above-height));
        padding-bottom: 5vh;
    }


    dot-element[eid="dotmenu"] nav.active > .wrapper > UL > LI {
        opacity: 1;
        visibility: visible;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI {
        opacity: 0;
        visibility: hidden;
        display: flex;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        position: relative;
        cursor: pointer;
        justify-items: start;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 25px;
        padding-right: 25px;
        border-bottom: 1px solid var(--nav-mobile-menu-items-line-color);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        font-size: var(--nav-mobile-font-size);
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info {
        display: table;
        width: 100%;
        overflow: visible;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV {        
        padding-top: 40px;
        margin-bottom: calc(var(--nav-above-height) + var(--nav-mobile-height));
        opacity: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;
        border: none;
        font-size: var(--nav-mobile-info-font-size);
        clear:both;
        flex-wrap:wrap;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV > SPAN:last-of-type {
        border-top: 1px solid;
        border-color: var(--web-divider-color);
        width: 100%;
        margin-top: 20px;
        padding-top: 10px;
    }

    dot-element[eid="dotmenu"] nav.autosticky > .wrapper > UL > LI.mobile-info > DIV {
        margin-bottom: calc(var(--nav-above-height) + var(--nav-mobile-height-sticky));
        margin-bottom: 20px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV SPAN {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 49%;
        border: none;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV SPAN I {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
        padding-bottom: 10px;
    }

    
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV SPAN A {
        display: block;
        width: 100%;
        text-align: center;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV SPAN SMALL {
        font-size: 0.8rem;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.cta {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        border: none;
        text-align: center;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI > A {
        padding: var(--nav-mobile-menu-items-padding,10px) 0px;
        order: 1;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI > I {
        order: 2;
        font-size: 1.3rem;
        font-weight: bold;
    }

    /* DROP DOWN */
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown {
        position: relative;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL {
        border-top: 1px solid var(--nav-mobile-menu-items-dropdown-line-color);
        width: 100%;
        margin-top: 10px;
        order: 3;
        display: none;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown.active > UL {
        order: 3;
        display: block;
        position: relative;
        z-index: 10;
        /*visibility: hidd
        en;
        opacity: 0;*/
        overflow: visible;
        padding: 0px;
        box-sizing: border-box;
        flex: 1 1 100%;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI {
        display: block;
        color: black;
        width: 100%;
        border-bottom: 1px solid var(--nav-mobile-menu-items-dropdown-line-color);
        padding:0px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI:last-child {
        border: none;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI > A {
        display: block;
        color: var(--nav-mobile-dropdown-text-color);
        width: 100%;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 0.9rem;
        font-weight: 400;
        font-size: var(--nav-mobile-dropdown-font-size);
    }

    /* DROP DOWN MEGA */
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega {
        position: relative;
        z-index: 10;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL {
        display: none;
        position: relative;
        width: 100%;
        order: 3;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega.active > UL {
        display: table;
        position: relative;
        width: 100%;
        order: 3;
        padding-bottom: 25px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI {
        display: table;
        position: relative;
        width: 100%;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-wrapper {
        display: block;
        width: 100%;
        border-radius: 15px;
        background-color: var(--nav-megamenu-background);
        color: var(--nav-mobile-megamenu-text-color);
        box-sizing: border-box;
        padding: 25px;
        margin: auto;
    }

    /*
        .megamenu-img is JUST A SHOWCASE. You can delete it if you don't need it.
        You should design the inside of the megamenu according to your needs.
    */
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > A {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 8px solid var(--nav-megamenu-img-border-color);
        border-radius: 15px;
        margin: auto;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > A > IMG {
        display: inline-block;
        width: 100%;
        border-radius: 15px;
        box-sizing: border-box;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > B {
        color: var(--nav-megamenu-color);
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
        font-size: var(--nav-megamenu-img-font-size);
    }

}  

@media (min-width: 992px) {

    dot-element[eid="dotmenu"] nav.autosticky {
        background-color: var(--nav-autosticky-background-color);
        box-shadow: var(--nav-autosticky-shadow,none);
    }

    dot-element[eid="dotmenu"] nav.autosticky > .wrapper > UL {
        height: calc(var(--nav-height-sticky) + var(--nav-wrapper-padding) );
    }

    /* DESKTOP VERSION */
    dot-element[eid="dotmenu"] nav.sticky {
        position: relative;
        top: 0;
    }

    dot-element[eid="dotmenu"] nav {
        position: relative;
        z-index: 99;
        background-color: var(--nav-background-color);
        display: block;
        width: 100%;
    }

    dot-element[eid="dotmenu"] nav > .wrapper {
        display: flex;
        width: var(--nav-wrapper-width,100%);
        margin: auto;
        height: 100%;
        justify-content: var(--nav-justify-content);
        justify-items: var(--nav-justify-items);
        align-items: var(--nav-align-items);
        /*padding: var(--nav-wrapper-padding,10px) 0px;/* Optional: Add some padding to the sides */
        box-sizing: border-box;  /* Ensure padding doesn't affect the width */
    }

    dot-element[eid="dotmenu"] nav > .wrapper > .logo {
        display: flex;
        order: var(--nav-menu-logo-order);
        width: 30%;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > .logo IMG {
        max-width: var(--nav-menu-logo-width);
    }

    dot-element[eid="dotmenu"] nav > .wrapper UL, dot-element[eid="dotmenu"] nav > .wrapper UL LI, dot-element[eid="dotmenu"] nav > .wrapper UL LI A {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style: none;        
    }

    dot-element[eid="dotmenu"] nav > .wrapper UL LI A {
        color: var(--nav-text-color);
        font-size: var(--nav-font-size);
        text-decoration: none;
        font-weight: var(--nav-font-weight);
        position: relative;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL {
        height: calc(var(--nav-height) + var(--nav-wrapper-padding) );
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        order: var(--nav-menu-menuitems-order);
    }

    dot-element[eid="dotmenu"] nav .wrapper .toggler {
        display: none;
        order: var(--nav-menu-mobilemenu-toggler-order);
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-left: 12px;
        margin-right: 12px;
        position: relative;
        cursor: pointer;
        padding: var(--nav-wrapper-padding,10px) 0px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info {
        display: none !important;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.cta {
        margin-left: 30px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI:hover > A, dot-element[eid="dotmenu"] nav > .wrapper > UL > LI:hover > I,
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI:active > A, dot-element[eid="dotmenu"] nav > .wrapper > UL > LI:active > I {
        color: var(--nav-text-color-active);
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    /* DROP DOWN */
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown {
        position: relative;
        z-index: 10;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL {
        position: absolute;
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        overflow: visible;
        padding: 0px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        display: block;
        transform: translateX(25%);
        top: calc(var(--nav-height)/2);
        box-sizing: border-box;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown:hover > UL, dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL:hover,
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown.focus > UL, dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL.focus {
        visibility: visible;
        opacity: 1;
        top: calc(0.8*calc((var(--nav-height)) + calc(var(--nav-wrapper-padding,0px))));
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    dot-element[eid="dotmenu"] nav.autosticky > .wrapper > UL > LI.dropdown:hover > UL, dot-element[eid="dotmenu"] nav.autosticky > .wrapper > UL > LI.dropdown > UL:hover {
        top: calc(0.8*calc((var(--nav-height-sticky)) + calc(var(--nav-wrapper-padding,0px))));
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI {
        display: block;
        min-width: 150px;
        background-color: var(--nav-dropdown-menu-background);
        color: var(--nav-dropdown-menu-color);
        border-bottom: 1px solid var(--nav-dropdown-menu-divider-color);
        padding: 0px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI:hover,
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI.focus {
        background-color: var(--nav-dropdown-menu-hover-background);
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI:last-child {
        border: none;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI > A {
        display: block;
        padding: 5px 10px;
        margin: 0;
        color: var(--nav-dropdown-menu-color);
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown > UL > LI:hover > A {
        color: var(--nav-dropdown-menu-hover-color);
    }

    /* DROP DOWN MEGA */
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega {
        position: relative;
        z-index: 10;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL {
        position: fixed;
        z-index:11;
        left: 0;
        height: 0;
        width: 100%;
        visibility: hidden;
        overflow: visible;
        padding: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        background: none;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega:hover > UL, dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL:hover,
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega.focus > UL, dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL.focus {
        visibility: visible;
     
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI {
        display: block;
        position: absolute;
        z-index: 500;
        top: calc((var(--nav-height)/2) - var(--nav-wrapper-padding,0px) - 10px);
        width: 100%;
        opacity: 0;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega:hover > UL > LI,
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega.focus > UL > LI {        
        /*padding-top: calc(2*var(--nav-wrapper-padding,10px));*/
        top: calc((var(--nav-height)/2) + calc(var(--nav-wrapper-padding,0px)/2));
        opacity: 1;
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
        
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-wrapper {
        position: relative;
        z-index: 501;
        display: block;
        width: calc(var(--nav-wrapper-width,100%) - 2%);
        border-radius: 15px;
        background-color: var(--nav-megamenu-background);
        color: white;
        box-sizing: border-box;
        padding: 25px;
        margin: auto;
    }

    /*
        .megamenu-img is JUST A SHOWCASE. You can delete it if you don't need it.
        You should design the inside of the megamenu according to your needs.
    */
    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > A {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 8px solid var(--nav-megamenu-img-border-color);
        border-radius: 15px;
        margin: auto;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > A:hover {
        display: block;
        width: 100%;
        border: 3px solid var(--nav-megamenu-img-border-color-active);
        border-radius: 15px;
        -webkit-transition: .18s ease-in-out;
        transition: .18s ease-in-out;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > A > IMG {
        display: inline-block;
        width: 100%;
        border-radius: 15px;
        box-sizing: border-box;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.dropdown-mega > UL > LI > .megamenu-img > DIV.row > DIV > B {
        color: var(--nav-megamenu-color);
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
        font-size: var(--nav-megamenu-img-font-size);
    }

}  




    dot-element[eid="dotmenu"] nav .wrapper .toggler {
        --toggler-width: var(--nav-toggler-size);
        --toggler-height: var(--nav-toggler-size);
        display: block;
        cursor: pointer;
        min-height: 20px;
        opacity: 0.95;
        padding: 0 !important;
        position: relative;
        visibility: visible;
        min-width: 20px;
        z-index: 1002;
        line-height:var(--toggler-height);
        width: var(--toggler-width);
        height: var(--toggler-height);
        text-align: center;
       }

      dot-element[eid="dotmenu"] nav .wrapper .toggler SPAN {
        display: inline-block;
        margin: auto;
        position: absolute;
        width: 100%;
        text-align: center;
      }

      dot-element[eid="dotmenu"] nav .wrapper .toggler span::before,
      dot-element[eid="dotmenu"] nav .wrapper .toggler span::after {
        background-color: var(--nav-toggler-color);
        content: "";
        display: block;
        height: 2px;
        right: 0;
        position: absolute;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
        width: 100%;
      }
      
      dot-element[eid="dotmenu"] nav .wrapper .toggler::before {
        width: 100%;
        position: absolute;
        color: var(--nav-toggler-color);
        content: "menu";
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        transform: translateX(-50%);
        top: -1px;
        transition: .25s ease-in-out;
      }

      dot-element[eid="dotmenu"] nav .wrapper .toggler span::before {
        top: calc(0.07 * var(--toggler-height));
        opacity: 1;
        transform: translateX(-50%);
      }

      dot-element[eid="dotmenu"] nav .wrapper .toggler span::after {
        opacity: 1;
        transform: translateX(-50%);
        top: calc( (0.93 * var(--toggler-height)) - 4px );
      }

      dot-element[eid="dotmenu"] nav .wrapper .toggler.active::before {
        opacity: 0;
        font-size: 0px;
      }

      dot-element[eid="dotmenu"] nav .wrapper .toggler.active span::before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: translateX(calc((-0.5 * var(--toggler-width)))) translateY(calc((0.5 * var(--toggler-height)) - 5px )) rotate(45deg);
        background-color: var(--nav-toggler-clicked-color);
        height: 4px;
      }
	  
      dot-element[eid="dotmenu"] nav .wrapper .toggler.active span::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        height: 4px;
        background-color: var(--nav-toggler-clicked-color);
        transform: translateX(calc((-0.5 * var(--toggler-width)))) translateY(calc((-0.5 * var(--toggler-height)) + 5px )) rotate(-45deg);
      }

/* END <NAV> ELEMENT - Menu */

@media (min-width: 754px) and (max-width: 991.98px) {

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV SPAN {
        width: unset;
    }

    dot-element[eid="dotmenu"] nav > .wrapper > UL > LI.mobile-info > DIV SPAN:last-of-type {
        border-top: 0px;
        width: unset;
        margin-top: 0px;
        padding-top: 0px;
        padding-bottom: 25px;
    }
}