@media(max-width: 767px) {
    div.ruby-wrapper .hidden-xs {
        visibility:hidden;
        display: none
    }

    div.ruby-wrapper {
        position: absolute;
        width: 100%;
        top: 152px;
        background: #282118;
        z-index: 800;
    }

    .ruby-wrapper .visible-xs {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0
    }

    div.ruby-wrapper > ul {
        position: absolute;
        top: 50px;
        width: 100%
    }

    ul.ruby-menu > li,ul.ruby-menu > li.ruby-menu-right {
        float: none;
        border-bottom: 1px solid #545353;
    }

    ul.ruby-menu > li > a {
        padding: 0 65px;
        background: #333333;
    }

    ul.ruby-menu > li > a:only-child {
        padding: 0 65px
    }

    ul.ruby-menu > li > a:hover,ul.ruby-menu > li:hover > a,ul.ruby-menu > li.ruby-active-menu-item > a:hover {
        background: #127e61
    }

    ul.ruby-menu > li.ruby-active-menu-item > a {
        background: #333333;
    }

    ul.ruby-menu > li.ruby-menu-social > a > span {
        display: block
    }

    ul.ruby-menu > li > ul,ul.ruby-menu > li > ul > li > ul,ul.ruby-menu > li > ul > li > ul > li > ul {
        position: relative;
        width: 100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-top: none
    }

    ul.ruby-menu > li,ul.ruby-menu > li > ul > li,ul.ruby-menu > li > ul > li > ul > li,ul.ruby-menu > li > ul > li > ul > li > ul > li {
        position: relative
    }

    ul.ruby-menu > li > ul > li > a,ul.ruby-menu > li > ul > li > ul > li > a,ul.ruby-menu > li > ul > li > ul > li > ul > li > a {
        width: 100%;
        line-height: 50px;
        padding: 0 80px;
        background: #d1d1d1
    }

    ul.ruby-menu > li > ul > li:hover > a,ul.ruby-menu > li > ul > li > a:hover,ul.ruby-menu > li > ul > li > ul > li:hover > a,ul.ruby-menu > li > ul > li > ul > li > a:hover,ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a,ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover {
        background: #d9d9d9;
        color: #111
    }

    ul.ruby-menu > li > ul > li > ul,ul.ruby-menu > li > ul > li > ul > li > ul {
        left: auto;
        top: auto;
        z-index: auto
    }

    ul.ruby-menu > li > ul > li.ruby-open-to-left > ul,ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul {
        left: auto;
        right: auto
    }

    ul.ruby-menu > li > ul > li > ul > li > a {
        background: #e5e5e5;
        padding: 0 95px
    }

    ul.ruby-menu > li > ul > li > ul > li:hover > a,ul.ruby-menu > li > ul > li > ul > li > a:hover {
        background: #e1e1e1
    }

    ul.ruby-menu > li > ul > li > ul > li > ul > li > a {
        background: #efefef;
        padding: 0 110px
    }

    ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a,ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover {
        background: #fff
    }

    ul.ruby-menu > li.ruby-menu-social > a {
        border: none
    }

    ul.ruby-menu > li.ruby-menu-mega,ul.ruby-menu > li.ruby-menu-mega-blog,ul.ruby-menu > li.ruby-menu-mega-shop {
        position: relative
    }

    ul.ruby-menu > li.ruby-menu-mega > div,ul.ruby-menu > li.ruby-menu-mega-blog > div,ul.ruby-menu > li.ruby-menu-mega-shop > div {
        position: relative;
        top: auto;
        left: auto;
        border-top: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav {
        width: 100%;
        height: auto;
        left: auto;
        top: auto
    }

    ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li {
        position: relative
    }

    ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a {
        line-height: 50px;
        padding: 0 75px;
        background: #d1d1d1;
        color: #222
    }

    ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > a {
        background: #bcbcbc
    }

    ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div {
        position: relative;
        width: 100%;
        min-height: auto;
        left: auto;
        top: auto;
        z-index: auto
    }

    ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > a {
        background: #d9d9d9
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div {
        position: relative;
        text-align: left
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul {
        position: relative;
        border: none;
        font-size: 14px;
        margin-bottom: -1px
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li {
        position: relative;
        display: block;
        margin-top: -1px
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a {
        padding: 0 80px;
        line-height: 50px;
        max-height: 50px;
        text-transform: none;
        font-weight: 400;
        background: #d1d1d1;
        color: #222;
        border: none
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a {
        background: #bcbcbc
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > a,ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover,ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a {
        background: #d9d9d9
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a {
        display: block
    }

    ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div {
        position: relative;
        top: 0;
        z-index: 9999;
        margin: 0
    }

    ul.ruby-menu > li.ruby-menu-social img {
        display: inline-table;
        position: absolute;
        top: 15px
    }

    ul.ruby-menu > li.ruby-menu-social > a {
        width: 100%
    }

    ul.ruby-menu > li.ruby-menu-social .fa {
        position: absolute;
        top: 17px
    }

    ul.ruby-menu > li.ruby-menu-social span {
        line-height: 50px;
        padding: 0 25px
    }

    span.ruby-dropdown-toggle {
        position: absolute;
        width: 50px;
        height: 50px;
        max-width: 50px;
        max-height: 50px;
        left: 0;
        top: 0;
        padding: 10px 17px;
        z-index: 1000000;
        cursor: pointer
    }

    span.ruby-dropdown-toggle:after {
        font-family: "FontAwesome";
        text-decoration: none;
        content: '\f107';
        color: #fff;
        font-size: 25px;
        right: 0
    }

    span.ruby-dropdown-toggle.ruby-dropdown-toggle-rotate {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    ul.ruby-menu > li > a:before,ul.ruby-menu > li > ul > li > a:before,ul.ruby-menu > li > ul > li > ul > li > a:before,ul.ruby-menu > li > ul > li > ul > li > ul > li > a:before,ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a:before,ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before {
        content: "";
        width: 50px;
        height: 50px;
        background: #333;
        position: absolute;
        left: 0;
        top: 0
    }

    ul.ruby-menu > li > ul > li > a:before,ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a:before,ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before {
        background: #555
    }

    ul.ruby-menu > li > ul > li > ul > li > a:before {
        background: #777
    }

    ul.ruby-menu > li > ul > li > ul > li > ul > li > a:before {
        background: #999
    }

    ul.ruby-menu > li > ul > li > ul > li > ul,ul.ruby-menu > li > ul > li > ul,ul.ruby-menu > li > ul,ul.ruby-menu,ul.ruby-menu > li.ruby-menu-mega > div,ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div,ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div,ul.ruby-menu > li.ruby-menu-mega-blog > div,ul.ruby-menu > li.ruby-menu-mega-shop > div {
        max-height: 0;
        transform: scaleY(0);
        overflow: hidden
    }

    ul.ruby-menu > li > ul.ruby-mobile-sublevel-show,ul.ruby-menu > li > ul > li > ul.ruby-mobile-sublevel-show,ul.ruby-menu > li > ul > li > ul > li > ul.ruby-mobile-sublevel-show,ul.ruby-menu.ruby-mobile-sublevel-show,ul.ruby-menu > li.ruby-menu-mega > div.ruby-mobile-sublevel-show,ul.ruby-menu > li.ruby-menu-mega-blog > div.ruby-mobile-sublevel-show,ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div.ruby-mobile-sublevel-show,ul.ruby-menu > li.ruby-menu-mega-shop > div.ruby-mobile-sublevel-show,ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div.ruby-mobile-sublevel-show {
        max-height: 20000px;
        transform: scaleY(1)
    }

    div.ruby-grid > div.ruby-row div.ruby-row [class^="ruby-col"] {
        margin-top: 0
    }

    div.ruby-grid > div.ruby-row div.ruby-row:first-of-type [class^="ruby-col"] {
        margin-top: 0
    }

    div.ruby-grid.ruby-grid-lined > div.ruby-row:after {
        height: 0
    }

    div.ruby-grid > div.ruby-row > [class^="ruby-col"] {
        padding: 0
    }

    div.ruby-grid > div.ruby-row > [class^="ruby-col"] [class^="ruby-col"] {
        padding-left: 0
    }

    div.ruby-grid > div.ruby-row > [class^="ruby-col"] [class^="ruby-col"]:first-of-type {
        padding-left: 0
    }

    div.ruby-grid > div.ruby-row div.ruby-col-1,div.ruby-grid > div.ruby-row div.ruby-col-2,div.ruby-grid > div.ruby-row div.ruby-col-3,div.ruby-grid > div.ruby-row div.ruby-col-4,div.ruby-grid > div.ruby-row div.ruby-col-5,div.ruby-grid > div.ruby-row div.ruby-col-6,div.ruby-grid > div.ruby-row div.ruby-col-7,div.ruby-grid > div.ruby-row div.ruby-col-8,div.ruby-grid > div.ruby-row div.ruby-col-9,div.ruby-grid > div.ruby-row div.ruby-col-10,div.ruby-grid > div.ruby-row div.ruby-col-11,div.ruby-grid > div.ruby-row div.ruby-col-12 {
        width: 100%;
        padding: 20px 30px
    }

    div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class^="ruby-col"]:after {
        width: 0
    }

    div.ruby-grid img {
        position: relative;
        max-width: 100%;
        height: auto;
        display: block
    }

    div.ruby-grid > div.ruby-row::after {
        content: "";
        display: table;
        clear: both
    }

    .c-hamburger {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 50px;
        font-size: 0;
        text-indent: -9999px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: none;
        border-radius: none;
        border: none;
        cursor: pointer;
        -webkit-transition: background .3s;
        transition: background .3s
    }

    .c-hamburger:focus {
        outline: none
    }

    .c-hamburger span {
        display: block;
        position: absolute;
        top: 24px;
        left: 8px;
        right: 8px;
        height: 3px;
        background: #fff
    }

    .c-hamburger span::before,.c-hamburger span::after {
        position: absolute;
        display: block;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #fff;
        content: ""
    }

    .c-hamburger span::before {
        top: -10px
    }

    .c-hamburger span::after {
        bottom: -10px
    }

    .c-hamburger--htx {
        background-color: #705136;
    }

    .c-hamburger--htx span {
        -webkit-transition: background 0 .3s;
        transition: background 0 .3s
    }

    .c-hamburger--htx span::before,.c-hamburger--htx span::after {
        -webkit-transition-duration: 0.3s,.3s;
        transition-duration: 0.3s,.3s;
        -webkit-transition-delay: 0.3s,0;
        transition-delay: 0.3s,0
    }

    .c-hamburger--htx span::before {
        -webkit-transition-property: top,-webkit-transform;
        transition-property: top,transform
    }

    .c-hamburger--htx span::after {
        -webkit-transition-property: bottom,-webkit-transform;
        transition-property: bottom,transform
    }

    .c-hamburger--htx.is-active {
        background-color: #333
    }

    .c-hamburger--htx.is-active span {
        background: none
    }

    .c-hamburger--htx.is-active span::before {
        top: 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .c-hamburger--htx.is-active span::after {
        bottom: 0;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .c-hamburger--htx.is-active span::before,.c-hamburger--htx.is-active span::after {
        -webkit-transition-delay: 0s,.3s;
        transition-delay: 0s,.3s
    }

    ul.ruby-menu.ruby-menu-dividers > li,ul.ruby-menu.ruby-menu-dividers > li > a,ul.ruby-menu.ruby-menu-dividers > li.ruby-menu-social > a,ul.ruby-menu.ruby-menu-dividers > li > a:hover,ul.ruby-menu.ruby-menu-dividers > li:hover > a {
        border: none
    }

    div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-active-menu-item > a {
        padding-left: 45px
    }

    ul.ruby-menu > li.ruby-menu-social.ruby-menu-search > a {
        display: none
    }
}

@media screen and (max-width: 650px) {

  #product-cateogories .head_2 {
    font-size: 30px;
  }

  #product-cateogories .row {
    display: block;
  }

  #product-cateogories .col.col-sm-4.col-xs-12 {
    width: 100% !important;
    display: block;
    float: none;
  }

  #product-cateogories .col.col-sm-4.col-xs-12 img {
    max-width: 100%;
  }

  .cat-icon {
    display: none;
  }

  .menu-btns {
    position: relative;
    z-index: 900;
    width: 37%;
    margin-top: 36px;
  }

  .header-search {
    display: none;
  }

  .header-btns {
    display: none;
  }
  .search-ctjamz{
    display: block;
    background-color: white !important;
    color: #262118 !important;
    font-weight: bold;
    border: 1px solid #675137;
  }

}