@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@600&family=Kaisei+Tokumin:wght@400;500;700&family=Poppins:wght@300;400;500;700&display=swap');


:root {

    --lg-font: 'Kaisei Tokumin', serif;
    --sm-font: 'Poppins', sans-serif;
    --price-font: 'Chivo Mono', monospace;
    --orang-light: #FF5621;
    --orang-dark: #E54D1E;
    --blue-light: #64C0D1;
    --gray-darck: #222222;
    --gray-light: #999999;
}


.header-phone {
    /*background-color: #E54D1E;*/
    border: 0px solid #E54D1E;
    box-shadow: 1px 2px 8px #ddd;
    height: 50px;
    width: 100%;
    position: fixed;
    z-index: 99999999;
    bottom: 0;
}

.header-phone ul {
    list-style: none;
}

.header-phone ul li a {
    text-align: center;
    color: #333;
    text-decoration: none;
}

.header-phone ul li a:hover,
.header-phone ul li a:active,
.header-phone ul li a:focus {
    text-align: center;
    color: #333;
    text-decoration: underline;
}

.header-phone ul li .nav-link:hover,
.header-phone ul li .nav-link:active,
.header-phone ul li .nav-link:focus {
    text-align: center;
    color: #333;
    text-decoration: underline;
}



.header-phone ul li i {
    font-size: 20px;
    display: block;
}

.header-phone ul li span {
    display: block;
    font-size: 10px;
}

/** #FF5621 E54D1E   // 64C0D1   222222    999999 ***/

.border {
    border: 1px solid red;
}

body {
    font-family: var(--sm-font);
    background-color: #fafafa;
}

h2 {
    font-size: 22px;
}

.costum-bg-primary {

    background-color: var(--orang-light);
}

header {
    border: 0px solid red;
}

.header_annonce {
    background-color: #64C0D1;
    padding: 2px 0;
}

.header-top {
    background-color: #ffffff;
    padding: 10px 0;
}

.header-top img {
    border: 0px solid red;
    height: 40px;
}

.header-top span {
    display: block;
    font-size: 12px;
    font-weight: 200;
    border: 0px solid red;
}

.header-top .title {

    font-weight: bolder;
}

.header-top .icon {
    width: 40px;
    height: 40px;

    border: 0px solid red;
}

.header-top .home .icon {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAYAAADU8sWcAAABh0lEQVR4Ae3UD0QDYRyH8U0kYEhhVZiiEASRMKRFJSobYFFCYBAWwgAmIgMokIRAA0AEohAUTRUTKmWmUZZdT3zHOc7+vQ3Z8WF37+99n4s2T72XFQlE8I4lTzMvggsowsIX5poVnlGwgDgKug/ZZrzYR9hkeAqfik3rWcj2MkE988HCialw0PZXzjrW5vX8A+O2eNpEeELhIhZdZsL4Rg6TRuIcMIacDo5UmI2ihHzDcTaP2sLRKvesodRQnI0jeNVBKzXujSn+jMFaw8N4UXi9zpffhIUsAtVuGsCTNsYa/H9J6Jx79FYaDiCrDRuGvqLbOi8Dv9tQHx40uGXwh8mLlM69RpdzoAcZDSQMdZ0vsKfzr9BZXujGjRaSpsNqDMGPQ3Uu4PtduNSDHQ3GcWQ4nkcabThW79SjmyS8GjyDZThu4Uyf29U8d4z9cdz1asVbcff1Vdzirkz3y82Ip3WY00Ez4z7d9/+PeCuOCxc5l/ib+57q4ylYFTyiXfMdurcq2HW2fgAWtlK7tx5D3gAAAABJRU5ErkJggg==) no-repeat left center;
}

.header-top .mobile .icon {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAeCAYAAACv1gdQAAACVUlEQVR4AdzVA6wcURTG8S5r27btNqhtIyjC2o7ehnUb1bZt27Ztu53+Nznlm7ucWSa/5Oacs5lveBOE8qe1zWNHJ2zEY2h4hLVoC+vf86EMlgcncRhdUACpUQg9cBaHkS3UwfLhAfrAopixYhjuIFsob+UJ9Nfr6dRGYx8soQjXBYdh0ek9Q5L/ajacQ/NQhNuIdoqehpQ69Z5YHYpwL5DVz3AF8cC9SIeFeIAXJtBgk4M6cOe/3ktZP0FKmUuF7+7FSnxDG+QxwRuk+uuqZEAeoaGkrDP/NZMbz9yLtxiI56htwm3diwZ+3tYO2P57ALXxHF0NDtcHaxW9z0iuU9+J7v+kl0t8F6MNDJcM99BCp5dd8em5Csff4X7/AWcxHXYDwlmxEO/R2MtsG7xEaeV9l7dlBzYieRDBEmM5DqIZHmIBKsMqMzZUw1LcR0VfHkon5uIEMgcQLL2EWo7EUkuHOFzDB9zBR1zCGKTy6Y2RngVxuIUifgTLLwHGwaqYyQZNfWcU4RTbyVPU9CFYFTxCby9zKaG510GFk7mGeI52HmZa4QVk0w5dOAsW4wcG6vT74zuWwBKycPJGzcRRlMclTEVCJMYUXEFFHMcM2EwPJ2/tUuxGCqmlwXp8xHtZp/3roHuxCE7TwslV2SCS6B4AOvUk2Ix1SGx4OGrJsRNLPV0BL1d8BXYiuWHh5LYdxmzYgtghbJiDw0htVLgacMFiwN5qgQs1DAgXml9MhPuC9GEIlx6fvQ2twSRkQOoQyYBJWOMtXGZswHtoIfIeG/BzeJtiAKq/LaYSLfUXAAAAAElFTkSuQmCC) no-repeat left center;
}

.header-top .delevry .icon {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAeCAYAAACmPacqAAACVklEQVR42t3WA9QbTRgG0Hz5bdu2bdu2bdu2jdq2bdu2bTe9lWJsqvecGw6e9YSSVeSuQ68mkoFqoXyVwQvYJQNbh9ZXmfxtyifxTRCTbMPrHJKi3SU8mcR1QYQ5gUXMphbXE15fu/8EprIHbzGYIbzDnvmc+Fue5ZjoMGt8D3MtNZhNac7PR5gmTGE6oynF50xN0P5gvmQc3XmGHYIKcxZT2YezeYcGzGIIhXmA/aP6bcU9tGA6f3J8EIEq8nPUb1tyAR/RlLn04x/uYq+ow/on02nG3WyZbZijmMUhKS73y/mc1synJ79yC7uyA8/QnbF8wUHZBPqbUhm0355r+Y6OzKczP3A911KaWVTnasLpDr4PMzgly727CzfxC92ZT1sK0YRxDOINdk9nwM+pF9CFsSd38Bd9WUBkhbkU55xkA+zIBC7Lwy1kX+6nEIOJrNCFJ9k+XqcXmcPkPFtEZA0jEy0bDuZQPqAxhwbgVF6kAmOJrKEOJ6Xatc9QM8vDshe38ytdWEA3fqUU0+jMlaEVFVgY7Q7iAf6lDwtow7dczy6cTWuG8XDUpZ59GL8fzROUYCizaconXMF2a7Q9nEpM5h22Ca2ojMMQ5mRepCJjmU4d3uV8torTf3d+Ywa/Rt1fsgozZYWZVOUVTmezFI+Od5lMBQ4P4t5wML/SnvkMowwvcxZbRbUP8zDDaMnZ+VqEbcP5vEZFRjKX1vzEU3SmH7esj+Xp/tzB9zTiWTYPbVJli07jySTuXpdhHqV8EkUoWB97aSt2yUA4n2GKEcnAXaEAaglL3CqX4G8utAAAAABJRU5ErkJggg==) no-repeat left center;
}

.header-top .shopping-cart .icon {
    background: #ff5621 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAXCAQAAACsCtdvAAABOklEQVR42n3JJdxTYRhA8fPZtm634W5py7i7u7tDwRIOXdGuuHRD+wpuBfcbOTxhbv/XnvN7qWXee/6Kdc88rTnVv563EOt8TFNpZtYPbqnUlqgcjZzuG7sq1RU1gyonez7WfV/HXVlR943XKdANHGMCg0jIxl1ZUUncEzgKwaJzwJ3epYZ33QnOsQjBTxbAzd6khjfdChb8BNjrP/uDORNqmJgD+8dvT4RGtmFOTXCcP+nA347DKT6niSPsK03PnYKrfUgDZ5k6rDQ/dDUe8HopM44mOM2/rqTE6x7Es14s5UhT5zrJX66nwkuexaueoMRlpv5xEzU86VW8414qXOBK6rjPO/jUpXTgUp/iKyfSgRN9g6kj6MARpvjFSXTgJL/gKV+6wCEOarGGuMCXnsIeD/vadl57xJ7/pYQLaL6kLGEAAAAASUVORK5CYII=) no-repeat center center;
}


.nav-link {
    color: #ffffff;
}

.header-bottom {
    position: fixed;
    z-index: 999999;
    left: 0;
    right: 0;
    box-shadow: 1px 2px 8px #ddd;
    padding: 15px 0;

}

.header-bottom form button,
.header-bottom form input[type='search'],
.navbar-toggler:focus {
    box-shadow: none;
}


.header-bottom form button,
.header-bottom form input[type='search'] {
    height: 30px;
    border-radius: 0;
    border: 1px solid #ddd;
    border-right: none;

}

.header-bottom form button {
    border-radius: 0 3px 3px 0;

}

.header-bottom form input[type='search'] {
    border-radius: 3px 0 0 3px;

}

.header-bottom .form-2 input[type='search'] {
    width: 500px;

}

.header-bottom .form-1 input[type='search'] {
    width: 100%;

}

.header-bottom form button {
    padding: 5px 10px;
    color: #ffffff;
    font-size: 15px;
    background-color: var(--gray-darck);
}

.header-bottom form button:focus,
.header-bottom form button:active,
.header-bottom form button:hover {
    background-color: var(--orang-dark);
}

.navbar-toggler-icon {
    margin: auto;
    padding: 10px 0;
    height: 45px;
}

header .nav-item {
    margin: 2px 3px;
    padding: 0;
    /*  width: 100%;*/
}

header .navbar-nav .nav-item:focus,
header .navbar-nav .nav-item:active,
header .navbar-nav .nav-item:hover {
    background-color: var(--orang-dark);

}

header .nav-item .nav-link {
    margin: auto;
    padding: 10px 5px 10px 10px;
    height: 45px;
    ;
}

header .nav-item .nav-link:focus,
header .nav-item .nav-link:active,
header .nav-item .nav-link:hover {
    color: #ffffff;
}

.dropdown-menu {

    background-color: var(--orang-dark);
}

.dropdown-menu .dropdown-item {
    background-color: var(--orang-dark);
    margin: auto;
    padding: 10px 5px 10px 10px;
    height: 45px;
    color: #ffffff;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
    background-color: var(--orang-light);
}

.custom-dropdown-menu {

    width: 100%;
    position: absolute;
    margin: 0;
    top: 50px;
    left: 0;
    z-index: 99;
}

.custom-dropdown {
    border: 1px solid #dadada;
    padding-top: 15px;
    border-top: none;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .15);
    background-color: #ffffff;
}

.category ul {
    list-style: none;
}

.category ul li span {
    border: 2px solid var(--orang-light);
    height: 0px;
    width: 50px;
    display: block;
    margin: 5px 0 10px 0;
}

.category ul li a {
    color: var(--orang-darck);
    text-decoration: none;
    font-size: 12px;
    margin: 0;
    display: block;
}

.category ul li a:active,
.category ul li a:focus,
.category ul li a:hover {
    color: var(--orang-dark);
}

.img {
    border: 0px solid red;
    width: 100%;
    margin: 0 0 5px 0;
}

.img a img {
    width: 100%;
    height: auto;
}

.vertical_menu {

    padding: 0;
    background-color: #ffffff;
}

.vertical_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;

}

.vertical_menu ul li {
    padding: 2px 15px;

}

.vertical_menu ul li:first-child a {
    border-top: none;

}

.vertical_menu ul li:last-child a {
    border-bottom: none;

}

.vertical_menu ul li a {
    display: block;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #dadada;
    color: #999999;
    text-decoration: none;
    padding: 1px 0;

}

.cat-title {
    font-size: 16px;
    border-radius: 3px 3px 0 0;
    height: 40px;
}

.cat-title h3 {
    font-size: 16px;
}

.cat-title .right {
    width: 35px;
    height: 25px;
    padding: 0px;

}

.cat-title .center {
    width: 100%;
    height: 25px;
    padding: 5px;
}

.cat-title .left {
    width: 35px;
    height: 25px;
    padding: 0px;
}


.fa {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
}

.fa-icon-1 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAQAAABHwVUUAAAA60lEQVR42m3JM9QXcABA0dvvn7dsG3O2bRtr0pot7dm2bU01ZTfmz7Z03vTODSsVqPTKeSvL538AQEWXtBYPQD5GnNbfe0rCdQagTEnYzmLQBg1UhHzcKAK6oIVD5GMHPfAfDTVQxUhj8nEaOADaaoElENQw1GAk2SIVNfVGO7PUDMo7pj6u+eoTauuIUnYpH0xSEa8cxAvMFnEmiycFU8AVp3ACDXwxzmtMDZqA29Jw2Tfsl+IomgSP8d4dkGy3n3biBx4Fc8R4Ig1w22x/UE+8RcFrg1UC8MQFMMhMLwPuW6oGIA3Usckx0gFLHj/j+sZiUQAAAABJRU5ErkJggg==) no-repeat center center;
}

.fa-icon-2 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAQAAABHwVUUAAAA60lEQVR42m3JM9QXcABA0dvvn7dsG3O2bRtr0pot7dm2bU01ZTfmz7Z03vTODSsVqPTKeSvL538AQEWXtBYPQD5GnNbfe0rCdQagTEnYzmLQBg1UhHzcKAK6oIVD5GMHPfAfDTVQxUhj8nEaOADaaoElENQw1GAk2SIVNfVGO7PUDMo7pj6u+eoTauuIUnYpH0xSEa8cxAvMFnEmiycFU8AVp3ACDXwxzmtMDZqA29Jw2Tfsl+IomgSP8d4dkGy3n3biBx4Fc8R4Ig1w22x/UE+8RcFrg1UC8MQFMMhMLwPuW6oGIA3Usckx0gFLHj/j+sZiUQAAAABJRU5ErkJggg==) no-repeat center center;
}

.section-title {
    /* border-top: 2px solid var(--orang-dark);*/
    border: none;
    margin: 30px 0;
    text-align: center;
}

.section-title h2 {
    /*background-color: var(--orang-dark);*/
    display: block;
    /*width: 200px;*/
    border: 0px solid red;
    padding: 10px 0 10px 0;
    font-size: 30px;
    color: var(--gray-darck);
}

.result {
    font-size: 12px;
    color: #999999;
}

.filter {
    /*border-bottom: 2px solid var(--orang-light);*/
    margin: 0 0 5px 0;
}

.filter select {
    border: 1px solid var(--orang-dark);
    font-size: 14px;
    color: var(--gray-darck);
}

.product {
    background-color: #ffffff;
    width: 100%;
    margin: 0 0 10px 0;
}

.product:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.product-top .img {
    border-bottom: 1px solid #dadada;
}

.product h3 {
    font-size: 16px;
    display: block;
    cursor: pointer;
    text-align: center;
    /*border-bottom: 1px solid #dadada;  */
}

.product a {
    font-size: 14px;
    display: block;
    color: var(--gray-darck);
    text-decoration: none;
}

.product a:active,
.product a:focus,
.product a:hover {

    display: block;
    color: var(--orang-dark);
}

.product-top {
    border: 0px solid red;
}

.product-center {
    border: 0px solid green;
    padding: 0;
    height: 60px;
}

.product-bottom {
    border: 0px solid blue;
    text-align: center;
}

.product-bottom .price {
    border: 0px solid blue;
    font-size: 20px;
    color: var(--orang-dark);
    padding: 0;
}

.product-bottom .price-box {
    position: relative;
    font-family: var(--price-font);
}

.product-bottom .old-price {

    border: 0px solid red;
    font-size: 14px;
    /***** position: absolute;
    top: -10px;
    right: 0; */
    text-decoration: line-through;
    color: var(--gray-light);
    padding: 0;
}

.product-bottom .gold {
    color: gold;
}

.product-bottom .gray {
    color: var(--gray-light);
}

.product-bottom .bg-btn {

    border: 0px solid red;
    text-align: center;

    padding: 0 10px;
}

.product-bottom .btn {
    color: var(--gray-darck);
    border-radius: 0;
}

.product-bottom .btn .fa {
    font-size: 14px;
    color: var(--orang-light);
}

.product-bottom .btn span {
    margin: 0 5px;
    padding: 0;
    font-size: 14px;
    padding: 4px 0;
    display: block;


}

.pagination {
    border: 0px solid red;
    padding: 0 15px;
    margin: 5px 0 15px 0;
}

.pagination a {

    color: #ffffff;
    text-decoration: none;
}

.pagination a:hover {

    color: var(--orang-light);
}

.pagination a:hover {

    color: var(--orang-light);
    text-decoration: none;
}

.pagination span {
    padding: 2px 15px;
    background-color: var(--orang-light);
}

.pagination span:hover {
    border: 1px solid var(--orang-light);
    background-color: #ffffff;
}

.pagination .perv {

    display: inline;
}

.pagination .next {
    display: inline;
}

#new-lettre {
    background-color: #ffffff;
    padding: 50px 15px;
}

#new-lettre h4 {
    font-size: 28px;
    color: #E54D1E;

}

#new-lettre p {
    font-size: 12px;
    color: var(--gray-darck);

}

#new-lettre input[type='email'] {
    font-size: 14px;
    color: var(--gray-darck);
    border-radius: 3px 0 0 3px;
    border: 1px solid var(--orang-dark)
}

#new-lettre button {
    font-size: 14px;
    color: #ffffff;
    background-color: var(--orang-dark);
    border-radius: 0 3px 3px 0;
    box-shadow: none;
    border: 0;

}

#new-lettre button:active,
#new-lettre button:focus,
#new-lettre button:hover {
    border: 1px solid var(--orang-dark);
    color: var(--orang-dark);
    background-color: #ffffff;

}

.text-size {
    font-size: 22px;
}

.bgandborder {
    border: 1px solid #dadada;
    background-color: #ffffff;
    padding: 25px 15px;
}

.imgcart {
    height: 50px;
    width: 50px;

}

.img-l {
    cursor: pointer;
}

.product-preview img {

    border: 1px solid #E4E7ED;
    height: 90%;
    margin: 0px;

}

.input-number {
    border: 1px solid var(--orang-light);
    max-width: 50px;
    text-align: center;
}

.detail-page .nav {
    background-image: url("../image/bg-ul.png");
}

.detail-page .nav .nav-item {
    max-width: 140px;
    min-width: 90px;

}

.detail-page .nav .nav-item:focus,
.detail-page .nav .nav-item:active,
.detail-page .nav .nav-item:hover {
    background-color: none;

}

.detail-page .nav .nav-link {

    color: #222222;
    background-color: #fafafa;
    height: 40px;
    margin: 0 3px;
    border-radius: 0;
    font-size: large;
    font-family: var(--sm-font);
}

.detail-page .nav .nav-link:focus,
.detail-page .nav .nav-link:active,
.detail-page .nav .nav-link:hover {

    color: #E54D1E;
    text-decoration: underline;
}




/*----------------------------*\
	Products slick
\*----------------------------*/

/*=========================================================
  -> PRODUCT DETAILS PAGE
===========================================================*/

/*----------------------------*\
	Product view
\*----------------------------*/

#product-main-img .slick-prev {
    -webkit-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
    left: 15px;
}

#product-main-img .slick-next {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
    left: 15px;
    border: 1px solid #999999;
}

#product-main-img .slick-prev,
#product-main-img .slick-next {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

#product-main-img:hover .slick-prev,
#product-main-img:hover .slick-next {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
    visibility: visible;
}

#product-main-img .zoomImg {
    background-color: #FFF;
}

#product-imgs .product-preview {
    margin: 0px;
}

#product-imgs .product-preview.slick-current {
    border-color: var(--orang-light);
}

#product-imgs .slick-prev {
    top: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

#product-imgs .slick-next {
    top: calc(100% - 20px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

#product-imgs .slick-prev:before {
    content: "\f106";
}

#product-imgs .slick-next:before {
    content: "\f107";
}

.product-preview img {
    width: 100%;
}

/*----------------------------*\
	Product details
\*----------------------------*/

.product-details .product-name {
    text-transform: uppercase;
    font-size: 18px;
}

.product-details .product-rating {
    display: inline-block;
    margin-right: 15px;
}

.product-details .product-rating>i {
    color: #E4E7ED;
}

.product-details .product-rating>i.fa-star {
    color: orange;
}

.product-details .review-link {
    font-size: 12px;
}

.product-details .product-price {
    display: inline-block;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 15px;
    color: var(--orang-light);
}

.product-details .product-price .product-old-price {
    font-size: 70%;
    font-weight: 400;
    color: #8D99AE;
}

.product-details .product-available {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    margin-left: 30px;
    color: var(--orang-light);
}

.product-details .product-options {
    margin-top: 30px;
    margin-bottom: 30px;
}

.product-details .product-options label {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 15px;
    margin-bottom: 0px;
}

.product-details .product-options .input-select {
    width: 90px;
}

.product-details .add-to-cart {
    margin-bottom: 30px;
}

.product-details .add-to-cart .add-to-cart-btn {
    position: relative;
    border: 2px solid transparent;
    height: 40px;
    padding: 0 30px;
    background-color: var(--orang-light);
    color: #FFF;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 40px;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.product-details .add-to-cart .add-to-cart-btn>i {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 38px;
    color: var(--orang-light);
    opacity: 0;
    visibility: hidden;
}

.product-details .add-to-cart .add-to-cart-btn:hover {
    background-color: #FFF;
    color: var(--orang-light);
    border-color: var(--orang-light);
    padding: 0px 30px 0px 50px;
}

.product-details .add-to-cart .add-to-cart-btn:hover>i {
    opacity: 1;
    visibility: visible;
}

.product-details .add-to-cart .qty-label {
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 15px;
    margin-bottom: 0px;
}

.product-details .add-to-cart .qty-label .input-number {
    width: 90px;
    display: inline-block;
}

.product-details .product-btns li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
}

.product-details .product-btns li+li {
    margin-left: 15px;
}

.product-details .product-links {
    margin-top: 15px;
}

.product-details .product-links li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
}

.product-details .product-links li+li {
    margin-left: 10px;
}

/*----------------------------*\
	 Product tab
\*----------------------------*/

#product-tab {
    margin-top: 60px;
}

#product-tab .tab-nav {
    position: relative;
    text-align: center;
    padding: 15px 0px;
    margin-bottom: 30px;
}

#product-tab .tab-nav:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #E4E7ED;
    z-index: -1;
}

#product-tab .tab-nav li {
    display: inline-block;

    background-color: #fafafa;
    padding: 0px 15px;
}

#product-tab .tab-nav li+li {
    margin-left: 15px;
}

#product-tab .tab-nav li a {
    display: block;

    font-weight: 700;
    color: #8D99AE;
}

#product-tab .tab-nav li.active a {
    color: var(--orang-light);
}

#product-tab .tab-nav li a:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--orang-light);
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

#product-tab .tab-nav li a:hover:after,
#product-tab .tab-nav li a:focus:after,
#product-tab .tab-nav li.active a:after {
    width: 100%;
}

/*-- Rating --*/

.rating-avg {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px;
}

.rating-avg .rating-stars {
    margin-left: 2px;
}

.rating-avg .rating-stars,
.rating .rating-stars {
    display: inline-block;
}

.rating-avg .rating-stars>i,
.rating .rating-stars>i {
    color: #E4E7ED;
}

.rating-avg .fa {
    font-size: 18px;
    margin: 0;
    padding: 0;
}

.rating {
    list-style: none;
    padding: 0;
    margin: 0;
}

.review-rating .fa,
.rating .rating-stars .fa {
    border: 0px solid red;
    width: 12px;
    font-size: 8px;
    margin: 0;
    padding: 0;
}

.rating-avg .rating-stars>i.fa-star,
.rating .rating-stars>i.fa-star {
    color: orange;
    margin: 0px;
}

.rating li {
    margin: 5px 0px;
}

.rating .rating-progress {
    position: relative;
    display: inline-block;
    height: 9px;
    background-color: #E4E7ED;
    width: 120px;
    margin: 0px 10px;
    border-radius: 5px;
}

.rating .rating-progress>div {
    background-color: var(--orang-light);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.rating .sum {
    display: inline-block;
    font-size: 12px;
    color: #8D99AE;
}

/*-- Reviews --*/
.reviews {
    list-style: none;
    padding: 0;
}

.reviews li {
    position: relative;
    padding-left: 145px;
    margin-bottom: 30px;
}

.reviews .review-heading {
    position: absolute;
    width: 130px;
    left: 0;
    top: 0;
    height: 70px;
}

.reviews .review-body {
    min-height: 70px;
}

.reviews .review-heading .name {
    margin-bottom: 5px;
    margin-top: 0px;
}

.reviews .review-heading .date {
    color: #8D99AE;
    font-size: 10px;
    margin: 0;
}

.reviews .review-heading .review-rating {
    margin: 5px;
    font-size: 12px;
}

.reviews .review-heading .review-rating>i {
    color: #E4E7ED;
}

.reviews .review-heading .review-rating>i.fa-star {
    color: orange;
    margin: 0px;
}

.reviews-pagination {
    text-align: center;
}

.reviews-pagination li {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #E4E7ED;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.reviews-pagination li:hover {
    background-color: #E4E7ED;
    color: var(--orang-light);
}

.reviews-pagination li.active {
    background-color: var(--orang-light);
    border-color: var(--orang-light);
    color: #FFF;
    cursor: default;
}

.reviews-pagination li a {
    display: block;
}

/*-- Review Form --*/

.review-form .input {
    margin-bottom: 15px;
}

.review-form .input-rating {
    margin-bottom: 15px;
}

.review-form .input-rating .stars {
    display: inline-block;
    vertical-align: top;
}

.review-form .input-rating .stars input[type="radio"] {
    display: none;
}

.review-form .input-rating .stars>label {
    float: right;
    cursor: pointer;
    padding: 0px 3px;
    margin: 0px;
}

.review-form .input-rating .stars>label:before {
    content: "\f006";
    font-family: FontAwesome;
    color: #E4E7ED;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.review-form .input-rating .stars>label:hover:before,
.review-form .input-rating .stars>label:hover~label:before {
    color: var(--orang-light);
}

.review-form .input-rating .stars>input:checked label:before,
.review-form .input-rating .stars>input:checked~label:before {
    content: "\f005";
    color: var(--orang-light);
}

.input-select {
    border: 1px solid var(--orang-dark);
    font-size: 18px;
}

.input-number input {

    border: 1px solid var(--orang-dark);
    font-size: 18px;
    width: 100%;
}

/*=========================================================
	12 -> SLICK STYLE
===========================================================*/

/*----------------------------*\
	Arrows
\*----------------------------*/

.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    border: 1px solid #E4E7ED;
    background-color: #FFF;
    border-radius: 50%;
    z-index: 22;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    background-color: var(--orang-light);
    border-color: var(--orang-light);
}

.slick-prev:before,
.slick-next:before {
    font-family: FontAwesome;
    color: #2B2D42;
}

.slick-prev:before {
    content: "\f104";
}

.slick-next:before {
    content: "\f105";
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    color: #FFF;
}

.slick-prev {
    left: -20px;
}

.slick-next {
    right: -20px;
}


.pagination {
    border: 0px solid red;
}

.pagination .page-item {
    border: 0px solid #dddddd;
}

.pagination .page-item a.page-link {
    color: #E54D1E;
    padding: 5px 10px;
    margin: 0 2px;
}

.pagination .page-item .active span.page-link {
    color: #eeeeee;
    background-color: #E54D1E;
    padding: 0 2px;
}

.pagination span {
    padding: 5px 10px;
}

/*----------------------------*\
	Dots
\*----------------------------*/

.slick-dots li,
.slick-dots li button,
.slick-dots li button:before {
    width: 10px;
    height: 10px;
}

.slick-dots li button:before {
    content: "";
    opacity: 1;
    background: #E4E7ED;
    border-radius: 50%;
}

.slick-dots li.slick-active button:before {
    background-color: var(--orang-light);
}

.custom-dots .slick-dots {
    position: static;
    margin: 15px 0px;
}


/*=========================================================
	12 -> SLICK STYLE
===========================================================*/

/*----------------------------*\
	Arrows
\*----------------------------*/

.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    border: 1px solid #E4E7ED;
    background-color: #FFF;
    border-radius: 50%;
    z-index: 22;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    background-color: var(--orang-light);
    border-color: var(--orang-light);
}

.slick-prev:before,
.slick-next:before {
    font-family: FontAwesome;
    color: #2B2D42;
}

.slick-prev:before {
    content: "\f104";
}

.slick-next:before {
    content: "\f105";
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    color: #FFF;
}

.slick-prev {
    left: -20px;
}

.slick-next {
    right: -20px;
}

.pointer {
    cursor: pointer;
}

.checked {
    color: orange;
}

/*=========================================================
	13 -> RESPONSIVE
===========================================================*/
#categ {
    border-right: 1px solid #dadada;
    background-color: #ffffff;
    box-shadow: 4px 2 px 1px #222222;
    position: fixed;
    z-index: 9999999;
    width: 70%;
    top: 0;
    bottom: 48px;
    right: 0;
    box-sizing: border-box;
}

#categ .vertical_menu {
    margin-top: 30px;

    background-color: #ffffff;
}

#categ li.categ-detail {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #dadada;
}



.custom-dropdown {
    border: none;
    box-shadow: none;
}



@media only screen and (max-width: 1201px) {}

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


    #product-imgs {
        margin-bottom: 60px;
        margin-top: 15px;
    }

    #rating {
        text-align: center;
    }

    #reviews {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .custom-dropdown-menu {

        width: 100%;
        position: absolute;
        margin: 0;
        top: 174px;
        left: 0;
        z-index: 99;
    }

}

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

    .section-title h2 {
        /*background-color: var(--orang-dark);*/
        display: block;
        /*width: 200px;*/
        border: 0px solid red;
        padding: 0;
        font-size: 18px;
        color: var(--gray-darck);
    }

    .section-title .section-nav {
        float: none;
        margin-top: 10px;
    }

    .section-tab-nav li {
        margin-top: 10px;
    }


    .product h3 {

        font-size: 14px;
        border: 0px solid red;
        padding: 2px 1px;
    }

    .product-bottom .price {
        border: 0px solid blue;
        font-size: 143x;
        color: var(--orang-dark);
        padding: 2px 0;
    }

    .product-bottom .old-price {

        border: 0px solid red;
        font-size: 12px;
        /***** position: absolute;
    top: -10px;
    right: 0; */
        text-decoration: line-through;
        color: var(--gray-light);
        padding: 2px 0;
    }


    footer ul {
        padding: 0;
    }

    footer h4 {
        font-size: 13px;
        text-transform: uppercase;
        margin: 0;
        padding: 0;

        border: 0px solid #333333;
    }

    footer a,
    footer p {
        font-size: 10px;
    }
}

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

    .product h3 {

        font-size: 12px;
        border: 0px solid red;
        padding: 2px 1px;
    }

    .product-bottom .price {
        border: 0px solid blue;
        font-size: 12px;
        color: var(--orang-dark);
        padding: 2px 0;
    }

    .product-bottom .old-price {

        border: 0px solid red;
        font-size: 10px;
        /***** position: absolute;
  top: -10px;
  right: 0; */
        text-decoration: line-through;
        color: var(--gray-light);
        padding: 2px 0;
    }

    footer ul {
        padding: 0;
    }

    footer h4 {
        font-size: 13px;
        text-transform: uppercase;
        margin: 0;
        padding: 0;

        border: 0px solid #333333;
    }

    footer a,
    footer p {
        font-size: 10px;
    }
}





footer {
    padding: 15px 0 0 0;
    margin: 10px 0 0 0;
    background-color: #f0f0f0;

}

footer .footer-top {
    margin: 0;
    padding: 0;
    color: #222;


}

footer .footer-bottom {

    background-color: #ddd;
    margin: 0;
    color: #222;
    font-size: 12px;
}

footer a {
    border: 0px solid var(--orang-dark);
    display: block;
    text-decoration: none;
    color: #222;

}

footer a:active,
footer a:focus,
footer a:hover {
    color: #000;
    text-decoration: underline;

}

footer ul {
    padding: 0;
    list-style: none;
}

footer h4 {
    text-transform: uppercase;

}

footer .about {
    border: 0px solid red;
    text-align: justify;
    font-size: 12px;
}

footer .about {
    border: 0px solid red;
}

footer .about .logo {
    border: 0px solid red;
    height: 160px;

}


.chat-whatsApp {
    border: 0px solid #ddd;
    background: #fff;
    width: 260px;
    height: 300px;
    position: fixed;
    right: 10px;
    bottom: 80px;
    border-radius: 6px;
    z-index: 99999999;

}

.chat-whatsApp a {

    background-color: rgb(9, 94, 84);
    border-radius: 20px;
    padding: 2px 10px;
    color: #fff;

}

.top-chat-whatsApp {
    background-color: rgb(9, 94, 84);
    border-radius: 6px 6px 0 0;
}

.chat-title {

    height: 30px;
}

.chat-whatsApp img {
    border: 0px solid #ddd;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    background-color: #fff;
}

.chat-whatsApp h2 {
    font-size: 16px;
    font-weight: bold;
    display: block;
    color: #ffffff;
}

.chat-whatsApp h5 {
    font-size: 12px;
    display: block;
    color: #ccc;
    padding: 5px 0 0 0;
}

.chat-whatsApp p {
    font-size: 12px;
    display: block;
    color: #333;
    padding: 5px;
    direction: rtl;
}

.chat-whatsApp span {
    font-size: 9px;
    color: #8D99AE;
    display: block;

}

.zone-message {
    background-image: url("../image/bg-wstp.jpg");
    height: 180px;
    padding: 0;
    margin: 0;
}

.our-message {
    border: 0px solid red;
    padding: 7px 14px 6px;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 8px 8px;
    margin: 5px 15px 10px 15px;
    box-shadow: rgba(0, 0, 0, .13) 0 1px 0.5px;
    padding: 0 10px;

}

.our-message:before {
    border: 0px solid red;
    position: absolute;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURUxpccPDw9ra2m9vbwAAAAAAADExMf///wAAABoaGk9PT7q6uqurqwsLCycnJz4+PtDQ0JycnIyMjPf3915eXvz8/E9PT/39/RMTE4CAgAAAAJqamv////////r6+u/v7yUlJeXl5f///5ycnOXl5XNzc/Hx8f///xUVFf///+zs7P///+bm5gAAAM7Ozv///2fVensAAAAvdFJOUwCow1cBCCnqAhNAnY0WIDW2f2/hSeo99g1lBYT87vDXG8/6d8oL4sgM5szrkgl660OiZwAAAHRJREFUKM/ty7cSggAABNFVUQFzwizmjPz/39k4YuFWtm55bw7eHR6ny63+alnswT3/rIDzUSC7CrAziPYCJCsB+gbVkgDtVIDh+DsE9OTBpCtAbSBAZSEQNgWIygJ0RgJMDWYNAdYbAeKtAHODlkHIv997AkLqIVOXVU84AAAAAElFTkSuQmCC);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    top: -5;
    left: 4px;
    width: 12px;
    height: 19px;
}

.wstp-btn {
    border: 1px solid #eee;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px gray;
    width: 40px;
    height: 40px;
    font-size: 28px;
    text-align: center;
    color: rgb(9, 94, 84);
    position: fixed;
    right: 30px;
    bottom: 50px;
    cursor: pointer;

    z-index: 99999999;

}