body {
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
    color: #000;
    overflow-x: hidden;
}

a, button {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
    outline: 0 !important;
    transition: all 0.5s ease-in-out;
}

a:focus, a:hover, a:active {
    outline: 0;
    box-shadow: 0;
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/*====== Custom Styles ========*/

.main-menu .navbar-default {
    background-color: #ffffff;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
    box-shadow: 0 1px 2px #e4e4e4;
}

.main-menu .navbar-default ul li a {
    font-size: 12px;
    color: #2c2d2d;

    position: relative;
    padding: 10px 10px 13px 0px;
    text-transform: uppercase;
    font-weight: 500;
}


.main-menu .navbar-default ul li.login-btn a {
    background-color: rgb(6, 207, 159) !important;
    width: 100px;
    height: 37px;
    border-radius: 30px;
    padding: 0;
    line-height: 37px;
    text-align: center;
    margin-top: 15px;
    margin-left: 15px;
    border-top: none;
}

.main-menu .navbar-default ul li.login-btn a:hover {
    background-color: #ffffff !important;
    color: rgb(6, 207, 159) !important;

}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    border-color: #2aa9e0;
    color: #2aa9e0 !important;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    /* border-color: #2aa9e0; */
}

#wrap {
    margin: 6px 0 0px -25px;
}

p {
    margin: 0px;
    padding: 0px;
}

input[type="text"] {}

input[type="text"]:focus:hover {}

input[type="text"]:focus {}

.pad-both {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.pad-left {
    padding-left: 0 !important;
}

.pad-right {
    padding-right: 0 !important;
}

.flt-right {
    float: right;
}

.flt-left {
    float: left;
}


.top-bar {
    background-color: var(--sec-bg-color);
    color: #fff;
    padding: 5px;
}

.top-bar p {
    font-size: 13px;
    text-align: center;
}

.top-bar a {
    color: #fff;
}

.top-bar a:hover {
    color: #e9ecef;
}

.search-box {
    display: none;
    position: absolute;
    left: -210px;
    top: 6px;
}

.top-bar-box ul {
    text-align: right;
}

.top-bar-box ul li {
    display: inline-block;
    padding: 10px 15px 10px 0;
    color: #000;
    position: relative;
}

.top-bar-box ul li i {
    margin: 0 5px 0 0 !important;
    font-size: 14px !important;
    position: relative;
}

.top-bar-box ul li a {
    color: #000 !important;
    padding: 0 !important;
    font-size: 12px !important;
    text-transform: capitalize !important;
}

.top-bar-box {
    border-bottom: 1px solid #dee2e6;
}


ul.nav.navbar-nav.navbar-right {
    text-align: left;
    float: left !important;
}

div#navbar {
    float: left;
    padding: 0 !important;
}

.main-menu .navbar-default ul li a i {
    margin: 0 0px 0 3px;
    font-size: 16px;
    color: var(--sec-bg-color);
    font-weight: 800;
}

section.hero-slider img {
    width: 100%;
}

section.hero-slider {
    overflow: hidden;
    position: relative;
}

.slick-prev {
    left: 10px !important;
    z-index: 999;
}

.slick-prev:before {
    content: "\f104" !important;
    font-family: Fontawesome !important;
    z-index: 99 !important;
    opacity: 1 !important;
    color: #000 !important;
    font-size: 30px !important;
    font-weight: 600;
}

.slick-next:before {
    content: "\f105" !important;
    font-family: Fontawesome !important;
    z-index: 99 !important;
    opacity: 1 !important;
    color: #000 !important;
    font-size: 30px !important;
    font-weight: 600;
}

.slick-next {
    right: 10px !important;
    z-index: 999;
}

section.bottom-slider img {
    width: 100%;
}

section.bottom-slider {
    overflow: hidden;
}

section.bottom-slider .col-md-8 {
    padding: 0 !important;
}

section.bottom-slider .col-md-4 {
    padding: 0 !important;
}

section.bottom-slider img {
    border: 3px solid #fff;
}

section.bottom-slider .col-md-8 img {
    border-left: 0;
}

section.bottom-slider .col-md-4 img {
    border-right: 0;
}

section.bottom-sec img {
    width: 100%;
}

section.bottom-sec .col-md-6 {
    padding: 0 !important;
}

section.bottom-sec {
    overflow: hidden;
}

img.menpic {
    border-top: 1px solid #fff;
    border-right: 4px solid #fff;
}

img.footwearpic {
    border: 4px solid #fff;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
}

img.custompic {
    border: 4px solid #fff;
    border-right: 0 solid #fff;
}

img.womenpic {
    border-top: 1px solid #fff;
}

footer#footer {
    background-color: var(--sec-bg-color);
}

.footer-links ul li {
    display: inline-block;
}

.footer-links ul li a {
    color: #fff;
    padding: 11px;
    font-size: 12px;
    display: inline-block;
    border-right: 1px solid var(--main-bg-color);
}

.footer-links ul li a:hover {
    color: var(--main-bg-color);
}

.footer-links ul li:last-child a {
    border-right: 0;
}

.footer-social-links {
    text-align: right;
}

.footer-social-links ul li {
    position: relative;
    float: left;
}

.footer-social-links ul li a {
    padding: 10px;
    font-size: 14px;
    float: left;
    border-right: 1px solid var(--main-bg-color);
    color: #fff;
    position: relative;
}

.discalimer {
    min-height: 50px;
    background-color: var(--main-bg-color);
    padding: 10px 0;
}

.discalimer p {
    color: var(--sec-bg-color);
    padding: 25px 10px 0;
}

.footer-social-links ul li a:hover {
    background-color: var(--main-bg-color);
    color: white;
}

.footer-social-links ul {
    float: right;
}

.footer-social-links ul li:last-child a {
    border: 0;
}


.discalimer .field {
    width: 65%;
    float: left;
}

/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
.discalimer label, input {
    transition: all 0.2s;
    touch-action: manipulation;
}

.discalimer input:focus {
    outline: 0;
    border-bottom: 1px solid var(--sec-bg-color);
}

.discalimer label {
    letter-spacing: 0.05em;
}

/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
.discalimer input:placeholder-shown+label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, -1.875rem) scale(1.5);
    color: #fff;
    font-size: 9px;
    font-weight: 100;
}

/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
.discalimer input::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
}

/**
* Show the placeholder when the input is focused.
*/
.discalimer input:focus::-webkit-input-placeholder {
    opacity: 1;
}

/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
.discalimer input:not(:placeholder-shown)+label,
.discalimer input:focus+label {
    transform: translate(0, -33px) scale(1);
    cursor: pointer;
    color: var(--sec-bg-color);
    font-size: 10px;
}

.field input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #fff;
    margin: 24px 30px 0 0;
    color: #fff;
}

.discalimer button {
    float: right;
    background: var(--sec-bg-color);
    border: 0;
    color: white;
    padding: 12px 0px;
    margin: 7px 0 0 0;
    width: 35%;
}

.discalimer a {
    color: #fff;
}

.discalimer a:hover {
    color: var(--sec-bg-color);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

ul.dropdown-menu {
    z-index: 999;
    position: absolute;
    margin: 0;
    padding: 0;
}

header.main-menu {
    position: relative;
    z-index: 1000;
    top: 0;

    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out;
    transition: all 10s ease-in-out;
}


ul.dropdown-menu li a {
    color: #000 !important;
    cursor: pointer;
    padding: 9px 10px !important;
    border-radius: 0;
    border-bottom: 1px solid #dee2e6;
    text-transform: uppercase;
    display: block;
    height: 35px;
}

ul.dropdown-menu li:last-child a {
    border-bottom: 0;
}

ul.dropdown-menu {
    left: 0 !important;
    border: 0;
    /* box-shadow: none; */
    border-radius: 0;
}

ul.dropdown-menu2 {
    position: absolute;
    top: 0;
    left: 161px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu li:hover .dropdown-menu2 {
    display: block;
}

ul.dropdown-menu2 li a {
    height: 35px;
}

ul.dropdown-menu li a i {
    color: #dee2e6;
    font-size: 13px !important;
    position: absolute;
    right: 10px;
    display: block;
    top: 11px;
}

ul.dropdown-menu li:hover {
    background: #efefef;
    position: relative;
    z-index: 99;
}


/* custom select */
.jcf-select {
    display: block;
    /* vertical-align:top; */
    /* background:#fff; */
    margin: 0;
    min-width: 1px;
    text-align: left;
    cursor: default;
    position: relative;
    /* line-height:1; */
    /* border-radius:0; */
    /* height:30px; */
    font-size: 13px;
    color: #0d0d0d;
    padding: 0;
    /* border:1px solid #000 !important; */
    width: auto;
    max-width: 100%;
}

.jcf-select:after {
    content: '';
    /* display:block; */
    /* position:absolute; */
    /* top:50%; */
    /* right:10px; */
    /* pointer-events:none; */
    /* width: 0; */
    /* height: 0; */
    /* border-style: solid; */
    /* border-width: 8px 6.5px 0 6.5px; */
    /* border-color: #d82717 transparent transparent transparent; */
    /* margin-top:-4px; */
}

.jcf-select select {
    z-index: 1;
    left: 0;
    top: 0;
}

.jcf-select .jcf-select-text {
    cursor: default;
    display: block;
    text-align: left;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 3px;
}

.jcf-select .jcf-select-opener {
    display: none;
}

body>.jcf-select-drop {
    position: absolute;
    margin: -1px 0 0;
    z-index: 9999;
}

body>.jcf-select-drop.jcf-drop-flipped {
    margin: 1px 0 0;
}

.jcf-select .jcf-select-drop {
    position: absolute;
    margin-top: 0;
    z-index: 9999;
    top: 100%;
    left: -1px;
    right: -1px;
    width: 150px !important;
}

.jcf-select .jcf-drop-flipped {
    bottom: 100%;
    top: auto;
}

.jcf-select.jcf-compact-multiple {
    max-width: 220px;
}

.jcf-select.jcf-compact-multiple .jcf-select-opener:before {
    display: inline-block;
    padding-top: 2px;
    content: '...';
}

.jcf-select-drop .jcf-select-drop-content {
    border: none;
    padding: 1px 0 0;
    width: 150px !important;
}

.jcf-select-drop.jcf-compact-multiple .jcf-hover {
    background: none;
}

.jcf-select-drop.jcf-compact-multiple .jcf-selected {
    background: #e6e6e6;
    color: #000;
}

.jcf-select-drop.jcf-compact-multiple .jcf-selected:before {
    display: inline-block;
    content: '';
    height: 4px;
    width: 8px;
    margin: -7px 5px 0 -3px;
    border: 3px solid #777;
    border-width: 0 0 3px 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}

/* multiple select styles */
.jcf-list-box {
    overflow: hidden;
    display: inline-block;
    border: 1px solid #b8c3c9;
    min-width: 200px;
    margin: 0 15px;
}

/* select options styles */
.jcf-list {
    display: inline-block;
    vertical-align: top;
    position: relative;
    line-height: 14px;
    font-size: 12px;
    width: 100%;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}

.jcf-list .jcf-list-content {
    vertical-align: top;
    display: inline-block;
    overflow: auto;
    width: 100%;
    max-height: 250px !important;
    width: 150px !important;
}

.jcf-list ul {
    list-style: none;
    margin: 0;
    padding: 2px 0 0;
    text-align: left !important;
}

.jcf-list ul li {
    overflow: hidden;
    display: block !important;
    margin: 0;
    padding: 0 !important;
}

.jcf-list .jcf-overflow {
    overflow: auto;
}

.jcf-list .jcf-option {
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    display: block;
    color: #333;
    text-decoration: none;
    text-overflow: ellipsis;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 1;
    text-align: left;
    height: auto;
    min-height: 1px;
}

.jcf-list .jcf-disabled {
    background: #fff !important;
    color: #aaa !important;
}

.jcf-select-drop .jcf-hover,
.jcf-list-box .jcf-selected {
    background: #e6e6e6;
    color: #000;
}

.jcf-list .jcf-optgroup-caption {
    white-space: nowrap;
    font-weight: bold;
    display: block;
    padding: 5px 9px;
    cursor: default;
    color: #000;
}

.jcf-list .jcf-optgroup .jcf-option {
    padding-left: 30px;
}

/* scrollbars */
.jcf-select-drop .jcf-scrollable-wrapper {
    box-sizing: content-box;
    position: relative;
    width: 150px !important;
}

.jcf-select-drop .jcf-scrollbar-vertical {
    position: absolute;
    cursor: default;
    bottom: 0;
    right: 0;
    top: 0;
    background: none;
    width: 10px;
    padding: 0 0 0 2px;
}

.jcf-select-drop .jcf-scrollbar-vertical .jcf-scrollbar-dec,
.jcf-select-drop .jcf-scrollbar-vertical .jcf-scrollbar-inc,
.jcf-select-drop .jcf-scrollbar-horizontal .jcf-scrollbar-handle,
.jcf-select-drop .jcf-scrollbar-horizontal .jcf-scrollbar-slider,
.jcf-select-drop .jcf-scrollbar-horizontal .jcf-scrollbar-dec,
.jcf-select-drop .jcf-scrollbar-horizontal .jcf-scrollbar-inc,
.jcf-select-drop .jcf-scrollbar-horizontal {
    display: none;
}

.jcf-select-drop .jcf-scrollbar-vertical .jcf-scrollbar-handle {
    height: 1px;
    width: 6px;
    border-radius: 0;
    background: var(--main-bg-color);
}


.jcf-select-drop .jcf-scrollbar.jcf-inactive .jcf-scrollbar-handle {
    visibility: hidden;
}

/* end scrollbars */

.jcf-list-content .jcf-option-placeholder {
    display: none;
}

/* end custom select */
.search-box input {
    position: relative;
    top: -2px;
    padding: 0 10px;
}

.search-box i {
    position: relative;
    top: -2px;
}

/* The container */
.ct-container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 22px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 300;
}

/* Hide the browser's default checkbox */
.ct-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: transparent;
    border: 1px solid;
}

/* On mouse-over, add a grey background color */
.ct-container:hover input~.checkmark {
    background-color: var(--main-bg-color);
}

/* When the checkbox is checked, add a blue background */
.ct-container input:checked~.checkmark {
    background-color: var(--sec-bg-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.ct-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.ct-container .checkmark:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.uppr-cat h4 {
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, .87);
    display: inline-block;
    padding: 9px 11px;
    border-radius: 3rem;
    font-size: 15px;
    font-weight: 300;
    margin: 0 5px 10px 0;
}

.uppr-cat h4 a {
    background: #929292;
    border-radius: 50%;
    font-size: 9px;
    color: #fff;
    width: 13px;
    height: 13px;
    display: inline-block;
    text-align: center;
    line-height: 12px;
}

.uppr-cat {
    padding: 0;
}

.uppr-cat button {
    border: 1px solid var(--main-bg-color);
    padding: 8px;
    font-size: 13px;
}

.uppr-cat button:hover {
    background: var(--main-bg-color);
    color: #fff;
}

.btn-clear {
    margin: 40px 0 0 0;
}

.type-id p {
    float: left;
    color: #000;
    font-size: 15px;
}

.type-id span {
    float: right;
    color: #000;
    font-size: 16px;
}

.type-id span:before {
    content: "\f068";
    font-family: fontawesome;
    font-size: 10px;
}

.type-id.tp1 span:before {
    content: "\f067";
}

.type-id {
    width: 100%;
    float: left;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.type-catgrs-txt {
    width: 100%;
    float: left;
    margin: 30px 0 0;
}

#tpe1, #tpe1-mob {
    display: block;
    margin: 30px 0 0 0;
}

#tpe2, #tpe2-mob {
    display: block;
    margin: 30px 0 0 0;
    width: 100%;
    float: left;
}

#tpe3, #tpe3-mob {
    display: block;
    margin: 30px 0 0 0;
    width: 100%;
    float: left;
}

#tpe4, #tpe4-mob {
    display: block;
    margin: 30px 0 0 0;
    width: 100%;
    float: left;
}

.products img {
    width: 250px;
    height: 300px;
    object-fit: cover;
}

.products span {
    position: absolute;
    left: 0px;
    bottom: 50px;
    background: var(--main-bg-color);
    padding: 8px;
    color: #fff;
}

.products {
    position: relative;
    text-align: center;
    margin: 0 0 20px 0;
}

.products p {
    margin: 5px 0 0;
    height: 25px;
    color: #000;
    text-transform: uppercase;
}

.products p a {
    color: #000;
}

.pro-price {
    margin: 10px 0 0 0 !important;
}

.products-pic {
    position: relative;
}


.cat-box {
    width: 100%;
    float: left;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
    margin: 15px 0 25px 0;
}

.cat-box h2 {
    color: #000;
    font-size: 20px;
    font-weight: 400;
}

.cat-box ul {
    text-align: right;
}

.cat-box ul li {
    display: inline-block;
    padding: 0 0 0 10px;
    font-size: 12px;
}

.cat-box ul li .jcf-select {
    border-bottom: 1px solid var(--main-bg-color) !important;
    padding: 0 0 10px 0;
    width: 130px;
}

.cat-box ul li .jcf-select:before {
    content: "Sort By";
    font-size: 10px;
    color: #bfbcbc;
    opacity: 1;
    top: -10px;
    position: absolute;
}

.cat-box ul li .jcf-select:after {
    font-family: Fontawesome;
    content: "\f0dd";
    position: absolute;
    right: 0;
    color: #757575;
    top: 0;
}

.col-md-12.btn-load-more {
    text-align: center;
    width: 100%;
    float: left;
}

.btn-load-more button {
    border: 1px solid var(--main-bg-color);
    padding: 15px 30px;
    font-size: 16px;
    margin: 20px 0 0 0;
}

.btn-load-more button:hover {
    background: var(--main-bg-color);
    color: #fff;
}

#slider {
    margin: 02;
    border-radius: 3rem !important;
    height: 9px !important;
    background: #f5f5f5;
}

.value {
    position: absolute;
    top: 25px;
    left: 50%;
    margin: 0 0 0 -20px;
    width: 40px;
    text-align: center;
    display: block;

    /* optional */
    font-weight: normal;
    font-size: 12px;
    color: #333;
}

.price-range-both.value {
    width: 100px;
    margin: 0 0 0 -50px;
    top: 26px;
}

.price-range-both {
    display: none;
}

.value i {
    font-style: normal;
}

body div.ui-slider-range.ui-widget-header {
    background: var(--main-bg-color);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #2ecaf9 !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #fff !important;
    border-radius: 50%;
    font-size: 19px;
    border: 1px solid var(--main-bg-color) !important;
    box-shadow: 0;

    &:focus {
        outline: none;
    }
}

span.ui-slider-handle.ui-corner-all.ui-state-default:focus {
    outline: none;
}

.ct-range {
    width: 100%;
    float: left;
    margin: 30px 0 30px 0;
}

a#tpe4 {
    display: block;
    margin: 30px 0 0 0;
    width: 100%;
    float: left;
}

ul.shop-blackcrumbs li a {
    color: #495057;
}

ul.shop-blackcrumbs li {
    display: inline-block;
    font-size: 13px;
    padding: 0 20px 0 0;
    position: relative;
}

ul.shop-blackcrumbs li a:after {
    content: "/";
    position: absolute;
    right: 6px;
}

ul.shop-blackcrumbs li:last-child a:after {
    content: "";
}

.shop-details-txt h2 {
    font-size: 18px;
    font-family: Roboto Condensed, sans-serif;
    margin: 10px 0px;
}

.shop-details-txt p {
    font-size: 12px;
    color: var(--main-bg-color);
    padding: 3px 0 0 0;
}

.shop-details-txt h3 {
    font-family: Roboto, sans-serif;
    color: #000;
    font-size: 17px;
    margin: 10px 0;
}

.products-size p {
    font-size: 13px;
    padding: 3px 0 0 0;
}

.products-size ul li {
    display: inline-block;
}

.products-size ul li a {
    display: inline-block;
    padding: 4px 8px;
    cursor: pointer;
    color: #495057 !important;
    border: 1px solid #ccc;
    margin: 0 5px 0 0;
}

.products-color ul li {
    display: inline-block;
}

.products-color ul li a {
    display: inline-block;
    padding: 4px 8px;
    cursor: pointer;
    color: #495057 !important;
    border: 1px solid #ccc;
    margin: 0 5px 0 0;
}

.products-color {
    margin: 15px 0px 30px 0;
}

.products-size {
    margin: 20px 0 0 0;
}

button#sub {
    width: 25px;
    border: 1px solid;
    font-size: 10px;
    height: 30px;
    border-right: 0;
    position: relative;
    top: 1px;
}

button#add {
    width: 25px;
    border: 1px solid;
    font-size: 10px;
    height: 30px;
    border-left: 0;
    position: relative;
    left: -8px;
    position: relative;
    top: 1px;
}

div#field1 input {
    width: 55px;
    border: 1px solid;
    height: 30px;
    text-align: center;
    position: relative;
    left: -3px;
    top: 2px;
}

button#sub:hover {
    background: var(--main-bg-color);
    color: #fff;
    border: 1px solid var(--main-bg-color);
    border-right: 0;
}

button#add:hover {
    background: var(--main-bg-color);
    color: #fff;
    border: 1px solid var(--main-bg-color);
    border-left: 0;
    position: relative;
    top: 1px;
}

.count-box {
    margin: 0 0 10px 0;
    width: 100%;
    float: left;
}

.add-cart-btn {
    float: left;
    margin: 0 0px 0 15px;
}

.add-cart-btn button {
    background: var(--main-bg-color);
    color: #fff;
    border: 0;
    height: 31px;

    text-transform: uppercase;
}

div#field1 {
    float: left;
}

.pro-desc {
    width: 100%;
    float: left;
}

.pro-desc h4 {
    font-family: Roboto Condensed, sans-serif;
}

.products-size ul li a:hover, .products-color ul li a:hover {
    background: var(--main-bg-color);
    color: #fff !important;
}


.slick-vertical .gallery-slide img {
    width: 100%;
    margin: 00;
}

.bid-gallery-nav-wrapper .gallery-slide.slick-slide.slick-current.slick-active {
    border: 1px solid var(--main-bg-color);
}

.bid-gallery-nav-wrapper .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid #dee2e6;
    padding: 5px;
    width: 100% !important;
    margin: 0 0 15px 0;
}

.bid-slider-gallery {
    overflow: hidden;
    height: auto !important;
}

.bid-slider-gallery img {
    width: 100% !important;
    /* height: 60vh; */
}

section.shop-detailss-sec {
    padding: 30px 0;
}

section.shop-detailss-sec .slick-dots {
    bottom: 20px;
}

.slick-dots li {
    background: #abbaca;
}

.slick-dots li.slick-active {
    width: 9px;
    height: 9px;
    position: relative;
    background: #007aff !important;
}

h1, h2, h3, h4, h5, h6 {

    font-family: Roboto Condensed, sans-serif;
}

.related-pro {
    width: 100%;
    float: left;
    margin: 80px 0 60px 0;
}

.related-pro h2 {
    text-align: center;
    margin: 0 0 30px 0;
    position: relative;
    font-size: 25px;
}

.related-pro h2:before {
    display: inline-block;
    content: "";
    border-bottom: 1px solid var(--main-bg-color);
    width: 15%;
    top: -5px;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    left: -10px;
}

.related-pro h2:after {
    display: inline-block;
    content: "";
    border-bottom: 1px solid var(--main-bg-color);
    width: 15%;
    top: -5px;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    right: -10px;
}

.pro-item span {
    position: absolute;
    right: 0px;
    top: 50px;
    background: var(--main-bg-color);
    padding: 8px;
    color: #fff;
    z-index: 99;
}

#inner-pro p {
    font-size: 17px;
}

#inner-pro p a {
    color: #000;
    font-size: 15px;
    font-weight: 700;
}

/* The side navigation menu */
.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 999999;
    /* Stay on top */
    top: 0;
    right: 0;
    background-color: #fff;
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
    padding: 60px 0px 0;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus {
    color: #000;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 26px;
    margin-left: 50px;
    color: #000;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

#overlay {
    position: absolute;
    height: 100%;
    background: #00000094;
    z-index: 999999;
    transition: 0.5s;
    right: 0;
    left: 0;
    display: none;
}

div#mySidenav h2 {
    text-align: center;
    font-size: 17px;
    margin: -45px 0 0 0;
    border-bottom: 1px solid;
    padding: 0 0 15px 0;
}

.row.viewcart-box img {
    width: 100%;
}


.row.viewcart-box .col-md-5 {
    padding: 0;
}

.viewcart-inner h3 {
    font-size: 15px;
    margin: 5px 0;
}

.viewcart-inner span {
    font-size: 12px;
    display: block;
    margin: 0 0 2px 0;
}

.viewcart-inner p {
    font-size: 13px;
    padding: 2px 0 0 0;
}

.price-viewcart p {
    font-size: 12px;
    float: left;
}

.price-viewcart a {
    font-size: 12px;
    float: left;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 0px 0 5px;
}

.row.viewcart-box {
    padding: 5px;
}

.price-viewcart a {
    color: #000;
}

.total-price {
    padding: 5px 20px;
    border-top: 1px solid;
    width: 100%;
}

.total-price p {
    float: left;
    font-size: 12px;
}

.total-price span {
    float: right;
    color: var(--sec-bg-color);
    font-size: 12px;
}

.links-cart a {
    display: block;
    border: 1px solid var(--main-bg-color);
    font-size: 14px;
    width: 80%;
    margin: 0 auto;
    margin-top: 26px;
    text-align: center;
}

.links-cart a+a {
    margin: 0 auto;
    margin-top: 5px;
}

.cart-cart a {
    font-size: 15px;
    color: #000;
    font-weight: bold;
}

.cart-cart {
    text-align: center;
    margin: 5px 0 0 0;
}


.mobile-head {
    font-size: 20px;
    text-align: center;
    margin: 0 0 5px 0;
    display: none;
}

.mobile-price {
    font-size: 20px;
    text-align: center;
    display: none;
}

#ct-var(--sec-bg-color) {
    color: var(--sec-bg-color) !important;
}

li#mobile-slct {
    background-color: #ced4da;
    display: inline-block;
    padding: 15px;
    width: 100%;
    text-transform: uppercase;
}

li#mobile-slct>span {
    font-size: 12px;
    display: inline-block;
    margin: 0 15px 0 0;
}

li#mobile-slct select {
    display: inline-block !important;
}

li#mobile-slct .jcf-select {
    border-bottom: 1px solid;
    padding: 0 0 5px 0;
    position: relative;
    width: 70px;
    margin: 0 !important;
    position: relative;
    top: -5px;
}

li#mobile-slct .jcf-select:before {
    content: "\f0dd";
    position: absolute;
    right: 0;
    font-family: Fontawesome;
    font-size: 15px;
    top: -5px;
}

#mobile-search {
    display: none;
}



.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.96);
}

.overlay-content {
    position: relative;
    top: 20%;
    width: 90%;
    text-align: center;
    margin-top: 30px;
    margin: auto;
}

.overlay .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    cursor: pointer;
    color: white;
    background: var(--main-bg-color);
    padding: 7px 19px;
}

.overlay .closebtn:hover {
    color: #ccc;
}

.overlay input[type=text] {
    padding: 10px 0 5px;
    font-size: 17px;
    display: inline-block;
    border: none;
    width: 85%;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--main-bg-color);
    outline: 0px;
}



.overlay button {
    width: 8%;
    padding: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #000;
    display: inline-block;
    border-radius: 0;
    margin: 0;
}


.overlay-content form:before {
    content: "Search";
    position: absolute;
    font-size: 16px;
    top: -10px;
}

.mobile-filter {
    width: 100%;
    float: left;
    margin: 0 0 20px 0;
    padding: 0 10px;
}

.mobile-filter ul li a {
    color: var(--sec-bg-color);
    background-color: #f8f9fa;
    padding: 10px 20px;
    display: inline-block;
    border: 1px solid #dee2e6;
    font-size: 13px;
    margin: 0 -5px;
}

.mobile-filter ul li {
    background-color: #f8f9fa;
    /* float: left; */
    display: inline-block;
}

.mobile-filter ul {
    text-align: center;
    /* width: 90%; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* left: 5px; */
}

.mobile-filter ul li a i {
    margin: 0 5px 0 0;
}


/* The container */
.sort-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 22px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    width: 100%;
    float: left;
}

/* Hide the browser's default radio button */
.sort-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.sort-checkmark {
    position: absolute;
    top: -6px;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 50%;
    border: 2px solid var(--main-bg-color);
}

/* On mouse-over, add a grey background color */
.sort-container:hover input~.sort-checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.sort-container input:checked~.sort-checkmark {
    background-color: transparent;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.sort-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.sort-container input:checked~.sort-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.sort-container .sort-checkmark:after {
    top: 5px;
    left: 4px;
    width: 10px;
    height: 9px;
    border-radius: 50%;
    background: var(--main-bg-color);
}

div#filter-one {
    background: #f8f9fa;
    margin: 0px 0 0 0;
    width: 100%;
    float: left;
}

.srt-price h4 {
    margin: 0;
    font-size: 15px;
    float: left;
}

.srt-price {
    padding: 15px 15px 30px;
    border-bottom: 1px solid #dee2e6;
    /* width: 90%; */
    margin: 0 auto;
    margin-bottom: 10px;
}

.srt-price span {
    float: right;
    margin: 5px 0 0 0;
    font-size: 12px;
}

.sort-div-list {
    padding: 15px 30px;
}

#filter-one, #filter-two {
    display: none;
    background: #f8f9fa;
    margin: 0px 0 0 0;
    width: 100%;
    float: left;
}

.mob-srt {
    padding: 0 15px !important;
    border: 0 !important;
    margin: -10px 0 0 0;
}

div#filter-three {
    background: #f8f9fa;
    margin: 0px 0 0 0;
    width: 100%;
    float: left;
    display: none;
    padding: 0 0 25px 0;
}

.mob-srt h4 {
    margin: 0 0 20px 0;
}

.mobile-filter {
    width: 100%;
    float: left;
    margin: 0 0 20px 0;
    padding: 0 10px;
    display: none;
}


div#filter-three .srt-price span {
    margin: 0px 0 0 0;
}

.phone-mobile {
    display: none;
}

section.home-pro-slider {
    padding: 0;

}

.home-pro-slider h2 {
    text-align: center;
    margin: 0 0 30px 0;
    position: relative;
    font-size: 25px;
}

.home-pro-slider h2:before {
    display: inline-block;
    content: "";
    border-bottom: 1px solid var(--main-bg-color);
    width: 15%;
    top: -5px;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    left: -10px;
}

.home-pro-slider h2:after {
    display: inline-block;
    content: "";
    border-bottom: 1px solid var(--main-bg-color);
    width: 15%;
    top: -5px;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    right: -10px;
}

.home-pro-slider .slick-next {
    right: -30px !important;
    z-index: 999;
}


.home-pro-slider .slick-prev {
    left: -30px !important;
    z-index: 999;
}


.home-pro-slider .slick-dots {
    display: none !important
}

.cstm {
    padding: 20px 20px 25px;
    display: grid;
}

.slider_box, .main-section-grid, .left-grid {
    content: "";
    clear: both;
    display: table;
}

.left-grid {
    width: 50%;
    float: left;
}

.left-child {
    width: 50%;
    float: left;
    padding: 2%;
    position: relative;
}

.left-child .cstm_btn {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    display: none;
}

.left-child .cstm_btn button {
    background-color: #fff;
    color: #000;
    border-color: #000;
    border: none;
}

.cstm_btn span {
    display: block;
    font-weight: bold;
    font-size: 16px;
}

.left-child img {
    width: 100%;
}

.right-grid {
    width: 50%;
    float: left;
    position: relative;
}

.right-child .cstm_btn {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    display: none;
}

.right-child .cstm_btn button {
    background-color: #fff;
    color: #000;
    border-color: #000;
    border: none;
}

.right-child {
    padding: 2%;
}

.right-child img {
    width: 100%;
}

.left-child .animate,
.right-child .animate {
    position: relative;
    display: block;
    overflow: hidden;
}

.animate img {
    transition: all .7s ease;
}

.animate:hover img {
    transform: scale3d(1.1, 1.1, 1);
}

/* nav bar 2 */
div#navbar {
    float: none
}

#header2 ul.nav.navbar-nav.header2 {
    float: right !important;
}

#header2navbar {
    /* border-top:2px solid var(--main-bg-color); */
    /* margin-top:-2px */
}

#header2icons {

    padding-top: 29%;
}

#header2icons #cartheader a, #header2icons #cartheader i {
    font-size: 18px;
}

#mobileheader {
    display: none;
}

@media only screen and (max-width: 786px) {
    #header2 {
        display: none;
    }

    #header1 {
        display: none;
    }

    #mobileheader {
        display: block;
    }

    #add_cart {
        margin-top: 2%;
    }

    p i.fa.fa-star {
        margin-top: 11px;
    }

    /*.products img {*/
    /*    width: 95% !important;*/
    /*    height: auto !important;*/
    /*}*/

}

/* customer navbar */
.content-wrapper {
    padding: 2%;
    border: whitesmoke;
    min-height: 75vh;
}

.content-wrapper .sidebar {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    padding: 10px;
}

.sidebar .links .link a {

    display: block;
    padding: 15px 4px;
    font-size: 1.7rem;
    color: var(--sec-bg-color);
    display: flex;
    border-radius: 4px;
    padding-left: 10px;
}

.sidebar .links .link a:hover {
    background-color: var(--sec-bg-color);
    color: #fff;
}

.sidebar .links .link a i {
    flex: 10%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sidebar .links .link a span {
    margin-left: 10px;
    flex: 90%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.content .content-title {
    color: var(--main-bg-color);
}

.content .content-section {
    margin-top: 2%;
}

.content {
    padding: 0px;
    padding-left: 3%;
}

.content2 {
    padding: 0px;
    padding: 3%;
    padding-top: 1.6%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(0, 0, 0, .2);
}

.dashboard-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(0, 0, 0, .2);
    padding: 8%;
    margin-bottom: 20px;

}

.dashboard-card .card-content {
    float: right;
    text-align: end;
}

.dashboard-card .card-content .card-count {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.dashboard-card .card-icon i {
    font-size: 3em;
    color: #eee;
}

#ordertable {
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#ordertable th, #ordertable td {
    padding: 2% 4%;
}

#ordertable tbody tr:nth-child(even) {
    background-color: whitesmoke;
}

#ordertable thead tr {
    background-color: var(--sec-bg-color);
    color: white;
}

@media only screen and (max-width: 786px) {
    .content-wrapper {
        padding: 9% !important;
    }

    .content-wrapper .sidebar {
        margin-bottom: 6% !important;
    }

    .content-wrapper .content2 {
        padding: 4% 7%;
    }

}

.products-pic img {
    width: -webkit-fill-available;
}