﻿nav.sable-menu input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

nav.sable-menu label { 
  display:none;
}

/* custom-dropdown */
nav.sable-menu {
    position:relative;
    float: right;
    width: 100%;
}

nav.sable-menu ul {
    padding:0;
    margin: 0 auto;  
    list-style:none;
}

nav.sable-menu ul > li > a {
    color:white;
    display:block;
    float:left;
    padding:20px;
}


/* small screens ===============================================*/
@media screen and (max-width: 720px) {
  nav.sable-menu ul {
    display: none;
    height: 100%;
  }

  .middle_bar {
    padding-top: 8px!important;
    }

  nav.sable-menu label {
    position: relative;
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0;
    margin: 0;
    background: #777;
    border-bottom: #888 2px solid;
  }

  nav.sable-menu label .fa-bars {
    position: absolute;
    left: 10px;
    top: 0;
    content: "\f0c9";
    font-size: 20px;
    line-height: 40px;
    color: white;
  }

  nav.sable-menu label:after {
    position: absolute;
    left: 40px;
    top: 0;
    content: "MENU";
    font-size: 16px;
    font-weight:800;
    line-height: 40px;
    color: white;
  }
  nav.sable-menu input[type=checkbox]:checked ~ label:after, 
  nav.sable-menu input[type=checkbox]:checked ~ label .fa-bars {
    color:black
  }
  nav.sable-menu input[type=checkbox]:checked ~ ul {
    display: block;
  }
  nav.sable-menu input[type=checkbox]:checked ~ ul > li {
    width: 100%;
    margin-left: 0!important;
    text-align: left;
  }
  nav.sable-menu input[type=checkbox]:checked ~ ul > li:after {
    position: absolute;
    right: 10px;
    top: 10px;
    content: "\203A";
    font: bold 1.4em sans-serif;
  }

  nav.new-topnav input[type=checkbox]:checked ~ .k-menu .k-item>.k-link {
    color:white;
    font-size:16px !important;
    background: #555!important;
    font-weight:800;
    line-height: 40px;

  }

  nav.new-topnav input[type=checkbox]:checked ~ .sfNavList .sfSel {
    border-bottom: #888 2px solid!important;
    color:black!important;
  }

  .SableLogo {
      margin-bottom:0
  }
  
  .mainMenu {
    
    display: flex;
    float: left;
    width: 100%;
    max-width: 100%;
    clear: both;
  }

  .new-topnav {
      padding-top:8px!important
  }

  .topBar {
      position:relative;
      height:80px;
  }

  .topNumber {
    position: absolute!important;
    top: 46px!important;
    right: 0!important;
    font-size: 18px!important;
      display: block;
        width: 100%;
  }

    
}

@media screen and (max-width:520px) {
    .topNumber {
        display:none
    }

    .topLinksBar {
        position: absolute!important;
        right: 0;
        top: 40px;
    }

    .topLinksBar a {
        padding: 8px 6px!important;
    }



    

} 

@media screen and (max-width:350px) {
    .search_sec input.textbox {
        width:120px !important
    }
}
.new-topnav {
    padding: 10px 0 0;
}

.new-topnav .k-menu .k-item, .new-topnav .k-widget.k-menu-horizontal > .k-item {
    border-width: 0;
    margin-left: 1px;
}

.new-topnav .k-menu .k-item>.k-link {
    font-size: 14px;
    color: #555;
    padding: 0 14px;
    line-height: 36px;
    background-color: #e5e5e5;
    margin:0 1px 0 0;
    border-bottom: #888 2px solid;
    width: 100%;
}

.new-topnav .k-menu .k-popup .k-last>.k-link {
    border-bottom:none;
}

.new-topnav .k-menu .k-item:last-child>.k-link {
    margin-right:0;
}

.new-topnav .k-menu .k-item:first-child>.k-link {
    margin-left:0;
}

.new-topnav .k-menu .k-item>.k-link:hover {
    /*color:#887243;*/ 
    background-color: #ccc;
}

.new-topnav .k-menu .k-item .k-popup .k-item .k-link:hover {
    /*color:#887243;*/ 
    background-color: #ccc;
}

.new-topnav .k-header {
    background:none;
    background-color:none;
}

.new-topnav .k-state-hover, .new-topnav .k-state-hover:hover {
    background:none;
    background-image:none;
}

.new-topnav .sfNavList .sfSel {
    font-weight:normal;
    color:#887243;
    background-color:#e5e5e5;
    border-bottom: #333 2px solid!important;
}

.k-menu .k-animation-container .k-group {
    border:none;
    background: none;
    /*box-shadow: none;*/
}


.k-menu .k-state-hover > .k-state-active { 
    /*background-color: transparent;*/ 
    /*color:#887243;*/ 
}

.new-topnav .k-icon {
    display: none;
}

.new-topnav .k-menu .k-group .k-item {
    overflow:auto;
}

.new-topnav .k-popup {
    background: #887243;
    border: 0;
}

.new-topnav .k-menu .k-animation-container, 
.new-topnav .k-popup .k-animation-container {
    margin-top:0;
}

.new-topnav .sfNavList > li > div.k-animation-container {
background-image: none;
}

.new-topnav .sfNavHorizontalDropDownWrp .k-popup {
    background-color: #887243;
}

.new-topnav .k-state-focused {
    /*background: yellow;*/
}

.new-topnav .k-menu .k-group .k-item>.k-link {
    padding:0 14px;
}


/*- === OTHER MEDIA QUERIES === -*/

@media screen and (max-width: 720px) {

    #header {
        padding:5px;
    }

    .lowerleft {
        width:100%;
    }

    .homePageSlider {
        display:none;
    }

    .new-topnav .k-menu .k-group .k-item {
        display:none
    }
}

@media screen and (max-width:600px) {
    .banner_slider .belt .panel .content {
        top:14px
    }

    .live_bar {
        width:75%
    }

    .livebarp {
        width:25%
    }
} 

@media screen and (max-width:520px) {
    #left_container, #sidebar {
        display: none;
    }

    .middle_bar {
        padding-top:8px!important
    }
}