{# --> Hack to stop transitions when resizing the browser to reveal the desktop menu #}
#responsive-menu-pro-container.responsive-menu-pro-no-transition {
    transition: none;
}

{# --> Hide these items from the Responsive Menu #}
#responsive-menu-pro .responsive-menu-pro-desktop-menu-image,
#responsive-menu-pro .responsive-menu-pro-desktop-menu-text {
    display: none;
}

@media screen and (min-width: {{ options.breakpoint + 1 }}px) {

    {% if options.desktop_menu_to_hide %}
        {{ options.desktop_menu_to_hide }} {
            display: none !important;
        }
    {% endif %}

    {% set desktop_menu_options = options.desktop_menu_options|json_decode %}

    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-1,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-2,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-3,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-4,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-5,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-6,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-7,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-8,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-9,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-10,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-11,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-12 {
        {# float: left; #}
        min-height: 1px;
    }

    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-12 {
        width: 100%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-11 {
        width: 91.66666667%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-10 {
        width: 83.33333333%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-9 {
        width: 75%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-8 {
        width: 66.66666667%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-7 {
        width: 58.33333333%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-6 {
        width: 50%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-5 {
        width: 41.66666667%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-4 {
        width: 33.33333333%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-3 {
        width: 25%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-2 {
        width: 16.66666667%;
    }
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-col-1 {
        width: 8.33333333%;
    }

    #responsive-menu-pro .responsive-menu-pro-desktop-menu-image {
        max-width: 100%;
    }

    {# --> Hide the Responsive Menu items (title, additional HTML etc.) #}
    #responsive-menu-pro-container div {
        display: none;
    }

    #responsive-menu-pro .responsive-menu-pro-desktop-menu-image,
    #responsive-menu-pro .responsive-menu-pro-desktop-menu-text,
    #responsive-menu-pro-container #responsive-menu-pro-wrapper,
    #responsive-menu-pro-container #responsive-menu-pro,
    #responsive-menu-pro-container {
        display: block;
    }

    #responsive-menu-pro {
        list-style-type: none;
        position: relative;
        margin: 0;
    }

    #responsive-menu-pro li .responsive-menu-pro-desktop-menu-text {
        white-space: normal;
    }

    #responsive-menu-pro li {
        box-sizing: border-box;
        display: inline-block;
        white-space: nowrap;
        margin: 0;
        vertical-align: top;
        text-align: left;
    }

    #responsive-menu-pro li a {
        height: {{ options.single_menu_height }}{{ options.single_menu_height_unit }};
        line-height: {{ options.single_menu_line_height }}{{ options.single_menu_line_height_unit }};
        color: {{ options.single_menu_item_link_colour }};
        background: {{ options.single_menu_item_background_colour }};
        text-decoration: none;
        transition: color {{' '}} {{ options.transition_speed }}s, background {{' '}} {{ options.transition_speed }}s;
        display: block;
        padding: 0 15px;
        font-size: {{ options.single_menu_font_size }}{{ options.single_menu_font_size_unit }};
        {% if options.single_menu_font %}
            font-family: '{{ options.single_menu_font }}';
        {% endif %}
    }

    #responsive-menu-pro li a .glyphicon,
    #responsive-menu-pro li a .fab,
    #responsive-menu-pro li a .fas {
        margin-right: 5px;
    }

    #responsive-menu-pro li a:hover,
    #responsive-menu-pro li a:focus {
        color: {{ options.single_menu_item_link_colour_hover }};
        background: {{ options.single_menu_item_background_colour_hover }};
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu {
        display: none;
        position: absolute;
        margin: 0;
        top: {{ options.single_menu_height }}{{ options.single_menu_height_unit }};
        padding-left: 0;
        margin-left: 0;
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu:not(.responsive-menu-pro-desktop-menu-container) li {
        display: block;
        width: 100%;
        position: relative;
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu li a {
        background: {{ options.single_menu_item_submenu_background_colour }};
        color: {{ options.single_menu_item_submenu_link_colour }};
        font-size: {{ options.single_menu_submenu_font_size }}{{ options.single_menu_submenu_font_size_unit }};
        {% if options.single_menu_submenu_height_unit != 'auto' and options.single_menu_submenu_height %}
            height: {{ options.single_menu_submenu_height }}{{ options.single_menu_submenu_height_unit }};
        {% else %}
            height: auto;
        {% endif %}
        line-height: {{ options.single_menu_submenu_line_height }}{{ options.single_menu_submenu_line_height_unit }};
        {% if options.single_menu_submenu_font %}
            font-family: '{{ options.single_menu_submenu_font }}';
        {% endif %}
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu li a:hover,
    #responsive-menu-pro li .responsive-menu-pro-submenu li a:focus {
        color: {{ options.single_menu_item_submenu_link_colour_hover }};
        background: {{ options.single_menu_item_submenu_background_colour_hover }};
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu li a .responsive-menu-pro-desktop-menu-text {
        line-height: {{ options.single_menu_submenu_font_size }}{{ options.single_menu_submenu_font_size_unit }};
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu li .responsive-menu-pro-submenu {
        top: 0;
        left: 100%;
    }

    #responsive-menu-pro li .responsive-menu-pro-submenu.responsive-menu-pro-desktop-menu-container {
        left: 0;
        width: 100%;
        right: 0;
    }

    {# Desktop menu animation effects. #}
    {% if options.desktop_submenu_open_animation == 'slideDown' %}
        @keyframes slideDown {
            0%   { transform: translateY(-20px); }
            25%  { transform: translateY(-18px); }
            50%  { transform: translateY(-15px); }
            75%  { transform: translateY(-12px); }
            100% { transform: translateY(0); }
        }
    {% endif %}

    {% if options.desktop_submenu_open_animation == 'slideUp' %}
        @keyframes slideUp {
            0%   { transform: translateY(10px); }
            25%  { transform: translateY(8px); }
            50%  { transform: translateY(7px); }
            75%  { transform: translateY(5px); }
            100% { transform: translateY(0); }
        }
    {% endif %}

    {% if options.desktop_submenu_open_animation == 'fade' %}
        @keyframes fade {
            0%   { opacity : 0;  }
            25%  { opacity : 0.2; }
            50%  { opacity : 0.3; }
            75%  { opacity : 0.5; }
            100% { opacity : 1; }
        }
    {% endif %}

    {% if options.desktop_submenu_open_animation == 'fadeUp' %}
        @keyframes fadeUp {
            0%   { transform: translateY(10px); opacity : 0 ;  }
            25%  { transform: translateY(8px);  opacity : 0.25 ; }
            50%  { transform: translateY(7px); opacity : 0.5 ; }
            75%  { transform: translateY(5px); opacity : 0.75 ; }
            100% {  transform: translateY(0);  opacity : 1 ; }
        }
    {% endif %}

    {# Open submenu on hover. #}
    {% if options.desktop_submenu_open_on_click != 'on'%}
        #responsive-menu-pro li:hover > .responsive-menu-pro-submenu {
            display: block;
            animation: {{ options.desktop_submenu_open_animation ~ ' ' ~ options.desktop_submenu_open_animation_speed }};
            {% if options.desktop_submenu_open_animation == 'slideDown' %}
                z-index: -1;
            {% endif %}
        }
    {% endif %}

    #responsive-menu-pro .responsive-menu-pro-submenu-animate-on {
        animation: {{ options.desktop_submenu_open_animation ~ ' ' ~ options.desktop_submenu_open_animation_speed }};
        {% if options.desktop_submenu_open_animation == 'slideDown' %}
            z-index: -1;
        {% endif %}
    }

    {# Submenu indicator for desktop menu. #}
    #responsive-menu-pro .responsive-menu-pro-item-has-children a:after {
        content: "▾";
        font-size: 20px;
        margin: 0 0 0 6px;
        vertical-align: top;
        transform: rotate(0);
    }

    #responsive-menu-pro .responsive-menu-pro-item-has-children ul:not(.responsive-menu-pro-desktop-menu-container) a:after {
        content: '▸';
    }

    #responsive-menu-pro .responsive-menu-pro-item-has-children ul.responsive-menu-pro-desktop-menu-container li a:after,
    #responsive-menu-pro .responsive-menu-pro-item-has-children ul:not(.responsive-menu-pro-desktop-menu-container) li:not(.responsive-menu-pro-item-has-children) a:after {
        content: '';
    }

    {# --> Allow fifth level depth menu items to auto show for Mega Menu #}
    #responsive-menu-pro li .responsive-menu-pro-submenu.responsive-menu-pro-desktop-menu-container ul.responsive-menu-pro-submenu-depth-2,
    #responsive-menu-pro li .responsive-menu-pro-submenu.responsive-menu-pro-desktop-menu-container ul.responsive-menu-pro-submenu-depth-3,
    #responsive-menu-pro li .responsive-menu-pro-submenu.responsive-menu-pro-desktop-menu-container ul.responsive-menu-pro-submenu-depth-4 {
        display: block;
        position: relative;
        left: auto;
        top: auto;
    }

    #responsive-menu-pro-container {
        position: {{ options.desktop_menu_positioning }};
        top: 0;
        {% if options.desktop_menu_width %}
            width: {{ options.desktop_menu_width }}{{ options.desktop_menu_width_unit }};
        {% endif %}
        {% if options.desktop_menu_side %}
            {% if options.desktop_menu_side == 'centre'  %}
                {% if options.desktop_menu_positioning == 'relative' %}
                    text-align: center;
                {% else %}
                    left: 50%;
                    transform: translate(-50%, 0);
                    text-align: center;
                {% endif %}
            {% else %}
                {{ options.desktop_menu_side }}: 0;
            {% endif %}
        {% endif %}
    }

    {% for key, option in desktop_menu_options %}
        {% if option['parent_background_colour'] or option['parent_background_image'] %}
            #responsive-menu-pro-container #responsive-menu-pro-item-{{ key }} .responsive-menu-pro-desktop-menu-container {
                {% if option['parent_background_colour'] %}
                    background-color: {{ option['parent_background_colour'] }};
                {% endif %}
                {% if option['parent_background_image'] %}
                    background-image: url('{{ option['parent_background_image'] }}');
                    background-size: cover;
                {% endif %}
            }
        {% endif %}

        #responsive-menu-pro-container #responsive-menu-pro-item-{{ key }} .responsive-menu-pro-submenu-depth-1 {
            {% if option['submenu_panel_max_width'] %}
                max-width:{{ option['submenu_panel_max_width'] }}{{ option['submenu_panel_max_width_unit'] }};
            {% endif %}
        }

        {# Mega manu items color. #}
        #responsive-menu-pro li#responsive-menu-pro-item-{{ key }} li a {
            {% if option['mega_menu_items_background_colour'] %}
                background-color: {{ option['mega_menu_items_background_colour'] }};
            {% endif %}
            {% if option['mega_menu_items_text_colour'] %}
                color: {{ option['mega_menu_items_text_colour'] }};
            {% endif %}
        }

         {% if option['mega_menu_items_background_hover_colour'] or option['mega_menu_items_text_hover_colour'] %}
            #responsive-menu-pro li#responsive-menu-pro-item-{{ key }} li a:hover {
                {% if option['mega_menu_items_background_hover_colour'] %}
                    background-color: {{ option['mega_menu_items_background_hover_colour'] }};
                {% endif %}
                {% if option['mega_menu_items_text_hover_colour'] %}
                    color: {{ option['mega_menu_items_text_hover_colour'] }};
                {% endif %}
            }
        {% endif %}

        {% if option['mega_menu_items_text_colour'] %}
        #responsive-menu-pro li#responsive-menu-pro-item-{{ key }} {
                color: {{ option['mega_menu_items_text_colour'] }};
        }
        {% endif %}

    {% endfor %}

    #responsive-menu-pro .responsive-menu-pro-desktop-menu-text {
        padding: 0 15px;
    }

     {# Mega submenu widget section paddings. #}
     {% for key, option in desktop_menu_options %}
        #responsive-menu-pro-container .responsive-menu-pro-desktop-menu-container #responsive-menu-pro-item-{{ key }} {
            {% if option['top_padding'] %}
                padding-top: {{ option['top_padding'] }};
            {% endif %}
            {% if option['right_padding'] %}
                padding-right: {{ option['right_padding'] }};
            {% endif %}
              {% if option['bottom_padding'] %}
                padding-bottom: {{ option['bottom_padding'] }};
            {% endif %}
            {% if option['left_padding'] %}
                padding-left: {{ option['left_padding'] }};
            {% endif %}
        }
    {% endfor %}

    {% if options.desktop_menu_hide_and_show %}
    .desktop-menu-scroll-up {
        {% if options.desktop_menu_side == 'centre'  %}
            transform: translate(-50%, -{{ options.single_menu_height }}{{ options.single_menu_height_unit }} ) !important;
        {% else %}
            transform: translate(0, -{{ options.single_menu_height }}{{ options.single_menu_height_unit }} ) !important;
        {% endif %}

    }
    #responsive-menu-pro-container {
       transition: all 0.3s !important;
    }
    {% endif %}

}