2608 lines
77 KiB
CSS
2608 lines
77 KiB
CSS
/*---------------------------------------------------------------------------------------
|
|
Project: Beluxe
|
|
Description: Beluxe - Beauty & Cosmetics eCommerce HTML5 Template
|
|
Author: Spacingtech
|
|
Support: spacingtech10@gmail.com
|
|
Version: 1.0.0
|
|
Primary use: Suitable E-Commerce business startups
|
|
---------------------------------------------------------------------------------------*/
|
|
|
|
/*----------------------------------[Table of contents]----------------------------------
|
|
# font css
|
|
# root css (including color-codes & typography)
|
|
# general css
|
|
# 'html', 'body', 'h1 to h6' css
|
|
# 'section' css
|
|
# 'p' css
|
|
# 'container', 'container-fluid' css
|
|
# 'row' css
|
|
# 'a' css
|
|
# 'button' css
|
|
# 'ul' css
|
|
# 'input', 'textarea', 'select' css
|
|
# preloader css
|
|
# notification-bar css
|
|
# header css
|
|
# header-menu css
|
|
# breadcrumb-area css
|
|
# footer-text css
|
|
# footer-insta css
|
|
# footer css
|
|
# mobile-menu css
|
|
# search-modal css
|
|
# cart-drawer css
|
|
# bottom-menu css
|
|
# bg-screen css
|
|
# back-to-top css
|
|
# banner-hover css
|
|
# quantity css
|
|
# add-to-cart css
|
|
# review-ratting css
|
|
# social-icon css
|
|
# custom-checkbox, radio, switch css
|
|
# pagination css
|
|
# magnific-popup css
|
|
# slider-swiper css
|
|
# slider-arrow css
|
|
# slider-dot css
|
|
# view-button css
|
|
# scrollbar css
|
|
# keyframes css
|
|
# animation css
|
|
---------------------------------------------------------------------------------------*/
|
|
|
|
/************************************* font start *************************************/
|
|
/*====================================
|
|
google font
|
|
====================================*/
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
|
/************************************* font end *************************************/
|
|
|
|
/************************************* root start *************************************/
|
|
/*=====================================
|
|
root
|
|
=====================================*/
|
|
:root {
|
|
/* body */
|
|
--body-font-color: #808080;
|
|
--body-font-size: 16px;
|
|
--body-bgcolor: #ffffff;
|
|
--body-font-family: 'DM Sans', sans-serif;
|
|
--body-font-weight: 400;
|
|
--body-font-style: normal;
|
|
--body-font-letter-spacing: 0px;
|
|
|
|
/* heading */
|
|
--heading-font-color: #333333;
|
|
--heading-font-family: 'DM Sans', sans-serif;
|
|
--heading-font-weight: 600;
|
|
--heading-font-style: normal;
|
|
|
|
/* section-heading */
|
|
--section-heading-font-color: #333333;
|
|
--section-heading-font-family: 'Playfair Display', sans-serif;
|
|
--section-heading-font-text: none;
|
|
--section-heading-font-weight: 500;
|
|
--section-heading-font-style: normal;
|
|
--section-heading-font-line-height: 1.2;
|
|
|
|
/* paragraph */
|
|
--paragraph-font-line-height: 25px;
|
|
|
|
/* general color */
|
|
--primary-font-color: #784a38;
|
|
--secondary-font-color: #333333;
|
|
--extra-font-color: #ffffff;
|
|
--extra-bgcolor: #fff5f1;
|
|
--product-new-sale-label-bgcolor: #333333;
|
|
--product-discount-label-bgcolor: #784a38;
|
|
--product-sold-label-bgcolor: #b02b28;
|
|
--product-review-color: #ffa500;
|
|
|
|
/* border */
|
|
--border-color: 137,159,135;
|
|
--border-opacity: 0.2;
|
|
--border-radius: 0px;
|
|
--border-radius2: 0px;
|
|
|
|
/* box-shadow */
|
|
--box-shadow-outer: 51, 51, 51;
|
|
--box-shadow-outer-opacity: 0.15;
|
|
--box-shadow-inner: 51, 51, 51;
|
|
--box-shadow-inner-opacity: 0.15;
|
|
}
|
|
/************************************* root end *************************************/
|
|
|
|
/************************************* general start *************************************/
|
|
/*=====================================
|
|
body property css
|
|
=====================================*/
|
|
.body-color,
|
|
.body-primary-color,
|
|
.body-secondary-color {
|
|
color: var(--body-font-color);
|
|
}
|
|
.primary-link {
|
|
color: var(--heading-font-color);
|
|
}
|
|
.body-primary-color,
|
|
.body-secondary-color,
|
|
.primary-link {
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
.body-primary-color:hover,
|
|
.primary-link:hover {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.body-secondary-color:hover {
|
|
color: var(--secondary-font-color);
|
|
}
|
|
.body-bg {
|
|
background-color: var(--body-bgcolor);
|
|
}
|
|
.body-weight {
|
|
font-weight: var(--body-font-weight);
|
|
}
|
|
|
|
/*=====================================
|
|
heading property css
|
|
=====================================*/
|
|
.heading-color {
|
|
color: var(--heading-font-color);
|
|
}
|
|
.heading-weight {
|
|
font-weight: var(--heading-font-weight);
|
|
}
|
|
.section-heading-family {
|
|
font-family: var(--section-heading-font-family);
|
|
}
|
|
.section-heading-text {
|
|
text-transform: var(--section-heading-font-text);
|
|
}
|
|
.section-heading-weight {
|
|
font-weight: var(--section-heading-font-weight);
|
|
}
|
|
.section-heading-lh {
|
|
line-height: var(--section-heading-font-line-height);
|
|
}
|
|
|
|
/*=====================================
|
|
general property css
|
|
=====================================*/
|
|
.primary-color {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.primary-bg {
|
|
background-color: var(--primary-font-color);
|
|
}
|
|
.secondary-color {
|
|
color: var(--secondary-font-color);
|
|
}
|
|
.secondary-bg {
|
|
background-color: var(--secondary-font-color);
|
|
}
|
|
.extra-color {
|
|
color: var(--extra-font-color);
|
|
}
|
|
.extra-bg {
|
|
background-color: var(--extra-bgcolor);
|
|
}
|
|
.primary-btn {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--primary-font-color);
|
|
border: 1px solid var(--primary-font-color);
|
|
}
|
|
.primary-btn:hover {
|
|
color: var(--primary-font-color);
|
|
background-color: transparent;
|
|
border-color: var(--primary-font-color);
|
|
}
|
|
.secondary-btn {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--secondary-font-color);
|
|
border: 1px solid var(--secondary-font-color);
|
|
}
|
|
.secondary-btn:hover {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--primary-font-color);
|
|
border-color: var(--primary-font-color);
|
|
}
|
|
.tertiary-btn {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--primary-font-color);
|
|
border: 1px solid var(--primary-font-color);
|
|
}
|
|
.tertiary-btn:hover {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--secondary-font-color);
|
|
border-color: var(--secondary-font-color);
|
|
}
|
|
.quaternary-btn {
|
|
color: var(--secondary-font-color);
|
|
background-color: transparent;
|
|
border: 1px solid var(--secondary-font-color);
|
|
}
|
|
.quaternary-btn:hover {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--secondary-font-color);
|
|
border-color: var(--secondary-font-color);
|
|
}
|
|
.primary-btn, .secondary-btn, .tertiary-btn, .quaternary-btn {
|
|
-webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
}
|
|
.link-btn {
|
|
display: inline-block;
|
|
color: var(--primary-font-color);
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
font-weight: var(--heading-font-weight);
|
|
border-bottom: 1px solid;
|
|
}
|
|
.link-body-primary, .link-body-secondary {
|
|
color: var(--body-font-color);
|
|
}
|
|
.link-primary-color {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.link-secondary-color {
|
|
color: var(--secondary-font-color);
|
|
}
|
|
.link-body-primary, .link-body-secondary, .link-primary-color, .link-secondary-color {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
font-weight: var(--heading-font-weight);
|
|
border-bottom: 1px solid;
|
|
-webkit-transition: color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
}
|
|
.link-body-primary:hover, .link-primary-color:hover {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.link-body-secondary:hover, .link-secondary-color:hover {
|
|
color: var(--secondary-font-color);
|
|
}
|
|
|
|
/*=====================================
|
|
extra property css
|
|
=====================================*/
|
|
.review-color {
|
|
color: var(--product-review-color);
|
|
}
|
|
.review-bg {
|
|
background-color: var(--product-review-color);
|
|
}
|
|
/************************************* general end *************************************/
|
|
|
|
/************************************* 'html', 'body', 'h1 to h6' start *************************************/
|
|
/*=====================================
|
|
html css
|
|
=====================================*/
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/*=====================================
|
|
body css
|
|
=====================================*/
|
|
body {
|
|
color: var(--body-font-color);
|
|
font-size: var(--body-font-size);
|
|
background-color: var(--body-bgcolor);
|
|
font-family: var(--body-font-family);
|
|
font-weight: var(--body-font-weight);
|
|
font-style: var(--body-font-style);
|
|
line-height: normal;
|
|
letter-spacing: var(--body-font-letter-spacing);
|
|
word-break: break-word;
|
|
}
|
|
|
|
/*=====================================
|
|
heading css
|
|
=====================================*/
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--heading-font-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--heading-font-family);
|
|
font-weight: var(--heading-font-weight);
|
|
font-style: var(--heading-font-style);
|
|
line-height: normal;
|
|
}
|
|
/************************************* 'html', 'body', 'h1 to h6' end *************************************/
|
|
|
|
/************************************* section start *************************************/
|
|
/*=====================================
|
|
section-capture css
|
|
=====================================*/
|
|
.section-capture {
|
|
margin-bottom: 30px;
|
|
}
|
|
.section-capture span.sub-title {
|
|
display: block;
|
|
color: var(--primary-font-color);
|
|
margin-bottom: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
.section-capture p.section-desc {
|
|
margin-top: 9px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.section-capture span.sub-title {
|
|
margin-bottom: 13px;
|
|
}
|
|
.section-capture {
|
|
margin-bottom: 40px;
|
|
}
|
|
.section-capture p.section-desc {
|
|
width: 83.33%;
|
|
margin-top: 15px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.section-capture p.section-desc {
|
|
width: 75%;
|
|
}
|
|
}
|
|
@media (min-width: 1600px) {
|
|
.section-capture p.section-desc {
|
|
width: 66.66%;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
section-heading css
|
|
=====================================*/
|
|
.section-heading {
|
|
color: var(--section-heading-font-color);
|
|
font-size: 24px;
|
|
font-family: var(--section-heading-font-family);
|
|
text-transform: var(--section-heading-font-text);
|
|
font-weight: var(--section-heading-font-weight);
|
|
font-style: var(--section-heading-font-style);
|
|
line-height: var(--section-heading-font-line-height);
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.section-heading {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
section padding css
|
|
=====================================*/
|
|
.section-ptb {
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
.section-pt {
|
|
padding-top: 50px;
|
|
}
|
|
.section-pb {
|
|
padding-bottom: 50px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.section-ptb {
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
}
|
|
.section-pt {
|
|
padding-top: 100px;
|
|
}
|
|
.section-pb {
|
|
padding-bottom: 100px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
section-bgimg css
|
|
=====================================*/
|
|
.bg-img {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
/************************************* section end *************************************/
|
|
|
|
/************************************* 'p' start *************************************/
|
|
/*=====================================
|
|
paragraph css
|
|
=====================================*/
|
|
p {
|
|
margin: 0;
|
|
line-height: var(--paragraph-font-line-height);
|
|
}
|
|
.p-mtm15, .p-mtm20, .p-mtm30 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.p-mtm15>*, .p-mtm20>*, .p-mtm30>* {
|
|
width: 100%;
|
|
}
|
|
|
|
/*=====================================
|
|
p-mtm15 css
|
|
=====================================*/
|
|
.p-mtm15 {
|
|
margin-top: -1px;
|
|
}
|
|
.p-mtm15>* {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/*=====================================
|
|
p-mtm20 css
|
|
=====================================*/
|
|
.p-mtm20 {
|
|
margin-top: -6px;
|
|
}
|
|
.p-mtm20>* {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/*=====================================
|
|
p-mtm30 css
|
|
=====================================*/
|
|
.p-mtm30 {
|
|
margin-top: -16px;
|
|
}
|
|
.p-mtm30>* {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/*=====================================
|
|
p-bullets css
|
|
=====================================*/
|
|
.p-bullets {
|
|
position: relative;
|
|
padding-left: 17px;
|
|
}
|
|
.p-bullets::before {
|
|
content: "\f3c1";
|
|
font-family: remixicon;
|
|
color: var(--heading-font-color);
|
|
font-size: 7px;
|
|
position: absolute;
|
|
left: 0;
|
|
font-weight: var(--heading-font-weight);
|
|
}
|
|
/************************************* 'p' end *************************************/
|
|
|
|
/************************************* 'container', 'container-fluid' start *************************************/
|
|
/*=====================================
|
|
'container' css
|
|
=====================================*/
|
|
.container {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
/*=====================================
|
|
'container-fluid' css
|
|
=====================================*/
|
|
.container-fluid {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media (min-width: 1500px) {
|
|
.container-fluid {
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
}
|
|
@media (min-width: 1600px) {
|
|
.container-fluid {
|
|
padding-left: 80px;
|
|
padding-right: 80px;
|
|
}
|
|
}
|
|
@media (min-width: 1800px) {
|
|
.container-fluid {
|
|
padding-left: 100px;
|
|
padding-right: 100px;
|
|
}
|
|
}
|
|
/************************************* 'container', 'container-fluid' end *************************************/
|
|
|
|
/************************************* 'row' start *************************************/
|
|
/*=====================================
|
|
row, col css
|
|
=====================================*/
|
|
.row {
|
|
margin-left: -7.5px;
|
|
margin-right: -7.5px;
|
|
}
|
|
.row>* {
|
|
padding-left: 7.5px;
|
|
padding-right: 7.5px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.row {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
.row>* {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm15 css
|
|
=====================================*/
|
|
.row-mtm15 {
|
|
margin-top: -15px;
|
|
}
|
|
.row-mtm15>* {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm20 css
|
|
=====================================*/
|
|
.row-mtm20 {
|
|
margin-top: -10px;
|
|
}
|
|
.row-mtm20>* {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm-20 css
|
|
=====================================*/
|
|
.row-mtm-20 {
|
|
margin-top: -20px;
|
|
}
|
|
.row-mtm-20>* {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/*=====================================
|
|
row-pmtm20 css
|
|
=====================================*/
|
|
.row-pmtm20 {
|
|
margin-top: -6px;
|
|
}
|
|
.row-pmtm20>* {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm css
|
|
=====================================*/
|
|
.row-mtm {
|
|
margin-top: -30px;
|
|
}
|
|
.row-mtm>* {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm30 css
|
|
=====================================*/
|
|
.row-mtm30 {
|
|
margin-top: -15px;
|
|
}
|
|
.row-mtm30>* {
|
|
margin-top: 15px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.row-mtm30 {
|
|
margin-top: -30px;
|
|
}
|
|
.row-mtm30>* {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm50 css
|
|
=====================================*/
|
|
.row-mtm50 {
|
|
margin-top: -30px;
|
|
}
|
|
.row-mtm50>* {
|
|
margin-top: 30px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.row-mtm50 {
|
|
margin-top: -50px;
|
|
}
|
|
.row-mtm50>* {
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
row-mtm100 css
|
|
=====================================*/
|
|
.row-mtm100 {
|
|
margin-top: -50px;
|
|
}
|
|
.row-mtm100>* {
|
|
margin-top: 50px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.row-mtm100 {
|
|
margin-top: -100px;
|
|
}
|
|
.row-mtm100>* {
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
/************************************* 'row' end *************************************/
|
|
|
|
/************************************* 'a' start *************************************/
|
|
/*=====================================
|
|
'a' tag css
|
|
=====================================*/
|
|
a {
|
|
color: var(--heading-font-color);
|
|
text-decoration: none;
|
|
}
|
|
a:focus, .page-link:focus, .active>.page-link, .page-link.active {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
/************************************* 'a' end *************************************/
|
|
|
|
/************************************* button start *************************************/
|
|
/*=====================================
|
|
'button' tag css
|
|
=====================================*/
|
|
button {
|
|
display: inline-block;
|
|
padding: 0px;
|
|
background: 0 0;
|
|
font-family: var(--body-font-family);
|
|
border: none;
|
|
}
|
|
button, button:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
.btn:focus, .btn:active:focus, .btn.active:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*=====================================
|
|
btn-row css
|
|
=====================================*/
|
|
.btn-row {
|
|
margin-top: -15px;
|
|
}
|
|
.btn-row>* {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/*=====================================
|
|
btn-row15 css
|
|
=====================================*/
|
|
.btn-row15 {
|
|
margin-top: -15px;
|
|
margin-left: -7.5px;
|
|
margin-right: -7.5px;
|
|
}
|
|
.btn-row15>* {
|
|
margin-top: 15px;
|
|
padding-left: 7.5px;
|
|
padding-right: 7.5px;
|
|
}
|
|
|
|
/*=====================================
|
|
btn-style css
|
|
=====================================*/
|
|
.btn-style {
|
|
height: 48px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px 30px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-weight: var(--heading-font-weight);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/*====================================
|
|
disabled css
|
|
====================================*/
|
|
button.disabled, a.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.5 !important;
|
|
}
|
|
/************************************* button end *************************************/
|
|
|
|
/************************************* ul start *************************************/
|
|
/*=====================================
|
|
'ul' tag css
|
|
=====================================*/
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.ul-row, .ul-mt5, .ul-mt10, .ul-mt15, .ul-mtm15, .ul-mtm-15, .ul-mtm20, .ul-mt30, .ul-mtm30, .ul-ft {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.ul-mtm-15>*, .ul-mtm20>*, .ul-mtm30>*, .ul-ft>* {
|
|
width: 100%;
|
|
}
|
|
.ul-row, .ul-mt15, .ul-mtm15, .ul-mt30 {
|
|
margin-left: -7.5px;
|
|
margin-right: -7.5px;
|
|
}
|
|
.ul-row>*, .ul-mt15>*, .ul-mtm15>*, .ul-mt30>* {
|
|
padding-left: 7.5px;
|
|
padding-right: 7.5px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.ul-row, .ul-mtm15, .ul-mt30 {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
.ul-row>*, .ul-mtm15>*, .ul-mt30>* {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mt5 css
|
|
=====================================*/
|
|
.ul-mt5 {
|
|
margin-top: -5px;
|
|
margin-left: -2.5px;
|
|
margin-right: -2.5px;
|
|
}
|
|
.ul-mt5>* {
|
|
margin-top: 5px;
|
|
padding-left: 2.5px;
|
|
padding-right: 2.5px;
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mt10 css
|
|
=====================================*/
|
|
.ul-mt10 {
|
|
margin-top: -10px;
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
}
|
|
.ul-mt10>* {
|
|
margin-top: 10px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/*=====================================
|
|
'ul-row', 'ul-mt15' css
|
|
=====================================*/
|
|
.ul-row, .ul-mt15 {
|
|
margin-top: -15px;
|
|
}
|
|
.ul-row>*, .ul-mt15>* {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mtm15 css
|
|
=====================================*/
|
|
.ul-mtm15 {
|
|
margin-top: -5px;
|
|
}
|
|
.ul-mtm15>* {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mtm-15 css
|
|
=====================================*/
|
|
.ul-mtm-15 {
|
|
margin-top: -5px;
|
|
}
|
|
.ul-mtm-15>* {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mtm20 css
|
|
=====================================*/
|
|
.ul-mtm20 {
|
|
margin-top: -10px;
|
|
}
|
|
.ul-mtm20>* {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mt30 css
|
|
=====================================*/
|
|
.ul-mt30 {
|
|
margin-top: -15px;
|
|
}
|
|
.ul-mt30>* {
|
|
margin-top: 15px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.ul-mt30 {
|
|
margin-top: -30px;
|
|
}
|
|
.ul-mt30>* {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
/*=====================================
|
|
ul-mtm30 css
|
|
=====================================*/
|
|
.ul-mtm30 {
|
|
margin-top: -20px;
|
|
}
|
|
.ul-mtm30>* {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/*=====================================
|
|
ul-ft css
|
|
=====================================*/
|
|
.ul-ft {
|
|
margin-top: -10px;
|
|
}
|
|
.ul-ft>* {
|
|
margin-top: 10px;
|
|
}
|
|
/************************************* ul end *************************************/
|
|
|
|
/************************************* input, select, textarea start *************************************/
|
|
/*=====================================
|
|
'input', 'select', 'textarea' tag css
|
|
=====================================*/
|
|
input, select, textarea {
|
|
color: var(--body-font-color);
|
|
font-size: var(--body-font-size);
|
|
background-color: var(--body-bgcolor);
|
|
font-family: var(--body-font-family);
|
|
font-weight: var(--body-font-weight);
|
|
border: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
border-radius: var(--border-radius);
|
|
}
|
|
input, select {
|
|
height: 48px;
|
|
}
|
|
input, textarea {
|
|
padding: 10px 15px;
|
|
}
|
|
textarea {
|
|
display: block;
|
|
}
|
|
|
|
/*=====================================
|
|
placeholder css
|
|
=====================================*/
|
|
input::-webkit-input-placeholder, input::placeholder, textarea::-webkit-input-placeholder, textarea::placeholder {
|
|
color: var(--body-font-color);
|
|
}
|
|
|
|
/*=====================================
|
|
msg_error css
|
|
=====================================*/
|
|
input.msg_error, textarea.msg_error {
|
|
color: var(--extra-font-color);
|
|
--bs-bg-opacity: 0.5;
|
|
--bs-danger-opacity: 0.5;
|
|
background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity));
|
|
border-color: rgba(var(--bs-danger-rgb), var(--bs-danger-opacity));
|
|
}
|
|
input.msg_error::-webkit-input-placeholder, input.msg_error::placeholder, textarea.msg_error::-webkit-input-placeholder, textarea.msg_error::placeholder {
|
|
color: var(--extra-font-color);
|
|
}
|
|
|
|
/*=====================================
|
|
focus css
|
|
=====================================*/
|
|
input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active {
|
|
outline: none;
|
|
border-color: rgba(var(--border-color),var(--border-opacity));
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*=====================================
|
|
select css
|
|
=====================================*/
|
|
select {
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
|
|
background-repeat: no-repeat;
|
|
background-position: right .75rem center;
|
|
background-size: 16px 12px;
|
|
padding: 10px 30px 10px 15px;
|
|
}
|
|
|
|
/*=====================================
|
|
field-row css
|
|
=====================================*/
|
|
.field-row {
|
|
margin-top: -15px;
|
|
}
|
|
.field-row>* {
|
|
margin-top: 15px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.field-row {
|
|
margin-top: -25px;
|
|
}
|
|
.field-row>* {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
input[type=file] attachment css
|
|
====================================*/
|
|
.field-row .field-col .field-attachment {
|
|
position: relative;
|
|
z-index: 1;
|
|
border: 1px dashed var(--primary-font-color);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
.field-row .field-col .field-attachment::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: var(--primary-font-color);
|
|
opacity: 0.1;
|
|
z-index: -1;
|
|
}
|
|
.field-row .field-col .field-attachment label {
|
|
cursor: pointer;
|
|
}
|
|
.field-row .field-col .field-attachment .field-attached button {
|
|
font-size: 12px;
|
|
top: -4px;
|
|
right: -4px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.field-row .field-col .field-attachment .field-attached img {
|
|
width: 88px;
|
|
}
|
|
|
|
/*=====================================
|
|
input-password css
|
|
=====================================*/
|
|
.field-row .field-col label.field-label {
|
|
display: block;
|
|
margin: 0px 0px 10px 0px;
|
|
}
|
|
.field-row .field-col .field-pwd {
|
|
height: 48px;
|
|
padding: 10px 15px;
|
|
background-color: var(--body-bgcolor);
|
|
border: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
border-radius: var(--border-radius);
|
|
}
|
|
/************************************* input, textarea, select end *************************************/
|
|
|
|
/************************************* preloader css start *************************************/
|
|
/*====================================
|
|
preloader css
|
|
====================================*/
|
|
.preloader {
|
|
-webkit-transition: opacity 0.15s ease-in-out,visibility 0.15s ease-in-out;
|
|
transition: opacity 0.15s ease-in-out,visibility 0.15s ease-in-out;
|
|
}
|
|
body.is-loaded .preloader {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
/************************************* preloader css end *************************************/
|
|
|
|
/************************************* notification-bar css start *************************************/
|
|
/*====================================
|
|
notification-marquee css
|
|
====================================*/
|
|
.notification-bar .notification-marquee .notification-marquee-row {
|
|
-webkit-animation: slide-left 20s linear infinite;
|
|
animation: slide-left 20s linear infinite;
|
|
}
|
|
.notification-bar:hover .notification-marquee .notification-marquee-row,
|
|
.notification-bar:focus .notification-marquee .notification-marquee-row {
|
|
-webkit-animation-play-state: paused;
|
|
animation-play-state: paused
|
|
}
|
|
/************************************* notification-bar css end *************************************/
|
|
|
|
/************************************* header css start *************************************/
|
|
/*====================================
|
|
header-top-area css
|
|
====================================*/
|
|
.main-header .header-top-area .header-top-first.header-border {
|
|
position: relative;
|
|
}
|
|
.main-header .header-top-area .header-top-first.header-border::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background-color: rgba(var(--border-color),var(--border-opacity));
|
|
}
|
|
/************************************* header css end *************************************/
|
|
|
|
/************************************* header-menu css start *************************************/
|
|
/*====================================
|
|
mainmenu-content css
|
|
====================================*/
|
|
.mainmenu-content {
|
|
margin: 0px -15px;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link {
|
|
color: var(--heading-font-color);
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover a.menu-link {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link span.menu-title {
|
|
position: relative;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link span.menu-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
right: 0;
|
|
width: 0%;
|
|
height: 1px;
|
|
margin: 0px auto;
|
|
background-color: var(--primary-font-color);
|
|
-webkit-transition: width 0.3s linear;
|
|
transition: width 0.3s linear;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover a.menu-link span.menu-title::after {
|
|
width: 100%;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover .menu-dropdown.collapse:not(.show) {
|
|
display: block;
|
|
}
|
|
|
|
/*====================================
|
|
menu-sub css
|
|
====================================*/
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right {
|
|
position: relative;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub {
|
|
min-width: 230px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right .menu-dropdown.menu-sub {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menu-sublink a {
|
|
color: var(--body-font-color);
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li:hover .menu-sublink a {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown {
|
|
top: 0;
|
|
left: 100%;
|
|
overflow-y: auto;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li.menu-bottom .menusub-dropdown {
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown,
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li.menu-right .menusub-dropdown {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li:hover .menusub-dropdown.collapse:not(.show) {
|
|
display: block;
|
|
}
|
|
|
|
/*====================================
|
|
menu-mega css
|
|
====================================*/
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-mega .menu-overview {
|
|
column-count: 6;
|
|
column-gap: 30px;
|
|
}
|
|
/************************************* header-menu css end *************************************/
|
|
|
|
/************************************* breadcrumb-area css start *************************************/
|
|
/*====================================
|
|
breadcrumb-area css
|
|
====================================*/
|
|
.breadcrumb-area {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.breadcrumb-area::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: #000000;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
.breadcrumb-area span a {
|
|
-webkit-transition: opacity 0.3s ease-in-out;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
.breadcrumb-area span a:hover {
|
|
opacity: 0.7;
|
|
}
|
|
/************************************* breadcrumb-area css end *************************************/
|
|
|
|
/************************************* footer-text css start *************************************/
|
|
/*====================================
|
|
footer-text css
|
|
====================================*/
|
|
.footer-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.footer-text::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: #000000;
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
}
|
|
/************************************* footer-text css end *************************************/
|
|
|
|
/************************************* footer-insta css start *************************************/
|
|
/*====================================
|
|
footer-insta slider-swiper css
|
|
====================================*/
|
|
.footer-insta .insta-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 33.33%;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.footer-insta .insta-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.footer-insta .insta-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 16.66%;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
footer-insta-icon css
|
|
====================================*/
|
|
.footer-insta .insta-slider a span.insta-icon {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
-webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
}
|
|
.footer-insta .insta-slider a:hover span.insta-icon {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
/************************************* footer-insta css end *************************************/
|
|
|
|
/************************************* footer css start *************************************/
|
|
/*====================================
|
|
footer-list css
|
|
====================================*/
|
|
.footer-area .footer-list .ft-list {
|
|
margin-top: 14px;
|
|
}
|
|
.footer-area .footer-list .ft-list:first-child {
|
|
margin: 0px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.footer-area .footer-list .ft-list {
|
|
margin: 0px;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
footer-title css
|
|
====================================*/
|
|
.footer-area .footer-list .ft-list a.ft-title {
|
|
padding-top: 14px;
|
|
border-top: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
}
|
|
.footer-area .footer-list .ft-list:only-child a.ft-title,
|
|
.footer-area .footer-list .ft-list:first-child a.ft-title {
|
|
padding: 0px;
|
|
border: none;
|
|
}
|
|
.footer-area .footer-list .ft-list a.ft-title[aria-expanded="false"] {
|
|
color: var(--heading-font-color);
|
|
}
|
|
.footer-area .footer-list .ft-list a.ft-title[aria-expanded="true"] {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.footer-area .footer-list .ft-list a.ft-title[aria-expanded="true"] span.ftmenu-icon i::before {
|
|
content: "\f1af";
|
|
}
|
|
|
|
/*====================================
|
|
footer-link css
|
|
====================================*/
|
|
@media (min-width: 768px) {
|
|
.footer-area .footer-list .footer-menu .ft-link.collapse:not(.show) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
footer-news css
|
|
====================================*/
|
|
.footer-news .news-form .news-wrap input {
|
|
border-radius: var(--border-radius) 0px 0px var(--border-radius);
|
|
}
|
|
.footer-news .news-form .news-wrap button {
|
|
border-radius: 0px var(--border-radius) var(--border-radius) 0px;
|
|
}
|
|
|
|
/*====================================
|
|
footer-social css
|
|
====================================*/
|
|
.footer-social ul.social-ul li.social-li a {
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
.footer-social ul.social-ul li.social-li a:hover {
|
|
color: var(--secondary-font-color);
|
|
}
|
|
/************************************* footer css end *************************************/
|
|
|
|
/************************************* mobile-menu css start *************************************/
|
|
/*====================================
|
|
mobile-menu css
|
|
====================================*/
|
|
.mobile-menu {
|
|
left: -350px;
|
|
width: 350px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
-webkit-transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
}
|
|
.mobile-menu.active {
|
|
left: 0px;
|
|
}
|
|
@media screen and (max-height: 600px) {
|
|
.mobile-menu {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
/* mobile-contents css */
|
|
.mobile-menu .mobile-contents {
|
|
height: 100%;
|
|
}
|
|
@media screen and (max-height: 600px) {
|
|
.mobile-menu .mobile-contents {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
mobilemenu-content css
|
|
====================================*/
|
|
.mobilemenu-content {
|
|
overflow-y: auto;
|
|
}
|
|
.mobilemenu-content .main-wrap ul.menu-ul {
|
|
margin-top: -1px;
|
|
}
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button,
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="false"],
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn span a {
|
|
color: var(--body-font-color);
|
|
}
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"],
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] + span a {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] i::before {
|
|
content: "\f1af";
|
|
}
|
|
/************************************* mobile-menu css end *************************************/
|
|
|
|
/************************************* search-bar css start *************************************/
|
|
/*====================================
|
|
search-bar css
|
|
====================================*/
|
|
form.search-form .search-bar .form-search input {
|
|
border-radius: var(--border-radius) 0px 0px var(--border-radius);
|
|
}
|
|
form.search-form .search-bar .form-search button {
|
|
border-radius: 0px var(--border-radius) var(--border-radius) 0px;
|
|
}
|
|
/************************************* search-bar css end *************************************/
|
|
|
|
/************************************* search-modal css start *************************************/
|
|
/*====================================
|
|
search-results css
|
|
====================================*/
|
|
.search-bar .search-results .search-for span::before {
|
|
content: '"';
|
|
}
|
|
.search-bar .search-results .search-for span::after {
|
|
content: '"';
|
|
}
|
|
.search-bar .search-results ul.search-ul {
|
|
margin-top: -1px;
|
|
max-height: 206px;
|
|
overflow-y: auto;
|
|
}
|
|
/************************************* search-modal css end *************************************/
|
|
|
|
/************************************* cart-drawer css start *************************************/
|
|
/*====================================
|
|
cart-drawer css
|
|
====================================*/
|
|
.cart-drawer {
|
|
right: -450px;
|
|
width: 450px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
-webkit-transition: right 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
transition: right 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
}
|
|
.cart-drawer.active {
|
|
right: 0px;
|
|
}
|
|
@media screen and (max-height: 600px) {
|
|
.cart-drawer {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
drawer-contents css
|
|
====================================*/
|
|
.cart-drawer form.drawer-contents {
|
|
height: 100%;
|
|
}
|
|
@media screen and (max-height: 600px) {
|
|
.cart-drawer form.drawer-contents {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
drawer-inner css
|
|
====================================*/
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/*============================================
|
|
drawer-recommended-product swiper css
|
|
============================================*/
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 33.33%;
|
|
}
|
|
|
|
/* drawer-recommended product-image css */
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-image a.pro-img {
|
|
display: block;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* drawer-recommended product-content css */
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content {
|
|
text-align: center;
|
|
}
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 11px;
|
|
}
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content .product-price {
|
|
margin-top: 4px;
|
|
}
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content .product-price .price-box {
|
|
justify-content: center;
|
|
}
|
|
|
|
/*====================================
|
|
drawer-instruction css
|
|
====================================*/
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a span.drawer-instruction-icon,
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a[aria-expanded="false"] span.drawer-instruction-icon {
|
|
-webkit-transition: transform 0.3s ease-in-out;
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a[aria-expanded="true"] span.drawer-instruction-icon {
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
/*====================================
|
|
drawer-footer css
|
|
====================================*/
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-cart-checkout .drawer-cart-box {
|
|
margin-top: -5px;
|
|
}
|
|
/************************************* cart-drawer css end *************************************/
|
|
|
|
/************************************* bottom-menu css start *************************************/
|
|
/*====================================
|
|
bottom-menu css
|
|
====================================*/
|
|
.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap {
|
|
margin-left: -1.5px;
|
|
margin-right: -1.5px;
|
|
}
|
|
.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap>* {
|
|
padding-left: 1.5px;
|
|
padding-right: 1.5px;
|
|
}
|
|
/************************************* bottom-menu css end *************************************/
|
|
|
|
/************************************* bg-screen css start *************************************/
|
|
/*====================================
|
|
bg-screen css
|
|
====================================*/
|
|
.bg-screen .bg-back,
|
|
.bg-screen .bg-shop,
|
|
.without-shop-sidebar .bg-screen .bg-back {
|
|
-webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.bg-screen .bg-back {
|
|
display: none;
|
|
}
|
|
.without-shop-sidebar .bg-screen .bg-back {
|
|
display: block;
|
|
}
|
|
}
|
|
/************************************* bg-screen css end *************************************/
|
|
|
|
/************************************* back-to-top css start *************************************/
|
|
/*====================================
|
|
back-to-top css
|
|
====================================*/
|
|
a#top {
|
|
bottom: 60px;
|
|
right: 15px;
|
|
-webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
}
|
|
@media (min-width: 768px) {
|
|
a#top {
|
|
right: 30px;
|
|
}
|
|
}
|
|
/************************************* back-to-top css end *************************************/
|
|
|
|
/************************************* banner-hover css start *************************************/
|
|
/*====================================
|
|
banner-hover css
|
|
====================================*/
|
|
.banner-hover .banner-img .banner-icon {
|
|
transform: translate(-50%,-50%);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
-webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
}
|
|
.banner-hover .banner-img .banner-btn {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
-webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
|
|
}
|
|
.banner-hover:hover .banner-img .banner-btn,
|
|
.banner-hover:hover .banner-img .banner-icon {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.banner-hover .banner-img img {
|
|
-webkit-transition: transform 0.3s ease-in-out,filter 0.3s ease-in-out;
|
|
transition: transform 0.3s ease-in-out,filter 0.3s ease-in-out;
|
|
}
|
|
.banner-hover:hover .banner-btn img,
|
|
.banner-hover:hover .banner-img img {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
.banner-hover:hover .banner-img .banner-btn + img,
|
|
.banner-hover:hover .banner-img .banner-icon + img {
|
|
-webkit-filter: brightness(0.60);
|
|
filter: brightness(0.60);
|
|
}
|
|
|
|
/*====================================
|
|
video css
|
|
====================================*/
|
|
.video .video-loader {
|
|
display: none;
|
|
}
|
|
.video .video-loader::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: var(--body-bgcolor);
|
|
opacity: 0.5;
|
|
}
|
|
.video .video-loader span svg {
|
|
width: 56px;
|
|
-webkit-animation: rotator 1s linear infinite;
|
|
animation: rotator 1s linear infinite;
|
|
}
|
|
.video .video-loader span svg circle {
|
|
stroke-dashoffset: 0;
|
|
stroke-dasharray: 280;
|
|
transform-origin: center;
|
|
-webkit-animation: dash 1s ease-in-out infinite;
|
|
animation: dash 1s ease-in-out infinite;
|
|
}
|
|
.video .video-img .banner-video-icon {
|
|
position: relative;
|
|
}
|
|
.video .video-img .banner-video-icon::before,
|
|
.video .video-img .banner-video-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
bottom: -8px;
|
|
left: -8px;
|
|
background-color: var(--body-bgcolor);
|
|
z-index: -1;
|
|
border-radius: 100%;
|
|
}
|
|
.video .video-img .banner-video-icon::before {
|
|
-webkit-animation: hoverEffect 2s linear infinite;
|
|
animation: hoverEffect 2s linear infinite;
|
|
}
|
|
.video .video-img .banner-video-icon::after {
|
|
-webkit-animation: hoverEffect 4s linear infinite;
|
|
animation: hoverEffect 4s linear infinite;
|
|
}
|
|
.video .video-img img,
|
|
.video video {
|
|
-webkit-filter: brightness(0.6);
|
|
filter: brightness(0.6);
|
|
}
|
|
.video .video-frame {
|
|
display: none;
|
|
}
|
|
.video video {
|
|
display: none;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
/************************************* banner-hover css end *************************************/
|
|
|
|
/************************************* quantity css start *************************************/
|
|
/*====================================
|
|
quantity css
|
|
====================================*/
|
|
.js-qty-wrapper {
|
|
width: 112px;
|
|
}
|
|
.js-qty-wrapper .js-qty-wrap button.js-qty-adjust {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.js-qty-wrapper .js-qty-wrap input.js-qty-num {
|
|
width: calc(100% - 64px);
|
|
height: 32px;
|
|
background-color: var(--body-bgcolor);
|
|
}
|
|
|
|
/* Chrome, Safari, Edge, Opera */
|
|
.js-qty-wrapper .js-qty-wrap input.js-qty-num::-webkit-outer-spin-button,
|
|
.js-qty-wrapper .js-qty-wrap input.js-qty-num::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* Firefox */
|
|
.js-qty-wrapper .js-qty-wrap input.js-qty-num[type=number] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
.js-qty-wrapper .js-qty-wrap input.js-qty-num[type="number"]:hover,
|
|
.js-qty-wrapper .js-qty-wrap input.js-qty-num[type="number"]:focus {
|
|
-moz-appearance: number-input;
|
|
appearance: number-input;
|
|
}
|
|
/************************************* quantity css end *************************************/
|
|
|
|
/************************************* add-to-cart css start *************************************/
|
|
/*====================================
|
|
add-to-cart css start
|
|
====================================*/
|
|
.add-to-cart.loading span.product-icon span.product-bag-icon,
|
|
.add-to-cart.done span.product-icon span.product-bag-icon {
|
|
display: none;
|
|
}
|
|
.add-to-cart span.product-icon span.product-loader-icon {
|
|
display: none;
|
|
-webkit-animation: spin 1s linear infinite;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
.add-to-cart.loading span.product-icon span.product-loader-icon {
|
|
display: block;
|
|
}
|
|
.add-to-cart span.product-icon span.product-check-icon {
|
|
display: none;
|
|
}
|
|
.add-to-cart.done span.product-icon span.product-check-icon {
|
|
display: block;
|
|
}
|
|
/************************************* add-to-cart css end *************************************/
|
|
|
|
/************************************* review-ratting css start *************************************/
|
|
/*====================================
|
|
review-ratting css
|
|
====================================*/
|
|
span.review-ratting {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: -7px;
|
|
margin-left: -2.5px;
|
|
margin-right: -2.5px;
|
|
}
|
|
span.review-ratting>* {
|
|
margin-top: 7px;
|
|
padding-left: 2.5px;
|
|
padding-right: 2.5px;
|
|
}
|
|
span.review-ratting span.review-star {
|
|
color: var(--product-review-color);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
line-height: 1;
|
|
}
|
|
span.review-ratting span.review-star i {
|
|
margin: 0px 0px 0px 3px;
|
|
}
|
|
span.review-ratting span.review-star i:first-child {
|
|
margin: 0;
|
|
}
|
|
span.review-ratting span.review-average {
|
|
display: none;
|
|
font-size: 14px;
|
|
}
|
|
span.review-ratting span.review-average span.review-caption {
|
|
margin-left: 4px;
|
|
}
|
|
span.review-ratting span.review-average span.review-caption::before {
|
|
content: "(";
|
|
}
|
|
span.review-ratting span.review-average span.review-caption::after {
|
|
content: ")";
|
|
}
|
|
/************************************* review-ratting css end *************************************/
|
|
|
|
/************************************* social-icon css start *************************************/
|
|
/*====================================
|
|
social-icon css
|
|
====================================*/
|
|
.behance {
|
|
color: #3a67fa;
|
|
}
|
|
.bg-behance {
|
|
background-color: #3a67fa;
|
|
}
|
|
.dribbble {
|
|
color: #ea4c89;
|
|
}
|
|
.bg-dribbble {
|
|
background-color: #ea4c89;
|
|
}
|
|
.facebook {
|
|
color: #3b5998;
|
|
}
|
|
.bg-facebook {
|
|
background-color: #3b5998;
|
|
}
|
|
.instagram {
|
|
background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.bg-instagram {
|
|
background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
|
|
}
|
|
.linkedin {
|
|
color: #0a66c2;
|
|
}
|
|
.bg-linkedin {
|
|
background-color: #0a66c2;
|
|
}
|
|
.pinterest {
|
|
color: #e60023;
|
|
}
|
|
.bg-pinterest {
|
|
background-color: #e60023;
|
|
}
|
|
.twitter {
|
|
color: #00acee;
|
|
}
|
|
.bg-twitter {
|
|
background-color: #00acee;
|
|
}
|
|
.youtube {
|
|
color: #cd201f;
|
|
}
|
|
.bg-youtube {
|
|
background-color: #cd201f;
|
|
}
|
|
/************************************* social-icon css end *************************************/
|
|
|
|
/************************************* custom-checkbox, radio, switch css start *************************************/
|
|
/*====================================
|
|
custom-checkbox css
|
|
====================================*/
|
|
label.cust-checkbox-label {
|
|
display: table;
|
|
position: relative;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
label.cust-checkbox-label input.cust-checkbox {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
label.cust-checkbox-label span.cust-check {
|
|
float: left;
|
|
position: relative;
|
|
top: 3px;
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: var(--body-bgcolor);
|
|
margin: 0px 5px 0px 0px;
|
|
border: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.shop-sidebar label.cust-checkbox-label span.cust-check {
|
|
position: unset;
|
|
}
|
|
label.cust-checkbox-label:hover span.cust-check,
|
|
label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check {
|
|
box-shadow: inset 0px 0px 5px rgba(var(--box-shadow-inner),var(--box-shadow-inner-opacity));
|
|
}
|
|
label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check {
|
|
background-color: var(--secondary-font-color);
|
|
border-color: var(--secondary-font-color);
|
|
}
|
|
label.cust-checkbox-label span.cust-check::after {
|
|
display: none;
|
|
content: "\eb7a";
|
|
font-family: 'remixicon' !important;
|
|
color: var(--extra-font-color);
|
|
font-size: 13px;
|
|
}
|
|
label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check::after {
|
|
display: block;
|
|
}
|
|
|
|
/*====================================
|
|
custom-checkbox img css
|
|
====================================*/
|
|
label.cust-checkbox-label img {
|
|
width: 48px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
label.cust-checkbox-label input.cust-checkbox:checked ~ img {
|
|
border-color: var(--secondary-font-color);
|
|
}
|
|
|
|
/*====================================
|
|
custom-radio css
|
|
====================================*/
|
|
label.cust-radio-label {
|
|
display: table;
|
|
position: relative;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
label.cust-radio-label input {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
label.cust-radio-label span.cust-check {
|
|
float: left;
|
|
position: relative;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--body-bgcolor);
|
|
margin: 0px 5px 0px 0px;
|
|
border: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
border-radius: 50%;
|
|
}
|
|
label.cust-radio-label input:checked ~ span.cust-check {
|
|
border-color: var(--primary-font-color);
|
|
}
|
|
label.cust-radio-label span.cust-check::after {
|
|
display: none;
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 50%);
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: var(--primary-font-color);
|
|
border-radius: 50%;
|
|
}
|
|
label.cust-radio-label input:checked ~ span.cust-check::after {
|
|
display: block;
|
|
}
|
|
label.cust-radio-label span.cust-text span.cust-other-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/*====================================
|
|
custom-switch css
|
|
====================================*/
|
|
label.cust-switch-label {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 10px;
|
|
}
|
|
label.cust-switch-label input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
label.cust-switch-label span.cust-switch-slide {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--body-bgcolor);
|
|
cursor: pointer;
|
|
border-radius: 25px;
|
|
border: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
-webkit-transition: background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
transition: background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
}
|
|
label.cust-switch-label input:checked ~ span.cust-switch-slide {
|
|
background-color: var(--primary-font-color);
|
|
border-color: var(--extra-bgcolor);
|
|
}
|
|
label.cust-switch-label span.cust-switch-slide::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0px;
|
|
transform: translateX(0%);
|
|
width: 10px;
|
|
height: 20px;
|
|
background-color: var(--primary-font-color);
|
|
border-radius: 25px;
|
|
border: 1px solid var(--primary-font-color);
|
|
-webkit-transition: background-color 0.3s ease-in-out,transform 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
transition: background-color 0.3s ease-in-out,transform 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
}
|
|
label.cust-switch-label input:checked ~ span.cust-switch-slide::before {
|
|
background-color: var(--body-bgcolor);
|
|
transform: translateX(200%);
|
|
border-color: rgba(var(--border-color),var(--border-opacity));
|
|
}
|
|
/************************************* custom-checkbox, radio, switch css end *************************************/
|
|
|
|
/************************************* pagination css start *************************************/
|
|
/*====================================
|
|
pagination css
|
|
====================================*/
|
|
.paginatoin-area ul.pagination-box li.page-item a.page-link {
|
|
color: var(--heading-font-color);
|
|
background-color: var(--body-bgcolor);
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
.paginatoin-area ul.pagination-box li.page-item a.page-link:not(.icon-16) {
|
|
font-size: var(--body-font-size);
|
|
}
|
|
.paginatoin-area ul.pagination-box li.page-item:not(.first,.last) a.page-link {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
/* pagination page-link active css */
|
|
.paginatoin-area ul.pagination-box li.page-item a.page-link:hover {
|
|
color: var(--primary-font-color);
|
|
}
|
|
.paginatoin-area ul.pagination-box li.page-item a.page-link.active {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--primary-font-color);
|
|
}
|
|
|
|
/* pagination disabled css */
|
|
.paginatoin-area ul.pagination-box li.page-item.disabled a.page-link {
|
|
opacity: 0.5;
|
|
}
|
|
/************************************* pagination css end *************************************/
|
|
|
|
/************************************* magnific-popup css start *************************************/
|
|
/*==============================
|
|
magnific-popup css
|
|
==============================*/
|
|
.mfp-with-zoom .mfp-container,
|
|
.mfp-with-zoom.mfp-bg {
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-with-zoom.mfp-ready .mfp-container {
|
|
opacity: 1;
|
|
}
|
|
.mfp-with-zoom.mfp-ready.mfp-bg {
|
|
opacity: 0.95;
|
|
}
|
|
.mfp-with-zoom.mfp-removing .mfp-container,
|
|
.mfp-with-zoom.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
.mfp-container.mfp-iframe-holder {
|
|
width: auto;
|
|
left: 15px;
|
|
right: 15px;
|
|
}
|
|
.mfp-iframe-holder .mfp-close {
|
|
display: block!important;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
height: auto;
|
|
width: auto;
|
|
position: absolute;
|
|
top: -20px;
|
|
right: 0;
|
|
background-color: transparent!important;
|
|
line-height: 1;
|
|
}
|
|
.mfp-iframe-scaler iframe {
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
/************************************* magnific-popup css end *************************************/
|
|
|
|
/************************************* slider-swiper css start *************************************/
|
|
/*====================================
|
|
slider-swiper margin css
|
|
====================================*/
|
|
.collection-wrap .collection-product-slider.swiper {
|
|
margin: -15px 0px 0px;
|
|
}
|
|
.collection-wrap .collection-product-slider.swiper .swiper-wrapper .swiper-slide .single-product {
|
|
margin: 15px 0px 0px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.collection-wrap .collection-product-slider.swiper,
|
|
.collection-wrap .collection-product-slider.swiper .swiper-wrapper .swiper-slide .single-product {
|
|
margin: 0px;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
product slider-swiper css
|
|
====================================*/
|
|
.collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 50%;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
blog slider-swiper css
|
|
====================================*/
|
|
.blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
/************************************* slider-swiper css end *************************************/
|
|
|
|
/************************************* slider-arrow css start *************************************/
|
|
/*====================================
|
|
slider-arrow css
|
|
====================================*/
|
|
.shop-cat-wrap,
|
|
.cat-wrap,
|
|
.collection-wrap,
|
|
.testi-wrap,
|
|
.blog-wrap,
|
|
.insta-wrap {
|
|
position: relative;
|
|
}
|
|
.shop-cat-wrap .swiper-buttons,
|
|
.cat-wrap .swiper-buttons,
|
|
.collection-wrap .swiper-buttons,
|
|
.testi-wrap .swiper-buttons,
|
|
.blog-wrap .swiper-buttons,
|
|
.insta-wrap .swiper-buttons {
|
|
display: none;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
line-height: 0;
|
|
}
|
|
.shop-cat-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.cat-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.collection-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.testi-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.blog-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.insta-wrap .swiper-buttons .swiper-buttons-wrap {
|
|
display: inline-flex;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.shop-cat-wrap .swiper-buttons,
|
|
.cat-wrap .swiper-buttons,
|
|
.collection-wrap .swiper-buttons,
|
|
.testi-wrap .swiper-buttons,
|
|
.blog-wrap .swiper-buttons,
|
|
.insta-wrap .swiper-buttons {
|
|
margin-top: 0px;
|
|
}
|
|
.shop-cat-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.cat-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.collection-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.testi-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.blog-wrap .swiper-buttons .swiper-buttons-wrap,
|
|
.insta-wrap .swiper-buttons .swiper-buttons-wrap {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* slider-arrow button css */
|
|
.shop-cat-wrap .swiper-buttons button,
|
|
.cat-wrap .swiper-buttons button,
|
|
.collection-wrap .swiper-buttons button,
|
|
.testi-wrap .swiper-buttons button,
|
|
.blog-wrap .swiper-buttons button,
|
|
.insta-wrap .swiper-buttons button {
|
|
color: var(--secondary-font-color);
|
|
font-size: 16px;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: var(--extra-font-color);
|
|
margin-right: 10px;
|
|
border: 1px solid rgba(var(--border-color),var(--border-opacity));
|
|
border-radius: 100%;
|
|
box-shadow: rgba(var(--box-shadow-outer),var(--box-shadow-outer-opacity));
|
|
-webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;
|
|
}
|
|
.shop-cat-wrap .swiper-buttons button:last-child,
|
|
.cat-wrap .swiper-buttons button:last-child,
|
|
.collection-wrap .swiper-buttons button:last-child,
|
|
.testi-wrap .swiper-buttons button:last-child,
|
|
.blog-wrap .swiper-buttons button:last-child:last-child,
|
|
.insta-wrap .swiper-buttons button:last-child:last-child {
|
|
margin: 0px;
|
|
}
|
|
.shop-cat-wrap .swiper-buttons button:hover,
|
|
.cat-wrap .swiper-buttons button:hover,
|
|
.collection-wrap .swiper-buttons button:hover,
|
|
.testi-wrap .swiper-buttons button:hover,
|
|
.blog-wrap .swiper-buttons button:hover,
|
|
.insta-wrap .swiper-buttons button:hover {
|
|
color: var(--extra-font-color);
|
|
background-color: var(--primary-font-color);
|
|
border-color: var(--primary-font-color);
|
|
}
|
|
@media (min-width: 768px) {
|
|
.shop-cat-wrap .swiper-buttons button,
|
|
.cat-wrap .swiper-buttons button,
|
|
.collection-wrap .swiper-buttons button,
|
|
.testi-wrap .swiper-buttons button,
|
|
.blog-wrap .swiper-buttons button,
|
|
.insta-wrap .swiper-buttons button {
|
|
position: absolute;
|
|
z-index: 1;
|
|
margin-right: 0px;
|
|
}
|
|
.shop-cat-wrap .swiper-buttons button.swiper-prev,
|
|
.cat-wrap .swiper-buttons button.swiper-prev,
|
|
.collection-wrap .swiper-buttons button.swiper-prev,
|
|
.testi-wrap .swiper-buttons button.swiper-prev,
|
|
.blog-wrap .swiper-buttons button.swiper-prev,
|
|
.insta-wrap .swiper-buttons button.swiper-prev {
|
|
left: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.container-fluid .collection-wrap .swiper-buttons button.swiper-prev {
|
|
transform: translateX(0);
|
|
}
|
|
.shop-cat-wrap .swiper-buttons button.swiper-next,
|
|
.cat-wrap .swiper-buttons button.swiper-next,
|
|
.collection-wrap .swiper-buttons button.swiper-next,
|
|
.testi-wrap .swiper-buttons button.swiper-next,
|
|
.blog-wrap .swiper-buttons button.swiper-next,
|
|
.insta-wrap .swiper-buttons button.swiper-next {
|
|
right: 0;
|
|
transform: translateX(50%);
|
|
}
|
|
.container-fluid .collection-wrap .swiper-buttons button.swiper-next {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.shop-cat-wrap .swiper-buttons button,
|
|
.cat-wrap .swiper-buttons button,
|
|
.collection-wrap .swiper-buttons button,
|
|
.testi-wrap .swiper-buttons button,
|
|
.blog-wrap .swiper-buttons button,
|
|
.insta-wrap .swiper-buttons button {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
@media (min-width: 1500px) {
|
|
.shop-cat-wrap .swiper-buttons button.swiper-prev,
|
|
.cat-wrap .swiper-buttons button.swiper-prev,
|
|
.collection-wrap .swiper-buttons button.swiper-prev,
|
|
.testi-wrap .swiper-buttons button.swiper-prev,
|
|
.blog-wrap .swiper-buttons button.swiper-prev,
|
|
.insta-wrap .swiper-buttons button.swiper-prev {
|
|
transform: translateX(calc(-100% - 30px));
|
|
}
|
|
.shop-cat-wrap .swiper-buttons button.swiper-next,
|
|
.cat-wrap .swiper-buttons button.swiper-next,
|
|
.collection-wrap .swiper-buttons button.swiper-next,
|
|
.testi-wrap .swiper-buttons button.swiper-next,
|
|
.blog-wrap .swiper-buttons button.swiper-next,
|
|
.insta-wrap .swiper-buttons button.swiper-next {
|
|
transform: translateX(calc(100% + 30px));
|
|
}
|
|
}
|
|
@media (min-width: 1600px) {
|
|
.shop-cat-wrap .swiper-buttons button.swiper-prev,
|
|
.cat-wrap .swiper-buttons button.swiper-prev,
|
|
.collection-wrap .swiper-buttons button.swiper-prev,
|
|
.testi-wrap .swiper-buttons button.swiper-prev,
|
|
.blog-wrap .swiper-buttons button.swiper-prev,
|
|
.insta-wrap .swiper-buttons button.swiper-prev {
|
|
transform: translateX(calc(-100% - 50px));
|
|
}
|
|
.container-fluid .collection-wrap .swiper-buttons button.swiper-prev {
|
|
transform: translateX(-50%);
|
|
}
|
|
.shop-cat-wrap .swiper-buttons button.swiper-next,
|
|
.cat-wrap .swiper-buttons button.swiper-next,
|
|
.collection-wrap .swiper-buttons button.swiper-next,
|
|
.testi-wrap .swiper-buttons button.swiper-next,
|
|
.blog-wrap .swiper-buttons button.swiper-next,
|
|
.insta-wrap .swiper-buttons button.swiper-next {
|
|
transform: translateX(calc(100% + 50px));
|
|
}
|
|
.container-fluid .collection-wrap .swiper-buttons button.swiper-next {
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
/************************************* slider-arrow css end *************************************/
|
|
|
|
/************************************* slider-dot css start *************************************/
|
|
/*====================================
|
|
swiper slider-dots css
|
|
====================================*/
|
|
.shop-cat-wrap .swiper-dots,
|
|
.cat-wrap .swiper-dots,
|
|
.collection-wrap .swiper-dots,
|
|
.testi-wrap .swiper-dots,
|
|
.blog-wrap .swiper-dots,
|
|
.insta-wrap .swiper-dots {
|
|
display: none;
|
|
margin-top: 30px;
|
|
line-height: 0;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.shop-cat-wrap .swiper-dots,
|
|
.cat-wrap .swiper-dots,
|
|
.collection-wrap .swiper-dots,
|
|
.testi-wrap .swiper-dots,
|
|
.blog-wrap .swiper-dots,
|
|
.insta-wrap .swiper-dots {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
/* swiper slider-dots button css */
|
|
.shop-cat-wrap .swiper-dots .swiper-pagination,
|
|
.cat-wrap .swiper-dots .swiper-pagination,
|
|
.collection-wrap .swiper-dots .swiper-pagination,
|
|
.testi-wrap .swiper-dots .swiper-pagination,
|
|
.blog-wrap .swiper-dots .swiper-pagination,
|
|
.insta-wrap .swiper-dots .swiper-pagination {
|
|
width: unset;
|
|
position: unset;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin: -5px 0px 0px -5px;
|
|
}
|
|
.shop-cat-wrap .swiper-dots .swiper-pagination span,
|
|
.cat-wrap .swiper-dots .swiper-pagination span,
|
|
.collection-wrap .swiper-dots .swiper-pagination span,
|
|
.testi-wrap .swiper-dots .swiper-pagination span,
|
|
.blog-wrap .swiper-dots .swiper-pagination span,
|
|
.insta-wrap .swiper-dots .swiper-pagination span {
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: var(--secondary-font-color);
|
|
margin: 5px 0px 0px 5px;
|
|
opacity: 0.15;
|
|
border: 1px solid var(--secondary-font-color);
|
|
}
|
|
.shop-cat-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,
|
|
.cat-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,
|
|
.collection-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,
|
|
.testi-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,
|
|
.blog-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,
|
|
.insta-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active {
|
|
opacity: 1;
|
|
background-color: var(--primary-font-color);
|
|
border-color: var(--primary-font-color);
|
|
}
|
|
/************************************* slider-dot css end *************************************/
|
|
|
|
/************************************* view-button css start *************************************/
|
|
/*====================================
|
|
view-button css
|
|
====================================*/
|
|
.view-button {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.view-button {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
/************************************* view-button css end *************************************/
|
|
|
|
/************************************* scrollbar css start *************************************/
|
|
/*====================================
|
|
scrollbar css
|
|
====================================*/
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown,
|
|
.mobile-menu .mobilemenu-content,
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable,
|
|
.search-bar .search-results ul,
|
|
.shop-filter-sidebar,
|
|
.tce-area .ck.ck-editor__editable_inline {
|
|
-webkit-scrollbar-width: thin;
|
|
scrollbar-width: thin;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar,
|
|
.mobile-menu .mobilemenu-content::-webkit-scrollbar,
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar,
|
|
.search-bar .search-results ul::-webkit-scrollbar,
|
|
.shop-filter-sidebar::-webkit-scrollbar,
|
|
.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-track,
|
|
.mobile-menu .mobilemenu-content::-webkit-scrollbar-track,
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-track,
|
|
.search-bar .search-results ul::-webkit-scrollbar-track,
|
|
.shop-filter-sidebar::-webkit-scrollbar-track,
|
|
.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-track {
|
|
background-color: #eeeeee;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-thumb,
|
|
.mobile-menu .mobilemenu-content::-webkit-scrollbar-thumb,
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb,
|
|
.search-bar .search-results ul::-webkit-scrollbar-thumb,
|
|
.shop-filter-sidebar::-webkit-scrollbar-thumb,
|
|
.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-thumb {
|
|
background-color: #c1c1c1;
|
|
}
|
|
.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-thumb:hover,
|
|
.mobile-menu .mobilemenu-content::-webkit-scrollbar-thumb:hover,
|
|
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb:hover,
|
|
.search-bar .search-results ul::-webkit-scrollbar-thumb:hover,
|
|
.shop-filter-sidebar::-webkit-scrollbar-thumb:hover,
|
|
.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--primary-font-color);
|
|
}
|
|
@media (min-width: 768px) {
|
|
.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info {
|
|
-webkit-scrollbar-width: thin;
|
|
scrollbar-width: thin;
|
|
}
|
|
.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-track {
|
|
background-color: #eeeeee;
|
|
}
|
|
.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-thumb {
|
|
background-color: #c1c1c1;
|
|
}
|
|
.quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--primary-font-color);
|
|
}
|
|
}
|
|
@media screen and (max-height: 600px) {
|
|
.mobile-menu,
|
|
.cart-drawer {
|
|
-webkit-scrollbar-width: thin;
|
|
scrollbar-width: thin;
|
|
}
|
|
.mobile-menu::-webkit-scrollbar,
|
|
.cart-drawer::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
.mobile-menu::-webkit-scrollbar-track,
|
|
.cart-drawer::-webkit-scrollbar-track {
|
|
background-color: #eeeeee;
|
|
}
|
|
.mobile-menu::-webkit-scrollbar-thumb,
|
|
.cart-drawer::-webkit-scrollbar-thumb {
|
|
background-color: #c1c1c1;
|
|
}
|
|
.mobile-menu::-webkit-scrollbar-thumb:hover,
|
|
.cart-drawer::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--primary-font-color);
|
|
}
|
|
}
|
|
/************************************* scrollbar css end *************************************/
|
|
|
|
/************************************* keyframes css start *************************************/
|
|
/*====================================
|
|
loaderProgress keyframes css
|
|
====================================*/
|
|
@-webkit-keyframes loaderProgress {
|
|
0% {
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
} 100% {
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
@keyframes loaderProgress {
|
|
0% {
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
} 100% {
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
loaderText keyframes css
|
|
====================================*/
|
|
@-webkit-keyframes loaderText {
|
|
0% {
|
|
width: 0%;
|
|
} 100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@keyframes loaderText {
|
|
0% {
|
|
width: 0%;
|
|
} 100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
slide-left keyframes css
|
|
====================================*/
|
|
@-webkit-keyframes slide-left {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
}
|
|
@keyframes slide-left {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
DropDownSlide keyframes css
|
|
====================================*/
|
|
@media (min-width: 1200px) {
|
|
.DropDownSlide {
|
|
-webkit-animation-name: DropDownSlide;
|
|
animation-name: DropDownSlide;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
@-webkit-keyframes DropDownSlide {
|
|
0% {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
} 100% {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
@keyframes DropDownSlide {
|
|
0% {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
-webkit-transform: translateY(10px);
|
|
transform: translateY(10px);
|
|
} 100% {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
hoverEffect keyframes css
|
|
====================================*/
|
|
@-webkit-keyframes hoverEffect {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.1);
|
|
transform: scale(0.1)
|
|
} 100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1)
|
|
}
|
|
}
|
|
@keyframes hoverEffect {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5)
|
|
} 100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1)
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
rotator keyframes css
|
|
====================================*/
|
|
@-webkit-keyframes rotator {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
} 100% {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
@keyframes rotator {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
} 100% {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
dash keyframes css
|
|
====================================*/
|
|
@-webkit-keyframes dash {
|
|
0% {
|
|
stroke-dashoffset: 280;
|
|
} 50% {
|
|
stroke-dashoffset: 75;
|
|
transform: rotate(135deg);
|
|
} 100% {
|
|
stroke-dashoffset: 280;
|
|
transform: rotate(450deg);
|
|
}
|
|
}
|
|
@keyframes dash {
|
|
0% {
|
|
stroke-dashoffset: 280;
|
|
} 50% {
|
|
stroke-dashoffset: 75;
|
|
transform: rotate(135deg);
|
|
} 100% {
|
|
stroke-dashoffset: 280;
|
|
transform: rotate(450deg);
|
|
}
|
|
}
|
|
|
|
/*====================================
|
|
spin keyframes css
|
|
====================================*/
|
|
.spin {
|
|
-webkit-animation: spin 4s linear infinite;
|
|
animation: spin 4s linear infinite;
|
|
}
|
|
@-webkit-keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
} 100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
} 100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
/************************************* keyframes css end *************************************/
|
|
|
|
/************************************* animation css start *************************************/
|
|
/*====================================
|
|
animation css
|
|
====================================*/
|
|
[data-animate] {
|
|
opacity: 0
|
|
}
|
|
[data-animate].animate__animated {
|
|
opacity: 1
|
|
}
|
|
/************************************* animation css end *************************************/ |