/* ===== Styles to overwrite foundation framework's Top Bar ==================== */

/* ===== Top Bar menu - 1st Level ==================== */
.contain-to-grid{
    background: none;
}
.menu-wrapper{
    background: #e61e25;
}
.top-bar.expanded .title-area{
    background: none;
}
li.top-nav.responsive-hide {
    display:none;
}
.top-bar,
.top-bar-section ul,
.top-bar-section ul li > a,
.top-bar-section li a:not(.button),
.top-bar-section li a:hover:not(.button)
{
    background: #e61e25;
}
.top-bar-section ul li > a {
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
    font-style: normal;
    font-variant: normal;
    font-size: 18px;
}
// .top-bar-section .has-dropdown > a{
//     padding-right: 30px !important;
// }
.top-bar-section .has-dropdown > a::after{
    top: 30px;
}
.top-bar-section li a:not(.button){
    line-height: 60px;
    padding: 0px 40px;
}
.top-bar-section ul li:last-child > a {
}
.top-bar-section ul li{
}
.top-bar-section ul li:last-child{
}
.top-bar-section > ul > li.hover > a,
.top-bar-section > ul > li:hover > a,
.top-bar-section > ul > li > a:active,
.top-bar-section > ul > li > a:hover,
.top-bar-section > ul > li.selected > a {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    color: #fff;
}
.top-bar-section .dropdown li a:hover,
.top-bar-section .dropdown li:hover a {
    background: #f5f4f0;
    color: #000;
}
.top-bar-section .dropdown li a {
    color: #000;
}
ul.dropdown li a{
    color: #000;
}
.top-bar-section .dropdown {
    background: #e6e6e6;
    color: #000;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1);
}

/* ===== Top Bar menu - 2nd Level ==================== */
.top-bar-section ul li ul.dropdown li{
    border: none;
}

.top-bar-section ul li ul.dropdown li a{
    border: none;
    background-color: #f5f5f5;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
    font-size: 12px;
    line-height: 40px;
}
.top-bar-section .selected .dropdown li a {
    color: #000 !important;
}
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click > a:after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #5f5f5f;
}
/* ===== Top Bar menu - 3rd Level ==================== */
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li a{
    background-color: #f3f2f4;
}
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li a:hover{
    background-color: #f5f4f0;
}
/* ===== Top Bar menu - 4th Level ==================== */
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li ul li a{
    background-color: #f5f4f0;
}
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li ul li a:hover{
    background-color: #f2f2ee;
}



@media only screen and (max-width: 58.75em) {
    /* ===== Header ==================== */
    header{
        background-color: #000;
        position: relative;
    }
    .top-bar,
    .top-bar-section ul,
    .top-bar-section ul li > a,
    .top-bar-section li a:not(.button),
    .top-bar-section li a:hover:not(.button){
        background: #f5f4f0;
        color: #000 !important;
    }

    li.top-nav.responsive-hide {
        display: initial;
    }
    .search-bar{
        display: none;
    }
    /* ===== Utility nav ==================== */
    .top-bar {
        background-color: #fff;
        height: 65px;
        line-height: 65px;
    }
    .top-bar .name{
        height: 65px;
    }

    .top-bar-section ul{
    }
    .top-bar .toggle-topbar.menu-icon {

    }
    .top-bar .toggle-topbar.menu-icon a span {
        -webkit-box-shadow: 0 10px 0 1px #ED1C24, 0 16px 0 1px #ED1C24, 0 22px 0 1px #ED1C24;
        box-shadow: 0 10px 0 1px #ED1C24, 0 16px 0 1px #ED1C24, 0 22px 0 1px #ED1C24;
    }
    .top-bar.expanded {
        background-color: #fff;

    }
    .title-area{
        display:block;
    }
    .menu-wrapper{
        background: none;
        border-top: none;
    }
    h1#logo-replace {
        height: 60px;
        background: url(images//site-logo/TCL-Logo-Web@4x.png) 10px 0 no-repeat;
        background-size: contain;
  }

/* ===== Top Bar menu - 1st Level ==================== */
.top-bar-section {
}
.top-bar-section ul li {
    border-left: none;
}
.top-bar-section .selected .dropdown li a {
    color: #000 !important;
    background-color: #fff !important;
}
.top-bar-section ul li > a {
    color: #000;
    border-left: none;
    border-bottom: 1px solid #eee;
}
.top-bar-section .has-dropdown > a:after {
}
.top-bar-section .dropdown {
    background: #fff;
    color: #000;
}
.top-bar-section .dropdown li.title h5 a{
    background: #fff;
    color: #000;
}
/* ===== Top Bar menu - 2nd Level ==================== */
.top-bar-section ul li ul.dropdown li a{
    color: #000;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    line-height: 50px;
}

.top-bar-section ul li ul.dropdown li a:hover{
    color: #000;
    background-color: #eee;
}
.top-bar-section .dropdown li.selected a {
    background: #fff !important;
    color: #000;
}
/* ===== Top Bar menu - 3rd Level ==================== */
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li a{
    color: #000;
    background-color: #fff;
}
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li a:hover{
    color: #000;
    background-color: #eee;
}
/* ===== Top Bar menu - 4th Level ==================== */
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li ul li a{
    color: #000;
    background-color: #fff;
}
.top-bar-section ul li ul.dropdown li.has-dropdown.not-click ul li ul li a:hover{
    color: #000;
    background-color: #eee;
}