.pre-box-views-cart {
display: flex;
align-items: center;
gap: 5px;
}
.pre-box-views-cart .pre-cart-box,
.pre-box-views-cart .pre-views-box {
flex: 1 1 auto;
}
.pre-cart-box,
.pre-views-box {
display: flex;
align-items: center;
width: 100%;
flex: 0 0 auto;
margin-bottom: 5px;
}
.pre-cart-box .btn,
.pre-views-box .btn {
padding: 0 5px;
width: 100%;
}
.pre-views-box {
text-align: var(--pre-views-align);
}
.pre-views-box .btn {
background-color: var(--pre-views-bg);
border: var(--pre-views-border-width) solid var(--pre-views-border);
text-align: var(--pre-cart-align);
}
.pre-views-box .btn span {
color: var(--pre-views-color);
font-family: var(--pre-views-font);
font-size: var(--pre-views-size);
font-weight: var(--pre-views-weight);
}
.pre-views-box .btn:hover {
background-color: var(--pre-views-bg-hover);
border-color: var(--pre-views-border-hover);
}
.pre-views-box .btn:hover span {
color: var(--pre-views-color-hover);
}
.pre-cart-box {
text-align: var(--pre-cart-align);
}
.pre-cart-box .btn {
background-color: var(--pre-cart-bg);
border: var(--pre-cart-border-width) solid var(--pre-cart-border);
text-align: var(--pre-cart-align);
}
.pre-cart-box .btn span {
color: var(--pre-cart-color);
font-family: var(--pre-cart-font);
font-size: var(--pre-cart-size);
font-weight: var(--pre-cart-weight);
}
.pre-cart-box .btn:hover {
background-color: var(--pre-cart-bg-hover);
border-color: var(--pre-cart-border-hover);
}
.pre-cart-box .btn:hover span {
color: var(--pre-cart-color-hover);
}
.product-detail-items-info {
overflow: hidden;
text-align: center;
}
.product-detail-items-info .item-info-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(var(--prd-item-info-per-row), 1fr);
gap: 10px;
}
.product-detail-items-info .item-info-wrapper .item-info {
position: relative;
overflow: hidden;
text-align: center;
background-position: center;
}
.product-detail-items-info .item-info-wrapper .item-info .item-img {
height: var(--item1-height, 40px);
text-align: center;
}
.product-detail-items-info .item-info-wrapper .item-info .item-img img {
width: auto;
height: 100%;
display: inline-block;
border-radius: 5px;
padding: 5px;
margin-top: 5px;
}
.product-detail-items-info .item-info-wrapper .item-info .item-title {
text-align: center;
padding: 10px;
}
.product-detail-items-info .item-info-wrapper .item-info .item-title p.item-heading {
color: var(--prd-item-info-heading);
font-size: 15px;
font-weight: bold;
margin: 0 0 10px 0;
}
.product-detail-items-info .item-info-wrapper .item-info .item-title p.item-description {
color: var(--prd-item-info-desc);
font-size: 13px;
line-height: 20px;
}
@media (max-width: 768px) {
.product-detail-items-info .item-info-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
header .header-content {
padding: 0 0 10px;
}
header .row-header {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 40px;
grid-row-gap: 10px;
align-items: center;
}
header .col-header.col-logo {
grid-row: span 2;
padding-top: 10px;
min-width: 150px;
}
header .logo img {
max-height: var(--header-logo-height);
}
header .navigation .container {
width: 100% !important;
padding: 0 !important;
}
header .header-content .btn-cart-top {
margin-top: 0;
}
header .header-content .btn-cart-top img {
max-width: 30px;
}
header .list-item {
display: flex;
grid-gap: 20px;
align-items: center;
}
header .wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
grid-gap: 40px;
padding: 10px 0 10px 50px;
background-color: var(--header-list-item-bg, #ffffff);
border-radius: 0 0 0 40px;
position: relative;
}
header .wrap:before {
background: var(--header-list-item-bg, #ffffff);
height: 100%;
content: '';
width: calc(calc(100vw - 978px) / 3);
position: absolute;
right: 0;
transform: translateX(100%);
}
header .search {
padding-top: 0;
}
header .search .form-search {
border-width: 1px;
border-color: var(--header-search-br-color);
background-color: var(--header-search-bg-color);
border-radius: var(--header-search-radius);
padding: 2px;
}
header .search .form-search .form-group {
width: var(--search-input-width);
}
header .search .form-search .form-group .form-control {
background-color: var(--header-search-bg-color);
height: 35px;
min-height: 35px;
}
header .search .form-search .btn-search {
width: var(--header-search-btn-width);
background-color: var(--header-search-btn-bg-color);
color: var(--header-search-btn-txt-color);
border: 0px solid var(--header-search-btn-bg-color);
line-height: 35px !important;
border-radius: var(--header-search-radius);
font-size: 14px;
}
header .hotline {
display: grid;
grid-template-columns: 30px auto;
grid-gap: 10px;
align-items: center;
}
header .hotline .hotline__icon {
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
}
header .hotline .hotline__icon img {
width: 33px;
}
header .hotline .hotline__title {
color: red;
font-weight: bold;
text-align: left;
}
header .hotline .hotline__title p {
margin: 0;
color: var(--header-hotline-color-heading);
line-height: 19px;
}
header .hotline .hotline__title p.hotline__phone {
color: var(--header-hotline-color-phone);
font-size: 20px;
line-height: 20px;
}
header .cart-top {
display: flex;
align-items: center;
justify-content: end;
position: relative;
}
header .cart-top img {
width: 36px;
}
.navigation-grid {
display: grid;
align-items: center;
grid-template-columns: var(--nav-layout-grid);
}
@media (max-width: 991px) {
.navigation-grid {
grid-template-columns: 100%;
}
}
.navigation > .container > div {
position: relative;
}
.vertical-menu {
padding-right: 0;
}
.menu-vertical {
position: relative;
z-index: 52;
display: block !important;
}
.menu-vertical .menu-vertical__header {
cursor: pointer;
margin: 0;
padding: 0 15px;
min-height: 56px;
display: flex;
align-items: center;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
color: var(--navd-head-txt);
background-color: var(--navd-head-bg);
border-radius: var(--navd-head-radius) var(--navd-head-radius) 0 0;
}
.menu-vertical .menu-vertical__header span {
padding-left: 25px;
}
.menu-vertical .menu-vertical__content {
position: absolute;
left: 0;
width: 100%;
z-index: 52;
}
.menu-vertical .menu-vertical__content:before {
content: "";
position: absolute;
top: calc(var(--nav-hv-margin-top) * -1);
left: 0;
display: block;
width: 100%;
height: var(--nav-hv-margin-top);
background-color: transparent;
z-index: 1;
}
.menu-vertical .menu-vertical__content .menu-vertical__category {
background-color: #fff;
border-style: var(--navd-border-style, solid);
border-color: var(--navd-border-color);
border-top-width: var(--navd-border-width-top);
border-right-width: var(--navd-border-width-right);
border-bottom-width: var(--navd-border-width-bottom);
border-left-width: var(--navd-border-width-left);
border-radius: var(--navd-radius-top) var(--navd-radius-right) var(--navd-radius-bottom) var(--navd-radius-left);
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav {
padding: var(--navd-padding);
color: var(--navd-txt-color);
background-color: var(--navd-bg-color);
list-style: none;
margin: 0;
border-radius: var(--navd-radius-top) var(--navd-radius-right) var(--navd-radius-bottom) var(--navd-radius-left);
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item {
float: none;
position: initial;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item:first-child {
border-top: 0 solid rgba(0, 0, 0, 0.15);
border-radius: var(--navd-radius-top) var(--navd-radius-top) 0 0;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item:first-child a {
border-radius: inherit;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item:last-child {
border-radius: 0 0 var(--navd-radius-bottom) var(--navd-radius-bottom);
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item:last-child a {
border-radius: inherit;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item.nav-hidden {
display: none;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item .icon {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item .icon img {
width: 20px;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item > a.nav-link {
position: relative;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding: 10px 30px 10px 40px;
color: var(--navd-txt-color, #000000);
background-color: var(--navd-bg-color, #ffffff);
border-style: var(--navd-item-border-style, none);
border-color: var(--navd-item-border-color);
border-top-width: var(--navd-item-border-width-top);
border-right-width: var(--navd-item-border-width-right);
border-bottom-width: var(--navd-item-border-width-bottom);
border-left-width: var(--navd-item-border-width-left);
border-radius: var(--navd-item-radius-top) var(--navd-item-radius-right) var(--navd-item-radius-bottom) var(--navd-item-radius-left);
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item > a.nav-link:hover {
border-color: var(--navd-item-border-color-hv);
color: var(--navd-txt-color-hv, var(--theme-color));
background-color: var(--navd-bg-color-hv, #ffffff);
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item i {
position: absolute;
top: 0;
right: 0;
width: 43px;
line-height: 43px;
text-align: center;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item:hover .sub-menu-dropdown {
visibility: visible;
opacity: 1;
-webkit-transform: none;
transform: none;
pointer-events: unset;
}
.menu-vertical .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-more {
font-weight: 700;
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown {
position: absolute;
z-index: 380;
margin: 0 0 0;
padding: 30px 35px 0 35px;
background-color: #FFF;
background-position: bottom right;
background-clip: border-box;
background-repeat: no-repeat;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);
text-align: left;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
-webkit-transform: translateY(15px) translateZ(0);
transform: translateY(15px) translateZ(0);
pointer-events: none;
top: 0;
left: 100%;
width: 825px;
min-height: 100%;
border-radius: var(--navd-radius-top) var(--navd-radius-right) var(--navd-radius-bottom) var(--navd-radius-left);
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown:before {
content: "";
position: absolute;
top: 0;
left: calc((var(--navd-padding) + 10px) * -1);
display: block;
width: calc(var(--navd-padding) + 10px);
height: 100%;
background-color: transparent;
z-index: 1;
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown .sub-menu-dropdown-container {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown .col-inner {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 25%;
float: left;
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown ul {
list-style: none;
padding: 0;
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown ul li:hover {
color: var(--navd-txt-color-hv, var(--theme-color));
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown ul li a {
color: var(--navd-txt-color, #000000);
background-color: var(--navd-bg-color, #ffffff);
padding-bottom: 10px;
display: block;
}
.menu-vertical .menu-vertical__content .sub-menu-dropdown ul.mega-menu-list > li > a {
font-weight: bold;
}
.menu-vertical .bg-vertical.active {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 51;
}
.menu-vertical.no-home .menu-vertical__content {
display: none;
}
.menu-vertical.no-home:hover .menu-vertical__content {
display: block;
}
.menu-vertical.menu-vertical-home .menu-vertical__content {
position: inherit;
width: 100%;
z-index: 52;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item {
position: relative;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item > .dropdown-menu {
position: absolute;
top: 0;
padding: 0px;
min-width: 230px;
border-radius: var(--navd-radius-top) var(--navd-radius-right) var(--navd-radius-bottom) var(--navd-radius-left);
box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.4);
color: var(--navd-txt-color);
background-color: var(--navd-bg-color);
left: calc(100% + 5px) !important;
border: 0;
margin-top: 0;
width: 700px;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item > .dropdown-menu:before {
content: "";
position: absolute;
top: 0;
left: calc((var(--navd-padding) + 10px) * -1);
display: block;
width: calc(var(--navd-padding) + 10px);
height: 100%;
background-color: transparent;
z-index: 1;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item > .dropdown-menu h5 {
margin-bottom: 0;
border-bottom: 1px solid #ccc;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item > .dropdown-menu a.nav-link {
padding: 10px;
margin: 0;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item .dropdown > .dropdown-menu > .col-menu {
float: left;
width: 33%;
margin-bottom: 10px;
padding: 0 10px;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item a.nav-link:hover {
color: var(--navd-txt-color-hv, #000000);
background-color: var(--navd-bg-color-hv, #ffffff);
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item:hover {
color: var(--navd-txt-color-hv, #000000);
background-color: var(--navd-bg-color-hv, #ffffff);
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item:hover > a.nav-link:hover {
color: var(--navd-txt-color-hv, #000000);
background-color: var(--navd-bg-color-hv, #ffffff);
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav .nav-item:hover > .dropdown-menu {
display: block;
min-width: 200px;
width: auto;
}
.menu-vertical.style2 .menu-vertical__content .menu-vertical__category__nav > .nav-item > .dropdown-menu {
left: calc(100% + var(--navd-padding) + 5px) !important;
}
.menu-vertical.menu-noIcon .menu-vertical__content .menu-vertical__category .menu-vertical__category__nav .nav-item > a.nav-link {
padding-left: 10px;
}
.fixed {
-webkit-animation: animate-translate-top 1s;
-moz-animation: animate-translate-top 1s;
animation: animate-translate-top 1s;
}
@-webkit-keyframes animate-translate-top {
0% {
-webkit-transform: translate(0, -150px);
-ms-transform: translate(0, -150px);
transform: translate(0, -150px);
}
100% {
-webkit-transform: translate(0, 0px);
-ms-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@-moz-keyframes animate-translate-top {
0% {
-webkit-transform: translate(0, -150px);
-ms-transform: translate(0, -150px);
transform: translate(0, -150px);
}
100% {
-webkit-transform: translate(0, 0px);
-ms-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@keyframes animate-translate-top {
0% {
-webkit-transform: translate(0, -150px);
-ms-transform: translate(0, -150px);
transform: translate(0, -150px);
}
100% {
-webkit-transform: translate(0, 0px);
-ms-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
.fixed .menu-vertical .menu-vertical__content {
display: none;
top: auto !important;
}
.fixed .menu-vertical .menu-vertical__content.active {
display: block;
}
.fixed .menu-vertical .menu-vertical__content .menu-vertical__category {
border-radius: 0 0 var(--navd-radius-bottom) var(--navd-radius-left);
}
.fixed .menu-vertical.no-home:hover .menu-vertical__content {
display: block;
}
.section-vertical {
margin-top: var(--nav-hv-margin-top);
}
.section-vertical .navigation-grid {
align-items: start;
}
.section-vertical .vertical-slider {
padding: 0 10px;
position: relative;
}
.section-vertical .vertical-slider .container {
width: 100% !important;
padding: 0;
}
@media (max-width: 768px) {
.section-vertical .vertical-slider {
padding: 0;
}
}
.header-title.header-title-style-1 {
text-align: var(--heading-position);
}
.header-title.header-title-style-1 .header {
text-align: var(--heading-position);
letter-spacing: 0;
padding-bottom: 0;
position: relative;
display: block;
background-color: var(--header-title-bg);
}
.header-title.header-title-style-1 .header-image-bottom {
text-align: var(--heading-position);
}
.header-title.header-title-style-1 .header-image-bottom img {
display: inline-block;
}
.header-title.header-title-style-1 .header-description {
color: var(--heading-des-color);
width: var(--heading-des-width);
margin: var(--heading-des-margin);
max-width: 100%;
}
.header-title.header-title-style-8 {
text-align: var(--heading-position);
}
.header-title.header-title-style-8 .header {
text-align: var(--heading-position);
letter-spacing: 0;
padding-bottom: 15px;
position: relative;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.header-title.header-title-style-8 .header span {
display: block;
}
.header-title.header-title-style-8 .header .hr {
width: 50px;
height: 2px;
background-color: var(--heading-border-color);
flex: 0 0 auto;
}
.header-title.header-title-style-8 .header.header-position-right {
justify-content: end;
}
.header-title.header-title-style-8 .header.header-position-right .hr-right {
display: none;
}
.header-title.header-title-style-8 .header.header-position-left {
justify-content: start;
}
.header-title.header-title-style-8 .header.header-position-left .hr-left {
display: none;
}
.header-title.header-title-style-8 .header-description {
color: var(--heading-des-color);
width: var(--heading-des-width);
margin-top: 0;
margin-bottom: var(--heading-des-margin);
max-width: 100%;
}
.header-title.header-title-style-8 .header-description.header-description-center {
margin-right: auto;
margin-left: auto;
}
.header-title.header-title-style-8 .header-description.header-description-right {
margin-right: 0;
margin-left: auto;
}
.header-title.header-title-style-8 .header-description.header-description-left {
margin-right: auto;
margin-left: 0;
}
.pre-form-contact {
overflow: hidden; margin-bottom: 10px;
}
.pre-form-contact__title {
font-weight: 700;
margin: 15px 0;
}
.pre-form-contact__box {
background-color: var(--pre-form-contact-bg_box);
padding: var(--pre-form-contact-padding);
width: 100%;
border-radius: 5px;
}
.pre-form-contact__box .form-group {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
}
.pre-form-contact__box .form-group .input {
width: calc(100% - 60px);
}
.pre-form-contact__box .form-group .form-control {
background-color: var(--pre-form-contact-bg_input);
box-shadow: none; border-radius: 5px 0 0 5px; font-size: 15px;
border: 0; min-height: 41px; height: 100%;
}
.pre-form-contact__box .form-group button {
background-color: var(--pre-form-contact-bg_button);
color:var(--pre-form-contact-color_button);
width: 60px; border-radius: 0 5px 5px 0; font-size: 20px;
border: 0;
}
.pre-form-contact__box .form-group button:hover {
background-color: var(--pre-form-contact-bg_button_hover);
color:var(--pre-form-contact-color_button_hover);
}.breadcrumb ol {
display: inline-block;
}
.breadcrumb-item {
display: inline;
}
footer {
background-attachment: fixed;
}
.product-slider-horizontal .item .title .heading a {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.header-mobile .col-right {
display: flex;
justify-content: flex-end;
gap: 4px;
align-items: center;
}
.header-mobile .col-right .btn-search-mobile {
float: unset;
}
.header-mobile .col-right .btn-cart-mobile {
float: unset;
}
.header-mobile .btn-cart-mobile span {
width: 18px;
height: 18px;
line-height: 18px;
right: -10px;
top: -10px;
}
.products-detail .sidebar .widget {
border-radius: 0;
box-shadow: none;
}
.products-detail .sidebar .widget .sidebar-title,
.sidebar .widget .sidebar-title {
border-radius: 5px 5px 0px 0px;
padding: 0;
overflow: hidden;
}
.products-detail .sidebar .widget .sidebar-title .header {
text-transform: uppercase;
}
.sidebar .widget .sidebar-title .header-title,
.products-detail .sidebar .widget .sidebar-title .header-title {
margin: 0;
}
.sidebar .widget .sidebar-title .header {
border: 0;
padding: 16px;
background-color: var(--theme-color);
color: #fff;
text-align: center;
margin: 0;
font-size: 16px;
text-transform: unset;
}
.sidebar .widget .sidebar-content {
border-radius: 0px 0px 5px 5px;
border: 1px solid #E2E2E2;
background: #FFF;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}
:root{--nav-padding:7px 20px 7px 20px;--nav-layout-grid:25% 75% ;--navd-head-txt:#ffffff;--navd-head-bg:#ffffff00;--navd-head-radius:px;--navd-padding:0px;--nav-hv-margin-top:10px;--navd-border-color:#e1e1e1;--navd-border-style:solid;--navd-border-width-top:1px;--navd-border-width-right:1px;--navd-border-width-bottom:1px;--navd-border-width-left:1px;--navd-radius-top:5px;--navd-radius-right:5px;--navd-radius-bottom:5px;--navd-radius-left:5px;--navd-item-border-color:#e1e1e1;--navd-item-border-style:solid;--navd-item-border-width-top:0px;--navd-item-border-width-right:0px;--navd-item-border-width-bottom:1px;--navd-item-border-width-left:0px;--navd-item-radius-top:px;--navd-item-radius-right:px;--navd-item-radius-bottom:px;--navd-item-radius-left:px;}.navigation{background:#014670;}
.navigation ul.main-menu>li:hover>a{background:#014670;}
.navigation ul.main-menu>li.active>a{color:#ffffff;}
.navigation ul.main-menu>li a{color:#ffffff;font-size:16px;font-weight:700;line-height:23px;}
.navigation ul.main-menu>li a:hover {color:#ffffff;}