:root {
    --body-background: #ffffff;
    --primary-text-color: #ffffff;
    --secondary-text-color: #ffffff;
    --black: #000000;
    --darker-gray: #3D3D3D;
    --dark-gray: #777777;
    --gray: #555555;
    --light-gray: #cccccc;
    --lighter-gray: #dfdfdf;
    --primary-color: #000000;
    --secondary-color: #da2a38;
    --primary-darker: #000000;
    --secondary-darker: #da2a38;
    --large: 25px;
    --medium: 20px;
    --regular: 16px;
    --small: 14px;
    --full-width: 100%;
    --wide-desktop: 1400px;
    --desktop: 1280px;
    --regular-desktop: 1140px;
    --secondary-color-h: 178;
    --secondary-color-s: 45%;
    --secondary-color-l: 53%;
    --opacity: 1;
    --lighten-value: 1.2;
    --darken-value: 0.8
}

.zoom:hover {
    background: var(--secondary-color);
    background: rgba(var(--secondary-color), 0.75)
}

.page-header {
    border: none
}

.page-header h1 {
    color: var(--primary-color);
    display: inline-block;
    border-bottom: 2px solid var(--primary-color) !important;
    border-color: var(--primary-color) !important
}

.page-header h1 small {
    color: var(--primary-color)
}

.page-section-header {
    color: var(--dark-gray)
}

.page-section-header span {
    color: #333
}

.page-sub-header {
    color: var(--darker-gray)
}

.table .thead-light th,
.table .thead th,
.table thead th {
    color: var(--dark-gray) !important;
    background: rgba(0, 0, 0, 0);
    border-bottom-color: var(--dark-gray)
}

a {
    color: #333;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

a:hover {
    color: var(--primary-color);
    text-decoration: none
}

.btn {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    white-space: normal;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active:focus {
    -webkit-box-shadow: 0 0 0 0 #fff;
    -moz-box-shadow: 0 0 0 0 #fff;
    box-shadow: 0 0 0 0 #fff
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color)
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    background: color-mix(in srgb, #000000 15%, var(--primary-color));
    border-color: color-mix(in srgb, #000000 15%, var(--primary-color))
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--primary-color);
    border-color: var(--primary-color);
    opacity: .65;
    filter: alpha(opacity=65)
}

.btn-info {
    background: var(--secondary-color);
    border-color: var(--secondary-color)
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active:focus {
    background: color-mix(in srgb, #000000 15%, var(--secondary-color));
    border-color: color-mix(in srgb, #000000 15%, var(--secondary-color))
}

.btn-info.disabled,
.btn-info:disabled {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    opacity: .65;
    filter: alpha(opacity=65)
}

.btn-secondary {
    background: var(--darker-gray);
    border-color: var(--darker-gray)
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    background: color-mix(in srgb, #000000 20%, var(--darker-gray));
    border-color: color-mix(in srgb, #000000 20%, var(--darker-gray))
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    background: var(--darker-gray);
    border-color: var(--darker-gray);
    opacity: .65;
    filter: alpha(opacity=65)
}

.btn-success {
    background: var(--secondary-color);
    border-color: var(--secondary-color)
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active:focus {
    background: color-mix(in srgb, #000000 15%, var(--secondary-color));
    border-color: color-mix(in srgb, #000000 15%, var(--secondary-color))
}

.btn-success.disabled,
.btn-success:disabled {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    opacity: .65;
    filter: alpha(opacity=65)
}

.btn-outline-primary {
    background: rgba(0, 0, 0, 0);
    border-color: var(--primary-color);
    color: var(--primary-color)
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

.btn-outline-secondary {
    background: rgba(0, 0, 0, 0);
    border-color: var(--darker-gray);
    color: var(--darker-gray)
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
    background: var(--darker-gray);
    color: #fff;
    border-color: var(--darker-gray)
}

.btn-outline-info {
    background: rgba(0, 0, 0, 0);
    border-color: var(--secondary-color);
    color: var(--secondary-color)
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active:focus {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color)
}

.btn-link {
    color: var(--dark-gray);
    word-break: break-word
}

.btn-link:hover,
.btn-link:focus {
    color: var(--primary-color)
}

.btn-link:disabled,
.btn-link.disabled {
    color: var(--primary-color)
}

.border-primary {
    border-color: var(--primary-color) !important
}

.border-info {
    border-color: var(--secondary-color) !important
}

.border-secondary {
    border-color: var(--darker-gray) !important
}

.loading {
    border-color: rgba(0, 0, 0, 0) var(--secondary-color)
}

#loading-text {
    color: var(--secondary-color)
}

.text-primary {
    color: var(--primary-color) !important
}

.text-info {
    color: var(--secondary-color) !important
}

.text-secondary {
    color: var(--dark-gray) !important
}

.badge-primary {
    background: var(--primary-color)
}

.badge-info {
    background: var(--secondary-color)
}

a.text-primary:hover,
a.text-primary:focus {
    color: color-mix(in srgb, #000 15%, var(--primary-color)) !important
}

a.text-info:hover,
a.text-info:focus {
    color: color-mix(in srgb, #000000 15%, var(--secondary-color)) !important
}

.bg-primary {
    background-color: var(--primary-color) !important
}

.bg-info {
    background-color: var(--secondary-color) !important
}

.bg-secondary {
    background-color: var(--darker-gray) !important
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-Color: #f2f2f2;
    color: var(--secondary-color) !important
}

.bootstrap-select .dropdown-menu li.active small {
    color: var(--secondary-color) !important
}

.bootstrap-select .dropdown-toggle small {
    color: var(--primary-color) !important
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none
}

.form-control:focus {
    border-color: var(--secondary-color)
}

.form-group .input-valid~.col-form-label {
    color: var(--secondary-color)
}

.page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color)
}

.tt-dropdown-menu .tt-suggestion.tt-is-under-cursor {
    background-color: var(--secondary-color)
}

.tt-dropdown-menu .tt-suggestion.tt-is-under-cursor strong {
    color: #fff
}

.tt-dropdown-menu .tt-suggestion a {
    color: #333
}

.tt-dropdown-menu .tt-suggestion a strong {
    color: #333
}

.tt-dropdown-menu .tt-suggestion:hover strong {
    color: #fff !important
}

.account-links a:hover .cicon {
    color: var(--secondary-color)
}

.account_dashboard_box h4 {
    color: var(--secondary-color)
}

.bar {
    background-color: var(--primary-color)
}

body {
    font-family: "OpenSans", sans-serif;
    color: var(--dark-gray);
    background: #fff;
    font-size: 14px;
    font-size: 0.875rem
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-family: "OpenSans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    font-size: 1rem
}

h1,
.h1 {
    font-size: 30px;
    font-size: 1.875rem;
    font-family: "OpenSans", sans-serif;
    font-weight: 700
}

h2,
.h2 {
    font-size: 20px;
    font-size: 1.25rem;
    font-family: "OpenSans", sans-serif;
    font-weight: 700
}

h3,
.h3 {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: "OpenSans", sans-serif;
    font-weight: 700
}

.page-header {
    position: relative;
    padding: .5rem 1rem;
    background-image: linear-gradient(270deg, var(--secondary-color) 20%, color-mix(in srgb, #000000 15%, var(--secondary-color)) 70%, color-mix(in srgb, #000000 35%, var(--secondary-color)) 84%) !important
}

.page-header h1 {
    display: inline-block;
    width: auto;
    color: #fff;
    padding: 0;
    border-bottom: 0 !important;
    z-index: 2;
}

.page-header h1 small {
    font-size: 65%;
    font-family: "OpenSans", sans-serif;
    font-weight: 600;
    color: #fff !important
}

.page-header h1 a {
    text-transform: capitalize
}

.page-header::before {
    content: "";
    background: url("") no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto 100% !important;
    background-position: center right;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("../images/page_header_bg.svg") !important
}

.page-header .btn-info {
    position: relative;
    background: var(--primary-color);
    border-color: var(--primary-color)
}

.page-header .btn-info:hover,
.page-header .btn-info:focus,
.page-header .btn-info:not(:disabled):not(.disabled):active,
.page-header .btn-info:not(:disabled):not(.disabled).active,
.page-header .btn-info:not(:disabled):not(.disabled):active:focus {
    background: color-mix(in srgb, #000000 15%, var(--primary-color));
    border-color: color-mix(in srgb, #000000 15%, var(--primary-color))
}

.page-header .btn-info.disabled,
.page-header .btn-info:disabled {
    background: var(--primary-color);
    border-color: var(--primary-color);
    opacity: .65;
    filter: alpha(opacity=65)
}

.page-header .btn-link {
    position: relative;
    background-color: #fff;
    display: inline-flex;
    align-items: center
}

body:has(.steps) .page-header::before {
    background-image: none !important
}

b,
strong,
.text-bold,
.font-weight-bold {
    font-family: "OpenSans", sans-serif;
    font-weight: 700
}

.font-extra-bold {
    font-family: "OpenSans", sans-serif;
    font-weight: 800
}

.text-semi-bold {
    font-family: "OpenSans", sans-serif;
    font-weight: 600
}

.after-line:after {
    background: #ccc;
    border-left: 5px solid var(--secondary-color)
}

.card .thumbnail {
    border-radius: .625;
    overflow: hidden
}

.card .quick_checkout_hover_effect {
    border-radius: .625;
    overflow: hidden
}

.card-footer .btn {
    box-shadow: 0 .5rem 1.313rem rgba(0, 0, 0, .1607843137)
}

.card-title {
    color: var(--darker-gray)
}

.card-title a.btn-link {
    color: var(--secondary-color) !important
}

.card-title a.btn-link:hover {
    color: var(--primary-color) !important
}

.carousel-control-prev-icon {
    width: 20px;
    background-image: none
}

.carousel-control-next-icon {
    width: 20px;
    background-image: none
}

#top-banner .carousel-control-prev,
#top-banner .carousel-control-next,
.carouselimages .carousel-control-prev,
.carouselimages .carousel-control-next {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    background: #fff;
    margin: auto
}

#top-banner .carousel-control-next,
.carouselimages .carousel-control-next {
    right: 20px
}

#top-banner .carousel-control-prev,
.carouselimages .carousel-control-prev {
    left: 20px
}

#top-banner .carousel-control-prev-icon::before,
.carouselimages .carousel-control-prev-icon::before {
    content: "";
    font-family: "Font Awesome 6 Pro";
    font-size: 22px;
    color: var(--secondary-color);
    line-height: 1
}

#top-banner .carousel-control-next-icon::before,
.carouselimages .carousel-control-next-icon::before {
    content: "";
    font-family: "Font Awesome 6 Pro";
    font-size: 22px;
    color: var(--secondary-color);
    line-height: 1
}

.card-title a:not(.btn) {
    color: #333 !important;
    font-size: 14px;
    font-size: 0.875rem
}

.card-title a:not(.btn):hover {
    color: var(--primary-color) !important
}

.text-body {
    color: #fff !important
}

.middle-header .cart {
    position: relative
}

.middle-header .cart span {
    position: absolute;
    top: 0;
    right: 0
}

.middle-header .header-search .input-group-append {
    margin-left: 0
}

.middle-header .navbar-brand {
    max-width: 150px
}

@media only screen and (min-width: 1024px) {
    .middle-header .navbar-brand {
        max-width: 180px
    }
}

@media only screen and (min-width: 1248px) {
    .middle-header .navbar-brand {
        max-width: 203px
    }
}

.middle-header .navbar-brand img {
    max-width: 100%;
    max-height: none
}

.header-content .bg-info {
    background: linear-gradient(270deg, var(--secondary-color) 20%, color-mix(in srgb, #000000 15%, var(--secondary-color)) 70%, color-mix(in srgb, #000000 35%, var(--secondary-color)) 84%) !important;
    position: relative
}

.header-content .bg-info p {
    font-family: "OpenSans-SemiBold", sans-serif;
    font-size: 16px;
    font-size: 1rem
}

@media only screen and (min-width: 1024px) {
    .header-content .bg-info p {
        font-size: 18px;
        font-size: 1.125rem
    }
}

@media only screen and (min-width: 1440px) {
    .header-content .bg-info p {
        font-size: 24px;
        font-size: 1.5rem
    }
}

.header-content .bg-info::before {
    content: "";
    background: url("") no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto 100% !important;
    background-position: center right;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("https://d29hz7my4l83cj.cloudfront.net/opsnewfou/images/contentimages/images/Vector_1_.png") !important
}

.category_bg .page-header {
    margin-bottom: 0
}

.accordion-menu .list-group-item,
.accordion .list-group-item {
    border: 0
}

.accordion-menu .list-group-item>a,
.accordion .list-group-item>a {
    position: relative;
    font-family: "OpenSans", sans-serif;
    color: #3d3d3d !important
}

.accordion-menu .list-group-item>a:after,
.accordion .list-group-item>a:after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 6 Pro";
    right: 10px
}

.accordion-menu .list-group-item>a[aria-expanded=true]:after,
.accordion .list-group-item>a[aria-expanded=true]:after {
    content: ""
}

.accordion-menu .list-group-item>a:hover,
.accordion-menu .list-group-item>a[aria-expanded=true],
.accordion .list-group-item>a:hover,
.accordion .list-group-item>a[aria-expanded=true] {
    color: var(--primary-color) !important
}

.accordion-menu .list-group-item .list-unstyled,
.accordion .list-group-item .list-unstyled {
    margin: 0
}

#sidebar-left.myAccountSidebar .card {
    padding: 1.5rem !important
}

.sidebar .facebook_login {
    margin-bottom: 1rem
}

.sidebar .list-group-item ul li a {
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-size: 14px;
    font-size: 0.875rem;
    color: #3d3d3d !important
}

.sidebar .list-group-item ul li a:before {
    top: auto
}

.sidebar .card {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 0 .8rem !important;
    border: 0 !important;
    background-color: rgba(248, 248, 248, .8) !important;
    box-shadow: none !important
}

.sidebar .card .card-header {
    position: relative;
    border-color: #3d3d3d !important;
    background-color: rgba(248, 248, 248, .8) !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.sidebar .card .card-header .card-title {
    font-family: "OpenSans-Bold", sans-serif
}

.sidebar .card#verticalmenu_sidebar .card-body {
    padding: 0 !important
}

.sidebar .card#myaccount_sidebar .card-body {
    padding: 0 !important
}

.sidebar .card .accordion-menu .list-group-item {
    background-color: rgba(248, 248, 248, .8) !important
}

.sidebar .card .accordion-menu .list-group-item a {
    padding-right: 0 !important;
    padding-left: 0 !important
}

.sidebar .card .accordion-menu .list-group-item a:hover {
    color: var(--secondary-color) !important
}

.sidebar .card .accordion-menu .list-group-item .list-unstyled li {
    padding-bottom: .3rem
}

.sidebar .card .accordion-menu .list-group-item .list-unstyled li a::before {
    display: none
}

#straightmenu .list-group .list-group-item>a {
    font-size: 16px;
    font-size: 1rem
}

#straightmenu .list-group .list-group-item>a:hover {
    color: var(--primary-color) !important
}

#straightmenu .list-group .list-group-item .list-unstyled {
    padding-left: .5rem
}

#straightmenu .list-group .list-group-item .list-unstyled li a {
    font-size: 14px;
    font-size: 0.875rem
}

#straightmenu .list-group .list-group-item .list-unstyled li.active>a,
#straightmenu .list-group .list-group-item .list-unstyled li:hover>a {
    color: var(--primary-color) !important
}

#cssmenu .list-group-item>a {
    color: #555 !important
}

#cssmenu .list-group-item>ul li:hover>a {
    color: var(--primary-color) !important
}

#cssmenu .list-group-item>ul li:hover>ul {
    background: #f8f8f8
}

#cssmenu .list-group-item>ul li.active {
    color: var(--primary-color) !important
}

#cssmenu .list-group-item:hover>a {
    background: #f8f8f8;
    color: var(--primary-color) !important
}

#cssmenu .list-group-item:hover>ul {
    background: #f8f8f8
}

.navbar {
    z-index: 999;
    background: #fff
}

.navbar .navbar-nav {
    margin-right: auto !important;
    margin-left: auto !important
}

.navbar .navbar-nav .nav-item>.nav-link {
    color: #333 !important;
    border-top: 1px solid rgba(0, 0, 0, 0);
    padding: .75rem;
    position: relative;
    font-family: "OpenSans", sans-serif;
    font-weight: 600
}

@media only screen and (min-width: 768px) {
    .navbar .navbar-nav .nav-item>.nav-link {
        padding: .75rem
    }
}

.navbar .navbar-nav .nav-item>.nav-link::before {
    content: "";
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    height: 2px;
    width: 40px;
    right: 0;
    left: 0;
    bottom: 0px;
    display: block;
    margin: auto;
    -webkit-transition: .5s ease all;
    -moz-transition: .5s ease all;
    -ms-transition: .5s ease all;
    -o-transition: .5s ease all;
    transition: .5s ease all
}

.navbar .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0
}

.navbar .navbar-nav .nav-item:hover>.nav-link,
.navbar .navbar-nav .nav-item.active>.nav-link {
    color: var(--secondary-color) !important
}

.navbar .navbar-nav .nav-item:hover>.nav-link::before,
.navbar .navbar-nav .nav-item.active>.nav-link::before {
    background-color: var(--secondary-color)
}

.navbar .navbar-nav .nav-item.show>.nav-link {
    color: var(--secondary-color) !important;
    background: #fff
}

.navbar .navbar-nav .nav-item.position-static .dropdown-menu a {
    padding: .25rem 1rem
}

.navbar .navbar-nav .nav-item .dropdown-menu {
    border: 0;
    -webkit-box-shadow: 0 0 0 0 #fff;
    -moz-box-shadow: 0 0 0 0 #fff;
    box-shadow: 0 0 0 0 #fff;
    margin-top: 0 !important;
    margin: 0
}

@media only screen and (min-width: 768px) {
    .navbar .navbar-nav .nav-item .dropdown-menu {
        -webkit-box-shadow: 0 1px 1px 1px #e0dede;
        -moz-box-shadow: 0 1px 1px 1px #e0dede;
        box-shadow: 0 1px 1px 1px #e0dede
    }
}

.navbar .navbar-nav .nav-item .dropdown-menu .card-columns .card .card-body .nav li a {
    padding: .2rem .8rem
}

.navbar .navbar-nav .nav-item .dropdown-menu li {
    padding-left: 0
}

.navbar .navbar-nav .nav-item .dropdown-menu li>.dropdown-item {
    padding-left: 1.5rem
}

@media only screen and (min-width: 800px) {
    .navbar .navbar-nav .nav-item .dropdown-menu li>.dropdown-item {
        padding: .5rem .8rem
    }
}

.navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu .dropdown-submenu>.dropdown-item {
    padding-left: 2.5rem
}

@media only screen and (min-width: 800px) {
    .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu .dropdown-submenu>.dropdown-item {
        padding: .5rem .8rem
    }
}

.navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu .dropdown-submenu .dropdown-menu li>.dropdown-item {
    padding-left: 3.5rem
}

@media only screen and (min-width: 800px) {
    .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu .dropdown-submenu .dropdown-menu li>.dropdown-item {
        padding: .5rem .8rem
    }
}

.navbar .navbar-nav .nav-item .dropdown-menu li a {
    font-size: 14px;
    font-size: 0.875rem;
    padding: .5rem .8rem
}

.navbar .navbar-nav .nav-item .dropdown-menu li:hover>.dropdown-item {
    color: var(--secondary-color) !important
}

.navbar .navbar-nav .nav-item .dropdown-menu li:hover>.dropdown-item:after {
    color: var(--secondary-color)
}

.navbar .navbar-nav .nav-item .dropdown-menu li:hover>.dropdown-item:hover strong {
    color: var(--secondary-color)
}

.navbar .navbar-nav .nav-item .dropdown-menu .list-unstyled>li.active>a {
    color: var(--secondary-color) !important
}

.navbar .navbar-nav .nav-item.megamenu img {
    max-width: 100%;
    height: auto
}

.navbar .navbar-nav .nav-item.megamenu .dropdown-menu .dropdown-submenu .dropdown-menu {
    background: #fff
}

.navbar .navbar-nav .nav-item.megamenu .dropdown-menu .dropdown-submenu .dropdown-menu a {
    border: 0
}

.navbar .navbar-nav .nav-item.megamenu .dropdown-menu .dropdown-submenu .dropdown-menu .list-unstyled li a:hover {
    color: var(--secondary-color) !important
}

@media only screen and (min-width: 768px) {
    .dropdown.show .nav-link::after {
        display: none
    }
}

#myaccount_menu li a {
    font-size: 15px;
    font-size: 0.9375rem;
    color: var(--secondary-color)
}

#myaccount_menu li.active a,
#myaccount_menu li:hover a {
    color: var(--primary-color) !important
}

.home_page_body .body-container {
    padding-top: 0
}

.home_page_body .page-header h1 {
    display: inline-block;
    width: auto
}

.body-container {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 2rem
}

.home_page_body .body-container::after {
    height: 108%
}

.home_page_body .middle-footer-content p {
    margin: 0 !important
}

.home_page_body .main_background {
    background-image: none
}

.search-toggle {
    z-index: 9
}

#InfoTab {
    background-color: #fff;
    padding: 15px
}

#InfoTab .nav-tabs .nav-item .nav-link {
    color: #333;
    border: 0;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
    padding: .8rem 1rem;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    text-transform: uppercase;
    font-family: "OpenSans", sans-serif;
    font-weight: 600
}

#InfoTab .nav-tabs .nav-item .nav-link.active,
#InfoTab .nav-tabs .nav-item .nav-link:hover {
    background: rgba(0, 0, 0, 0);
    color: var(--secondary-color)
}

.nav-customtabs li .nav-link {
    color: #333;
    font-size: 16px;
    font-size: 1rem;
    text-transform: uppercase;
    font-family: "OpenSans", sans-serif;
    font-weight: 600
}

.nav-customtabs li .nav-link.active,
.nav-customtabs li .nav-link:hover {
    color: var(--primary-color)
}

.nav-customtabs li .nav-link.active:after,
.nav-customtabs li .nav-link:hover:after {
    background: var(--primary-color)
}

.tab-content {
    padding-top: 1rem
}

.top-links li a {
    padding: 0 .5rem;
    font-size: 16px;
    font-size: 1rem;
    font-family: "OpenSans", sans-serif;
    font-weight: 400;
    color: #fff
}

.top-links li a:hover {
    color: rgba(255, 255, 255, .85)
}

.top-links li a .badge-primary {
    border: 1px solid #fff
}

.top-links li .navbar-text {
    padding: 0;
    color: #fff
}

.top-links li .navbar-text .dropdown-menu {
    right: 0%;
    left: unset !important
}

.after_line {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-size: 1.125rem;
    color: var(--primary-color)
}

.after_line:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: auto;
    height: 2px;
    width: 100%;
    margin: 0 auto;
    background: var(--primary-color)
}

@media only screen and (min-width: 768px) {
    .after_line {
        font-size: 24px;
        font-size: 1.5rem
    }
}

@media only screen and (min-width: 1248px) {
    .after_line {
        font-size: 30px;
        font-size: 1.875rem
    }
}

.header_cms_page .about_all p {
    font-size: 14px;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.8
}

@media only screen and (min-width: 768px) {
    .header_cms_page .about_all p {
        font-size: 16px;
        font-size: 1rem
    }
}

.header_cms_page .offer_block.green {
    background: #e2fffe
}

.header_cms_page .offer_block.orange {
    background: #ffe7e0
}

.header_cms_page .offer_block.blue {
    background: #dbe7ff
}

.header_cms_page .offer_block .text-block h3 {
    font-size: 20px;
    font-size: 1.25rem;
    color: #000
}

@media only screen and (min-width: 800px) {
    .header_cms_page .offer_block .text-block h3 {
        font-size: 30px;
        font-size: 1.875rem
    }
}

.header_cms_page .offer_block .text-block span {
    font-size: 14px;
    font-size: 0.875rem;
    text-transform: uppercase
}

@media only screen and (min-width: 768px) {
    .header_cms_page .offer_block .text-block span {
        font-size: 16px;
        font-size: 1rem
    }
}

.header_cms_page .offer_block .offer-img img {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.header_cms_page .offer_block:hover .offer-img img {
    -webkit-filter: grayscale(80%);
    -moz-filter: grayscale(80%);
    -ms-filter: grayscale(80%);
    -o-filter: grayscale(80%);
    filter: grayscale(80%)
}

.header_cms_page .browse_category .slider-cat .slick-slide {
    margin: .5rem 1rem;
    -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, .2);
    -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, .2);
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, .2)
}

.header_cms_page .browse_category .slider-cat .slick-slide a {
    display: block;
    -webkit-transition: animation .3s ease;
    -moz-transition: animation .3s ease;
    -ms-transition: animation .3s ease;
    -o-transition: animation .3s ease;
    transition: animation .3s ease
}

.header_cms_page .browse_category .slider-cat .slick-slide .cat-block:hover img {
    -webkit-animation: swing 1s ease-out 75ms;
    -moz-animation: swing 1s ease-out 75ms;
    -ms-animation: swing 1s ease-out 75ms;
    -o-animation: swing 1s ease-out 75ms;
    animation: swing 1s ease-out 75ms;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center
}

.header_cms_page .browse_category .slider-cat:not(.slick-initialized) {
    display: flex
}

.header_cms_page .browse_category .slider-cat .slick-prev {
    left: -10px !important
}

@media only screen and (min-width: 480px) {
    .header_cms_page .browse_category .slider-cat .slick-prev {
        left: -25px !important
    }
}

.header_cms_page .browse_category .slider-cat .slick-next {
    right: -10px !important
}

@media only screen and (min-width: 480px) {
    .header_cms_page .browse_category .slider-cat .slick-next {
        right: -25px !important
    }
}

.our_clients img {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.our_clients img:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%)
}

.footer-content ul {
    padding: 0;
    margin: 0
}

.footer-content ul li {
    display: block;
    list-style-type: none;
    width: 100%
}

.footer-content ul li a {
    padding: .3rem 0;
    display: inline-block;
    color: #333
}

.footer-content ul li a:hover,
.footer-content ul li a.active {
    color: var(--secondary-color)
}

.footer-content .bottom-links .list-inline-item {
    display: block;
    margin: 0;
    padding: 0
}

.footer-content h4 {
    text-transform: uppercase;
    position: relative;
    margin-bottom: 1rem !important;
    padding-bottom: .8rem;
    color: var(--dark-gray);
    font-family: "OpenSans", sans-serif;
    font-weight: 700
}

.footer-content h4:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    width: 55px;
    background: var(--secondary-color)
}

.footer-content .card {
    border: 0;
    margin: 0 !important
}

.footer-content .card .card-header {
    padding: 0;
    background: rgba(0, 0, 0, 0);
    border: 0
}

.footer-content .card .card-body {
    padding: .3rem 0
}

footer {
    background-color: #ecfffe !important
}

footer ul {
    padding: 0;
    margin: 0
}

footer ul li {
    display: inline-block;
    margin: 0 .8rem
}

footer ul li a {
    font-size: 18px;
    font-size: 1.125rem;
    color: var(--darker-gray)
}

footer ul li a:hover {
    color: var(--secondary-color)
}

footer .text-dark {
    color: #fff !important
}

.browse_design,
.upload_design,
.custom_design,
.hire_designer,
.quote_product {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    border-width: 2px !important
}

.browse_design .h4,
.upload_design .h4,
.custom_design .h4,
.hire_designer .h4,
.quote_product .h4 {
    text-transform: uppercase
}

.browse_design a,
.upload_design a,
.custom_design a,
.hire_designer a,
.quote_product a {
    padding: 1rem !important
}

.browse_design {
    background: var(--primary-color);
    border-color: var(--primary-color) !important
}

.browse_design a {
    color: #fff !important
}

.browse_design a span {
    color: #fff !important
}

.browse_design a i {
    background: rgba(0, 0, 0, 0) !important
}

.browse_design:hover {
    background: rgba(0, 0, 0, 0)
}

.browse_design:hover a {
    color: var(--primary-color) !important
}

.browse_design:hover a span {
    color: var(--primary-color) !important
}

.upload_design {
    background: var(--secondary-color);
    border-color: var(--secondary-color) !important
}

.upload_design a {
    color: #fff !important
}

.upload_design a span {
    color: #fff !important
}

.upload_design a i {
    background: rgba(0, 0, 0, 0) !important
}

.upload_design:hover {
    background: rgba(0, 0, 0, 0)
}

.upload_design:hover a {
    color: var(--secondary-color) !important
}

.upload_design:hover a span {
    color: var(--secondary-color) !important
}

.custom_design {
    background: var(--dark-gray);
    border-color: var(--dark-gray) !important
}

.custom_design a {
    color: #fff !important
}

.custom_design a span {
    color: #fff !important
}

.custom_design a i {
    background: rgba(0, 0, 0, 0) !important
}

.custom_design:hover {
    background: rgba(0, 0, 0, 0)
}

.custom_design:hover a {
    color: var(--dark-gray) !important
}

.custom_design:hover a span {
    color: var(--dark-gray) !important
}

.hire_designer {
    background: var(--gray);
    border-color: var(--gray) !important
}

.hire_designer a {
    color: #fff !important
}

.hire_designer a span {
    color: #fff !important
}

.hire_designer a i {
    background: rgba(0, 0, 0, 0) !important
}

.hire_designer:hover {
    background: rgba(0, 0, 0, 0)
}

.hire_designer:hover a {
    color: var(--gray) !important
}

.hire_designer:hover a span {
    color: var(--gray) !important
}

.quote_product {
    background: var(--gray);
    border-color: var(--gray) !important
}

.quote_product a {
    color: #fff !important
}

.quote_product a span {
    color: #fff !important
}

.quote_product a i {
    background: rgba(0, 0, 0, 0) !important
}

.quote_product:hover {
    background: rgba(0, 0, 0, 0)
}

.quote_product:hover a {
    color: var(--gray) !important
}

.quote_product:hover a span {
    color: var(--gray) !important
}

.btn-title-text.browse_design,
.btn-title-text.upload_design,
.btn-title-text.custom_design,
.btn-title-text.quote_product,
.btn-title-text.hire_designer {
    padding: 0 !important
}

.btn-title-text.browse_design:hover,
.btn-title-text.upload_design:hover,
.btn-title-text.custom_design:hover,
.btn-title-text.quote_product:hover,
.btn-title-text.hire_designer:hover {
    -webkit-box-shadow: 0 0 5px 1px #73797d;
    -moz-box-shadow: 0 0 5px 1px #73797d;
    box-shadow: 0 0 5px 1px #73797d
}

.btn-title-text.browse_design a,
.btn-title-text.upload_design a,
.btn-title-text.custom_design a,
.btn-title-text.quote_product a,
.btn-title-text.hire_designer a {
    padding: .5rem 1rem !important
}

.btn-title-text .h4 {
    font-size: 18px;
    font-size: 1.125rem
}

.btn-title-text.browse_design {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important
}

.btn-title-text.browse_design a .h4,
.btn-title-text.browse_design a i {
    color: #fff !important
}

.btn-title-text.browse_design:hover {
    background: rgba(0, 0, 0, 0) !important
}

.btn-title-text.browse_design:hover a .h4,
.btn-title-text.browse_design:hover a i {
    color: var(--primary-color) !important
}

.btn-title-text.upload_design {
    background: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important
}

.btn-title-text.upload_design a .h4,
.btn-title-text.upload_design a i {
    color: #fff !important
}

.btn-title-text.upload_design:hover {
    background: rgba(0, 0, 0, 0) !important
}

.btn-title-text.upload_design:hover a .h4,
.btn-title-text.upload_design:hover a i {
    color: var(--secondary-color) !important
}

.btn-title-text.custom_design {
    background: var(--dark-gray) !important;
    border: 1px solid var(--dark-gray) !important
}

.btn-title-text.custom_design a .h4,
.btn-title-text.custom_design a i {
    color: #fff !important
}

.btn-title-text.custom_design:hover {
    background: rgba(0, 0, 0, 0) !important
}

.btn-title-text.custom_design:hover a .h4,
.btn-title-text.custom_design:hover a i {
    color: var(--dark-gray) !important
}

.btn-title-text.hire_designer {
    background: var(--gray) !important;
    border: 1px solid var(--gray) !important
}

.btn-title-text.hire_designer a .h4,
.btn-title-text.hire_designer a i {
    color: #fff !important
}

.btn-title-text.hire_designer:hover {
    background: rgba(0, 0, 0, 0) !important
}

.btn-title-text.hire_designer:hover a .h4,
.btn-title-text.hire_designer:hover a i {
    color: var(--gray) !important
}

.btn-title-text.quote_product {
    background: var(--gray) !important;
    border: 1px solid var(--gray) !important
}

.btn-title-text.quote_product a .h4 {
    color: #fff !important
}

.btn-title-text.quote_product:hover {
    background: rgba(0, 0, 0, 0) !important
}

.btn-title-text.quote_product:hover a .h4 {
    color: var(--gray) !important
}

.middle-header .navbar-brand {
    max-width: 150px
}

@media only screen and (min-width: 768px) {
    .middle-header .navbar-brand {
        max-width: 150px
    }
}

@media only screen and (min-width: 1024px) {
    .middle-header .navbar-brand {
        max-width: 200px
    }
}

.navbar-toggler-icon {
    height: inherit
}

.navbar-brand {
    max-width: 150px
}

.navbar-brand img {
    max-height: none;
    max-width: 100%
}

.flip3d .card-header {
    background: #ddd
}

.flip3d .card-header h3 {
    font-family: "OpenSans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    font-size: 1rem;
    color: #555
}

.flip3d .card-header a:hover h3 {
    color: var(--secondary-color)
}

.product-box .card {
    background-color: rgba(0, 0, 0, 0);
    border: none
}

.product-box .card .thumbnail {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.product-box .card .card-body {
    padding: .8rem 0 0 0 !important
}

.product-box .card .card-body .card-title {
    font-family: "OpenSans", sans-serif;
    font-weight: 700;
    color: color-mix(in srgb, #000000 15%, var(--secondary-color)) !important
}

@media only screen and (min-width: 1440px) {
    .product-box .card .card-body .card-title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.product-box .card .card-body .card-text strong {
    display: block;
    font-size: 16px;
    font-size: 1rem
}

.product-box .card .card-body .card-text p {
    font-size: 16px;
    font-size: 1rem
}

.product-box .card.slide-hover .card-body .card-title,
.product-box .card.triangle-slide-overlay .card-body .card-title {
    color: #fff !important
}

.product-box .card.slide-hover .card-body .card-text,
.product-box .card.triangle-slide-overlay .card-body .card-text {
    color: #fff
}

.product-box .card.slide-hover .card-body .card-text strong,
.product-box .card.triangle-slide-overlay .card-body .card-text strong {
    color: #fff
}

.product-box .card.slide-hover .card-body .card-title {
    background: var(--secondary-color) !important
}

.product-box .card.slide-hover .card-body .card-title:after {
    background: mixb(var(--secondary-color), var(--opacity))
}

.product-box .card.slideup:hover {
    border-color: var(--secondary-color)
}

.product-box .card.slideup .card-body {
    background: var(--secondary-color) !important
}

.product-box .card.slideup .card-body .card-title {
    color: #fff !important
}

.product-box .card .card-footer {
    text-align: start !important;
    padding: 0 !important
}

.product-box .card .card-footer i {
    display: none
}

.slide-hover .card-title {
    color: #fff !important
}

.hover-box-shadow .card-title {
    color: #555 !important;
    font-family: "OpenSans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    font-size: 1rem
}

@-webkit-keyframes swing {
    20% {
        -moz-transform: rotate3d(0, 0, 1, 15deg);
        -o-transform: rotate3d(0, 0, 1, 15deg);
        -ms-transform: rotate3d(0, 0, 1, 15deg);
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -moz-transform: rotate3d(0, 0, 1, -10deg);
        -o-transform: rotate3d(0, 0, 1, -10deg);
        -ms-transform: rotate3d(0, 0, 1, -10deg);
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -moz-transform: rotate3d(0, 0, 1, 5deg);
        -o-transform: rotate3d(0, 0, 1, 5deg);
        -ms-transform: rotate3d(0, 0, 1, 5deg);
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -moz-transform: rotate3d(0, 0, 1, -5deg);
        -o-transform: rotate3d(0, 0, 1, -5deg);
        -ms-transform: rotate3d(0, 0, 1, -5deg);
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -moz-transform: rotate3d(0, 0, 1, 0deg);
        -o-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@-moz-keyframes swing {
    20% {
        -moz-transform: rotate3d(0, 0, 1, 15deg);
        -o-transform: rotate3d(0, 0, 1, 15deg);
        -ms-transform: rotate3d(0, 0, 1, 15deg);
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -moz-transform: rotate3d(0, 0, 1, -10deg);
        -o-transform: rotate3d(0, 0, 1, -10deg);
        -ms-transform: rotate3d(0, 0, 1, -10deg);
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -moz-transform: rotate3d(0, 0, 1, 5deg);
        -o-transform: rotate3d(0, 0, 1, 5deg);
        -ms-transform: rotate3d(0, 0, 1, 5deg);
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -moz-transform: rotate3d(0, 0, 1, -5deg);
        -o-transform: rotate3d(0, 0, 1, -5deg);
        -ms-transform: rotate3d(0, 0, 1, -5deg);
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -moz-transform: rotate3d(0, 0, 1, 0deg);
        -o-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@-ms-keyframes swing {
    20% {
        -moz-transform: rotate3d(0, 0, 1, 15deg);
        -o-transform: rotate3d(0, 0, 1, 15deg);
        -ms-transform: rotate3d(0, 0, 1, 15deg);
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -moz-transform: rotate3d(0, 0, 1, -10deg);
        -o-transform: rotate3d(0, 0, 1, -10deg);
        -ms-transform: rotate3d(0, 0, 1, -10deg);
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -moz-transform: rotate3d(0, 0, 1, 5deg);
        -o-transform: rotate3d(0, 0, 1, 5deg);
        -ms-transform: rotate3d(0, 0, 1, 5deg);
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -moz-transform: rotate3d(0, 0, 1, -5deg);
        -o-transform: rotate3d(0, 0, 1, -5deg);
        -ms-transform: rotate3d(0, 0, 1, -5deg);
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -moz-transform: rotate3d(0, 0, 1, 0deg);
        -o-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@-o-keyframes swing {
    20% {
        -moz-transform: rotate3d(0, 0, 1, 15deg);
        -o-transform: rotate3d(0, 0, 1, 15deg);
        -ms-transform: rotate3d(0, 0, 1, 15deg);
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -moz-transform: rotate3d(0, 0, 1, -10deg);
        -o-transform: rotate3d(0, 0, 1, -10deg);
        -ms-transform: rotate3d(0, 0, 1, -10deg);
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -moz-transform: rotate3d(0, 0, 1, 5deg);
        -o-transform: rotate3d(0, 0, 1, 5deg);
        -ms-transform: rotate3d(0, 0, 1, 5deg);
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -moz-transform: rotate3d(0, 0, 1, -5deg);
        -o-transform: rotate3d(0, 0, 1, -5deg);
        -ms-transform: rotate3d(0, 0, 1, -5deg);
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -moz-transform: rotate3d(0, 0, 1, 0deg);
        -o-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes swing {
    20% {
        -moz-transform: rotate3d(0, 0, 1, 15deg);
        -o-transform: rotate3d(0, 0, 1, 15deg);
        -ms-transform: rotate3d(0, 0, 1, 15deg);
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -moz-transform: rotate3d(0, 0, 1, -10deg);
        -o-transform: rotate3d(0, 0, 1, -10deg);
        -ms-transform: rotate3d(0, 0, 1, -10deg);
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -moz-transform: rotate3d(0, 0, 1, 5deg);
        -o-transform: rotate3d(0, 0, 1, 5deg);
        -ms-transform: rotate3d(0, 0, 1, 5deg);
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -moz-transform: rotate3d(0, 0, 1, -5deg);
        -o-transform: rotate3d(0, 0, 1, -5deg);
        -ms-transform: rotate3d(0, 0, 1, -5deg);
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -moz-transform: rotate3d(0, 0, 1, 0deg);
        -o-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.cart a {
    font-size: 24px
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary-color)
}

.treeview li .act {
    color: var(--primary-color) !important
}

.treeview li a:hover {
    color: var(--primary-color) !important
}

#category_list a:hover,
#category_list a.act {
    color: var(--primary-color)
}

#designer_template_category li a:hover,
#designer_template_category li a.p_act {
    color: var(--primary-color)
}

.form-control:focus+.input-group-append .input-group-text {
    border-color: var(--secondary-color)
}

.form-control:focus~.col-form-label {
    color: var(--secondary-color)
}

.breadcrumb_container .breadcrumb {
    margin-bottom: 0
}

.breadcrumb_container .breadcrumb li a {
    color: #333
}

.breadcrumb_container .breadcrumb li a span {
    color: #333 !important
}

.breadcrumb_container .breadcrumb li a:hover {
    color: var(--primary-color)
}

.breadcrumb_container .breadcrumb li.active .a {
    color: var(--primary-color)
}

#product_info .breadcrumb_container .breadcrumb {
    margin-bottom: 1rem
}

.media-filter li a {
    border-color: var(--darker-gray);
    color: var(--darker-gray)
}

.media-filter li a:hover,
.media-filter li a.selected {
    background: var(--darker-gray) !important;
    color: #fff !important
}

.media-filter .media-boxes-drop-down-header {
    border: 1px solid var(--darker-gray)
}

.card-footer .carousel-control-next,
.card-footer .carousel-control-prev {
    width: 7%
}

#product_price h4,
#faq_details h4 {
    color: var(--primary-color) !important
}

.top-header .bootstrap-select {
    margin-left: .5rem !important
}

.top-header .bootstrap-select .dropdown-menu {
    z-index: 9999 !important
}

.top-header .bootstrap-select>.dropdown-toggle {
    padding: 0 .75rem
}

@media only screen and (min-width: 1440px) {
    .container {
        max-width: 1310px
    }
}

.popover.show {
    max-width: 290px !important
}

@media only screen and (min-width: 768px) {
    .popover.show {
        max-width: 350px !important
    }
}

.call-help a {
    color: var(--secondary-color)
}

.call-help a .text-call {
    color: #777
}

.call-help a .text-bold {
    font-size: 16px;
    font-size: 1rem
}

.call-help a:hover,
.call-help a:focus {
    color: var(--primary-color)
}

.call-help a:hover .text-bold,
.call-help a:focus .text-bold {
    color: var(--primary-color)
}

.call-help a:hover .text-call,
.call-help a:focus .text-call {
    color: var(--primary-color)
}

.call-help i {
    font-size: 35px;
    font-size: 2.1875rem
}

.slick-next {
    right: -10px
}

@media only screen and (min-width: 768px) {
    .slick-next {
        right: -25px
    }
}

.slick-prev {
    left: -10px
}

@media only screen and (min-width: 768px) {
    .slick-prev {
        left: -25px
    }
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    font-size: 12px;
    font-size: 0.75rem;
    height: 30px !important;
    width: 30px !important
}

#sitemap ul li a:hover {
    color: var(--primary-color)
}

.bg-light {
    background-color: #e9e9e9 !important
}

.middle_inner_section .card,
#product_list_without_category .card {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0 !important;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.middle_inner_section .card .quick_checkout_hover_effect,
#product_list_without_category .card .quick_checkout_hover_effect {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.middle_inner_section .card .thumbnail,
#product_list_without_category .card .thumbnail {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.middle_inner_section .card .thumbnail img,
#product_list_without_category .card .thumbnail img {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.middle_inner_section .card .thumbnail .card-img-top,
#product_list_without_category .card .thumbnail .card-img-top {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.middle_inner_section .card .corner-triangle,
#product_list_without_category .card .corner-triangle {
    border-top-right-radius: 10px
}

.middle_inner_section .card .card-body,
#product_list_without_category .card .card-body {
    padding: .8rem 0 0 0 !important
}

@media only screen and (min-width: 1440px) {

    .middle_inner_section .card .card-body .card-title,
    #product_list_without_category .card .card-body .card-title {
        font-size: 22px;
        font-size: 1.375rem
    }
}

.middle_inner_section .card .card-body .card-text,
#product_list_without_category .card .card-body .card-text {
    display: none !important
}

.middle_inner_section .card .card-footer,
#product_list_without_category .card .card-footer {
    text-align: start !important;
    padding: 0 !important
}

.middle_inner_section .card .card-footer i,
#product_list_without_category .card .card-footer i {
    display: none
}

#price_calculator {
    padding: .9rem
}

#price_calculator .card-header .card-title .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%
}

#price_calculator .card-header .card-title .row .col-6:first-child {
    font-size: 20px;
    font-size: 1.25rem;
    font-family: "OpenSans", sans-serif;
    font-weight: 700
}

#price_calculator .card-header .card-title .row .col-6.text-right {
    display: none !important
}

#action-btn {
    background-color: #fff;
    margin: 0;
    padding: 15px;
    border-radius: .25rem
}

#category_product_list .cat_desc {
    padding: 1rem 0 0 1rem;
    margin-bottom: 1.5rem
}

@media only screen and (min-width: 768px) {
    .navbar-collapse .navbar-nav .nav-item .dropdown-toggle.nav-link::after {
        display: none
    }
}

.custom-switch .custom-control-input:checked~.custom-control-label::before {
    border-color: var(--primary-color);
    background-color: var(--primary-color)
}

#expreess_product_additional_info #productpricetotal {
    background-color: rgba(0, 0, 0, 0) !important
}

.search_dynamic .header-search .twitter-typeahead {
    width: 100%
}

@media only screen and (min-width: 768px) {
    .search_dynamic .header-search .twitter-typeahead {
        min-width: 320px
    }
}

.search_dynamic .header-search .twitter-typeahead .form-control {
    border: 1px solid #ccc;
    padding-inline: 1.25rem
}

.search_dynamic .header-search .twitter-typeahead .form-control:focus {
    border-color: var(--primary-color)
}

.search_dynamic .header-search .twitter-typeahead::after {
    align-content: center;
    padding-inline: 1rem;
    background: #fff;
    height: 38px;
    border-radius: 0 5px 5px 0;
    top: 0px
}

#home_page .pager li .btn-secondary span.carousel-control-prev-icon:before {
    content: "";
    display: inline-flex;
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    font-size: 22px;
    align-items: center;
    justify-content: center
}

#home_page .pager li .btn-secondary span.carousel-control-next-icon:before {
    content: "";
    display: inline-flex;
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    font-size: 22px;
    align-items: center;
    justify-content: center
}

#home_page .pager li .btn-secondary span {
    align-items: center;
    display: flex !important;
    justify-content: center
}

#home_page .MultiCarousel {
    overflow: unset
}

#home_page .pager li .btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color)
}

#home_page .pager li .btn-secondary:hover {
    background-color: color-mix(in srgb, #000000 15%, var(--secondary-color));
    border-color: color-mix(in srgb, #000000 15%, var(--secondary-color))
}

#related-product .slick-track {
    margin-left: 0
}

.prodefine_quick_checkout .card-footer .price_calculator .div_calculator .prduct_qty {
    height: 1.938rem
}

@media only screen and (min-width: 1024px) {
    .kit_product_info .calc_kit_footer {
        padding-inline: 10px !important
    }
}

.kit_product_info .calc_kit_footer #stock_error_msg {
    margin-bottom: 0;
    margin-right: 10px
}

.steps {
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

.steps ul li a:hover {
    color: inherit;
    color: var(--primary-color)
}

@font-face {
    font-family: "OpenSans";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../fonts/OpenSans-VariableFont_wdth,wght.ttf) format("truetype")
}

/*# sourceMappingURL=theme.css.map */
.navbar-brand img {
    max-height: 100%;
    max-width: 42%;
}
a:hover {
  color: #50bebb;
}


.main_background{background-image:none;}

.page-header h1 {
    display: inline-block;
    width: auto; color:#fff;
}

.header-content .bg-info,
.page-header{
    background: linear-gradient(270deg, rgba(105,198,184,1) 20%, rgba(63,138,148,1) 70%, rgba(33,96,123,1) 84%) !important;
}
.category_bg .page-header {
    margin-bottom: 0;
}
/* 1. The Header Container */
.header-content .bg-info, 
.page-header {
    position: relative;
    background: linear-gradient(270deg, rgb(0 27 74) 20%, rgb(1 25 73) 70%, rgb(1 25 73) 84%) !important;
    z-index: 1;
    overflow: hidden;
}

/* 2. The Design Layer - LOCKED TO THE RIGHT */
.header-content .bg-info::before,
.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;           /* This pins it to the right edge */
    left: auto;          /* Ensures it does NOT stretch from the left */
    width: 30%;         /* Limits the image to only the right 30% of the bar */
    height: 100%;
    
    background-image: url("https://djuqbvg97u5zb.cloudfront.net/jsmbrande/images/contentimages/images/BSS_Category_Headers.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important; /* Keeps the graphic at the very end */
    background-size: cover !important;
    
    z-index: -1;        /* Keeps it behind any text */
    pointer-events: none;
}

/* 3. Text Protection */
.header-content .bg-info > *, 
.page-header > * {
    position: relative;
    z-index: 2;         /* Forces text to the front layer */
}
.middle-header .navbar-brand {
    max-width: 150px !important;
}
.middle-header .navbar-brand .img-fluid {
    max-width: 100%;
    width: 100%;
}
.home_page_body .main_background,
.category_bg{
    background-image: none;
}
#related-product .slick-track {
    margin-left: 0;
}
.sidebar .card{border-radius:5px !important;box-shadow:none !important;}

.sidebar .card,
.sidebar .card .card-header,
.sidebar .card .card-body,
.sidebar .card .accordion-menu .list-group-item{
    background-color: rgba(248 248 248 / 80%) !important;
}


.page-header {
    padding: 0.5rem 1rem;
}
 .page-header h1 {
    padding: 0;
    border-bottom: 0 !important;
}
.breadcrumb_container .breadcrumb li a span {
    color: #333 !important;
}
.prodefine_quick_checkout .card-footer .price_calculator .div_calculator .prduct_qty {
    height: 1.938rem;
}
.card {
    border: 0;
}
.card-body,
.card-footer {
    padding-left: 0 !important;
}
.card-footer .btn {
    box-shadow: 0 0.5rem 1.313rem #00000029;
}
.card .thumbnail,
.card .quick_checkout_hover_effect{
    border-radius: 0.625;
    overflow: hidden;
}

footer.bg-light {
    background-color: #69C6B8 !important;
}
footer p.text-muted {
    color: #000 !important;
}
footer .social-media-icons a i {
    background-color: #000 !important;
}
footer .social-media-icons li a i::before {
    color: #69C6B8 !important;
}


.product-box .card .card-body .card-title {
  color:#3c3c3c !important;
}
.carousel-control-prev {
  left: 3%;
}

.carousel-control-next {
  right: 3%;
}

.carousel-control-prev, .carousel-control-next {
  z-index: 10; top:45%;
  background: #fff;
  height: 30px;
  width: 30px;
  border-radius: 30px;
}
.carousel-control-prev-icon, .carousel-control-next-icon{background-image:none;display:flex;
justify-content:center;align-items: center;}

.carousel-control-prev-icon::before{content:'\f104'; font-family: "Font Awesome 6 Pro"; font-size:22px;color:#259B85;line-height: 1; }

.carousel-control-next-icon::before{content:'\f105'; font-family: "Font Awesome 6 Pro"; font-size:22px;color:#259B85;line-height: 1; }


.navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
  padding-right: 0;
}

#myaccount_menu li a{color:#3d3d3d !important;padding-left: 0;}
#myaccount_menu li a::before{display:none;}
#myaccount_menu li.active a, #myaccount_menu li:hover a {
  color: #50bebb !important;
}
.sidebar .card#myaccount_sidebar .card-body{padding-inline:0 !important;}
.middle-header .navbar-brand {
        max-width: 150px !important;
    }
    
 #product_list_without_category .card img{border-radius:10px;}

#product_list_without_category .card .card-body .card-title {
  font-family: "OpenSans-Medium",sans-serif;

}

.middle-header .navbar .badge.badge-primary {
  background: #28928f !important;
}

#corporate_login .corp_login_form #login_sidebar input.input-valid ~ .col-form-label {
  background: transparent;
}

footer .social-media-icons {
  display: none;
}
.top-header .bg-info {
  padding-block: 0.25rem;
}
.middle-header .navbar {
  width: 100%;
}
.navbar .navbar-nav {
  margin-right: auto !important;
  margin-left: auto !important;
}

#top-banner .carousel-inner a.d-block {
  min-height: 200px;
}
#top-banner .carousel-inner a img {
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}
#top-banner .carousel-control-prev {
  left: 5px;
}
#top-banner .carousel-control-next {
  right: 5px;
}
.kit_product_info .calc_kit_footer #stock_error_msg {
      margin-bottom: 0;
      margin-right: 10px;
}

@media (min-width: 992px){
    .middle-header .navbar-brand {
        max-width: 180px !important;
    }
    .kit_product_info .calc_kit_footer #stock_error_msg {
      margin-bottom: 0;
      margin-right: 10px;
    }
    .kit_product_info .calc_kit_footer {
        padding-inline: 10px !important;
    }
}
@media (min-width: 1200px){
    .middle-header .navbar-brand {
        max-width: 203px !important;
    }
}

@media(min-width:1200px){
    .carousel-control-prev {
         left: 10%;
    }
    .carousel-control-next {
      right: 10%;
    }
    #top-banner .carousel-inner a.d-block {
      min-height: 300px;
    }
    #top-banner .carousel-inner a img {
      height: 100%;
      min-height: 300px;
      object-fit: cover;
    }
}
footer.bg-info {
    background-color: #000000 !important;
}
.steps ul li a:hover {
  color: inherit;
  color: #fff;
}
.header-content .bg-info::before, .page-header::before{width: 80% !important;}
.top-header .bg-info {
    background-color: #a51b40 !important;
}
#price_list_table .price_table td .product-amount,#price_list_table .price_table td .saving-detail
{
    display:none !important;
}
#price_list_table .table-responsive>.table-bordered td:last-child {
 display:flex;
justify-content: center;
}
.top-header .bg-info {
    background-color: #db2938 !important;
}