﻿/* ------------------------------ */
/* ------------------------------ */
/* DEFAULT STYLES FOR HEADER BAR */
/* ------------------------------ */

#header {
    position:fixed;
    z-index:199;
    width:100%;
    height:65px;
    background-color:#FFFFFF;
    border-bottom:1px #eeeeee solid;
}

    #header .container_row {
        max-width:1400px;
        margin:0em auto;
        position:relative;
    }

        .logo_environment::after {
            clear:both;
            display:none;
            content:'';
        }

    /* logo */
    #logo {
        float:left;
        width:20%;
    }

        #logo a {
            display:inline-block;
        }

        #logo img {
            padding:12px 0px 0px 0px;
            height:40px;

            -webkit-box-sizing:initial;
            -moz-box-sizing:initial;
            box-sizing:initial;
        }

            #logo img:hover {
                opacity:.7;
            }

            #logo a:after {
                content:'';
                color:#cb2d3e;
                font-size:.8em;
                padding-left:4px;
                font-weight:600;
            }

        /* RD */
        #responsive_button {
            display:none;
        }

        /* menu */
        #menu {
            float:right;
            width:80%;
            position:relative;
            display:block;
            text-align:right;
        }

            #menu_list {
                padding:10px 0px 0px 0px;
            }
            
	            #menu_list ul {
                    list-style-type:none;
                    margin:0px;
                    padding:0px;
	            }

	                #menu_list li {
                        display:inline-block;
                        margin:0px 0px 0px 30px;
                        position:relative;
                        vertical-align:middle
	                }
                
                        #menu_list li.icon_acccessibility {
                            padding-top:6px;
                            margin-left:14px;
                        }

                        #menu_list li.icon_search {
                            padding-top:8px;
                            margin-left:10px;
                        }

	                    #menu_list a,
                        #menu_list h2 {
                            font-family:"open-sans",sans-serif;
                            display:inline-block;
                            margin:0px;
                            padding:0px;
                            color:#333333;
                            text-transform:uppercase;
                            font-weight:600;
                            font-size:.8rem;
                            transition:all .35s ease 0s;
	                    }

                            #menu_list a.desktop_menu_main { display:inline-block; }
                            #menu_list h2.rd_menu_main { display:none; }

                        #menu_list .is_sub_menu a {
                            font-weight:400;
                            text-transform:none;
                        }
	                	            
	                        #menu_list a:hover,
                            #menu_list a:focus,
                            #menu_list h2:hover,
                            #menu_list h2:focus,
                            #menu_list .material-icons:hover,
                            #menu_list .material-icons:focus {
                                color:#0888ca;
                                text-decoration:underline;
	                        }
            
                        #menu_list > ul li ul { 
                            display:none;
                            position:absolute;
                            top:100%;
                            left:-30px;
                            right:0;
                            padding:30px;
                            margin:0px;
                            width:200px;
                            background-color:#FFFFFF;
                            z-index:999;
                        }

                            #menu_list ul.sub_menu_corporate_responsibility { width:160px; }
                            #menu_list ul.sub_menu_about_us { width:120px; }

                            #menu_list > ul li ul li {
                                display:block;
                                text-align:left;
                                margin:0px;
                                padding:0px 0px 10px 0px;
                            }

                                #menu_list > ul li ul li:first-child {
                                    padding-top:0px;
                                }

                                #menu_list > ul li ul li:last-child {
                                    padding-bottom:0px;
                                }


	                        #menu_list li.menu_selected > a {
                                font-weight:bold;
                                text-decoration:underline;
	                        }

                            /* LE.200627 - We added this to only allow hover/focus on LI for destkop, since for RD we will do onclick */
                            @media (min-width:1024px) {
                                #menu_list > ul li:hover ul,
                                #menu_list > ul li:focus-within > ul,
                                #menu_list li.has_submenu a:focus + ul { display: block;}
                            }

.rd_menu_collapsed {
    background-image:url(https://eu2allwebext.blob.core.windows.net/kimcorealty/www/webimages/common/icons/i_background_menu_arrow_gray_right.png);
    background-repeat:no-repeat;
    background-position:right center;

}

.rd_menu_expanded {
    background-image:url(https://eu2allwebext.blob.core.windows.net/kimcorealty/www/webimages/common/icons/i_background_menu_arrow_gray_down.png);
    background-repeat:no-repeat;
    background-position:right center;
}

/* ------------------------------ */
/* ------------------------------ */
/* RESPONSIVE STYLES FOR HEADER BAR */
/* ------------------------------ */

@media (max-width:1500px) {
    #logo { width:30%; }
    #menu { width:70%; }
    #menu_list li { margin:0px 0px 0px 24px; }
}

@media (max-width:1400px) {
    #logo { width:25%; }
    #menu { width:75%; }
    #menu_list li { margin:0px 0px 0px 20px; }
}

@media (max-width:1200px) {
    #logo { width:15%; }
    #menu { width:85%; }

    #header { height:50px; }
    #logo img { height:26px; }
    #menu_list { padding-top:8px; }
    #menu_list a { font-size:.8rem; }
}

@media (max-width:1023px) {
    #header .container_row { width:100%; }

    #logo {float:none; width:70%; padding-left:14px;}

    #responsive_button { display:block; position:absolute; top:10px; right:14px; z-index:9999; cursor:pointer; }
        #responsive_button:hover, 
        #responsive_button:focus { color:##0888ca; }
        #responsive_button .material-icons { color:#FFFFFF; font-size:30px; }
        .lock_body { position: fixed; }

    #menu { display:none; float:none; position:fixed; top:50px; right:0px; bottom:0px; left:0px; z-index:999; background-color:#111111;}
        #menu_list { background-color:#232323; width:94%; position:fixed; top:50px; right:0; bottom:0px; text-align:left; overflow:scroll;}
        
        #menu_list h2,
        #menu_list a { color:#FFFFFF; font-weight:200; font-size:1.2rem; line-height:inherit;}

        #menu_list a.desktop_menu_main { display:none; }
        #menu_list h2.rd_menu_main { display:block; cursor:pointer; }

	    #menu_list a:hover,
        #menu_list a:focus,
        #menu_list h2:hover,
        #menu_list h2:focus,
        #menu_list .material-icons:hover,
        #menu_list .material-icons:focus { color:#999999; text-decoration:underline; }

        #menu_list > ul { display:block; padding:100px 40px 20px 40px;  }
        #menu_list > ul > li { margin-bottom:20px; border-bottom:1px #808080 solid;  }
            
        #menu_list li { display:block; padding:0px 0px 20px 0px; margin:0px;}
        #menu_list li.icon_acccessibility {position:fixed; top:60px; right:14px; border:none !important; }
        #menu_list li.icon_search {position:fixed; top:60px; right:56px; border:none !important; }
            
        #menu_list .material-icons { font-size:2.4rem;}

        #menu_list > ul li ul { background-color:transparent; padding:20px 0px; position:relative; width:100%; top:inherit; left:inherit }
        #menu_list > ul li ul li { padding:0px 0px 20px 20px;}
            
        #menu_list ul.sub_menu_corporate_responsibility,
        #menu_list ul.sub_menu_about_us { width:100%; }
}