/*Style sheet of the Responsive jQuery Fixed Drop Down Menu by Fabian Lins*/

/*These are the variables. Keep in mind that variables can cause issues if you need to support older browers.*/

/*For older browsers, you need to replace the variables using [CTRL+F].*/

:root {

    /*Font*/
    /*The font is declared in the .menu selector. If your font is declared in a parent div feel free to delete the attribute and variable.*/
    --menu-font: promptregular;

    /*Colors*/
    /*The property of the colors is declared as background, NOT as background-color!*/
    /*This means you can use hex codes (like in the example) but you can also make use of rgb(a) and gradients.*/
    /*menu colors*/
    --menu_background_color: #f3f4f9;
    --menu_font_color: #434345;
    /*TIP! You can swap the colors above, so the mouseover will swap the background and font colors*/
    /*row_01-content (drop down content) colors*/
    /*TIP! You can use a slightly darker color than --menu_font_color.*/
    --row_01-content_background_color: #f2f2f2;
    /*TIP! You can use the same colors as the --menu_background_color.*/
    --row_01-content_link_font_color: var(--menu_background_color);


    /*burger_menu_icon color*/
    /*TIP! You can use the same color as the --menu_font_color, so the burger menu icon has the same color as the menu font.*/
    --burger_menu_icon_background_color: var(--menu_font_color);

    /*Burger Menu link colors color*/
    /*These colors are used when you activate the burger menu.*/
    /*TIP: Use the same color as the --row_01-content_mouseover_color and --row_01-content_mouseover_font_color.*/
    --burger_menu_row_01_background_color: var(--row_01-content_mouseover_color);
    --burger_menu_row_01_font_color: var(--row_01-content_mouseover_font_color);



    /*Sizes*/
    /*Padding between the parent div of the menu and the first element*/
    --menu-padding-right: 100px;

    /*row_01 sizes*/
    --row_01_padding: 16px;
    --row_01_font_size: 17px;

    /*row_01-content (drop down content) sizes*/
    --row_01-content_width: 160px;
    --row_01-content_link_padding: 12px;
    --row_01-content_rounded_corners: 5px;

    /*burger_menu_icon*/
    /*The burger_menu_position can either be left or right*/
    --burger_menu_position: left;
    --burger_menu_icon_padding: 10px;
    --burger_menu_icon_width: 35px;
    --burger_menu_icon_height: 5px;
    --burger_menu_icon_borders: 2px;
}

.menu {
    background: #000000;
    color: #fff !important;
    width: 100%;
    background-repeat: no-repeat !important;
    font-family: var(--menu-font);
    position: absolute;
}

/* The first row <div> - needed to position the dropdown content */

.row_01 {
    position: relative;
    display: inline-block;
    padding: var(--row_01_padding);
    font-size: var(--row_01_font_size);
    cursor: pointer;
}

.menu_content {
    margin-left: var(--menu-padding-right);
}

.no_menu_content {
    margin-left: 0px !important;
}

.row_01 a {
    font-size: var(--row_01_font_size);
    text-decoration: none;
    color: var(--menu_font_color);
    display: inline-block;
}

/* Dropdown content (hidden by default) */

.row_01-content {
    position: absolute;
    z-index: 1;
    min-width: var(--row_01-content_width);
    background: var(--row_01-content_background_color);
    cursor: pointer;
    border-radius: 0px 0px var(--row_01-content_rounded_corners) var(--row_01-content_rounded_corners);
    overflow-y: auto !important;
}

.row_01-content_no_boders {
    border-radius: 0px !important;
}

/* Links inside the dropdown */

.row_01-content a {
    color: var(--row_01-content_link_font_color);
    padding: var(--row_01-content_link_padding);
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */

/* Hides the dropdown points */

.hide {
    display: none !important;
}

/* Change the background color of the first menu point (first row) when the dropdown content is shown */

/*
.row_01-mouseover {
    background-color: var(--row_01-mouseover_background_color) !important;
    color: var(--row_01-mouseover_font_color) !important;
}*/

.row_01:hover {
    background: #e06909;
}

.row_01 a:hover {
    color: #fff;
}

/* This class will fix the menu */

.fixed_menu {
    position: fixed !important;
    top: 0 !important;

}

.scrollbar {
    top: 0 !important;
    bottom: 0 !important;
    position: fixed !important;
    overflow-y: auto !important;
}


#burger_menu_icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    text-align: right;
    padding: var(--burger_menu_icon_padding);
}

#burger_menu_icon:hover,
#burger_menu_icon:focus {
    opacity: 0.7;
}


#burger_menu_icon_parent {
    text-align: var(--burger_menu_position);
}

.burger_menu_icon_row {
    background: var(--burger_menu_icon_background_color);
    width: var(--burger_menu_icon_width);
    height: var(--burger_menu_icon_height);
    border-radius: var(--burger_menu_icon_borders);
}

.transparent {
    background-color: transparent !important;
}

.burger_menu_active {
    display: block !important;
    position: sticky !important;
    text-align: center !important;
    z-index: 1000 !important;
}

.burger_menu_row_01 {
    background: var(--burger_menu_row_01_background_color) !important;
    color: var(--burger_menu_row_01_font_color) !important;
}

.burger_menu_background {
    background: var(--burger_menu_row_01_background_color) !important;
    color: var(--burger_menu_row_01_font_color) !important;
}

.burger_menu_active_color {
    background: var(--burger_menu_active_background_color) !important;
}

.burger_menu_icon_active_color {
    background: #333 !important;
}