Viewing File: /home/webrbaew/candycleansestore.co/css/style.css
@charset "UTF-8";
:root {
--primary-color: #121a25;
--secondary-color: #FF4E4E;
--secondary-color2: #FF4E4E;
--yellow-color: #ffc107;
--text-gray-color: #666666;
--white-color: #ffffff;
--ofwhite-color: #f2f2f2;
--black-color: #000000;
--light-color: #a5a5a5;
--light-color2: #aaaaaa;
--dark-color: #242424;
--sky-color: #647589;
--border-color: #c8c8c8;
--border-color2: #e4e4e4;
--border-color3: #dddddd;
--border-dark: #383434;
--bg-gray-color: #f7f8fc;
--gray-color: #ebebeb;
--gray-color2: #f5f5f5;
--josefin-sans: "Josefin Sans", sans-serif;
--open-sans: "Open Sans", sans-serif;
--body-font-size: 1.6rem;
--body-font-weight: 400;
--body-line-height: 2.5rem;
--headings-weight: 600;
--transition: all 0.3s ease 0s;
--container-fluid-offset: 19rem
}
.color-scheme-1 {
--secondary-color: #FF4E4E
}
.color-scheme-2 {
--secondary-color: #FF4E4E
}
.color-scheme-3 {
--secondary-color: #666666
}
*,
::after,
::before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body,
html {
min-height: 100%;
margin: 0;
font-size: 62.5%;
padding: 0
}
body {
font-family: var(--josefin-sans);
font-size: var(--body-font-size, 1.6rem);
font-weight: var(--body-font-weight);
font-style: normal;
line-height: var(--body-line-height, 25px);
position: relative;
visibility: visible;
overflow-x: hidden;
color: var(--black-color);
background-color: var(--white-color)
}
@media only screen and (max-width:1599px) {
body {
font-size: 1.5rem
}
}
@media only screen and (max-width:767px) {
body {
font-size: 1.4rem
}
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--headings-weight);
margin: 0
}
.h1,
h1 {
font-size: 2.6rem;
line-height: 3.5rem;
font-weight: 700
}
@media only screen and (min-width:576px) {
.h1,
h1 {
font-size: 3rem;
line-height: 3.8rem
}
}
@media only screen and (min-width:768px) {
.h1,
h1 {
font-size: 3.6rem;
line-height: 4.3rem
}
}
@media only screen and (min-width:992px) {
.h1,
h1 {
font-size: 4.2rem;
line-height: 4.8rem
}
}
@media only screen and (min-width:1200px) {
.h1,
h1 {
font-size: 4.8rem;
line-height: 5.3rem
}
}
@media only screen and (min-width:1366px) {
.h1,
h1 {
font-size: 5rem;
line-height: 5.5rem
}
}
@media only screen and (min-width:1600px) {
.h1,
h1 {
font-size: 6rem;
line-height: 7.2rem
}
}
.h2,
h2 {
font-size: 2.2rem;
line-height: 2.8rem;
font-weight: 600
}
@media only screen and (min-width:768px) {
.h2,
h2 {
font-size: 2.5rem;
line-height: 3rem
}
}
@media only screen and (min-width:992px) {
.h2,
h2 {
font-size: 3rem;
line-height: 3.5rem
}
}
@media only screen and (min-width:1200px) {
.h2,
h2 {
font-size: 3.5rem;
line-height: 4rem
}
}
@media only screen and (min-width:1600px) {
.h2,
h2 {
font-size: 4rem;
line-height: 4.5rem
}
}
.h3,
h3 {
font-size: 2rem;
line-height: 2.8rem;
font-weight: 600
}
@media only screen and (min-width:992px) {
.h3,
h3 {
font-size: 2.3rem;
line-height: 3.2rem
}
}
@media only screen and (min-width:1200px) {
.h3,
h3 {
font-size: 2.5rem;
line-height: 3.5rem
}
}
@media only screen and (min-width:1600px) {
.h3,
h3 {
font-size: 3rem;
line-height: 4rem
}
}
.h4,
h4 {
font-weight: 600;
font-size: 1.6rem;
line-height: 2.8rem
}
@media only screen and (min-width:1200px) {
.h4,
h4 {
font-size: 1.8rem;
line-height: 3rem
}
}
.h5,
h5 {
font-weight: 400
}
.h6,
h6 {
font-weight: 400
}
.p,
p {
margin-top: 0;
margin-bottom: 1.8rem;
color: var(--text-gray-color);
font-family: var(--open-sans)
}
@media only screen and (max-width:767px) {
.p,
p {
font-size: 1.4rem;
line-height: 2.4rem
}
}
p:last-child {
margin-bottom: 0
}
a,
button {
display: inline-block;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
text-decoration: none;
color: inherit
}
a,
button,
img,
input,
textarea {
-webkit-transition: var(--transition);
transition: var(--transition)
}
:focus {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none
}
:focus-visible {
-webkit-box-shadow: 0 0 5px 2px rgba(19, 19, 19, .15);
box-shadow: 0 0 5px 2px rgba(19, 19, 19, .15)
}
a:focus {
text-decoration: none;
outline: 0
}
a:hover {
text-decoration: none;
color: var(--secondary-color)
}
button,
input[type=submit] {
cursor: pointer;
font-family: var(--font-lato);
font-size: var(--body-font-size);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height)
}
input[type=number] {
-moz-appearance: textfield
}
img {
max-width: 100%;
height: auto
}
span {
display: inline-block;
-webkit-transition: var(--transition);
transition: var(--transition)
}
label {
-webkit-transition: var(--transition);
transition: var(--transition)
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
opacity: 1
}
input:-moz-placeholder,
textarea:-moz-placeholder {
opacity: 1
}
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
opacity: 1
}
ul {
margin: 0;
padding: 0
}
ul:last-child {
margin-bottom: 0
}
li {
list-style: none;
line-height: 1
}
hr {
border-top-width: 2px
}
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto
}
.container {
padding-right: 1.5rem;
padding-left: 1.5rem
}
.container-fluid {
--offset-fluid: 1.5rem;
padding-right: var(--offset-fluid);
padding-left: var(--offset-fluid)
}
@media only screen and (min-width:992px) {
.container-fluid {
--offset-fluid: 3rem
}
}
@media only screen and (min-width:1366px) {
.container-fluid {
--offset-fluid: calc(var(--container-fluid-offset) / 4.5)
}
}
@media only screen and (min-width:1600px) {
.container-fluid {
--offset-fluid: calc(var(--container-fluid-offset) / 2.5)
}
}
@media only screen and (min-width:1800px) {
.container-fluid {
--offset-fluid: var(--container-fluid-offset)
}
}
@media only screen and (min-width:576px) {
.container {
max-width: 576px
}
}
@media only screen and (min-width:768px) {
.container {
max-width: 768px
}
}
@media only screen and (min-width:992px) {
.container {
max-width: 960px
}
}
@media only screen and (min-width:1200px) {
.container {
max-width: 1200px
}
}
@media only screen and (min-width:1400px) {
.container {
max-width: 1200px
}
}
.row {
--bs-gutter-x: 3rem;
--bs-gutter-y: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5)
}
.row>* {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-bottom: var(--bs-gutter-y)
}
.col {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%
}
.row-cols-auto>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.row-cols-1>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
.row-cols-2>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.row-cols-3>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.3333333333%
}
.row-cols-4>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.row-cols-5>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%
}
.row-cols-6>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.6666666667%
}
@media only screen and (min-width:576px) {
.col-sm {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%
}
.row-cols-sm-auto>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.row-cols-sm-1>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
.row-cols-sm-2>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.row-cols-sm-3>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.3333333333%
}
.row-cols-sm-4>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.row-cols-sm-5>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%
}
.row-cols-sm-6>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.6666666667%
}
}
@media only screen and (min-width:768px) {
.col-md {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%
}
.row-cols-md-auto>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.row-cols-md-1>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
.row-cols-md-2>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.row-cols-md-3>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.3333333333%
}
.row-cols-md-4>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.row-cols-md-5>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%
}
.row-cols-md-6>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.6666666667%
}
}
@media only screen and (min-width:992px) {
.col-lg {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%
}
.row-cols-lg-auto>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.row-cols-lg-1>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
.row-cols-lg-2>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.row-cols-lg-3>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.3333333333%
}
.row-cols-lg-4>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.row-cols-lg-5>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%
}
.row-cols-lg-6>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.6666666667%
}
}
@media only screen and (min-width:1200px) {
.col-xl {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%
}
.row-cols-xl-auto>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.row-cols-xl-1>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
.row-cols-xl-2>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.row-cols-xl-3>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.3333333333%
}
.row-cols-xl-4>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.row-cols-xl-5>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%
}
.row-cols-xl-6>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.6666666667%
}
}
@media only screen and (min-width:1600px) {
.col-xxl {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%
}
.row-cols-xxl-auto>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.row-cols-xxl-1>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
.row-cols-xxl-2>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.row-cols-xxl-3>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.3333333333%
}
.row-cols-xxl-4>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.row-cols-xxl-5>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%
}
.row-cols-xxl-6>* {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.6666666667%
}
}
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
@media only screen and (min-width:576px) {
.col-sm-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-sm-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-sm-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-sm-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-sm-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-sm-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-sm-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-sm-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-sm-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-sm-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-sm-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-sm-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-sm-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width:768px) {
.col-md-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-md-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-md-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-md-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-md-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-md-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-md-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-md-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-md-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-md-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-md-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-md-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-md-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width:992px) {
.col-lg-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-lg-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-lg-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-lg-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-lg-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-lg-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-lg-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-lg-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-lg-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-lg-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-lg-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-lg-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-lg-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width:1200px) {
.col-xl-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-xl-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-xl-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-xl-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-xl-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-xl-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-xl-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-xl-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-xl-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-xl-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-xl-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-xl-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-xl-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width:1400px) {
.col-xxl-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-xxl-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-xxl-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-xxl-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-xxl-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-xxl-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-xxl-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-xxl-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-xxl-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-xxl-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-xxl-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-xxl-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-xxl-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media (min-width:768px) {
.offset-md-2 {
margin-left: 16.66666667%
}
}
@media (min-width:992px) {
.offset-lg-2 {
margin-left: 16.66666667%
}
.offset-lg-1 {
margin-left: 8.33333333%
}
}
@media (min-width:992px) {
.offset-lg-3 {
margin-left: 25%
}
.offset-lg-6 {
margin-left: 50%
}
.offset-lg-0 {
margin-left: 0
}
}
@media (min-width:1200px) {
.offset-xl-0 {
margin-left: 0
}
}
@media only screen and (max-width:767px) {
.row {
margin-right: -10px;
margin-left: -10px
}
.row>* {
padding-right: 10px;
padding-left: 10px
}
}
@media only screen and (max-width:479px) {
.row {
margin-right: -8px;
margin-left: -8px
}
.row>* {
padding-right: 8px;
padding-left: 8px
}
}
.row-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
@media only screen and (max-width:991px) {
.row-md-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
.d-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.align-items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.align-self-center {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
.justify-content-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.justify-content-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.d-none {
display: none
}
@media only screen and (min-width:992px) {
.d-lg-block {
display: block
}
.d-lg-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media only screen and (min-width:1200px) {
.d-xl-none {
display: none
}
.d-xl-block {
display: block
}
.d-xl-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media only screen and (min-width:1600px) {
.d-xxl-none {
display: none
}
.d-xxl-block {
display: block
}
.d-xxl-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media only screen and (max-width:1199px) {
.col-lg-order {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
}
@media only screen and (max-width:991px) {
.d-md-none {
display: none
}
.d-md-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.col-md-order {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
.d-md-block {
display: block
}
}
@media only screen and (max-width:767px) {
.d-sm-none {
display: none
}
.d-sm-block {
display: block
}
.d-sm-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.col-sm-order {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
}
@media only screen and (max-width:575px) {
.d-sm-2-none {
display: none
}
.d-sm-2-block {
display: block
}
.d-sm-2-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.col-sm-2-order {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
}
.display-block {
display: block
}
.primary__btn {
font-weight: 600;
display: inline-block;
font-size: 1.5rem;
line-height: 3.4rem;
height: 3.4rem;
padding: 0 1.5rem;
letter-spacing: .2px;
border-radius: .3rem;
background: var(--secondary-color);
color: var(--white-color);
border: 0
}
.primary__btn:hover {
background: var(--primary-color);
color: var(--white-color)
}
@media only screen and (min-width:768px) {
.primary__btn {
line-height: 4rem;
height: 4rem;
padding: 0 2.2rem
}
}
@media only screen and (min-width:992px) {
.primary__btn {
font-size: 1.6rem;
line-height: 4.5rem;
height: 4.5rem;
padding: 0 2.5rem
}
}
.primary__btn.style2 {
background: var(--white-color);
border: 1px solid var(--primary-color);
color: var(--primary-color);
font-size: 1.4rem
}
@media only screen and (min-width:768px) {
.primary__btn.style2 {
line-height: 3.8rem;
height: 3.8rem;
padding: 0 2rem
}
}
.primary__btn.style2:hover {
background: var(--secondary-color);
color: var(--white-color);
border-color: var(--secondary-color)
}
.primary__btn.btn__style2 {
border-radius: 2rem
}
@media only screen and (min-width:768px) {
.primary__btn.btn__style2 {
line-height: 4.1rem;
height: 4.1rem
}
}
.primary__btn.btn__style3 {
background: var(--primary-color)
}
.primary__btn.btn__style3:hover {
background: var(--secondary-color)
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.swiper__nav--btn {
width: 4rem;
height: 4rem;
background: var(--secondary-color);
border-radius: 50%;
opacity: 0;
visibility: hidden;
-webkit-transition: var(--transition);
transition: var(--transition);
z-index: 9
}
@media only screen and (max-width:767px) {
.swiper__nav--btn {
width: 3.5rem;
height: 3.5rem
}
}
.swiper__nav--btn:hover {
background: var(--primary-color)
}
.swiper__nav--btn::after {
background: url(../images/left-arrow-angle.webp);
width: 9px;
height: 17px;
font-size: 0
}
.swiper__nav--btn.swiper-button-prev {
left: 0
}
.swiper__nav--btn.swiper-button-next {
right: 0
}
.swiper__nav--btn.swiper-button-next::after {
background: url(../images/right-arrow-angle.webp)
}
.swiper__nav--btn.style2 {
top: 23px;
right: 0;
opacity: 1;
visibility: visible;
background: var(--primary-color);
border-radius: .5rem
}
.swiper__nav--btn.style2:hover {
background: var(--secondary-color)
}
.swiper__nav--btn.style2.swiper-button-prev {
right: 6rem;
left: auto
}
@media only screen and (max-width:575px) {
.swiper__nav--btn.style2.swiper-button-prev {
right: 4.5rem
}
}
.swiper-pagination {
bottom: 0 !important
}
.swiper-pagination-bullet {
width: 1rem;
height: 1rem;
background: var(--light-color);
opacity: 1;
vertical-align: middle;
-webkit-transition: var(--transition);
transition: var(--transition)
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--secondary-color);
width: 1.4rem;
height: 1.4rem
}
select {
word-wrap: normal;
font-family: var(--font-lato);
font-size: var(--body-font-size);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height)
}
.section__heading.style2 {
padding-bottom: 2.5rem
}
.section__heading--position__img {
position: absolute;
bottom: -24px;
left: 55%;
z-index: 9;
background: var(--white-color)
}
#scroll__top {
position: fixed;
bottom: 50px;
right: 20px;
z-index: 99;
outline: 0;
background-color: var(--secondary-color);
color: var(--white-color);
-webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
cursor: pointer;
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
visibility: hidden;
-webkit-transition: .3s;
transition: .3s;
line-height: 1;
width: 4.3rem;
height: 4.3rem;
border-radius: 50%;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
#scroll__top:hover {
background: var(--primary-color)
}
@media only screen and (max-width:991px) {
#scroll__top {
bottom: 75px
}
}
#scroll__top.active {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
#scroll__top svg {
width: 25px;
line-height: 1
}
.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important
}
.line-height-1 {
line-height: 1
}
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.overflow-hidden {
overflow: hidden
}
.break {
word-break: break-word
}
.uppercase {
text-transform: uppercase
}
.capitalize {
text-transform: capitalize
}
.text-white {
color: var(--white-color) !important
}
.text-ofwhite {
color: var(--ofwhite-color)
}
.text-black {
color: var(--black-color) !important
}
.body__background {
background: var(----gray-color)
}
.bg__primary {
background: var(--primary-color)
}
.bg__secondary {
background: var(--secondary-color)
}
.bg__secondary2 {
background: var(--secondary-color2)
}
.bg__gray--color {
background: var(--bg-gray-color)
}
.bg__white {
background: var(--white-color)
}
.bg__black {
background: #1d1c1c
}
.text__primary {
color: var(--primary-color) !important
}
.text__secondary {
color: var(--secondary-color)
}
.text__secondary2 {
color: var(--secondary-color2)
}
.position__relative {
position: relative
}
.border-bottom {
border-bottom: 1px solid var(--border-color)
}
.border {
border: 1px solid var(--border-color)
}
.border-0 {
border: none
}
.border-radius-5 {
border-radius: .5rem
}
.border-radius-10 {
border-radius: 1rem
}
.border-radius-20 {
border-radius: 2rem
}
.border-radius-30 {
border-radius: 3rem
}
.border-radius-50 {
border-radius: 50%
}
@media only screen and (max-width:991px) {
.md-width-100 {
width: 100%
}
}
.tab_content {
display: block
}
.tab_pane {
display: none;
-webkit-transition: var(--transition);
transition: var(--transition)
}
.tab_pane:not(.show) {
opacity: 0
}
.tab_pane.show {
opacity: 1
}
.tab_pane.active {
display: block
}
.mobile_menu_open,
.offCanvas__minicart_active,
.offcanvas__filter--sidebar_active,
.predictive__search--box_active,
body.overlay__active {
overflow-y: hidden
}
.mobile_menu_open::before,
.offCanvas__minicart_active::before,
.offcanvas__filter--sidebar_active::before,
.predictive__search--box_active::before,
body.overlay__active::before {
position: absolute;
content: "";
background: #000;
width: 100%;
height: 100%;
z-index: 999;
opacity: .5;
cursor: crosshair
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0)
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.animate-fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
.section--padding {
padding-top: 6rem;
padding-bottom: 6rem
}
@media only screen and (min-width:768px) {
.section--padding {
padding-top: 8rem;
padding-bottom: 8rem
}
}
@media only screen and (min-width:992px) {
.section--padding {
padding-top: 9rem;
padding-bottom: 9rem
}
}
.section--nargin {
margin-top: 6rem;
margin-bottom: 6rem
}
@media only screen and (min-width:768px) {
.section--nargin {
margin-top: 8rem;
margin-bottom: 8rem
}
}
@media only screen and (min-width:992px) {
.section--nargin {
margin-top: 9rem;
margin-bottom: 9rem
}
}
@media only screen and (min-width:1200px) {
.section--nargin {
margin-top: 10rem;
margin-bottom: 10rem
}
}
.p-0 {
padding: 0
}
.pt-0 {
padding-top: 0
}
.pb-0 {
padding-bottom: 0
}
.m-0 {
margin: 0
}
.mt-0 {
margin-top: 0
}
.mb-0 {
margin-bottom: 0
}
.mb-60 {
margin-bottom: 3.5rem
}
@media only screen and (min-width:768px) {
.mb-60 {
margin-bottom: 4rem
}
}
@media only screen and (min-width:992px) {
.mb-60 {
margin-bottom: 6rem
}
}
.mb-55 {
margin-bottom: 3.5rem
}
@media only screen and (min-width:992px) {
.mb-55 {
margin-bottom: 5.5rem
}
}
.mb-50 {
margin-bottom: 3rem
}
@media only screen and (min-width:768px) {
.mb-50 {
margin-bottom: 3.2rem
}
}
@media only screen and (min-width:992px) {
.mb-50 {
margin-bottom: 3.5rem
}
}
@media only screen and (min-width:1200px) {
.mb-50 {
margin-bottom: 4rem
}
}
@media only screen and (min-width:1600px) {
.mb-50 {
margin-bottom: 5rem
}
}
.mb-40 {
margin-bottom: 3.2rem
}
@media only screen and (min-width:992px) {
.mb-40 {
margin-bottom: 4rem
}
}
.mb--n40 {
margin-bottom: -3.2rem
}
@media only screen and (min-width:992px) {
.mb--n40 {
margin-bottom: -4rem
}
}
.mb-35 {
margin-bottom: 2.5rem
}
@media only screen and (min-width:768px) {
.mb-35 {
margin-bottom: 3.5rem
}
}
.mb-30 {
margin-bottom: 2rem
}
@media only screen and (min-width:992px) {
.mb-30 {
margin-bottom: 2.5rem
}
}
@media only screen and (min-width:1600px) {
.mb-30 {
margin-bottom: 3rem
}
}
.mb--n30 {
margin-bottom: -2rem
}
@media only screen and (min-width:992px) {
.mb--n30 {
margin-bottom: -2.5rem
}
}
@media only screen and (min-width:1600px) {
.mb--n30 {
margin-bottom: -3rem
}
}
.mb-28 {
margin-bottom: 2.8rem
}
.mb--n28 {
margin-bottom: -2.8rem
}
.mb--n25 {
margin-bottom: -1.8rem
}
@media only screen and (min-width:992px) {
.mb--n25 {
margin-bottom: -2rem
}
}
@media only screen and (min-width:1200px) {
.mb--n25 {
margin-bottom: -2.5rem
}
}
.mb-25 {
margin-bottom: 1.8rem
}
@media only screen and (min-width:992px) {
.mb-25 {
margin-bottom: 2rem
}
}
@media only screen and (min-width:1200px) {
.mb-25 {
margin-bottom: 2.5rem
}
}
.mb-20 {
margin-bottom: 1.5rem
}
@media only screen and (min-width:768px) {
.mb-20 {
margin-bottom: 2rem
}
}
.mb-15 {
margin-bottom: 1rem
}
@media only screen and (min-width:768px) {
.mb-15 {
margin-bottom: 1.5rem
}
}
.mb-12 {
margin-bottom: 1rem
}
@media only screen and (min-width:992px) {
.mb-12 {
margin-bottom: 1.2rem
}
}
.mb-10 {
margin-bottom: .8rem
}
@media only screen and (min-width:992px) {
.mb-10 {
margin-bottom: 1rem
}
}
.mb-5 {
margin-bottom: .5rem
}
.mb-8 {
margin-bottom: .8rem
}
.mr-30 {
margin-right: 3rem
}
.offcanvas__header--menu__open {
line-height: 1;
display: none
}
@media only screen and (max-width:991px) {
.offcanvas__header--menu__open {
display: block
}
}
.offcanvas__header--menu__open--svg {
width: 32px
}
.offcanvas-header {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
max-width: 300px;
height: 100vh;
-webkit-transition: var(--transition);
transition: var(--transition);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background-color: var(--white-color);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .15);
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
opacity: 0;
visibility: hidden
}
@media only screen and (min-width:480px) {
.offcanvas-header {
max-width: 320px
}
}
.offcanvas-header.open {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible
}
.offcanvas-header.open~.offcanvas-overlay {
visibility: visible;
opacity: .75
}
.offcanvas-overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
-webkit-transition: var(--transition);
transition: var(--transition);
opacity: 0;
background-color: var(--black-color)
}
.offcanvas__inner {
position: relative;
height: 100%
}
.offcanvas__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px 15px
}
.offcanvas__close--btn {
position: relative;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
width: 2rem;
height: 2rem;
padding: 0;
text-indent: -9999px;
border: none;
background-color: transparent
}
.offcanvas__close--btn::after,
.offcanvas__close--btn::before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
content: "";
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: var(--black-color)
}
.offcanvas__close--btn::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.offcanvas__menu {
overflow-y: auto;
height: 100%
}
.offcanvas__menu_ul {
overflow: auto;
margin: 0;
padding: 0;
list-style: none
}
.offcanvas__menu_li {
position: relative;
border-bottom: 1px solid var(--border-color2)
}
.offcanvas__menu_li:first-child {
border-top: 1px solid var(--border-color2)
}
.offcanvas__menu_item {
line-height: 1;
display: block;
padding: 15px 20px;
text-transform: uppercase
}
.offcanvas__sub_menu {
display: none;
margin: 0;
padding: 0;
list-style: none
}
.offcanvas__sub_menu_li {
position: relative;
border-top: 1px solid var(--border-color2)
}
.offcanvas__sub_menu_item {
line-height: 1;
display: block;
padding: 15px 0 15px 30px
}
.offcanvas__sub_menu_item~.offcanvas__sub_menu .offcanvas__sub_menu_item {
padding-left: 40px
}
.offcanvas__sub_menu_toggle {
font-size: 20px;
position: absolute;
z-index: 9;
top: 0;
right: 0;
width: 4rem;
height: 4.6rem;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent
}
.offcanvas__sub_menu_toggle::after,
.offcanvas__sub_menu_toggle::before {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
content: "";
-webkit-transition: var(--transition);
transition: var(--transition);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-color: var(--black-color)
}
.offcanvas__sub_menu_toggle:not(.active)::after {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
transform: translateX(-50%) translateY(-50%) rotate(90deg)
}
.offcanvas__account--items {
padding: 28px 17px 20px
}
.offcanvas__account--items__icon {
width: 3rem;
height: 3rem;
text-align: center;
background: var(--secondary-color);
line-height: 3.8rem;
border-radius: 50%;
color: var(--white-color)
}
.offcanvas__account--items__label {
font-size: 1.5rem;
font-weight: 600;
margin-left: 6px
}
.offcanvas__language--switcher {
font-weight: 500;
font-family: var(--font-poppins)
}
.offcanvas__dropdown--language {
position: absolute;
z-index: 9;
width: 100px;
-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
bottom: 100%;
opacity: 0;
visibility: hidden;
margin-bottom: 20px;
-webkit-transition: var(--transition);
transition: var(--transition);
background: var(--white-color)
}
.offcanvas__dropdown--language.active {
opacity: 1;
visibility: visible;
margin-bottom: 12px
}
.offcanvas__account--currency {
position: relative;
padding: 0 17px
}
.offcanvas__account--currency__menu {
font-family: var(--font-poppins);
font-weight: 500
}
.offcanvas__account--currency__submenu {
position: absolute;
z-index: 9;
width: 100px;
-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
bottom: 100%;
opacity: 0;
visibility: hidden;
margin-bottom: 20px;
-webkit-transition: var(--transition);
transition: var(--transition);
background: var(--white-color)
}
.offcanvas__account--currency__submenu.active {
opacity: 1;
visibility: visible;
margin-bottom: 12px
}
.offcanvas__stikcy--toolbar {
position: fixed;
bottom: 0;
background: var(--white-color);
left: 0;
right: 0;
z-index: 99;
-webkit-box-shadow: 0 0 9px rgba(0, 0, 0, .12);
box-shadow: 0 0 9px rgba(0, 0, 0, .12);
padding: 10px 20px;
display: none;
visibility: hidden
}
@media only screen and (min-width:500px) {
.offcanvas__stikcy--toolbar {
padding: 10px 40px
}
}
@media only screen and (min-width:768px) {
.offcanvas__stikcy--toolbar {
padding: 10px 60px
}
}
@media only screen and (max-width:991px) {
.offcanvas__stikcy--toolbar {
display: block;
visibility: visible
}
}
.offcanvas__stikcy--toolbar__btn {
position: relative;
text-align: center
}
.offcanvas__stikcy--toolbar__btn:hover .offcanvas__stikcy--toolbar__icon {
background: var(--primary-color);
color: var(--white-color)
}
.offcanvas__stikcy--toolbar__icon {
width: 3rem;
height: 3rem;
text-align: center;
background: var(--secondary-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
color: var(--white-color);
margin: 0 auto
}
.offcanvas__stikcy--toolbar__label {
display: block;
font-size: 1.2rem;
font-weight: 600;
margin-top: 6px
}
.header__sticky.sticky {
position: fixed;
width: 100%;
top: 0;
background: var(--white-color);
left: 0;
z-index: 99;
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .15);
box-shadow: 0 0 7px rgba(0, 0, 0, .15);
-webkit-transition: .3s;
transition: .3s
}
.header__sticky.sticky .header__sticky--block {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.header__sticky.sticky .header__sticky--none {
display: none
}
.header__sticky .header__sticky--block {
display: none
}
.main__logo--title {
line-height: 2rem
}
.header__topbar {
padding: 1rem 0
}
@media only screen and (max-width:991px) {
.header__topbar--inner {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
@media only screen and (max-width:575px) {
.header__shipping--wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.header__shipping--text {
font-size: 1.4rem;
line-height: 2rem
}
@media only screen and (max-width:767px) {
.header__shipping--text {
text-align: center
}
}
@media only screen and (min-width:992px) {
.header__shipping--text {
font-size: 1.4rem
}
}
@media only screen and (min-width:1200px) {
.header__shipping--text {
font-size: 1.5rem
}
}
@media only screen and (max-width:575px) {
.header__shipping--text {
margin-bottom: 1rem
}
.header__shipping--text:last-child {
margin-bottom: 0
}
}
.header__shipping--text__icon {
margin-right: .5rem
}
.header__discount--text {
font-size: 1.6rem
}
@media only screen and (min-width:992px) {
.header__discount--text {
font-size: 1.6rem
}
}
@media only screen and (min-width:1200px) {
.header__discount--text {
font-size: 1.8rem
}
}
.header__discount--icon__img {
vertical-align: middle;
margin-right: .4rem
}
@media only screen and (max-width:991px) {
.language__currency {
padding: 5px 20px
}
}
.language__currency--list {
position: relative;
margin-right: 1.5rem;
padding-right: 1.5rem
}
.language__currency--list:last-child {
margin-right: 0;
padding-right: 0
}
.language__currency--list:last-child::before {
display: none
}
.language__currency--list::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
background: var(--white-color);
right: 0;
top: 0
}
.language__switcher {
font-size: 1.5rem
}
@media only screen and (min-width:992px) {
.language__switcher {
font-size: 1.6rem;
line-height: 2.4rem
}
}
.language__switcher--icon__img {
vertical-align: middle;
margin-right: 3px
}
.language__switcher.style2 {
color: var(--text-gray-color)
}
.language__switcher.style2:hover {
color: var(--secondary-color2)
}
.dropdown__language {
position: absolute;
z-index: 9;
width: 100px;
-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
top: 100%;
opacity: 0;
visibility: hidden;
margin-top: 28px;
-webkit-transition: var(--transition);
transition: var(--transition);
background: var(--white-color)
}
.dropdown__language.active {
opacity: 1;
visibility: visible;
margin-top: 17px
}
.language__items:last-child .language__text {
border-bottom: 0
}
.language__text {
display: block;
font-size: 1.4rem;
padding: 10px 14px;
background: var(--gray-color2);
border-bottom: 1px solid var(--border-color2)
}
.language__text:hover {
background: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color)
}
.account__currency {
margin-right: 25px;
position: relative
}
@media only screen and (min-width:1200px) {
.account__currency {
margin-right: 32px
}
}
.account__currency--link {
font-size: 1.5rem;
line-height: 2rem
}
@media only screen and (min-width:992px) {
.account__currency--link {
font-size: 1.5rem
}
}
.account__currency--link.style2 {
color: var(--text-gray-color)
}
.account__currency--link.style2:hover {
color: var(--secondary-color2)
}
.dropdown__currency {
position: absolute;
z-index: 9;
width: 100px;
-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
top: 100%;
opacity: 0;
visibility: hidden;
margin-top: 28px;
-webkit-transition: var(--transition);
transition: var(--transition);
background: var(--white-color)
}
.dropdown__currency.active {
opacity: 1;
visibility: visible;
margin-top: 17px
}
.currency__items:last-child .currency__text {
border-bottom: 0
}
.currency__text {
display: block;
font-size: 1.4rem;
padding: 1rem 1.4rem;
background: var(--gray-color2);
border-bottom: 1px solid var(--border-color2)
}
.currency__text:hover {
background: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color)
}
@media only screen and (max-width:991px) {
.main__header {
padding: 1.5rem 0
}
}
.header__account--items {
margin-right: 2rem
}
.header__account--items:last-child {
margin-right: 0
}
@media only screen and (max-width:575px) {
.header__account--items {
margin-right: 1rem
}
}
@media only screen and (min-width:992px) {
.header__account--search__items.mobile__d--block {
display: none
}
}
.header__account--btn {
position: relative;
color: var(--text-gray-color);
text-align: center
}
.header__account--btn:hover {
color: var(--secondary-color)
}
.items__count {
position: absolute;
right: -1.4rem;
top: -1rem;
width: 2rem;
height: 2rem;
font-size: 1rem;
line-height: 2rem;
background: var(--secondary-color);
text-align: center;
border-radius: 50%;
color: var(--white-color)
}
.items__count.style2 {
right: -1.4rem
}
.items__count.wishlist__count {
right: -.7rem
}
.predictive__search--title {
margin-bottom: 15px
}
@media only screen and (min-width:992px) {
.predictive__search--title {
margin-bottom: 20px
}
}
@media only screen and (min-width:1600px) {
.predictive__search--title {
margin-bottom: 30px
}
}
.predictive__search--box {
background: var(--white-color);
-webkit-box-shadow: 0 -4px 27px rgba(62, 70, 120, .16);
box-shadow: 0 -4px 27px rgba(62, 70, 120, .16);
position: relative;
position: fixed;
left: 0;
right: 0;
top: 0;
opacity: 0;
visibility: hidden;
z-index: 999;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
.predictive__search--box.active {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0)
}
.predictive__search--box__inner {
padding: 20px 16px;
text-align: center
}
@media only screen and (min-width:576px) {
.predictive__search--box__inner {
padding: 22px 50px
}
}
@media only screen and (min-width:768px) {
.predictive__search--box__inner {
padding: 30px 80px
}
}
@media only screen and (min-width:992px) {
.predictive__search--box__inner {
padding: 30px 150px
}
}
.predictive__search--form {
width: 100%;
position: relative
}
.predictive__search--input {
width: 100%;
height: 5rem;
border: 1px solid var(--border-color2);
padding: 0 80px 0 15px;
font-size: 1.6rem;
font-weight: 400;
border-radius: 5px
}
.predictive__search--input:focus {
border-color: var(--secondary-color)
}
.predictive__search--input:focus::-webkit-input-placeholder {
color: #000
}
@media only screen and (max-width:576px) {
.predictive__search--input {
height: 45px
}
}
.predictive__search--button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 0;
background: var(--secondary-color);
border: 0;
width: 6rem;
text-align: center;
color: var(--white-color);
border-radius: 0 5px 5px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.predictive__search--button:hover {
background: var(--primary-color)
}
.predictive__search--close__btn {
position: absolute;
top: 20px;
right: 40px;
padding: 0;
border: 0;
background: inherit
}
@media only screen and (max-width:576px) {
.predictive__search--close__btn {
right: 15px
}
}
.predictive__search--close__btn:hover {
color: var(--primary-color);
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
.header__bottom {
-webkit-box-shadow: 0 3px 8px rgba(71, 71, 71, .16);
box-shadow: 0 3px 8px rgba(71, 71, 71, .16)
}
.header__menu--items {
margin-right: 3rem;
position: relative
}
@media only screen and (min-width:992px) {
.header__menu--items {
margin-right: 2.5rem
}
}
@media only screen and (min-width:1200px) {
.header__menu--items {
margin-right: 3.8rem
}
}
@media only screen and (min-width:1366px) {
.header__menu--items {
margin-right: 5rem
}
}
@media only screen and (min-width:1600px) {
.header__menu--items {
margin-right: 7rem
}
}
@media only screen and (min-width:992px) {
.header__menu--items.style3 {
margin-right: 2.5rem
}
}
@media only screen and (min-width:1200px) {
.header__menu--items.style3 {
margin-right: 4rem
}
}
@media only screen and (min-width:1366px) {
.header__menu--items.style3 {
margin-right: 5rem
}
}
.header__menu--items:last-child {
margin-right: 0
}
.header__menu--items:hover .header__menu--link {
color: #FF4E4E !important;
}
.header__menu--items:hover .header__sub--menu {
visibility: visible;
margin-top: 0;
opacity: 1
}
.header__menu--items:hover .header__mega--menu {
visibility: visible;
margin-top: 0;
opacity: 1
}
.header__menu--link {
font-size: 1.6rem;
line-height: 2.5rem;
padding: 2rem 0;
color: black !important;
}
@media only screen and (min-width:1200px) {
.header__menu--link {
font-size: 1.8rem;
padding: 2.5rem 0
}
}
.header__menu--link.style3 {
color: var(--primary-color)
}
.header__menu--link.style3:hover {
color: var(--secondary-color)
}
.menu__plus--icon {
margin-left: 3px
}
.header__sub--menu {
position: absolute;
z-index: 9;
top: 100%;
left: 0;
visibility: hidden;
width: 220px;
margin: 0;
margin-top: 20px;
padding: 20px;
list-style: none;
-webkit-transition: var(--transition);
transition: var(--transition);
opacity: 0;
background-color: var(--white-color);
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
border-radius: 10px
}
.header__sub--menu__link {
font-size: 1.5rem;
display: block;
padding: 10px 0
}
.mega__menu--items {
position: static
}
.header__mega--menu {
position: absolute;
z-index: 9;
top: 100%;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
margin: 0;
margin-top: 20px;
padding: 25px;
list-style: none;
-webkit-transition: var(--transition);
transition: var(--transition);
visibility: hidden;
opacity: 0;
background-color: var(--white-color);
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
border-radius: 10px
}
.header__mega--menu__li {
padding: 3px 15px;
width: 25%
}
.header__mega--subtitle {
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 15px
}
.header__mega--sub__menu--title {
font-size: 1.5rem;
padding: 8px 0
}
.offCanvas__minicart {
position: fixed;
width: 310px;
height: 100%;
padding: 18px 15px 30px;
background: var(--white-color);
z-index: 999;
right: 0;
top: 0;
-webkit-transition: .4s;
transition: .4s;
-webkit-transform: translateX(100%);
transform: translateX(100%);
overflow-y: auto;
-webkit-box-shadow: 0 0 15px rgba(5, 0, 0, .1);
box-shadow: 0 0 15px rgba(5, 0, 0, .1);
visibility: hidden
}
.offCanvas__minicart.active {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0);
transform: translateX(0)
}
@media only screen and (min-width:480px) {
.offCanvas__minicart {
width: 375px
}
}
@media only screen and (min-width:1600px) {
.offCanvas__minicart {
padding: 20px 15px 33px
}
}
.minicart__header--top {
margin-bottom: 10px
}
.minicart__header--desc {
font-size: 1.6rem;
color: var(--text-gray-color)
}
@media only screen and (min-width:480px) {
.minicart__header--desc {
font-size: 1.7rem
}
}
.minicart__title {
font-weight: 600
}
.minicart__close--btn {
padding: 0;
background: inherit;
border: 0;
line-height: 1.5rem;
color: var(--black-color)
}
.minicart__close--btn:hover {
color: var(--primary-color);
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
.minicart__close--icon {
width: 22px
}
.minicart__product {
margin-bottom: 17px
}
.minicart__product--items {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border-color2)
}
@media only screen and (min-width:1600px) {
.minicart__product--items {
margin-top: 22px;
padding-top: 22px
}
}
.minicart__product--remove {
border: 0;
padding: 0;
background: 0 0;
font-size: 1.2rem;
text-transform: uppercase;
text-decoration: underline;
font-weight: 700;
opacity: .7
}
.minicart__product--remove:hover {
color: var(--secondary-color)
}
.minicart__thumbnail {
width: 100px;
line-height: 1
}
@media only screen and (min-width:480px) {
.minicart__thumbnail {
width: 120px
}
}
.minicart__thumbnail a {
display: block
}
.minicart__thumbnail a img {
display: block
}
.minicart__text {
width: calc(100% - 100px);
padding-left: 10px
}
@media only screen and (min-width:480px) {
.minicart__text {
width: calc(100% - 120px);
padding-left: 13px
}
}
.minicart__subtitle {
font-size: 1.5rem;
font-weight: 600;
line-height: 24px;
margin-bottom: 2px
}
@media only screen and (min-width:480px) {
.minicart__subtitle {
font-size: 1.6rem
}
}
.color__variant {
opacity: .8;
margin-bottom: 4px;
line-height: 20px
}
.minicart__price {
margin-bottom: 9px
}
.minicart__quantity {
margin-right: 15px
}
.quantity__box {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.quantity__value {
display: inline-block;
border: 1px solid var(--border-color2);
margin: 0;
width: 3.3rem;
height: 3rem;
text-align: center;
padding: 0;
background: var(--gray-color2);
cursor: pointer;
font-size: 2rem;
font-weight: 500
}
.quantity__value.decrease {
margin-right: -4px;
border-radius: 13px 0 0 13px
}
.quantity__value.increase {
margin-left: -4px;
border-radius: 0 13px 13px 0
}
input.quantity__number {
text-align: center;
border: none;
border-top: 1px solid var(--border-color2);
border-bottom: 1px solid var(--border-color2);
margin: 0;
width: 3.3rem;
height: 3rem
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
.minicart__amount {
padding: 13px 0;
border-top: 1px solid var(--border-color2);
border-bottom: 1px solid var(--border-color2)
}
.minicart__amount_list {
margin-bottom: 10px
}
.minicart__amount_list:last-child {
margin-bottom: 0
}
.minicart__conditions {
padding: 20px 0
}
.minicart__conditions--input {
vertical-align: middle
}
.minicart__conditions--label {
font-weight: 600;
letter-spacing: .5px;
color: var(--text-gray-color)
}
.minicart__conditions--link {
color: var(--secondary-color);
text-decoration: underline
}
.minicart__conditions--link:hover {
color: var(--primary-color);
text-decoration: underline
}
.minicart__button--link {
font-size: 1.5rem;
font-weight: 600;
line-height: 4.5rem;
height: 4.5rem;
margin-right: 14px
}
.minicart__button--link:last-child {
margin-right: 0
}
@media only screen and (max-width:991px) {
.header__section.mb-20 {
margin-bottom: 0
}
}
@media only screen and (max-width:767px) {
.header__topbar--inner2 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.main__header--style2 {
padding: 2.5rem 0
}
@media only screen and (max-width:991px) {
.header__info {
margin-right: 4rem
}
}
@media only screen and (max-width:767px) {
.header__info {
margin-right: 0;
margin-bottom: 1rem
}
}
@media only screen and (max-width:575px) {
.header__info {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.header__info--list {
margin-right: 2rem
}
.header__info--list:last-child {
margin-right: 0
}
@media only screen and (max-width:575px) {
.header__info--list {
margin-right: 0;
margin-bottom: 1.3rem
}
.header__info--list:last-child {
margin-bottom: 0
}
}
.header__info--icon {
vertical-align: middle;
margin-right: .3rem
}
.header__info--text {
color: var(--text-gray-color);
font-family: var(--open-sans)
}
@media only screen and (max-width:1199px) {
.header__info--text {
font-size: 1.4rem
}
}
.header__select--categories.select::before {
display: none
}
.header__select--categories__icon {
position: absolute;
right: 1.5rem;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
pointer-events: none
}
.select {
position: relative
}
.select::before {
border-bottom: 2px solid var(--black-color);
border-right: 2px solid var(--black-color);
content: "";
display: block;
height: 7px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 18px;
top: 50%;
width: 7px;
-webkit-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: .7
}
.header__select--inner {
border: 0;
background: var(--gray-color);
height: 5.5rem;
padding: 0 3.3rem 0 1.8rem;
-webkit-appearance: none;
cursor: pointer;
font-size: 1.6rem;
color: var(--primary-color)
}
@media only screen and (min-width:1200px) {
.header__select--inner {
padding: 0 4.3rem 0 2rem
}
}
.header__search--box {
position: relative;
width: 25rem
}
@media only screen and (min-width:992px) {
.header__search--box {
width: 32rem
}
}
@media only screen and (min-width:1200px) {
.header__search--box {
width: 45rem
}
}
.header__search input::-webkit-input-placeholder {
color: #a6a6a6
}
.header__search input::-moz-placeholder {
color: #a6a6a6
}
.header__search input:-ms-input-placeholder {
color: #a6a6a6
}
.header__search input:-moz-placeholder {
color: #a6a6a6
}
.header__search--input {
width: 100%;
border: 1px solid var(--gray-color);
border-left: 0;
height: 5.5rem;
padding: 0 7rem 0 2.2rem;
font-size: 1.5rem;
color: #a6a6a6;
font-family: var(--open-sans);
opacity: .7
}
.header__search--input:focus::-webkit-input-placeholder {
opacity: 1;
color: var(--primary-color)
}
@media only screen and (min-width:1200px) {
.header__search--input {
padding: 0 7rem 0 2.2rem
}
}
.header__search--button {
position: absolute;
top: -1px;
right: -1px;
height: 102%;
border: 0;
padding: 0 1.5rem;
line-height: 2rem;
background: var(--secondary-color)
}
.header__search--button:hover {
background: var(--primary-color)
}
.header__section3 {
background: var(--gray-color2);
-webkit-box-shadow: 0 3px 8px rgba(71, 71, 71, .16);
box-shadow: 0 3px 8px rgba(71, 71, 71, .16)
}
@media only screen and (max-width:991px) {
.header__section3.mb-20 {
margin-bottom: 2rem
}
}
.hero__slider--bg {
background: url(../images/home1-slider1.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover
}
@media only screen and (max-width:767px) {
.hero__slider--bg {
background-position: 25%
}
}
.hero__slider--bg.slider2 {
background: url(../images/home1-slider1.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover
}
@media only screen and (max-width:767px) {
.hero__slider--bg.slider2 {
background-position: 25%
}
}
.hero__slider--bg.slider3 {
background: url(../images/home1-slider3.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover
}
@media only screen and (max-width:767px) {
.hero__slider--bg.slider3 {
background-position: 25%
}
}
.hero__slider--items {
position: relative
}
.hero__slider--items__inner {
padding: 6rem 0
}
@media only screen and (min-width:768px) {
.hero__slider--items__inner {
padding: 6.5rem 0
}
}
@media only screen and (min-width:992px) {
.hero__slider--items__inner {
padding: 7rem 0
}
}
@media only screen and (min-width:1200px) {
.hero__slider--items__inner {
padding: 8rem 0
}
}
@media only screen and (min-width:1366px) {
.hero__slider--items__inner {
padding: 9.5rem 0
}
}
@media only screen and (min-width:1600px) {
.hero__slider--items__inner {
padding: 17.5rem 0
}
}
@media only screen and (max-width:767px) {
.slider__content {
text-align: center
}
}
@media only screen and (min-width:768px) {
.slider__content {
padding-left: 4rem
}
}
@media only screen and (min-width:1500px) {
.slider__content {
padding-left: 0
}
}
@media only screen and (min-width:768px) {
.slider__content.text-right {
padding-right: 4rem;
padding-left: 0
}
}
@media only screen and (min-width:1500px) {
.slider__content.text-right {
padding-right: 0
}
}
.slider__content--maintitle {
margin-bottom: 1.4rem
}
@media only screen and (min-width:992px) {
.slider__content--maintitle {
margin-bottom: 1.8rem
}
}
@media only screen and (min-width:992px) {
.slider__content--maintitle {
margin-bottom: 2.3rem
}
}
@media only screen and (min-width:1200px) {
.slider__content--maintitle {
margin-bottom: 3rem
}
}
.slider__content--desc {
font-weight: 300
}
.slider__content--desc.desc1 {
position: relative;
padding-left: 70px
}
@media only screen and (max-width:767px) {
.slider__content--desc.desc1 {
padding-left: 0
}
}
.slider__content--desc.desc1.right {
padding-left: 0
}
.slider__content--desc.desc1.right::before {
display: none
}
.slider__content--desc.desc1::before {
position: absolute;
content: "";
width: 5.5rem;
height: .1rem;
background: var(--white-color);
left: 0;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
@media only screen and (max-width:767px) {
.slider__content--desc.desc1::before {
display: none
}
}
@media only screen and (max-width:1199px) {
.slider__content--desc.mb-35 {
margin-bottom: 3rem
}
}
@media only screen and (max-width:991px) {
.slider__content--desc.mb-35 {
margin-bottom: 2.5rem
}
}
.slider__content--btn {
background: var(--white-color);
color: var(--primary-color)
}
.hero__slider--activation .swiper-button-prev {
left: 1rem
}
@media only screen and (min-width:768px) {
.hero__slider--activation .swiper-button-prev {
left: 1rem
}
}
@media only screen and (min-width:992px) {
.hero__slider--activation .swiper-button-prev {
left: 2rem
}
}
.hero__slider--activation .swiper-button-next {
right: 1rem
}
@media only screen and (min-width:768px) {
.hero__slider--activation .swiper-button-next {
right: 1rem
}
}
@media only screen and (min-width:992px) {
.hero__slider--activation .swiper-button-next {
right: 2rem
}
}
.slider__text--shape__icon {
vertical-align: middle;
margin-right: .3rem
}
.slider__layer--img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1)
}
.swiper-slide-active .slider__content>* {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.swiper-slide-active .slider__content--subtitle {
-webkit-animation-delay: .3s;
animation-delay: .3s
}
.swiper-slide-active .slider__content--maintitle {
-webkit-animation-delay: .6s;
animation-delay: .6s
}
.swiper-slide-active .slider__content--desc {
-webkit-animation-delay: .9s;
animation-delay: .9s
}
.swiper-slide-active .slider__content--btn {
-webkit-animation-delay: 1s;
animation-delay: 1s
}
.swiper-slide-active .slider__layer--img {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: 1.7s;
transition: 1.7s
}
@media (min-width:768px) {
.slider2__col--9 {
width: 71%
}
}
@media (min-width:992px) {
.slider2__col--9 {
width: 71%
}
}
@media (min-width:1200px) {
.slider2__col--9 {
width: 73%
}
}
.hero__slider--bg2 {
background: url(../images/banner_images/-image_1-Candy_Cleanse_Taste_So_Good.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height: 30rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media (min-width:768px) {
.hero__slider--bg2 {
height: 32.8rem
}
}
@media (min-width:992px) {
.hero__slider--bg2 {
height: 42.2rem
}
}
@media (min-width:1200px) {
.hero__slider--bg2 {
height: 49rem
}
}
@media only screen and (max-width:767px) {
.hero__slider--bg2 {
background-position: 25%
}
}
.hero__slider--bg2.slider2 {
background: url(images/banner_images/6.jpeg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
width: 100%
}
@media only screen and (max-width:767px) {
.hero__slider--bg2.slider2 {
background-position: 25%
}
}
.slider__content2--maintitle {
font-size: 2.6rem;
line-height: 3.5rem
}
@media only screen and (min-width:768px) {
.slider__content2--maintitle {
font-size: 3rem;
line-height: 4rem
}
}
@media only screen and (min-width:1200px) {
.slider__content2--maintitle {
font-size: 4.5rem;
line-height: 6rem
}
}
.slider__content2--btn {
font-size: 1.3rem;
height: 3.5rem;
line-height: 3.5rem;
border-radius: 2rem;
margin-top: 2rem
}
.swiper-slide-active .slider__content2>* {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.swiper-slide-active .slider__content2--desc {
-webkit-animation-delay: .3s;
animation-delay: .3s
}
.swiper-slide-active .slider__content2--maintitle {
-webkit-animation-delay: .6s;
animation-delay: .6s
}
.swiper-slide-active .slider__content2--btn {
-webkit-animation-delay: .9s;
animation-delay: .9s
}
.hero__slider--bg3 {
background: url(../images/home3-slider1.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height: 32rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
@media (min-width:768px) {
.hero__slider--bg3 {
height: 37rem
}
}
@media (min-width:992px) {
.hero__slider--bg3 {
height: 42.2rem
}
}
@media (min-width:1200px) {
.hero__slider--bg3 {
height: 46.8rem
}
}
@media (min-width:1600px) {
.hero__slider--bg3 {
height: 47.4rem
}
}
@media only screen and (max-width:767px) {
.hero__slider--bg3 {
background-position: 25%
}
}
.hero__slider--bg3.slider2 {
background: url(../images/home3-slider2.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
width: 100%
}
@media only screen and (max-width:767px) {
.hero__slider--bg3.slider2 {
background-position: 25%
}
}
@media only screen and (min-width:768px) {
.slider__content3.padding-left {
padding-left: 5rem
}
}
@media only screen and (min-width:992px) {
.slider__content3.padding-left {
padding-left: 7rem
}
}
@media only screen and (max-width:767px) {
.slider__content3.padding-left {
text-align: center;
width: 100%;
padding: 0 3rem
}
}
@media only screen and (max-width:480px) {
.slider__content3.padding-left {
padding: 0 1.5rem
}
}
.slider__content3.padding-left.text-center {
width: 100%;
padding-left: 0
}
.slider__content3--maintitle {
font-size: 2.2rem;
line-height: 3rem;
margin-bottom: 1rem;
font-weight: 700
}
@media only screen and (min-width:480px) {
.slider__content3--maintitle {
font-size: 2.8rem;
line-height: 4rem
}
}
@media only screen and (min-width:768px) {
.slider__content3--maintitle {
font-size: 3.2rem;
line-height: 4.3rem;
margin-bottom: 1rem
}
}
@media only screen and (min-width:992px) {
.slider__content3--maintitle {
font-size: 3.5rem;
line-height: 4.5rem;
margin-bottom: 1rem
}
}
@media only screen and (min-width:1200px) {
.slider__content3--maintitle {
font-size: 4rem;
line-height: 5rem;
margin-bottom: 1.6rem
}
}
@media only screen and (min-width:1600px) {
.slider__content3--maintitle {
font-size: 4.5rem;
line-height: 5.7rem;
margin-bottom: 1.6rem
}
}
@media only screen and (max-width:480px) {
.slider__content3--desc.mb-35 {
margin-bottom: 2rem
}
}
.slider__content3--desc.color-black {
color: var(--black-color)
}
.swiper-slide-active .slider__content3>* {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.swiper-slide-active .slider__content3--maintitle {
-webkit-animation-delay: .3s;
animation-delay: .3s
}
.swiper-slide-active .slider__content3--desc {
-webkit-animation-delay: .6s;
animation-delay: .6s
}
.swiper-slide-active .slider__content3--btn {
-webkit-animation-delay: .9s;
animation-delay: .9s
}
.swiper:hover .swiper__nav--btn {
opacity: 1;
visibility: visible
}
@media only screen and (max-width:767px) {
.product__tab--btn {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
@media only screen and (max-width:767px) {
.product__tab--btn.style2 {
margin-top: 2rem
}
}
.product__tab--btn__list {
font-size: 1.6rem;
height: 3.2rem;
line-height: 3.2rem;
padding: 0 1rem;
cursor: pointer;
font-weight: 600;
-webkit-transition: var(--transition);
transition: var(--transition);
border: 1px solid transparent
}
.product__tab--btn__list.active {
border-color: var(--secondary-color)
}
.product__tab--btn__list:hover {
border-color: var(--secondary-color)
}
.product__tab--btn__list:last-child {
margin-right: 0
}
@media only screen and (max-width:575px) {
.product__tab--btn__list {
margin: 5px
}
}
@media only screen and (min-width:768px) {
.product__tab--btn__list {
margin-right: 10px;
font-size: 1.8rem;
height: 3.4rem;
line-height: 3.4rem;
padding: 0 1.2rem
}
}
@media only screen and (min-width:992px) {
.product__tab--btn__list {
font-size: 2rem;
height: 3.6rem;
line-height: 3.6rem;
padding: 0 1.6rem
}
}
.product__tab--btn__list.style2 {
border: 0;
padding: 0;
margin-right: 3.5rem
}
@media only screen and (max-width:767px) {
.product__tab--btn__list.style2 {
margin-right: 2rem
}
}
.product__tab--btn__list.style2:last-child {
margin-right: 0
}
.product__tab--btn__list.style2:hover {
color: var(--secondary-color)
}
.product__tab--btn__list.style2.active {
color: var(--secondary-color)
}
.product__swiper--column4 {
padding: 0 2px 2px
}
.product__items--thumbnail {
position: relative;
overflow: hidden;
line-height: 1
}
.product__secondary--img {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.product__items:hover .product__items--img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.product__items:hover .product__secondary--img {
opacity: 1;
visibility: visible
}
.product__items:hover .product__items--action {
opacity: 1;
visibility: visible;
bottom: 1.2rem
}
.product__items:hover .product__items--action__cart--btn {
opacity: 1;
visibility: visible
}
.product__items:hover .product__cart--btn__style2 {
opacity: 1;
visibility: visible
}
.product__items--link {
display: block
}
@media only screen and (max-width:767px) {
.product__items--link {
width: 100%
}
}
.product__items--img {
width: 100%;
display: block
}
.product__items--action {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: var(--transition);
transition: var(--transition)
}
@media only screen and (max-width:575px) {
.product__items--action {
opacity: 1;
visibility: visible;
bottom: 1.2rem
}
}
.product__items--action__list {
margin-right: .3rem
}
.product__items--action__list:last-child {
margin-right: 0
}
@media only screen and (min-width:992px) {
.product__items--action__list {
margin-right: .4rem
}
}
.product__items--action__btn {
height: 3.2rem;
line-height: 3.2rem;
padding: 0 .6rem;
color: var(--text-gray-color);
background: var(--white-color);
border-radius: .3rem
}
@media only screen and (min-width:992px) {
.product__items--action__btn {
padding: 0 .8rem;
height: 3.4rem;
line-height: 3.2rem
}
}
.product__items--action__btn.add__to--cart {
padding: 0 .8rem;
font-size: 1.5rem
}
@media only screen and (min-width:1200px) {
.product__items--action__btn.add__to--cart {
font-size: 1.4rem;
padding: 0 .6rem
}
}
@media only screen and (min-width:1366px) {
.product__items--action__btn.add__to--cart {
padding: 0 1rem
}
}
@media only screen and (min-width:1600px) {
.product__items--action__btn.add__to--cart {
padding: 0 1.3rem
}
}
.product__items--action__btn--svg {
vertical-align: middle
}
.product__items--action__btn:hover {
background: var(--secondary-color);
color: var(--white-color)
}
.product__items--action__cart--btn {
height: 3.2rem;
line-height: 3.4rem;
font-size: 1.4rem;
padding: 0 1.3rem;
opacity: 0;
visibility: hidden
}
@media only screen and (max-width:575px) {
.product__items--action__cart--btn {
opacity: 1;
visibility: visible
}
}
.product__items--action__cart--btn__icon {
margin-right: .3rem
}
.product__items--action__cart--btn.btn__style2 {
height: 3.2rem;
line-height: 3.4rem;
font-size: 1.4rem;
padding: 0 1.5rem
}
.product__items--content {
padding: 1.8rem 1rem 1.5rem;
border: 1px solid var(--border-color);
border-top: 0
}
.product__items--content__subtitle {
font-size: 1.4rem;
line-height: 2.2rem;
color: var(--text-gray-color)
}
@media only screen and (min-width:992px) {
.product__items--content__subtitle {
font-size: 1.5rem
}
}
.product__items--content__title {
margin-bottom: .3rem
}
@media only screen and (max-width:400px) {
.product__items--content__title {
font-size: 1.4rem;
line-height: 2rem
}
}
.product__items--content.style2 {
padding: 1.8rem 0 0;
border: 0
}
.product__cart--btn__style2 {
font-size: 1rem;
height: 2.5rem;
line-height: 2.5rem;
padding: 0 1.3rem;
position: absolute;
right: 0;
top: 56%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
opacity: 0;
visibility: hidden
}
@media only screen and (max-width:575px) {
.product__cart--btn__style2 {
position: inherit;
top: inherit;
-webkit-transform: inherit;
transform: inherit;
margin-top: 1rem;
opacity: 1;
visibility: visible
}
}
.product__items--color {
margin-bottom: .6rem
}
.product__items--color__list {
margin-right: .8rem
}
.product__items--color__list:last-child {
margin-right: 0
}
.product__items--color__link {
width: 1.1rem;
height: 1.1rem;
border-radius: 50%
}
.product__items--color__link.one {
background: #fb2c36
}
.product__items--color__link.two {
background: #f8a81e
}
.product__items--color__link.three {
background: #2cfb3a
}
.product__items--color__link.four {
background: #2c9afb
}
@media only screen and (max-width:575px) {
.add__to--cart__text {
display: none
}
}
.product__items--price {
margin-bottom: .8rem
}
.product__items--price.style2 {
margin-bottom: 0
}
.current__price {
font-size: 1.5rem;
color: var(--secondary-color);
font-weight: 600
}
@media only screen and (min-width:768px) {
.current__price {
font-size: 1.6rem
}
}
@media only screen and (min-width:992px) {
.current__price {
font-size: 1.8rem
}
}
.current__price.style2 {
font-size: 1.6rem
}
.old__price {
font-size: 1.4rem;
color: var(--light-color);
font-weight: 600;
text-decoration: line-through;
margin-left: .4rem
}
@media only screen and (min-width:768px) {
.old__price {
font-size: 1.5rem
}
}
@media only screen and (min-width:992px) {
.old__price {
font-size: 1.6rem
}
}
.old__price.style2 {
font-size: 1.4rem
}
.product__rating {
margin-bottom: 1.6rem
}
.rating__list {
margin-right: .4rem
}
.rating__list:last-child {
margin-right: 0
}
.rating__list--icon {
color: var(--yellow-color)
}
.product__badge {
position: absolute;
top: 0;
left: 1rem
}
.product__badge.style2 {
top: 1.5rem;
left: 0
}
.product__badge.style3 {
top: 0;
left: 0
}
.product__badge--items {
width: 2.4rem;
height: 4.9rem;
background: var(--secondary-color);
color: var(--white-color);
font-size: 1rem;
line-height: 4.3rem;
text-align: center;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%)
}
.product__badge--items.style2 {
width: 4.9rem;
height: 2.3rem;
line-height: 2.3rem;
-webkit-clip-path: inherit;
clip-path: inherit;
border-radius: 0 .2rem .2rem 0
}
.product__badge--items.style3 {
width: 2.6rem;
height: 4.1rem;
line-height: 4.1rem;
-webkit-clip-path: inherit;
clip-path: inherit
}
@media only screen and (min-width:1200px) {
.product__col--width__8 {
width: 63.66666667%
}
}
@media only screen and (min-width:1200px) {
.product__col--width__4 {
width: 36.33333333%
}
}
@media only screen and (max-width:767px) {
.product__section--header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.product__items--content__tag {
color: var(--text-gray-color);
margin: .3rem 0
}
.product__items:hover .product__items--action.style2 {
bottom: inherit;
right: 1.5rem
}
.product__items--rating {
margin-bottom: .8rem
}
.product__items--action.style2 {
top: 2.5rem;
right: 0;
left: auto;
bottom: auto;
padding: .5rem .3rem;
background: var(--white-color);
border-radius: 2rem
}
@media only screen and (min-width:992px) {
.product__items--action.style2 {
top: 1.5rem
}
}
@media only screen and (max-width:7575px) {
.product__items--action.style2 {
right: 1.5rem
}
}
.product__items--action__list.style2 {
margin-right: 0;
margin-bottom: .3rem;
text-align: center
}
.product__items--action__list.style2:last-child {
margin-bottom: 0
}
.product__items--action__btn.style2 {
background: inherit;
color: var(--secondary-color)
}
.product__items--action__btn.style2:hover {
color: var(--primary-color)
}
.product__content--style2 {
padding: 1.5rem 0 0;
border: 0
}
.product__swiper--grid {
padding-top: 6.8rem;
margin-top: -7rem
}
@media only screen and (max-width:991px) {
.product__swiper--grid {
margin-bottom: 3rem
}
}
.product__grid--heading__maintitle {
font-weight: 600;
padding-bottom: .8rem
}
@media only screen and (min-width:992px) {
.product__grid--heading__maintitle {
font-size: 2.4rem;
line-height: 3rem
}
}
.product__grid--heading__maintitle::before {
position: absolute;
content: "";
width: 6rem;
height: .2rem;
background: var(--secondary-color2);
bottom: 0;
left: 0
}
.product__items--grid {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color)
}
.product__items--grid:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0
}
.product__items--grid__thumbnail {
overflow: hidden;
line-height: 1;
width: 8rem
}
@media only screen and (min-width:1366px) {
.product__items--grid__thumbnail {
width: 10rem
}
}
.product__items--grid__content {
padding: .8rem .8rem .8rem 1.5rem;
width: calc(100% - 8rem)
}
@media only screen and (min-width:1366px) {
.product__items--grid__content {
width: calc(100% - 10rem)
}
}
.product__items--grid:hover .product__items--img {
-webkit-transform: inherit;
transform: inherit
}
@media only screen and (max-width:767px) {
.categories__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.categories__content {
width: 35rem
}
@media only screen and (max-width:767px) {
.categories__content {
width: 100%;
margin-bottom: 3rem
}
}
.categories__content--title {
margin-bottom: 1.7rem
}
.categories__product {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1rem 0 1.5rem
}
@media (min-width:992px) {
.categories__product {
padding: 2rem 0 2.5rem
}
}
.categories__product--list {
margin: 0 2rem 2rem 0
}
@media (min-width:992px) {
.categories__product--list {
margin: 0 3rem 3rem 0
}
}
.categories__product--icons {
display: inline-block;
width: 5.6rem;
height: 5.6rem;
background: var(--white-color);
color: var(--secondary-color2);
-webkit-box-shadow: 0 6px 12px rgba(58, 58, 58, .15);
box-shadow: 0 6px 12px rgba(58, 58, 58, .15);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%
}
.categories__product--icons:hover {
background: var(--secondary-color2);
color: var(--white-color);
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.categories__sidebar {
width: calc(100% - 35rem);
padding-left: 3rem
}
@media only screen and (min-width:768px) {
.categories__sidebar {
padding-left: 4rem
}
}
@media only screen and (min-width:992px) {
.categories__sidebar {
padding-left: 6rem
}
}
@media only screen and (min-width:1200px) {
.categories__sidebar {
padding-left: 11rem
}
}
@media only screen and (max-width:767px) {
.categories__sidebar {
width: 100%;
padding-left: 0
}
}
.categories__sidebar--inner {
padding: 1.5rem 0 1.5rem 3rem;
position: relative
}
@media only screen and (min-width:768px) {
.categories__sidebar--inner {
padding: 2rem 0 2rem 3.5rem
}
}
@media only screen and (min-width:992px) {
.categories__sidebar--inner {
padding: 3rem 0 3rem 6rem
}
}
@media only screen and (min-width:1200px) {
.categories__sidebar--inner {
padding: 4rem 0 4rem 11rem
}
}
@media only screen and (max-width:767px) {
.categories__sidebar--inner {
padding: 0
}
}
.categories__sidebar--inner:hover::before {
border-color: var(--primary-color)
}
.categories__sidebar--inner::before {
position: absolute;
content: "";
width: 60%;
height: 100%;
border: 4px solid var(--secondary-color2);
top: 0;
left: 0;
-webkit-transition: var(--transition);
transition: var(--transition)
}
@media only screen and (max-width:767px) {
.categories__sidebar--inner::before {
display: none
}
}
.categories__product--items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: var(--transition);
transition: var(--transition)
}
.categories__product--items:hover {
-webkit-box-shadow: 0 8px 16px rgba(25, 25, 25, .16);
box-shadow: 0 8px 16px rgba(25, 25, 25, .16)
}
.categories__product--items__link {
padding: 1.2rem 1.5rem;
width: 100%
}
@media only screen and (max-width:767px) {
.categories__product--items__link {
padding: 1.2rem 1.2rem
}
}
.categories__product--thumbnail__img {
margin: 0 auto
}
@media only screen and (max-width:767px) {
.categories__product--thumbnail__img {
max-width: 8rem
}
}
.categories__product--title {
margin-top: .8rem
}
@media only screen and (max-width:767px) {
.new__product--section__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.new__product--content {
width: 37rem;
padding-right: 4rem
}
@media only screen and (max-width:767px) {
.new__product--content {
width: 100%;
padding-right: 0;
margin-bottom: 3rem
}
}
.new__product--content__title {
margin-bottom: 1.2rem
}
@media only screen and (min-width:1200px) {
.new__product--content__title {
font-size: 4rem;
line-height: 5rem;
margin-bottom: 2rem
}
}
@media only screen and (min-width:1600px) {
.new__product--content__title {
font-size: 4.5rem;
line-height: 5.5rem;
margin-bottom: 2rem
}
}
.new__product--sidebar {
width: calc(100% - 37rem);
padding: 4.5rem 0 6rem;
padding-left: .2rem
}
@media only screen and (max-width:767px) {
.new__product--sidebar {
width: 100%;
padding: 0 0 5rem
}
}
.new__product--section::before {
position: absolute;
content: "";
width: 42%;
height: 100%;
background: #f1f1f1;
top: 0;
right: 0
}
@media only screen and (min-width:992px) {
.new__product--section::before {
width: 50%
}
}
@media only screen and (max-width:767px) {
.new__product--section::before {
display: none
}
}
.product__pagination {
bottom: 1.5rem !important
}
.product__pagination .swiper-pagination-bullet {
background: #949494
}
.product__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--secondary-color)
}
.new__product--price {
margin-bottom: 2.2rem
}
@media only screen and (min-width:1200px) {
.new__product--price {
margin-bottom: 3.2rem
}
}
.new__product--price__badge {
font-size: 1.4rem;
line-height: 2.2rem;
font-family: var(--open-sans);
color: var(--text-gray-color)
}
.new__product--current__price {
font-size: 2.5rem;
line-height: 3rem;
font-weight: 600
}
.new__product--old__price {
font-size: 1.8rem;
line-height: 2.2rem;
padding-left: 1rem;
color: var(--text-gray-color)
}
.banner__items {
overflow: hidden
}
.banner__items:hover .banner__items--thumbnail__img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.banner__items--thumbnail {
display: block
}
@media only screen and (max-width:575px) {
.banner__items--thumbnail {
width: 100%
}
}
.banner__items--thumbnail__img {
display: block
}
@media only screen and (max-width:575px) {
.banner__items--thumbnail__img {
width: 100%
}
}
.banner__items--content {
position: absolute;
top: 2.5rem;
left: 2rem;
cursor: pointer
}
@media only screen and (min-width:992px) {
.banner__items--content {
top: 3rem;
left: 3.5rem
}
}
.banner__items--content.one {
top: 50%;
left: auto;
right: 2rem;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
@media only screen and (min-width:768px) {
.banner__items--content.one {
right: 2.5rem
}
}
@media only screen and (min-width:992px) {
.banner__items--content.one {
right: 4.5rem
}
}
.banner__items--content.two {
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.banner__items--content.three {
left: 3rem;
top: 20%
}
@media only screen and (min-width:992px) {
.banner__items--content.three {
left: 6rem
}
}
.banner__items--content.four {
left: 2rem;
right: 2rem;
text-align: center
}
.banner__items--content.five {
top: 50%;
left: auto;
right: 2rem;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
@media only screen and (min-width:768px) {
.banner__items--content.five {
right: 2.5rem
}
}
@media only screen and (min-width:992px) {
.banner__items--content.five {
right: 4.5rem
}
}
.banner__items--content__title {
position: relative;
padding-bottom: 1rem;
font-size: 1.8rem;
line-height: 2.4rem
}
@media only screen and (min-width:768px) {
.banner__items--content__title {
font-size: 2rem;
line-height: 2.8rem
}
}
@media only screen and (min-width:992px) {
.banner__items--content__title {
font-size: 2.2rem;
line-height: 2.8rem
}
}
@media only screen and (min-width:1200px) {
.banner__items--content__title {
font-size: 2.4rem;
line-height: 3rem
}
}
@media only screen and (min-width:1366px) {
.banner__items--content__title {
font-size: 2.8rem;
line-height: 3.3rem
}
}
@media only screen and (min-width:1600px) {
.banner__items--content__title {
font-size: 3rem;
line-height: 3.6rem
}
}
.banner__items--content__title::before {
position: absolute;
content: "";
width: 10.4rem;
height: .4rem;
background: url(../images/border-shape.webp);
bottom: 0;
left: 0
}
.banner__items--content__title.four::before {
left: 50%;
-webkit-transform: translatex(-50%);
transform: translatex(-50%)
}
.banner__items--content__style2 {
position: absolute;
left: 3rem;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.banner__items--content__style2.right {
left: auto;
right: 3rem
}
.banner__items--content__style2--title {
font-size: 1.7rem;
line-height: 2.1rem;
margin-bottom: .8rem
}
@media only screen and (min-width:768px) {
.banner__items--content__style2--title {
font-size: 1.8rem;
line-height: 2.2rem;
margin-bottom: 1rem
}
}
@media only screen and (min-width:992px) {
.banner__items--content__style2--title {
font-size: 2rem;
line-height: 2.6rem;
margin-bottom: 1.2rem
}
}
@media only screen and (min-width:1200px) {
.banner__items--content__style2--title {
font-size: 2.2rem;
line-height: 3rem
}
}
@media only screen and (min-width:1366px) {
.banner__items--content__style2--title {
font-size: 2.5rem;
line-height: 3.6rem
}
}
@media only screen and (min-width:1600px) {
.banner__items--content__style2--title {
font-size: 2.8rem;
line-height: 4rem
}
}
.deals__banner--thumbnail {
overflow: hidden
}
@media only screen and (max-width:1199px) {
.deals__banner--thumbnail {
margin-top: 4rem
}
}
.deals__banner--thumbnail:hover .deals__banner--thumbnail__img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.deals__banner--thumbnail.mt-0 {
margin-top: 0
}
.deals__banner--content {
position: absolute;
left: 0;
right: 0;
top: 2rem
}
.deals__banner--content__maintitle {
margin-bottom: 1.6rem
}
.countdown__item {
margin-right: 2rem;
text-align: center
}
.countdown__item:last-child {
margin-right: 0
}
.deals__banner--countdown {
margin-bottom: 2.2rem
}
@media only screen and (max-width:480px) {
.deals__banner--countdown {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.deals__banner--countdown .countdown__number {
width: 4rem;
height: 4rem;
line-height: 4rem;
background: var(--white-color);
color: var(--primary-color);
border-radius: 50%;
font-size: 1.6rem;
font-weight: 600;
margin-bottom: .2rem;
font-family: var(--open-sans)
}
@media only screen and (min-width:1200px) {
.deals__banner--countdown .countdown__number {
font-size: 1.8rem
}
}
.deals__banner--countdown .countdown__text {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
text-transform: capitalize
}
@media only screen and (max-width:575px) {
.banner__video--thumbnail__img {
height: 17rem;
-o-object-fit: cover;
object-fit: cover;
margin: 0 auto
}
}
.bideo__play {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translatey(-50%) translatex(-50%);
transform: translatey(-50%) translatex(-50%)
}
.bideo__play--icon {
width: 8.4rem;
height: 8.4rem;
background: var(--white-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
color: var(--secondary-color);
position: relative;
-webkit-transition: .5s;
transition: .5s;
-webkit-animation: animate 2s linear infinite;
animation: animate 2s linear infinite;
-webkit-transform: scale(1);
transform: scale(1)
}
.bideo__play--icon:hover {
background: var(--secondary-color);
color: var(--white-color);
-webkit-transform: scale(1.2);
transform: scale(1.2)
}
@media only screen and (max-width:767px) {
.bideo__play--icon {
width: 6rem;
height: 6rem
}
}
@media only screen and (max-width:767px) {
.bideo__play--icon svg {
width: 3.5rem
}
}
@-webkit-keyframes animate {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .7)
}
40% {
-webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
box-shadow: 0 0 0 50px rgba(255, 193, 7, 0)
}
80% {
-webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
box-shadow: 0 0 0 50px rgba(255, 193, 7, 0)
}
100% {
-webkit-box-shadow: 0 0 0 rgba(255, 193, 7, 0);
box-shadow: 0 0 0 rgba(255, 193, 7, 0)
}
}
@keyframes animate {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .7)
}
40% {
-webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
box-shadow: 0 0 0 50px rgba(255, 193, 7, 0)
}
80% {
-webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
box-shadow: 0 0 0 50px rgba(255, 193, 7, 0)
}
100% {
-webkit-box-shadow: 0 0 0 rgba(255, 193, 7, 0);
box-shadow: 0 0 0 rgba(255, 193, 7, 0)
}
}
@media only screen and (max-width:767px) {
.banner__sidebar--two {
text-align: center;
margin-top: 3rem
}
}
@media only screen and (max-width:767px) {
.banner__sidebar2--img {
margin: 0 auto
}
}
@media (min-width:768px) {
.banner2__col--3 {
width: 29%
}
}
@media (min-width:992px) {
.banner2__col--3 {
width: 29%
}
}
@media (min-width:1200px) {
.banner2__col--3 {
width: 27%
}
}
@media only screen and (max-width:767px) {
.banner__sidebar2--content {
left: 1.5rem;
right: 1.5rem
}
}
@media (min-width:768px) {
.banner2__col--6 {
width: 52%
}
}
@media (min-width:768px) {
.banner2__col--6r {
width: 48%
}
}
@media (max-width:479px) {
.banner__img--height {
height: 18rem;
-o-object-fit: cover;
object-fit: cover
}
}
.banner__content--style2 {
position: absolute;
top: 2rem;
left: 2rem
}
.banner__content--style2__subtitle {
font-size: 1.3rem;
line-height: 2.4rem;
font-weight: 400;
margin-bottom: .5rem
}
.banner__content--style2__subtitle.text-ofwhite {
color: #bcbcbc
}
.banner__content--style2--title {
font-size: 1.8rem;
line-height: 2.2rem;
color: var(--primary-color);
margin-bottom: 1rem
}
@media only screen and (min-width:1200px) {
.banner__content--style2--title {
font-size: 2rem;
line-height: 2.5rem;
margin-bottom: 1.5rem
}
}
.banner__content--style2--title.text-white {
color: var(--white-color)
}
.banner__content--style2__link {
color: var(--secondary-color2)
}
.banner__content--style2__link:hover {
color: var(--secondary-color) !important
}
.banner__content--style2__link.primary__btn.style2 {
background: inherit;
border: 1px solid var(--primary-color);
border-radius: 2rem;
padding: 0 2.8rem
}
.banner__content--style2__link.primary__btn.style2:hover {
background: var(--secondary-color2);
border-color: var(--secondary-color2);
color: var(--white-color) !important
}
.banner__content--style2__link.primary__btn.style2.text-white {
border: 1px solid var(--secondary-color2);
color: var(--primary-color)
}
@media only screen and (max-width:767px) {
.banner__section--inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.banner__discount--content {
width: 33.8rem
}
@media only screen and (max-width:767px) {
.banner__discount--content {
width: 100%;
margin-bottom: 3rem
}
}
.banner__discount--content__subtitle {
font-size: 1.3rem;
line-height: 2.2rem;
color: var(--text-gray-color);
margin-bottom: 1.2rem
}
.banner__discount--content__title {
margin-bottom: .8rem
}
@media only screen and (min-width:1200px) {
.banner__discount--content__title {
font-size: 3.5rem;
line-height: 4.5rem;
margin-bottom: 1rem
}
}
@media only screen and (min-width:1600px) {
.banner__discount--content__title {
font-size: 4rem;
line-height: 5rem;
margin-bottom: 1.3rem
}
}
.banner__discount--content__desc {
margin-bottom: 1.5rem
}
@media only screen and (min-width:1200px) {
.banner__discount--content__desc {
margin-bottom: 2.5rem
}
}
@media only screen and (min-width:1600px) {
.banner__discount--content__desc {
margin-bottom: 3rem
}
}
.banner2__right--sidebar {
width: calc(100% - 33.8rem);
padding: 3.5rem 0 3rem 3.8rem
}
@media only screen and (max-width:767px) {
.banner2__right--sidebar {
width: 100%;
padding: 2rem 0 2rem 2rem
}
}
@media only screen and (max-width:575px) {
.banner2__right--sidebar {
padding: 2rem 0 2rem 0
}
}
.banner2__right--sidebar:hover::before {
border-color: var(--secondary-color2)
}
.banner2__right--sidebar::before {
position: absolute;
content: "";
width: 50%;
height: 100%;
border: 4px solid var(--primary-color);
right: 0;
top: 0;
-webkit-transition: var(--transition);
transition: var(--transition)
}
.banner2__sidebar--items {
margin-right: 2rem;
overflow: hidden
}
.banner2__sidebar--items:last-child {
margin-right: 0
}
@media (min-width:992px) {
.banner2__sidebar--items {
margin-right: 3rem
}
}
.banner2__sidebar--items.one {
margin-top: 4rem
}
@media (min-width:992px) {
.banner2__sidebar--items.one {
margin-top: 8rem
}
}
.banner2__sidebar--items.two {
margin-top: 2rem
}
@media (min-width:992px) {
.banner2__sidebar--items.two {
margin-top: 4rem
}
}
.banner2__sidebar--items:hover .banner__items--thumbnail__img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.deals__content--style2 {
position: absolute;
left: 3.5rem;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
@media only screen and (max-width:480px) {
.deals__content--style2 {
text-align: center
}
}
.deals__content--style2__subtitle {
font-size: 1.3rem;
line-height: 2rem;
color: var(--text-gray-color);
margin-bottom: 1rem
}
.deals__content--style2__maintitle {
margin-bottom: 1.7rem;
color: var(--primary-color)
}
@media (max-width:767px) {
.deals__banner--thumbnail__img.style2 {
height: 30rem;
-o-object-fit: cover;
object-fit: cover
}
}
.product__banner {
overflow: hidden
}
.product__banner:hover .product__banner--thumbnail__img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.product__banner--content {
position: absolute;
top: 3rem;
left: 3rem
}
.product__banner--content__subtitle {
font-family: var(--open-sans);
font-size: 1.5rem;
font-weight: 400;
margin-bottom: .4rem
}
.product__banner--content--title {
font-size: 2.2rem;
line-height: 2.8rem;
margin-bottom: 2rem
}
.product__banner--content__price {
font-size: 2rem;
line-height: 2.2rem
}
@media only screen and (min-width:992px) {
.product__banner--content__price {
font-size: 2.5rem;
line-height: 2.8rem
}
}
.choiceus__banner--thumbnail {
overflow: hidden
}
@media only screen and (max-width:991px) {
.choiceus__banner--thumbnail.one {
margin-right: 5rem
}
}
.choiceus__banner--thumbnail.two {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.choiceus__banner--thumbnail__img:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
@media only screen and (max-width:991px) {
.choiceus__banner--thumbnail__img.two {
max-width: 28rem
}
}
@media only screen and (max-width:400px) {
.choiceus__banner--thumbnail__img.two {
max-width: 20rem
}
}
@media only screen and (max-width:300px) {
.choiceus__banner--thumbnail__img.two {
max-width: 12rem
}
}
.bideo__play.style3 {
left: 70%
}
.bideo__play--icon.style3 {
background: var(--primary-color);
color: var(--white-color)
}
.bideo__play--icon.style3:hover {
background: var(--secondary-color)
}
.choiceus__content {
padding-left: 3rem
}
@media only screen and (max-width:767px) {
.choiceus__content {
margin-top: 3rem
}
}
@media only screen and (max-width:991px) {
.choiceus__content {
padding-left: 0
}
}
.choiceus__content--title {
margin-bottom: 2.2rem
}
@media only screen and (max-width:767px) {
.choiceus__content--title {
margin-bottom: 1.2rem
}
}
.choiceus__content--desc {
margin-bottom: 4.2rem
}
@media only screen and (min-width:1200px) {
.choiceus__content--desc {
font-size: 1.7rem;
line-height: 2.8rem
}
}
@media only screen and (max-width:767px) {
.choiceus__content--desc {
margin-bottom: 2.2rem
}
}
.choiceus__info {
margin-bottom: 5rem
}
@media only screen and (max-width:767px) {
.choiceus__info {
margin-bottom: 2.5rem
}
}
.choiceus__info--step {
margin-bottom: 3.5rem
}
.choiceus__info--step:last-child {
margin-bottom: 0
}
@media only screen and (max-width:767px) {
.choiceus__info--step {
margin-bottom: 2.5rem
}
}
.choiceus__info--list {
text-align: center;
margin-right: 3.2rem
}
.choiceus__info--list:last-child {
margin-right: 0
}
.choiceus__info--text {
display: block;
font-weight: 600;
margin-top: 1.3rem
}
@media only screen and (max-width:767px) {
.choiceus__info--text {
margin-top: 1rem
}
}
.choiceus__info--btn {
-webkit-box-shadow: 0 6px 12px rgba(18, 26, 37, .34);
box-shadow: 0 6px 12px rgba(18, 26, 37, .34)
}
.banner__content--style3 {
position: absolute;
top: 50%;
left: 2rem;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.banner__content--style3__title {
font-size: 1.8rem;
margin-bottom: .5rem;
line-height: 2.4rem
}
@media only screen and (min-width:992px) {
.banner__content--style3__title {
margin-bottom: .5rem;
line-height: 2.6rem
}
}
@media only screen and (min-width:1200px) {
.banner__content--style3__title {
font-size: 2rem;
line-height: 2.4rem;
margin-bottom: .8rem
}
}
.banner__content--style3__price {
display: block;
margin-bottom: 1.5rem
}
@media only screen and (max-width:767px) {
.banner__content--style3__price {
margin-bottom: 1rem;
line-height: 2.2rem
}
}
.banner__content--style3__btn {
height: 2.5rem;
line-height: 2.3rem;
font-size: 1.2rem;
border: 1px solid var(--primary-color);
background: inherit;
color: var(--primary-color);
padding: 0 1.5rem;
border-radius: 0
}
.blog__section--inner {
padding: 1rem
}
.blog__section--inner.p-0 {
padding: 0
}
.blog__items {
-webkit-box-shadow: 0 3px 6px rgba(68, 68, 68, .2);
box-shadow: 0 3px 6px rgba(68, 68, 68, .2);
border-radius: 1rem 1rem 0 0
}
.blog__items:hover .blog__thumbnail--img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.blog__thumbnail {
overflow: hidden;
border-radius: 1rem 1rem 0 0
}
.blog__thumbnail--link {
width: 100%
}
.blog__thumbnail--img {
width: 100%
}
.blog__content {
padding: 1.8rem 1.5rem 1.5rem
}
.blog__content--meta {
margin-bottom: 1rem
}
@media only screen and (max-width:767px) {
.blog__content--meta {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.blog__content--meta__text {
font-size: 1.3rem;
color: var(--primary-color);
margin-right: 1.8rem
}
.blog__content--meta__text:last-child {
margin-right: 0
}
@media only screen and (min-width:1200px) {
.blog__content--meta__text {
margin-right: 2.2rem
}
}
@media only screen and (max-width:767px) {
.blog__content--meta__text {
margin-right: 0;
margin-bottom: .8rem
}
.blog__content--meta__text:last-child {
margin-bottom: 0
}
}
.blog__content--meta__icon {
color: var(--secondary-color);
margin-right: .4rem
}
.blog__content--title {
line-height: 2.5rem;
margin-bottom: 1.4rem
}
.blog__content--desc {
font-size: 1.6rem;
line-height: 2.5rem;
margin-bottom: 2.2rem
}
@media only screen and (max-width:767px) {
.blog__content--desc {
font-size: 1.5rem
}
}
.blog__content--btn {
background: var(--white-color);
border: 1px solid var(--primary-color);
color: var(--secondary-color);
font-size: 1.4rem;
border-radius: 2rem
}
@media only screen and (min-width:768px) {
.blog__content--btn {
line-height: 3rem;
height: 3rem;
padding: 0 1.7rem
}
}
.blog__content--btn:hover {
background: var(--secondary-color);
color: var(--white-color);
border-color: var(--secondary-color)
}
.blog__content--btn.btn__style3 {
color: var(--white-color);
border-radius: .2rem;
font-size: 1.3rem
}
.articl__post--items {
margin-bottom: 2rem
}
.articl__post--items:hover .articl__post--items__img {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.articl__post--items:last-child {
margin-bottom: 0
}
.articl__post--items__thumbnail {
width: 9rem;
overflow: hidden
}
.articl__post--items__content {
width: calc(100% - 9rem);
padding-left: 1.5rem
}
@media only screen and (min-width:768px) {
.articl__post--items__content--title {
font-size: 1.7rem;
line-height: 2.2rem
}
}
.testimonial__banner--thumbnail {
overflow: hidden
}
@media only screen and (max-width:1199px) {
.testimonial__banner--thumbnail {
margin-top: 3rem
}
}
.testimonial__banner--thumbnail:hover .testimonial__banner--thumbnail__img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.testimonial__items--topbar {
margin-bottom: 1.7rem
}
@media only screen and (max-width:767px) {
.testimonial__items--topbar {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
@media only screen and (max-width:767px) {
.testimonial__items--content {
text-align: center
}
}
.testimonial__items--thumbnail {
width: 5.6rem
}
.testimonial__items--author {
position: relative;
width: calc(100% - 5.6rem);
padding-left: 1.5rem
}
@media only screen and (max-width:767px) {
.testimonial__items--author {
width: auto
}
}
.testimonial__items--author__title {
line-height: 2rem;
font-size: 1.7rem
}
.testimonial__items--author__subtitle {
font-size: 1.3rem;
line-height: 1.7rem;
color: var(--text-gray-color);
font-style: italic;
font-family: var(--open-sans)
}
.testimonial__items--desc {
margin-bottom: 1.2rem
}
@media only screen and (min-width:992px) {
.testimonial__items--desc {
margin-bottom: 1.4rem
}
}
.testimonial__items--desc.style2 {
margin: 1rem 0 1.5rem
}
.testimonial__icon--svg {
color: var(--light-color)
}
.testimonial__rating {
margin-top: 1rem !important
}
.testimonial__rating .rating__list {
margin-right: .3rem
}
.testimonial__padding {
padding-bottom: 5rem
}
@media only screen and (min-width:1366px) {
.testimonial__padding {
padding-bottom: 6.5rem
}
}
@media only screen and (max-width:767px) {
.testimonial__padding {
padding-bottom: 4rem
}
}
.testimonial__swiper--column3 .swiper-pagination-bullet {
background: #c2c2c2
}
.testimonial__swiper--column3 .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--secondary-color2)
}
.testimonial__bg--two {
background: #f6f6f6
}
.testimonial__items--style2 {
background: var(--white-color);
padding: 3.5rem 1.5rem;
-webkit-box-shadow: 0 6px 12px rgba(52, 52, 52, .1);
box-shadow: 0 6px 12px rgba(52, 52, 52, .1)
}
.testimonial__thumbnail--style2 {
width: 5.6rem
}
.testimonial__content--style2 {
width: calc(100% - 5.6rem);
padding-left: 1.7rem
}
@media only screen and (min-width:768px) {
.testimonial__content--style2 {
padding-left: 3rem
}
}
.testimonial__quote--icon {
position: absolute;
top: 1.5rem;
left: 2rem
}
.testimonial__bg--shape1 {
position: absolute;
top: 0;
left: 0
}
.testimonial__bg--shape2 {
position: absolute;
top: 0;
right: 0
}
.testimonial__padding3 {
padding: 1rem .5rem 4.4rem
}
.testimonial__items--style3 {
background: #f8f8f8;
padding: 2.5rem 2rem;
-webkit-transition: var(--transition);
transition: var(--transition)
}
@media only screen and (min-width:768px) {
.testimonial__items--style3 {
padding: 3.5rem 2.5rem
}
}
.testimonial__items--style3:hover {
-webkit-box-shadow: 0 6px 12px rgba(25, 25, 25, .15);
box-shadow: 0 6px 12px rgba(25, 25, 25, .15)
}
.testimonial__thumbnail--style3 {
margin-bottom: 1.5rem
}
.testimonial__thumbnail--style3__img {
margin: 0 auto
}
.testimonial__style3--author {
margin-bottom: 1.2rem
}
.testimonial__style3--author__title {
font-size: 1.4rem;
line-height: 1.8rem
}
.testimonial__style3--author__subtitle {
font-size: 1.2rem;
line-height: 1.6rem;
color: var(--text-gray-color)
}
@media only screen and (max-width:767px) {
.newsletter__banner--thumbnail__img {
height: 25rem;
-o-object-fit: cover;
object-fit: cover
}
}
.newsletter__content {
position: absolute;
top: 50%;
right: 13rem;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.newsletter__content--subtitle {
margin-bottom: .5rem
}
@media only screen and (max-width:991px) {
.newsletter__content {
text-align: center;
left: 2rem;
right: 2rem
}
}
.newsletter__content.style2 {
left: 7rem;
right: auto
}
@media only screen and (min-width:992px) {
.newsletter__content.style2 {
left: 7rem
}
}
@media only screen and (max-width:991px) {
.newsletter__content.style2 {
left: 2rem;
right: 2rem
}
}
.newsletter__subscribe--form {
width: 35rem
}
@media only screen and (min-width:768px) {
.newsletter__subscribe--form {
width: 40rem
}
}
@media only screen and (min-width:992px) {
.newsletter__subscribe--form {
width: 42.5rem
}
}
@media only screen and (max-width:991px) {
.newsletter__subscribe--form {
margin: 0 auto
}
}
@media only screen and (max-width:575px) {
.newsletter__subscribe--form {
width: 100%
}
}
.newsletter__subscribe--input {
width: 100%;
height: 4.3rem;
border: 0;
background: var(--white-color);
padding: 0 12.5rem 0 2rem
}
@media only screen and (min-width:1600px) {
.newsletter__subscribe--input {
padding: 0 14rem 0 2rem
}
}
@media only screen and (max-width:575px) {
.newsletter__subscribe--input {
padding: 0 12rem 0 1.2rem
}
}
.newsletter__subscribe--button {
position: absolute;
right: 1rem;
top: 5px;
height: 3.3rem;
line-height: 3.3rem;
font-size: 1.3rem;
padding: 0 1.2rem
}
@media only screen and (min-width:1600px) {
.newsletter__subscribe--button {
padding: 0 2rem
}
}
.newsletter__subscribe--button__icon {
vertical-align: middle;
margin-left: .4rem
}
@media only screen and (max-width:575px) {
.newsletter__subscribe--button {
padding: 0 1rem
}
}
.newsletter__subscribe--button.btn__style2 {
height: 3.3rem;
line-height: 3.3rem
}
.newsletter__subscribe--form__style {
width: 100%
}
.footer__newsletter--desc {
font-size: 1.5rem
}
@media only screen and (max-width:1199px) {
.footer__newsletter--input {
padding: 0 1.4rem 0
}
}
@media only screen and (max-width:1199px) {
.footer__newsletter--button {
position: inherit;
top: inherit;
right: inherit;
margin-top: 1.5rem
}
}
.shipping__section--inner {
max-width: 650px;
margin: 0 auto;
padding: 2.5rem;
background: var(--white-color);
-webkit-box-shadow: 0 8px 18px rgba(70, 70, 70, .16);
box-shadow: 0 8px 18px rgba(70, 70, 70, .16)
}
@media only screen and (min-width:992px) {
.shipping__section--inner {
max-width: 750px;
padding: 3rem
}
}
@media only screen and (min-width:1366px) {
.shipping__section--inner {
max-width: 800px;
padding: 3.5rem 3rem
}
}
@media only screen and (min-width:1600px) {
.shipping__section--inner {
max-width: 868px;
padding: 4rem 3rem
}
}
@media only screen and (max-width:767px) {
.shipping__section--inner {
padding: 2.5rem 1.5rem
}
}
@media only screen and (max-width:575px) {
.shipping__section--inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.shipping_mt {
margin-top: -5rem
}
@media only screen and (max-width:767px) {
.shipping_mt {
margin-top: 6rem
}
}
.shipping__items {
position: relative;
padding-right: 4rem
}
@media only screen and (min-width:992px) {
.shipping__items {
padding-right: 6rem
}
}
@media only screen and (max-width:767px) {
.shipping__items {
padding-right: 2.2rem
}
}
@media only screen and (max-width:575px) {
.shipping__items {
width: 50%;
padding: 1rem
}
}
.shipping__items::before {
position: absolute;
content: "";
width: 6.5rem;
height: .1rem;
border: 1px dashed var(--secondary-color);
right: -14px;
top: 20px;
opacity: .6
}
@media only screen and (min-width:992px) {
.shipping__items::before {
width: 8.5rem
}
}
@media only screen and (max-width:767px) {
.shipping__items::before {
display: none
}
}
.shipping__items:last-child {
padding-right: 0
}
.shipping__items:last-child::before {
display: none
}
.shipping__items--content {
margin-top: 1.3rem
}
@media only screen and (max-width:575px) {
.shipping__items--content {
margin-top: .8rem
}
}
.shipping__items--content__title {
font-weight: 600;
font-size: 1.7rem;
line-height: 2.5rem
}
@media only screen and (max-width:767px) {
.shipping__items--content__title {
font-size: 1.6rem
}
}
.shipping__style2--inner {
border: 1px solid var(--gray-color);
padding: 3rem;
-webkit-box-shadow: 0 3px 6px rgba(100, 100, 100, .1);
box-shadow: 0 3px 6px rgba(100, 100, 100, .1)
}
@media only screen and (min-width:992px) {
.shipping__style2--inner {
padding: 3rem 2rem
}
}
@media only screen and (min-width:1200px) {
.shipping__style2--inner {
padding: 3rem
}
}
@media only screen and (max-width:991px) {
.shipping__style2--inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 3rem 2rem .4rem
}
}
.shipping__style2--items {
position: relative;
padding-right: 5.5rem;
margin-right: 5.5rem
}
@media only screen and (min-width:992px) {
.shipping__style2--items {
padding-right: 2rem;
margin-right: 2rem
}
}
@media only screen and (min-width:1200px) {
.shipping__style2--items {
padding-right: 5.5rem;
margin-right: 5.5rem
}
}
@media only screen and (max-width:991px) {
.shipping__style2--items {
padding-right: 3rem;
margin-right: 0;
width: 33.33%;
margin-bottom: 2.5rem
}
}
@media only screen and (max-width:767px) {
.shipping__style2--items {
width: 50%
}
}
@media only screen and (max-width:575px) {
.shipping__style2--items {
width: 100%;
padding-right: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.shipping__style2--items:last-child {
padding-right: 0;
margin-right: 0
}
.shipping__style2--items:last-child::before {
display: none
}
.shipping__style2--items::before {
position: absolute;
content: "";
width: .1rem;
height: 100%;
background: var(--gray-color);
right: 0;
top: 0
}
@media only screen and (max-width:991px) {
.shipping__style2--items::before {
display: none
}
}
.shipping__style2--icon {
margin-right: 2.5rem;
color: var(--secondary-color2)
}
.shipping__style2--content__title {
font-size: 1.5rem;
line-height: 2.2rem
}
.shipping__style2--content__desc {
font-family: var(--open-sans);
line-height: 2.2rem;
font-size: 1.4rem
}
.instagram__thumbnail {
overflow: hidden
}
.instagram__thumbnail:hover .instagram__social--icon {
-webkit-transform: translatey(-50%) translatex(-50%) scale(1);
transform: translatey(-50%) translatex(-50%) scale(1)
}
.instagram__thumbnail:hover .instagram__thumbnail--img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
@media only screen and (max-width:575px) {
.instagram__thumbnail--img {
width: 100%
}
}
.instagram__social--icon {
position: absolute;
top: 50%;
left: 50%;
width: 5rem;
height: 5rem;
background: var(--white-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
color: var(--secondary-color);
-webkit-transform: translatey(-50%) translatex(-50%) scale(0);
transform: translatey(-50%) translatex(-50%) scale(0)
}
.instagram__social--icon:hover {
background: var(--secondary-color);
color: var(--white-color)
}
.footer__bg {
background: url(../images/footer-bg.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover
}
@media only screen and (max-width:991px) {
.footer__section {
padding-bottom: 7rem
}
}
.main__footer {
border-bottom: 1px solid var(--border-color);
padding: 5rem 0 1.5rem
}
@media only screen and (min-width:992px) {
.main__footer {
padding: 5rem 0 2rem
}
}
@media only screen and (max-width:767px) {
.main__footer {
padding: 6rem 0 3.5rem
}
}
.footer__social {
margin-top: 2.5rem
}
@media only screen and (min-width:992px) {
.footer__social {
margin-top: 3.2rem
}
}
.social__shear--list {
margin-right: 1.6rem
}
.social__shear--list:last-child {
margin-right: 0
}
.social__shear--list__icon {
color: var(--secondary-color)
}
.social__shear--list__icon:hover {
color: var(--primary-color)
}
.footer__logo {
margin-bottom: 1.5rem
}
@media only screen and (max-width:991px) {
.footer__widget {
margin-bottom: 3rem
}
}
@media only screen and (max-width:767px) {
.footer__widget {
margin-bottom: 0
}
}
.footer__widget--desc {
font-size: 1.5rem
}
.footer__widget--title {
margin-bottom: 2rem;
font-weight: 400;
position: relative;
color: var(--primary-color);
font-size: 1.8rem
}
@media only screen and (min-width:576px) {
.footer__widget--title {
font-size: 2rem;
line-height: 2.4rem
}
}
@media only screen and (min-width:768px) {
.footer__widget--title {
margin-bottom: 1.5rem
}
}
@media only screen and (min-width:992px) {
.footer__widget--title {
font-size: 2rem;
line-height: 2.6rem;
margin-bottom: 1.7rem
}
}
.footer__widget--title__arrowdown--icon {
position: absolute;
right: 0;
top: 38%;
-webkit-transition: .3s;
transition: .3s;
display: none
}
@media only screen and (max-width:767px) {
.footer__widget--title__arrowdown--icon {
display: block
}
}
.footer__widget.active {
padding-bottom: 3rem
}
.footer__widget.active .footer__widget--title__arrowdown--icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.footer__widget--menu__list {
margin-bottom: .8rem
}
.footer__widget--menu__list:last-child {
margin-bottom: 0
}
.footer__widget--menu__text {
line-height: 3rem;
font-size: 1.5rem;
color: var(--text-gray-color);
font-family: var(--open-sans)
}
.footer__widget--button {
position: absolute;
z-index: 9;
top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
content: "";
color: transparent;
border: 0;
background-color: transparent
}
@media only screen and (max-width:767px) {
.footer__widget--button {
visibility: visible
}
}
@media only screen and (max-width:767px) {
.footer__widget--inner {
display: none
}
}
.footer__bottom {
padding: 1.5rem 0
}
@media only screen and (max-width:991px) {
.footer__bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.copyright__content {
font-size: 1.3rem
}
@media only screen and (max-width:991px) {
.copyright__content {
margin-bottom: 2rem
}
}
@media only screen and (max-width:767px) {
.copyright__content {
text-align: center
}
}
.copyright__content--link {
color: var(--primary-color);
font-weight: 600
}
.copyright__content--link:hover {
text-decoration: underline
}
.footer__contact--info__inner {
margin-bottom: 1.5rem
}
.footer__contact--info__text {
font-size: 1.5rem;
line-height: 2.5rem;
color: var(--text-gray-color);
font-family: var(--open-sans);
margin-bottom: 1rem
}
.footer__contact--info__text:last-child {
margin-bottom: 0
}
.footer__payment--method__title {
font-size: 1.5rem;
line-height: 2.2rem;
font-family: var(--open-sans);
margin-bottom: 1.7rem
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, .8);
cursor: pointer;
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease-in;
transition: all .35s ease-in;
z-index: 99
}
.modal.is-visible {
visibility: visible;
opacity: 1
}
.modal.is-visible .quickview__main--wrapper {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.quickview__main--wrapper {
position: relative;
max-width: 880px;
max-height: 80vh;
border-radius: 10px;
background: #fff;
overflow: auto;
cursor: default;
padding: 25px;
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transition: var(--transition);
transition: var(--transition)
}
@media only screen and (max-width:767px) {
.quickview__main--wrapper {
max-width: 550px
}
}
@media only screen and (max-width:575px) {
.quickview__main--wrapper {
padding: 25px 15px
}
}
.quickview__header {
position: absolute;
padding: 0;
top: 16px;
right: 16px;
z-index: 9
}
@media only screen and (max-width:767px) {
.quickview__header {
top: 10px;
right: 10px
}
}
.quickview__close--btn {
font-size: 1.8rem;
padding: 0;
width: 3.2rem;
height: 3.2rem;
line-height: 3.4rem;
border-radius: 50%;
font-weight: 700;
border: 1px solid var(--border-color);
background: var(--white-color)
}
.quickview__close--btn:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--white-color)
}
[data-animation] .modal-dialog {
opacity: 0;
-webkit-transition: all .5s cubic-bezier(.51, .92, .24, 1.15);
transition: all .5s cubic-bezier(.51, .92, .24, 1.15)
}
[data-animation].is-visible .modal-dialog {
opacity: 1;
-webkit-transition-delay: .2s;
transition-delay: .2s
}
.quickview__info--review__text {
color: var(--text-gray-color);
font-weight: 500;
margin-left: 15px
}
@media only screen and (max-width:767px) {
.quickview__gallery {
margin-bottom: 20px
}
}
.quickview__thumbnail {
position: relative;
line-height: 1
}
.quickview__thumbnail--link {
width: 100%;
border-radius: 8px
}
.quickview__thumbnail--img {
width: 100%;
border-radius: 8px
}
.quickview__gallery--pagination .swiper-pagination-bullet {
width: 16px;
height: 5px;
background: var(--secondary-color);
opacity: 1;
border-radius: 2px;
margin: 0 3px !important
}
.quickview__gallery--pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--primary-color)
}
.variant__color--value {
width: 2.5rem;
height: 2.5rem;
padding: 2px;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
line-height: 1;
cursor: pointer
}
.variant__color--value:last-child {
margin-right: 0
}
.variant__color--value__img {
border-radius: 50%
}
.variant__color--list input[type=radio]+label {
border: 1px solid var(--primary-color)
}
.variant__color--list input[type=radio]+label:hover {
border: 1px solid var(--secondary-color)
}
.variant__color--list {
margin-right: 10px
}
.variant__color--list input[type=radio] {
clip: rect(0, 0, 0, 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px
}
.variant__color--list input[type=radio]:checked+label {
border: 1px solid var(--secondary-color)
}
.variant__color--list:last-child {
margin-right: 0
}
.variant__input--fieldset {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
border: none;
margin: 0;
padding: 0
}
.variant__size--list input[type=radio]+label {
border: 1px solid var(--border-color2)
}
.variant__size--list input[type=radio]+label:hover {
border: 1px solid var(--secondary-color);
color: var(--secondary-color)
}
.variant__size--list {
margin-right: 13px
}
.variant__size--list:last-child {
margin-right: 0
}
.variant__size--list input[type=radio] {
clip: rect(0, 0, 0, 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px
}
.variant__size--list input[type=radio]:checked+label {
border: 1px solid var(--secondary-color);
color: var(--secondary-color)
}
.variant__size--value {
width: 4.7rem;
height: 3.2rem;
line-height: 3.2rem;
display: inline-block;
border-radius: 5px;
text-align: center;
font-size: 1.5rem;
cursor: pointer
}
.quickview__variant--wishlist__svg {
width: 22px;
margin-right: 7px
}
.variant__wishlist--icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.quickview__value--quantity {
width: 3.5rem;
height: 3.5rem;
font-size: 2.2rem;
line-height: 3.3rem
}
.quickview__value--quantity.decrease {
border-radius: 17px 0 0 17px
}
.quickview__value--quantity.increase {
border-radius: 0 17px 17px 0
}
input.quickview__value--number {
height: 3.5rem;
font-size: 1.7rem
}
.quickview__cart--btn {
height: 3.8rem;
line-height: 3.8rem;
padding: 0 25px;
margin-left: 15px;
font-size: 1.5rem
}
.quickview__social--title {
font-size: 1.5rem;
font-weight: 600;
margin-right: 15px
}
.quickview__social--list {
margin-right: 10px
}
.quickview__social--list:last-child {
margin-right: 0
}
.quickview__social--icon {
width: 3rem;
height: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--secondary-color);
color: var(--white-color);
border-radius: 50%
}
.quickview__social--icon:hover {
background: var(--primary-color);
color: var(--white-color)
}
@media only screen and (max-width:767px) {
.accordion__section--inner .row {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
@media only screen and (max-width:767px) {
.accordion__banner {
text-align: center
}
}
@media only screen and (max-width:767px) {
.accordion__wrapper {
margin-bottom: 30px
}
}
.accordion__items.active {
margin-bottom: 20px
}
.accordion__items.active:last-child {
margin-bottom: 0
}
.accordion__items--body {
display: none;
padding: 0 20px
}
.accordion__items--body__desc {
font-size: 1.5rem;
line-height: 2.8rem
}
.accordion__items--button {
border: 0;
background: var(--white-color);
width: 100%;
padding: 13px 60px 13px 25px;
text-align: left;
margin-bottom: 15px;
font-size: 1.5rem;
font-weight: 600;
position: relative
}
@media only screen and (min-width:992px) {
.accordion__items--button {
padding: 13px 70px 13px 35px
}
}
@media only screen and (min-width:1200px) {
.accordion__items--button {
padding: 24px 80px 24px 40px
}
}
.accordion__items--button__icon {
width: 3rem;
height: 3rem;
background: var(--secondary-color);
color: var(--white-color);
padding: 5px;
border-radius: 50%;
position: absolute;
top: 50%;
right: 12px;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
@media only screen and (min-width:768px) {
.accordion__items--button__icon {
right: 15px
}
}
@media only screen and (min-width:992px) {
.accordion__items--button__icon {
right: 35px
}
}
.portfolio__items--thumbnail::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--secondary-color);
top: 0;
left: 0;
opacity: 0;
-webkit-transition: var(--transition);
transition: var(--transition);
z-index: 9;
pointer-events: none
}
.portfolio__items--thumbnail:hover::before {
opacity: .6
}
.portfolio__items--thumbnail__link {
overflow: hidden;
display: block
}
.portfolio__items--thumbnail:hover .portfolio__items--thumbnail__img {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.portfolio__items--thumbnail:hover .portfolio__view--icon {
-webkit-transform: translatey(-50%) translatex(-50%) scale(1);
transform: translatey(-50%) translatex(-50%) scale(1)
}
.portfolio__items--thumbnail__img {
-webkit-transition: .3s;
transition: .3s;
display: block
}
.portfolio__view--icon {
width: 4rem;
height: 4rem;
background: var(--white-color);
color: var(--secondary-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
z-index: 9;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translatey(-50%) translatex(-50%) scale(0);
transform: translatey(-50%) translatex(-50%) scale(0)
}
.portfolio__view--icon svg {
width: 2.7rem
}
.portfolio__view--icon:hover {
background: var(--primary-color);
color: var(--white-color)
}
@media only screen and (max-width:767px) {
.brand__logo--section {
padding-bottom: 3rem
}
}
@media only screen and (max-width:767px) {
.brand__logo--section__inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important
}
}
.brand__logo--items {
margin-right: 8rem
}
.brand__logo--items:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.brand__logo--items {
margin-right: 3.5rem
}
}
@media only screen and (min-width:992px) {
.brand__logo--items {
margin-right: 6rem
}
}
@media only screen and (min-width:1200px) {
.brand__logo--items {
margin-right: 8rem
}
}
@media only screen and (max-width:767px) {
.brand__logo--items {
margin: 0 30px 30px
}
}
@media only screen and (max-width:480px) {
.brand__logo--items {
margin: 0 15px 30px
}
}
@media only screen and (max-width:480px) {
.brand__logo--items__thumbnail--img {
max-width: 11rem
}
}
.brand__logo--items__thumbnail--img:hover {
-webkit-transform: scale(1.08);
transform: scale(1.08)
}
.breadcrumb__bg {
background: url(../images/breadcrumb-bg.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative
}
@media only screen and (min-width:768px) {
.breadcrumb__bg {
height: 230px
}
}
@media only screen and (min-width:992px) {
.breadcrumb__bg {
height: 250px
}
}
@media only screen and (min-width:1200px) {
.breadcrumb__bg {
height: 270px
}
}
@media only screen and (min-width:1600px) {
.breadcrumb__bg {
height: 300px
}
}
.breadcrumb__content {
position: relative
}
@media only screen and (max-width:575px) {
.breadcrumb__content {
text-align: center
}
}
@media only screen and (min-width:1200px) {
.breadcrumb__content--title {
font-size: 5rem;
line-height: 6rem
}
}
@media only screen and (min-width:1600px) {
.breadcrumb__content--title {
font-size: 6rem;
line-height: 8rem
}
}
@media only screen and (max-width:575px) {
.breadcrumb__content--menu {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.breadcrumb__content--menu__items {
position: relative;
margin-right: 20px;
padding-right: 22px;
font-size: 16px;
line-height: 24px
}
@media only screen and (min-width:768px) {
.breadcrumb__content--menu__items {
font-size: 18px
}
}
.breadcrumb__content--menu__items:last-child {
margin-right: 0;
padding-right: 0
}
.breadcrumb__content--menu__items:last-child::before {
display: none
}
.breadcrumb__content--menu__items::before {
position: absolute;
content: "";
width: 10px;
height: 2px;
background: var(--white-color);
right: -4px;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
@media only screen and (max-width:991px) {
.team__section.section--padding {
padding-bottom: 6rem
}
}
@media only screen and (max-width:767px) {
.team__section.section--padding {
padding-bottom: 4rem
}
}
@media only screen and (max-width:991px) {
.about__thumbnail {
margin-bottom: 3rem
}
}
@media only screen and (max-width:767px) {
.about__thumbnail {
margin-bottom: 2.5rem
}
}
.about__thumbnail--items {
margin-right: 2rem
}
.about__thumbnail--items:last-child {
margin-right: 0
}
.about__thumbnail--items:first-child {
margin-top: 8rem
}
@media only screen and (max-width:991px) {
.about__thumbnail--items:first-child {
margin-top: 0
}
}
.about__thumbnail--play {
top: 40%;
padding: 0;
border: 0;
right: 42%;
position: absolute
}
@media only screen and (max-width:991px) {
.about__thumbnail--play {
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
margin-top: 0
}
}
.about__thumbnail--play__icon {
width: 5rem;
height: 5rem
}
.about__content--subtitle {
font-size: 2rem;
font-weight: 600;
line-height: 2.8rem
}
.about__content--maintitle {
font-weight: 700
}
@media only screen and (min-width:992px) {
.about__content--maintitle {
font-size: 3.2rem;
line-height: 4rem
}
}
@media only screen and (min-width:1600px) {
.about__content--maintitle {
font-size: 3.5rem;
line-height: 4.4rem
}
}
.about__content--desc {
font-size: 1.6rem;
line-height: 2.8rem;
color: var(--text-gray-color)
}
.about__author--name {
font-weight: 600;
line-height: 2.6rem
}
.about__author--signature {
position: absolute;
top: 50%;
left: 105px;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.counterup__banner__bg2 {
background: url(../images/banner-bg4.webp);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
position: relative
}
.counterup__banner__bg2::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--black-color);
left: 0;
top: 0;
opacity: .7
}
.counterup__banner--inner {
padding: 60px 0
}
@media only screen and (max-width:575px) {
.counterup__banner--inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 60px 0 38px
}
}
@media only screen and (min-width:768px) {
.counterup__banner--inner {
padding: 70px 0
}
}
@media only screen and (min-width:992px) {
.counterup__banner--inner {
padding: 8px 0
}
}
@media only screen and (min-width:1200px) {
.counterup__banner--inner {
padding: 110px 0
}
}
@media only screen and (min-width:1600px) {
.counterup__banner--inner {
padding: 150px 0
}
}
@media only screen and (max-width:575px) {
.counterup__banner--items {
width: 50%;
margin-bottom: 22px
}
}
.counterup__banner--items__text {
font-size: 1.4rem;
line-height: 2.3rem;
margin-bottom: 10px
}
@media only screen and (min-width:768px) {
.counterup__banner--items__text {
font-size: 1.6rem;
line-height: 2.4rem;
margin-bottom: 11px
}
}
@media only screen and (min-width:992px) {
.counterup__banner--items__text {
font-size: 1.7rem;
line-height: 2.7rem
}
}
@media only screen and (min-width:1200px) {
.counterup__banner--items__text {
font-size: 2rem;
line-height: 3.2rem
}
}
.counterup__banner--items__number {
font-family: var(--font-lora);
font-weight: 700;
font-size: 3rem;
line-height: 4rem
}
@media only screen and (min-width:768px) {
.counterup__banner--items__number {
font-size: 3.3rem
}
}
@media only screen and (min-width:992px) {
.counterup__banner--items__number {
font-size: 4rem;
line-height: 4.8rem
}
}
@media only screen and (min-width:1200px) {
.counterup__banner--items__number {
font-size: 5rem;
line-height: 6rem
}
}
.team__items:hover .team__thumbnail {
border-color: var(--secondary-color)
}
@media only screen and (max-width:991px) {
.team__items {
margin-bottom: 2.5rem
}
}
.team__thumbnail {
position: relative;
line-height: 1;
display: inline-block;
border: 6px solid transparent;
padding: .7rem;
-webkit-transition: var(--transition);
transition: var(--transition);
border-radius: 50%
}
.team__social--list {
margin-right: 1.5rem
}
.team__social--list:last-child {
margin-right: 0
}
@media only screen and (max-width:575px) {
.team__social--list {
margin-right: .8rem
}
}
.team__social--icon {
width: 3rem;
height: 3rem;
text-align: center;
background: var(--secondary-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
color: var(--white-color)
}
.team__social--icon:hover {
color: var(--white-color);
background: var(--primary-color)
}
@media only screen and (max-width:575px) {
.team__social--icon {
width: 2.6rem;
height: 2.6rem;
line-height: 3.4rem
}
}
@media only screen and (max-width:575px) {
.team__social--icon svg {
width: 15px
}
}
.team__content {
padding: 1.8rem 0 0
}
@media only screen and (max-width:991px) {
.team__content {
padding: 1.2rem 0 0
}
}
.team__content--subtitle {
color: var(--sky-color);
font-size: 1.5rem;
line-height: 2rem;
margin-bottom: 1.5rem
}
@media only screen and (min-width:767px) {
.team__content--subtitle {
font-size: 1.7rem;
line-height: 2.5rem
}
}
.team__content--title {
font-weight: 700;
margin-bottom: 1rem
}
@media only screen and (min-width:992px) {
.team__content--title {
font-size: 2.2rem;
line-height: 2.5rem;
margin-bottom: 1.5rem
}
}
@media only screen and (min-width:1200px) {
.team__content--title {
font-size: 2.4rem;
line-height: 2.5rem
}
}
@media only screen and (max-width:575px) {
.team__content--title {
font-size: 1.8rem;
line-height: 2.5rem
}
}
.shop__header {
padding: 1.5rem 2rem;
border-radius: .5rem
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.shop__header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
@media only screen and (max-width:479px) {
.shop__header {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.product__view--mode__list {
margin-right: 2rem
}
.product__view--mode__list:last-child {
margin-right: 0
}
@media only screen and (min-width:992px) {
.product__view--mode__list {
margin-right: 1.5rem
}
}
@media only screen and (min-width:1200px) {
.product__view--mode__list {
margin-right: 2.5rem
}
}
@media only screen and (min-width:1366px) {
.product__view--mode__list {
margin-right: 3.5rem
}
}
@media only screen and (max-width:991px) {
.product__view--mode__list {
margin-right: 0
}
}
.product__view--label {
font-weight: 600;
margin-right: 1.2rem
}
@media only screen and (min-width:992px) {
.product__view--label {
margin-right: .8rem;
font-size: 1.5rem
}
}
@media only screen and (min-width:1200px) {
.product__view--label {
margin-right: 2.5rem
}
}
@media only screen and (min-width:1366px) {
.product__view--label {
margin-right: 3.5rem
}
}
.product__view--select {
border: 1px solid var(--border-color);
padding: .6rem 3rem .6rem 1.2rem;
-webkit-appearance: none;
cursor: pointer;
border-radius: .5rem;
background: var(--white-color)
}
.select.shop__header--select::before {
right: 14px
}
.product__grid--column__buttons--icons {
border: 1px solid var(--border-color);
background: var(--white-color);
border-radius: .3rem;
width: 3.7rem;
height: 3.7rem;
line-height: 1.1rem;
margin-right: 10px;
text-align: center;
padding: 0
}
.product__grid--column__buttons--icons:last-child {
margin-right: 0
}
.product__grid--column__buttons--icons:hover {
color: var(--secondary-color);
border-color: var(--secondary-color)
}
.product__grid--column__buttons--icons.active {
color: var(--secondary-color);
border-color: var(--secondary-color)
}
.product__showing--count {
font-weight: 500;
letter-spacing: .5px
}
@media only screen and (min-width:992px) {
.product__showing--count {
font-size: 1.5rem;
line-height: 2.6rem;
margin-top: 1.2rem
}
}
@media only screen and (min-width:1200px) {
.product__showing--count {
font-size: 1.7rem;
line-height: 2.8rem;
margin-top: 0;
margin-left: 2rem
}
}
@media only screen and (max-width:479px) {
.product__showing--count {
text-align: center;
width: 100%;
margin-top: 1.2rem
}
}
.offcanvas__filter--sidebar {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
max-width: 300px;
height: 100vh;
-webkit-transition: var(--transition);
transition: var(--transition);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background-color: var(--white-color);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .15);
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow-y: auto
}
@media only screen and (min-width:480px) {
.offcanvas__filter--sidebar {
max-width: 320px
}
}
.offcanvas__filter--sidebar.active {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0);
transform: translateX(0)
}
.widget__filter--btn {
border: 1px solid var(--border-color);
background: var(--white-color);
border-radius: .3rem;
padding: .5rem 1.2rem
}
@media only screen and (max-width:479px) {
.widget__filter--btn {
margin-right: 2.5rem
}
}
.widget__filter--btn:hover {
border-color: var(--secondary-color);
color: var(--secondary-color)
}
.widget__filter--btn__icon {
width: 20px
}
.widget__filter--btn__text {
font-weight: 600;
font-size: 1.5rem;
margin-left: .7rem
}
.offcanvas__filter--close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid var(--border-color);
padding: .5rem 1rem;
border-radius: .3rem;
margin: 25px;
background: var(--white-color)
}
.offcanvas__filter--close:hover {
border-color: var(--secondary-color);
color: var(--secondary-color)
}
.offcanvas__filter--close__text {
font-size: 1.5rem;
font-weight: 600;
margin-left: 8px
}
.shop__sidebar--widget {
position: -webkit-sticky;
position: sticky;
top: 0
}
.single__widget {
margin-bottom: 3rem
}
@media only screen and (min-width:992px) {
.single__widget {
margin-bottom: 4rem
}
}
.single__widget:last-child {
margin-bottom: 0
}
.single__widget.widget__bg {
padding: 2rem;
border-radius: .5rem;
-webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .1);
box-shadow: 0 2px 22px rgba(0, 0, 0, .1)
}
@media only screen and (max-width:991px) {
.single__widget.widget__bg {
padding: 3rem 2rem 2.5rem
}
}
.widget__title {
margin-bottom: 3rem;
color: var(--secondary-color);
padding-left: 5rem
}
@media only screen and (min-width:992px) {
.widget__title {
font-size: 2rem;
line-height: 3rem;
margin-bottom: 3rem
}
}
@media only screen and (min-width:1366px) {
.widget__title {
font-size: 2.3rem;
line-height: 3rem;
margin-bottom: 3rem
}
}
@media only screen and (min-width:1400px) {
.widget__title {
font-size: 2.5rem;
line-height: 3rem;
margin-bottom: 3rem
}
}
.widget__title::before {
position: absolute;
content: "";
width: 4.6rem;
height: 6.9rem;
background: url(../images/widget-shape.webp);
left: 0;
top: 48%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.widget__search--form {
position: relative
}
.widget__search--form__input {
width: 100%;
height: 4.5rem;
padding: 0 9rem 0 1.5rem;
border-radius: .5rem;
border: 1px solid var(--border-color)
}
@media only screen and (min-width:992px) {
.widget__search--form__input {
font-size: 1.5rem
}
}
.widget__search--form__input:focus {
border-color: var(--secondary-color)
}
.widget__search--form__btn {
position: absolute;
top: 0;
right: 0;
border: 0;
background: var(--secondary-color);
color: var(--white-color);
padding: 0 1.5rem;
height: 100%;
border-radius: 0 .5rem .5rem 0
}
.widget__search--form__btn:hover {
background: var(--primary-color)
}
.widget__categories--menu__list {
border: 1px solid var(--border-color);
margin-bottom: 1.5rem;
border-radius: .5rem
}
.widget__categories--menu__list:last-child {
margin-bottom: 0
}
.widget__categories--menu__list.active .widget__categories--menu__label {
margin-bottom: 0
}
.widget__categories--menu__list.active .widget__categories--menu__arrowdown--icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 38%
}
.widget__categories--menu__label {
cursor: pointer;
padding: .5rem 1rem;
position: relative;
-webkit-transition: var(--transition);
transition: var(--transition)
}
.widget__categories--menu__label:hover {
color: var(--primary-color)
}
.widget__categories--menu__text {
padding-left: 1rem
}
.widget__categories--menu__img {
width: 3rem
}
.widget__categories--menu__arrowdown--icon {
position: absolute;
right: 1.5rem;
top: 43%;
-webkit-transition: var(--transition);
transition: var(--transition)
}
.widget__categories--sub__menu {
display: none;
padding: 1.5rem 0;
border-top: 1px solid var(--border-color)
}
.widget__categories--sub__menu--list {
margin-bottom: .8rem;
padding: 0 1rem .8rem;
border-bottom: 1px solid var(--border-color)
}
.widget__categories--sub__menu--list:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0
}
.widget__categories--sub__menu--img {
width: 2.8rem
}
.widget__categories--sub__menu--text {
padding-left: 1rem;
line-height: 2.8rem
}
.widget__form--check__list {
margin-bottom: 1rem;
position: relative
}
.widget__form--check__list:last-child {
margin-bottom: 0
}
.widget__form--check__label {
cursor: pointer;
line-height: 2.8rem;
-webkit-transition: var(--transition);
transition: var(--transition);
border: 1px solid var(--border-color);
background: var(--white-color);
padding: .5rem 3rem .5rem 1.5rem;
border-radius: .5rem;
display: block
}
.widget__form--check__label:hover {
color: var(--primary-color)
}
.widget__form--check__input {
position: absolute;
right: 1rem;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
opacity: 0;
cursor: pointer;
z-index: 999
}
.widget__form--check__input:checked~.widget__form--checkmark {
background-color: var(--secondary-color)
}
.widget__form--check__input:checked~.widget__form--checkmark::before {
display: block
}
.widget__form--checkmark {
height: 1.8rem;
width: 1.8rem;
border: 1px solid var(--secondary-color);
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
right: 1rem;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
background: var(--white-color);
-webkit-transition: var(--transition);
transition: var(--transition)
}
.widget__form--checkmark::before {
right: .5rem;
top: .3rem;
width: .5rem;
height: .8rem;
border: solid #fff;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
position: absolute;
display: none
}
.price__filter--group {
width: 46%
}
.price__filter--label {
font-weight: 600;
margin-bottom: .6rem;
display: inline-block
}
@media only screen and (min-width:992px) {
.price__filter--label {
font-size: 1.5rem
}
}
.price__filter--input {
border: 1px solid var(--border-color);
padding: .7rem 1rem
}
.price__filter--input__field {
width: 100%
}
.price__filter--currency {
font-weight: 700;
margin-right: .6rem
}
.price__filter--btn {
height: 4rem;
line-height: 4rem
}
.price__divider {
font-size: 2rem;
padding: 2.5rem 1rem 0
}
.widget__tagcloud--list {
display: inline-block;
margin: 0 8px 8px 0
}
.widget__tagcloud--link {
border: 1px solid var(--border-color);
background: var(--white-color);
padding: .5rem 1.2rem;
line-height: 2.5rem;
border-radius: .3rem
}
.widget__tagcloud--link:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--white-color)
}
@media only screen and (max-width:991px) {
.shop__product--wrapper .product__items--link {
width: 100%
}
}
@media only screen and (max-width:991px) {
.shop__product--wrapper .product__items--img {
width: 100%
}
}
@media only screen and (max-width:1365px) {
.product__grid--inner .product__items--action__btn {
padding: 0 .6rem
}
}
@media only screen and (max-width:1199px) {
.product__grid--inner .product__items--action__btn {
padding: 0 .5rem
}
}
@media only screen and (max-width:1365px) {
.product__grid--inner .product__items--action__btn.add__to--cart {
font-size: 1.3rem;
padding: 0 .4rem
}
}
.product__list--items__thumbnail {
width: 14rem
}
@media only screen and (min-width:480px) {
.product__list--items__thumbnail {
width: 17rem
}
}
@media only screen and (min-width:768px) {
.product__list--items__thumbnail {
width: 19.6rem
}
}
@media only screen and (max-width:479px) {
.product__list--items__thumbnail {
width: 10rem
}
}
.product__list--items__content {
width: calc(100% - 14rem);
padding-left: 1.5rem
}
@media only screen and (min-width:480px) {
.product__list--items__content {
width: calc(100% - 17rem);
padding-left: 2rem
}
}
@media only screen and (min-width:768px) {
.product__list--items__content {
width: calc(100% - 19.6rem);
padding-left: 3rem
}
}
@media only screen and (max-width:479px) {
.product__list--items__content {
width: calc(100% - 10rem)
}
}
.product__list--items__content--title {
font-weight: 600
}
@media only screen and (min-width:992px) {
.product__list--items__content--title {
font-size: 2rem;
line-height: 2.8rem
}
}
.product__list--items__content--desc {
line-height: 2.6rem
}
@media only screen and (min-width:992px) {
.product__list--items__content--desc {
line-height: 3rem
}
}
@media only screen and (max-width:575px) {
.product__list--items__content--desc {
display: none
}
}
.product__list--items {
border: 1px solid var(--border-color2)
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.product__list--items {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
@media only screen and (max-width:767px) {
.product__list--items {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.product__list--items__left {
width: 70%;
border-right: 1px solid var(--border-color2);
padding: 3rem
}
@media only screen and (min-width:1366px) {
.product__list--items__left {
width: 65%
}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.product__list--items__left {
width: 100%;
border-right: 0;
border-bottom: 1px solid var(--border-color2)
}
}
@media only screen and (max-width:767px) {
.product__list--items__left {
width: 100%;
border-right: 0;
border-bottom: 1px solid var(--border-color2);
padding: 2rem
}
}
.product__list--items__right {
width: 30%;
padding: 3rem
}
@media only screen and (min-width:1366px) {
.product__list--items__right {
width: 35%;
padding: 3rem 3rem 3rem 6rem
}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.product__list--items__right {
width: 100%
}
}
@media only screen and (max-width:767px) {
.product__list--items__right {
width: 100%;
padding: 2rem
}
}
.product__list--current__price {
font-weight: 600;
color: var(--secondary-color);
font-size: 2rem;
line-height: 2.2rem;
margin-bottom: .8rem
}
@media only screen and (min-width:992px) {
.product__list--current__price {
font-size: 2.2rem;
line-height: 2.8rem
}
}
@media only screen and (min-width:992px) {
.product__list--current__price {
font-size: 2.5rem;
line-height: 3rem
}
}
.rating__list--text {
color: var(--text-gray-color);
font-family: var(--open-sans);
font-size: 1.3rem;
margin-left: .5rem
}
.product__list--action__cart--btn {
border: 1px solid var(--secondary-color);
color: var(--secondary-color);
background: var(--white-color);
margin-bottom: 1.5rem
}
.product__list--action__cart--btn:hover {
background: var(--secondary-color);
color: var(--white-color)
}
.product__list--action__cart--btn:hover span {
color: var(--white-color)
}
.product__list--action__cart--btn__icon {
margin-right: .5rem
}
.product__list--action__btn {
color: var(--secondary-color)
}
.product__list--action__btn:hover {
color: var(--primary-color)
}
@media only screen and (max-width:767px) {
.product__list--action__btn--svg {
width: 2.2rem
}
}
.product__list--action__child {
margin-right: 1.5rem
}
.product__list--action__child:last-child {
margin-right: 0
}
.product__list--rating {
margin-bottom: 1.5rem
}
.pagination__area {
padding: 1.5rem 2rem;
margin-top: 3rem
}
@media only screen and (min-width:768px) {
.pagination__area {
margin-top: 5rem
}
}
.pagination__list {
margin-right: .8rem
}
.pagination__list:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.pagination__list {
margin-right: 1.2rem
}
}
.pagination__item {
width: 3.8rem;
height: 3.8rem;
line-height: 3.6rem;
font-size: 1.6rem;
font-weight: 600;
text-align: center;
border-radius: 50%;
border: 1px solid var(--border-color2);
background: var(--white-color)
}
@media only screen and (min-width:768px) {
.pagination__item {
width: 4rem;
height: 4rem;
line-height: 3.8rem
}
}
.pagination__item--current {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--white-color)
}
.pagination__item:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--white-color)
}
.product__details--media {
position: -webkit-sticky;
position: sticky;
top: 0
}
@media only screen and (max-width:767px) {
.product__details--media {
margin-bottom: 5.7rem
}
}
.product__media--preview__items {
position: relative
}
.product__media--preview__items--link {
width: 100%;
display: block
}
.product__media--preview__items--img {
width: 100%;
display: block
}
.product__media--view__icon {
position: absolute;
top: 2rem;
left: 2rem
}
.product__media--view__icon.media__play {
right: 2rem;
left: auto
}
.product__media--view__icon--link {
width: 3.5rem;
height: 3.5rem;
text-align: center;
background: var(--secondary-color);
border-radius: 50%;
color: var(--white-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.product__media--view__icon--link:hover {
background: var(--primary-color);
color: var(--white-color)
}
.media__play--icon__link {
color: var(--secondary-color)
}
.media__play--icon__link:hover {
color: var(--primary-color)
}
.product__media--nav {
margin-top: 2rem
}
.product__media--nav__items {
border: 1px solid var(--border-color2);
padding: .5rem;
line-height: 1
}
.product__media--nav__items--img {
width: 100%;
cursor: pointer
}
@media only screen and (min-width:768px) {
.product__details--info {
font-size: 1.6rem
}
}
@media only screen and (min-width:992px) {
.product__details--info__title {
font-size: 3rem
}
}
.product__details--info__price .current__price {
font-size: 1.6rem
}
@media only screen and (min-width:992px) {
.product__details--info__price .current__price {
font-size: 2rem
}
}
.product__details--info__price .old__price {
font-size: 1.4rem;
margin-left: .8rem
}
@media only screen and (min-width:992px) {
.product__details--info__price .old__price {
font-size: 1.8rem
}
}
.product__details--info__desc {
font-size: 1.5rem
}
@media only screen and (min-width:992px) {
.product__details--info__desc {
font-size: 1.6rem;
line-height: 2.8rem
}
}
.variant__buy--now__btn {
width: 100%
}
.product__variant--title {
font-size: 1.5rem;
font-weight: 700;
margin-right: 1rem
}
.product__details--info__meta--list {
font-size: 1.5rem;
margin-bottom: .8rem
}
.product__details--info__meta--list:last-child {
margin-bottom: 0
}
.guarantee__safe--checkout__title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.2rem
}
.product__details--tab__section {
background: var(--bg-gray-color)
}
.product__details--tab__section.sidebar__tab--section {
padding: 3.5rem
}
@media only screen and (max-width:575px) {
.product__details--tab__section.sidebar__tab--section {
padding: 2rem
}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.sidebar__tab--section .product__details--tab__list {
margin-right: 2rem
}
.sidebar__tab--section .product__details--tab__list:last-child {
margin-right: 0
}
}
.product__details--tab__inner {
background: var(--white-color);
padding: 3rem
}
@media only screen and (max-width:575px) {
.product__details--tab__inner {
padding: 2.5rem 1.5rem
}
}
@media only screen and (max-width:767px) {
.product__details--tab {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.product__details--tab.mb-30 {
margin-bottom: 1.5rem
}
}
.product__details--tab__list {
font-size: 1.6rem;
line-height: 2.6rem;
margin-right: 5rem;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
position: relative;
padding-bottom: .4rem
}
.product__details--tab__list::before {
position: absolute;
content: "";
width: 0;
height: 1px;
background: var(--secondary-color);
left: 50%;
right: 50%;
-webkit-transition: var(--transition);
transition: var(--transition);
bottom: 0
}
.product__details--tab__list.active {
color: var(--secondary-color)
}
.product__details--tab__list.active::before {
width: 100%;
left: 0;
right: 0
}
.product__details--tab__list:hover {
color: var(--secondary-color)
}
.product__details--tab__list:hover::before {
width: 100%;
left: 0;
right: 0
}
.product__details--tab__list:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.product__details--tab__list {
font-size: 1.8rem
}
}
@media only screen and (min-width:1200px) {
.product__details--tab__list {
font-size: 1.8rem
}
}
@media only screen and (max-width:767px) {
.product__details--tab__list {
margin: 0 1rem 1.3rem
}
}
@media only screen and (max-width:767px) {
.product__tab--content__items {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.product__tab--content__items.style2 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
.product__tab--content__thumbnail {
width: 28rem
}
@media only screen and (max-width:400px) {
.product__tab--content__thumbnail {
width: 100%
}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.product__tab--content__thumbnail.style2 {
width: 100%
}
}
.product__tab--content__right {
width: calc(100% - 28rem);
padding-left: 3.5rem
}
@media only screen and (max-width:767px) {
.product__tab--content__right {
width: 100%;
padding-left: 0;
padding-top: 2rem
}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.product__tab--content__right.style2 {
width: 100%;
padding-left: 0;
padding-top: 2rem
}
}
.product__tab--content__title {
font-weight: 600;
font-size: 1.7rem
}
@media only screen and (min-width:992px) {
.product__tab--content__title {
font-size: 1.8rem
}
}
.product__tab--content__desc {
line-height: 2.6rem;
color: var(--text-gray-color)
}
@media only screen and (min-width:992px) {
.product__tab--content__desc {
font-size: 1.5rem;
line-height: 2.8rem
}
}
.product__tab--content__list {
line-height: 2.6rem;
margin-bottom: .6rem;
color: var(--text-gray-color)
}
@media only screen and (min-width:992px) {
.product__tab--content__list {
font-size: 1.5rem;
line-height: 2.8rem
}
}
.product__tab--content__list:last-child {
margin-bottom: 0
}
.product__tab--content__list--icon {
width: 2rem;
vertical-align: middle;
margin-right: .5rem
}
.product__reviews--header {
position: relative;
border-bottom: 1px solid var(--border-color2);
padding-bottom: 1.5rem;
margin-bottom: 2.5rem
}
@media only screen and (min-width:768px) {
.product__reviews--header {
padding-bottom: 2.5rem;
margin-bottom: 3.5rem
}
}
@media only screen and (max-width:575px) {
.product__reviews--header {
text-align: center
}
}
@media only screen and (max-width:575px) {
.reviews__ratting {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.reviews__summary--caption {
color: var(--secondary-color);
margin-left: 1.2rem
}
.actions__newreviews--btn {
position: absolute;
right: 0;
bottom: 2.2rem
}
@media only screen and (max-width:575px) {
.actions__newreviews--btn {
position: inherit;
bottom: inherit;
margin-top: 1rem
}
}
.actions__newreviews--btn.primary__btn {
font-size: 1.5rem;
line-height: 4rem;
height: 4rem;
padding: 0 1.5rem
}
@media only screen and (min-width:992px) {
.actions__newreviews--btn.primary__btn {
font-size: 1.6rem;
line-height: 4.6rem;
height: 4.6rem;
padding: 0 1.8rem
}
}
.reviews__comment--area {
padding: 0 2rem;
margin-bottom: 3rem
}
@media only screen and (max-width:767px) {
.reviews__comment--area {
padding: 0;
margin-bottom: 2rem
}
}
.reviews__comment--thumbnail {
width: 7.8rem
}
@media only screen and (max-width:575px) {
.reviews__comment--thumbnail {
margin: 0 auto .5rem
}
}
.reviews__comment--content {
width: 100%;
position: relative
}
@media only screen and (min-width:576px) {
.reviews__comment--content {
width: calc(100% - 7.8rem);
padding-left: 2.5rem
}
}
@media only screen and (max-width:575px) {
.reviews__comment--content {
text-align: center
}
}
.reviews__comment--content__date {
position: absolute;
top: 0;
right: 0;
border: 1px solid var(--border-color2);
padding: .6rem 1.2rem;
border-radius: 5px
}
@media only screen and (max-width:575px) {
.reviews__comment--content__date {
position: inherit;
margin-top: 1.5rem
}
}
.reviews__comment--content__title {
font-weight: 600;
margin-bottom: .8rem
}
.reviews__comment--content .reviews__ratting {
margin-bottom: .5rem
}
@media only screen and (max-width:575px) {
.reviews__comment--content .reviews__ratting {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.reviews__comment--content__desc {
margin-bottom: 0
}
@media only screen and (min-width:992px) {
.reviews__comment--content__desc {
font-size: 1.5rem;
line-height: 2.8rem
}
}
.reviews__comment--list {
border-bottom: 1px solid var(--border-color2);
padding-bottom: 2rem;
margin-bottom: 2rem
}
.reviews__comment--list:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0
}
@media only screen and (min-width:768px) {
.reviews__comment--list {
padding-bottom: 2.5rem;
margin-bottom: 2.5rem
}
}
@media only screen and (max-width:575px) {
.reviews__comment--list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
@media only screen and (min-width:992px) {
.reviews__comment--list.margin__left {
margin-left: 5rem
}
}
@media only screen and (max-width:575px) {
.reviews__comment--reply__title {
text-align: center
}
}
.reviews__comment--reply__textarea {
width: 100%;
height: 100px;
resize: none;
padding: 1.2rem 1.5rem;
border: 1px solid var(--border-color2);
border-radius: .5rem
}
@media only screen and (min-width:768px) {
.reviews__comment--reply__textarea {
height: 150px
}
}
@media only screen and (min-width:992px) {
.reviews__comment--reply__textarea {
font-size: 1.5rem
}
}
.reviews__comment--reply__textarea:focus {
border-color: var(--secondary-color)
}
.reviews__comment--reply__input {
width: 100%;
border: 1px solid var(--border-color2);
height: 5rem;
border-radius: .5rem;
padding: 0 1.5rem
}
@media only screen and (min-width:992px) {
.reviews__comment--reply__input {
font-size: 1.5rem
}
}
.reviews__comment--reply__input:focus {
border-color: var(--secondary-color)
}
@media only screen and (max-width:575px) {
.reviews__comment--rating {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.product__details--gallery {
position: -webkit-sticky;
position: sticky;
top: 0
}
@media only screen and (max-width:767px) {
.product__details--gallery {
margin-bottom: 4.5rem
}
}
.blog__wrapper--sidebar {
position: -webkit-sticky;
position: sticky;
top: 0
}
.blog__sidebar--widget {
position: -webkit-sticky;
position: sticky;
top: 0
}
@media only screen and (max-width:991px) {
.blog__sidebar--widget.left {
margin-top: 8rem
}
}
@media only screen and (max-width:767px) {
.blog__sidebar--widget.left {
margin-top: 6rem
}
}
.blog__post--header.mb-30 {
margin-bottom: 2.5rem
}
@media only screen and (min-width:992px) {
.post__header--title {
line-height: 3.8rem;
font-size: 3.2rem
}
}
@media only screen and (min-width:1600px) {
.post__header--title {
line-height: 4.5rem;
font-size: 3.7rem
}
}
.blog__post--meta {
text-transform: capitalize
}
@media only screen and (min-width:992px) {
.blog__post--meta {
font-size: 1.5rem
}
}
.blog__post--meta__link {
color: var(--secondary-color)
}
.blog__post--meta__link:hover {
color: var(--secondary-color);
text-decoration: underline
}
.blog__thumbnail {
line-height: 1
}
@media only screen and (max-width:767px) {
.blog__thumbnail.mb-30 {
margin-bottom: 2rem
}
}
.blog__details--content__subtitle {
line-height: 3rem
}
@media only screen and (min-width:992px) {
.blog__details--content__subtitle {
line-height: 3.2rem
}
}
@media only screen and (min-width:1200px) {
.blog__details--content__subtitle {
line-height: 4rem;
font-size: 2.7rem
}
}
.blockquote__content {
padding: 20px 30px;
text-align: center;
border-radius: 10px
}
@media only screen and (min-width:992px) {
.blockquote__content {
padding: 30px 40px
}
}
@media only screen and (min-width:1200px) {
.blockquote__content {
padding: 40px 70px
}
}
@media only screen and (max-width:767px) {
.blockquote__content {
margin: 0 0 2.5rem;
padding: 1.5rem 2rem
}
}
.blockquote__content--desc {
font-size: 1.6rem;
line-height: 3rem;
font-style: italic;
font-weight: 500
}
@media only screen and (min-width:768px) {
.blockquote__content--desc {
font-size: 1.8rem;
line-height: 3.4rem
}
}
.blog__tags--social__media {
padding: 5rem 0
}
@media only screen and (max-width:1199px) {
.blog__tags--social__media {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
@media only screen and (max-width:1199px) {
.blog__tags--media {
margin-bottom: 2rem
}
}
@media only screen and (max-width:575px) {
.blog__tags--media {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
.blog__tags--media__title {
font-size: 1.5rem;
font-weight: 600;
margin-right: 1rem
}
@media only screen and (min-width:992px) {
.blog__tags--media__title {
font-size: 1.6rem
}
}
@media only screen and (max-width:575px) {
.blog__tags--media__title {
margin-right: 0;
margin-bottom: 1rem
}
}
.blog__tags--media__list {
margin-right: .7rem
}
.blog__tags--media__list:last-child {
margin-right: 0
}
.blog__tags--media__link {
border: 1px solid var(--border-color2);
background: var(--white-color);
padding: .5rem 1.2rem;
line-height: 2.5rem;
border-radius: .3rem;
text-transform: capitalize
}
.blog__tags--media__link:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white-color)
}
@media only screen and (max-width:575px) {
.blog__tags--media__link {
padding: .4rem .8rem
}
}
.meta__deta {
font-weight: 500;
margin-top: .6rem;
font-size: 1.5rem
}
.blog__social--media__title {
font-size: 1.5rem;
font-weight: 600;
margin-right: 1rem
}
@media only screen and (min-width:992px) {
.blog__social--media__title {
font-size: 1.6rem
}
}
.blog__social--media__list {
margin-right: 1rem
}
.blog__social--media__list:last-child {
margin-right: 0
}
.blog__social--media__link {
width: 3rem;
height: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--secondary-color);
color: var(--white-color);
border-radius: 50%
}
.blog__social--media__link:hover {
background: var(--primary-color);
color: var(--white-color)
}
.related__post--items:hover .related__post--img {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.related__post--thumbnail {
overflow: hidden
}
@media only screen and (max-width:575px) {
.related__post--thumbnail a {
width: 100%
}
}
@media only screen and (max-width:575px) {
.related__post--thumbnail a img {
width: 100%
}
}
@media only screen and (max-width:575px) {
.related__post--text {
text-align: center
}
}
.related__post--title {
font-size: 1.8rem
}
@media only screen and (min-width:992px) {
.related__post--title {
font-size: 2rem;
line-height: 2.7rem
}
}
.related__post--deta {
font-size: 1.5rem
}
.comment__reply--btn {
position: absolute;
top: 0;
right: 0;
height: 4rem;
line-height: 4rem;
padding: 0 2.5rem;
font-size: 1.4rem
}
@media only screen and (min-width:992px) {
.comment__reply--btn {
font-size: 1.6rem
}
}
@media only screen and (max-width:767px) {
.comment__reply--btn {
position: inherit;
margin-top: 1.5rem
}
}
.reviews__comment--content__title2 {
font-weight: 600;
line-height: 2.4rem;
margin-bottom: .6rem
}
@media only screen and (min-width:992px) {
.reviews__comment--content__title2 {
font-size: 1.8rem
}
}
.reviews__comment--content__date2 {
font-size: 1.5rem;
color: var(--light-color);
margin-bottom: .8rem
}
.contact__section--hrading__desc {
line-height: 2.8rem
}
.contact__form {
background: var(--white-color);
border-radius: 10px;
-webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
padding: 2rem
}
@media only screen and (min-width:768px) {
.contact__form {
padding: 3rem
}
}
.contact__form--title {
font-weight: 600
}
@media only screen and (max-width:1199px) {
.contact__form--title.mb-30 {
margin-bottom: 2rem
}
}
.contact__form--label {
display: block;
margin-bottom: 8px
}
.contact__form--label__star {
color: var(--secondary-color)
}
.contact__form--input {
width: 100%;
height: 4.5rem;
padding: 5px 15px;
border-radius: 8px;
border: 1px solid var(--border-color)
}
.contact__form--input:focus {
border-color: var(--secondary-color) !important
}
.contact__form--textarea {
width: 100%;
height: 8rem;
padding: 12px 15px;
border-radius: 8px;
resize: none;
border: 1px solid var(--border-color);
font-family: var(--font-poppins)
}
.contact__form--textarea:focus {
border-color: var(--secondary-color) !important
}
@media only screen and (min-width:992px) {
.contact__form--textarea {
height: 120px
}
}
@media only screen and (min-width:1200px) {
.contact__form--textarea {
height: 160px
}
}
.contact__form--btn {
width: 100%
}
@media only screen and (min-width:992px) {
.contact__form--btn {
font-size: 1.7rem
}
}
.contact__info {
background: var(--secondary-color);
padding: 2rem
}
@media only screen and (min-width:576px) {
.contact__info {
padding: 3rem
}
}
@media only screen and (min-width:768px) {
.contact__info {
padding: 4rem
}
}
@media only screen and (min-width:992px) {
.contact__info {
padding: 4rem 3rem
}
}
@media only screen and (min-width:1200px) {
.contact__info {
padding: 5rem 6rem
}
}
@media only screen and (max-width:991px) {
.contact__info {
margin-top: 3rem
}
}
.contact__info--items {
margin-bottom: 2.7rem
}
.contact__info--items:last-child {
margin-bottom: 0
}
@media only screen and (max-width:575px) {
.contact__info--items {
margin-bottom: 2rem
}
}
.contact__info--icon {
margin-right: 1.2rem;
color: var(--white-color);
padding-top: .8rem
}
@media only screen and (min-width:1200px) {
.contact__info--icon {
margin-right: 2rem
}
}
@media only screen and (max-width:575px) {
.contact__info--icon svg {
width: 2.5rem
}
}
.contact__info--content__title {
font-weight: 600
}
@media only screen and (min-width:992px) {
.contact__info--content__title {
font-size: 2rem;
line-height: 2.8rem
}
}
.contact__info--content__desc {
font-size: 1.5rem;
line-height: 2.6rem
}
@media only screen and (min-width:1200px) {
.contact__info--content__desc {
font-size: 1.6rem;
line-height: 2.7rem
}
}
.contact__info--content__desc a:hover {
color: var(--primary-color)
}
.contact__info--social__list {
margin-right: 11px
}
.contact__info--social__list:last-child {
margin-right: 0
}
.contact__info--social__icon {
width: 3rem;
height: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--white-color);
color: var(--secondary-color);
border-radius: 50%
}
.contact__info--social__icon:hover {
background: var(--primary-color);
color: var(--white-color)
}
.contact__map--iframe {
width: 100%;
height: 400px;
margin-bottom: -7px
}
@media only screen and (min-width:992px) {
.contact__map--iframe {
height: 500px
}
}
@media only screen and (min-width:1200px) {
.contact__map--iframe {
height: 600px
}
}
.cart__table--inner {
width: 100%;
border-spacing: 0
}
@media only screen and (max-width:575px) {
.cart__table--header {
display: none
}
}
.cart__table--header__list {
padding: 0 2rem 2rem 0;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid var(--border-color2)
}
.cart__table--header__list:last-child {
padding-right: 0
}
@media only screen and (min-width:992px) {
.cart__table--header__list {
font-size: 1.5rem
}
}
.cart__table--header__list.text-center {
text-align: center
}
.cart__table--header__list.text-right {
text-align: right
}
@media only screen and (max-width:575px) {
.cart__table--body__items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.cart__table--body__list {
border-bottom: 1px solid var(--border-color2);
padding: 2rem 2rem 2rem 0
}
.cart__table--body__list:last-child {
padding-right: 0
}
@media only screen and (max-width:575px) {
.cart__table--body__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 2rem 0
}
}
.cart__thumbnail {
max-width: 10rem;
line-height: 1
}
@media only screen and (max-width:767px) {
.cart__thumbnail {
max-width: 8rem
}
}
.cart__content {
padding-left: 1.5rem
}
@media only screen and (min-width:1200px) {
.cart__content {
padding-left: 2rem
}
}
.cart__content--variant {
display: block;
margin-bottom: .5rem;
line-height: 2.2rem;
font-size: 1.3rem
}
.cart__content--variant:last-child {
margin-bottom: 0
}
.cart__content--title {
margin-bottom: .5rem;
line-height: 2.5rem
}
.cart__remove--btn {
font-weight: 600;
width: 3rem;
height: 3rem;
text-align: center;
line-height: 3.7rem;
background: var(--white-color);
-webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
margin-right: 1.5rem;
border-radius: 50%;
border: 0
}
.cart__remove--btn:hover {
color: var(--secondary-color)
}
.cart__price {
font-weight: 600
}
@media only screen and (min-width:992px) {
.cart__price {
font-size: 1.6rem
}
}
.continue__shopping {
padding-top: 2rem
}
.continue__shopping--link {
font-size: 1.5rem;
font-weight: 600;
color: var(--secondary-color)
}
@media only screen and (min-width:992px) {
.continue__shopping--link {
font-size: 1.7rem
}
}
.continue__shopping--clear {
font-size: 1.5rem;
font-weight: 600;
color: var(--secondary-color);
border: 0;
padding: 0;
background: inherit
}
@media only screen and (min-width:992px) {
.continue__shopping--clear {
font-size: 1.7rem
}
}
.cart__summary {
-webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
padding: 2rem;
background: var(--white-color);
position: -webkit-sticky;
position: sticky;
top: 0
}
@media only screen and (max-width:991px) {
.cart__summary {
margin-top: 7.5rem
}
}
@media only screen and (max-width:767px) {
.cart__summary {
margin-top: 5.5rem
}
}
.cart__summary--total__table {
width: 100%
}
.coupon__code--title {
font-size: 1.7rem;
margin-bottom: .7rem;
line-height: 2.4rem
}
@media only screen and (min-width:992px) {
.coupon__code--title {
font-size: 2rem
}
}
.coupon__code--desc {
margin-bottom: 1.5rem
}
.coupon__code--field__input {
border: 1px solid var(--border-color);
height: 4.5rem;
padding: 0 1rem;
width: 100px
}
@media only screen and (min-width:768px) {
.coupon__code--field__input {
width: 160px
}
}
@media only screen and (min-width:992px) {
.coupon__code--field__input {
width: 140px
}
}
@media only screen and (min-width:1200px) {
.coupon__code--field__input {
width: 160px
}
}
@media only screen and (max-width:575px) {
.coupon__code--field__input {
height: 4rem
}
}
.coupon__code--field__input:focus {
border-color: var(--secondary-color)
}
.coupon__code--field__btn {
height: 4.5rem;
line-height: 4.5rem;
padding: 0 2.5rem;
margin-left: 2rem
}
@media only screen and (min-width:1200px) {
.coupon__code--field__btn {
margin-left: 3rem
}
}
@media only screen and (max-width:575px) {
.coupon__code--field__btn {
height: 4rem;
line-height: 4rem;
padding: 0 1.8rem
}
}
.cart__note--title {
font-size: 1.7rem;
margin-bottom: .7rem;
line-height: 2.4rem
}
@media only screen and (min-width:992px) {
.cart__note--title {
font-size: 2rem
}
}
.cart__note--desc {
margin-bottom: 1.5rem
}
.cart__note--textarea {
border: 1px solid var(--border-color);
height: 10rem;
padding: 1rem;
width: 100%;
resize: none
}
.cart__note--textarea:focus {
border-color: var(--secondary-color)
}
.cart__summary--total__list {
margin-bottom: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.cart__summary--total__list:last-child {
margin-bottom: 0
}
.cart__summary--footer__desc {
font-size: 1.5rem;
margin-bottom: 1.5rem
}
.cart__summary--footer__btn {
height: 4.5rem;
line-height: 4.5rem;
padding: 0 1.5rem
}
@media only screen and (min-width:992px) {
.cart__summary--footer__btn {
padding: 0 1.5rem;
font-size: 1.5rem
}
}
@media only screen and (min-width:1200px) {
.cart__summary--footer__btn {
padding: 0 2.5rem
}
}
@media only screen and (max-width:575px) {
.cart__summary--footer__btn {
height: 4rem;
line-height: 4rem;
padding: 0 1.2rem
}
}
.wishlist__cart--btn {
font-size: 1.4rem
}
@media only screen and (min-width:992px) {
.wishlist__cart--btn {
font-size: 1.6rem
}
}
@media only screen and (max-width:767px) {
.wishlist__cart--btn {
padding: .5rem .4rem;
height: auto;
line-height: 2.4rem;
border-radius: 5px;
text-align: center;
font-size: 1.3rem;
min-width: 95px
}
}
.checkout__breadcrumb {
padding: 0;
margin: 0
}
@media only screen and (max-width:767px) {
.checkout__breadcrumb {
margin-top: 2.5rem
}
}
.breadcrumb__link {
font-size: 1.3rem;
color: var(--secondary-color)
}
.readcrumb__chevron-icon {
color: #737373;
width: 1.6rem;
height: 1.6rem;
margin: 0 .6rem
}
.breadcrumb__text {
color: #737373;
font-size: 1.3rem
}
.breadcrumb__text.current {
color: var(----black-color)
}
.order__summary--mobile__version {
display: none
}
@media only screen and (max-width:767px) {
.order__summary--mobile__version {
display: block
}
}
.order__summary--toggle {
width: 100%;
text-align: left;
background: var(--bg-gray-color);
border: 0;
border: 1px solid var(--border-color2);
padding: 1.2rem
}
.order__summary--toggle__inner {
width: 100%
}
.order__summary--toggle__text {
color: var(--secondary-color)
}
.order__summary--toggle__icon {
color: var(--secondary-color);
vertical-align: middle;
line-height: 1.5rem;
margin-right: 1rem
}
.summary__table {
width: 100%
}
.summary__table--items {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.summary__table--list {
padding: 1rem 2rem 1rem 0;
border-bottom: 1px solid var(--border-color2)
}
.summary__table--list:last-child {
padding-right: 0
}
details>summary {
list-style: none
}
details>summary::-webkit-details-marker {
display: none
}
.order__summary--final__price {
float: right;
font-size: 1.5rem;
font-weight: 600
}
.order__summary--section {
background: var(--bg-gray-color);
padding: 3rem 1rem 1rem
}
.checkout__checkbox {
position: relative
}
.checkout__checkbox--input {
position: absolute;
left: -1px;
top: 4px;
opacity: 0;
cursor: pointer;
z-index: 999
}
.checkout__checkbox--input:checked~.checkout__checkbox--checkmark {
background-color: var(--secondary-color);
border: 1px solid var(--secondary-color)
}
.checkout__checkbox--input:checked~.checkout__checkbox--checkmark::before {
display: block
}
.checkout__checkbox--label {
padding-left: 3rem;
cursor: pointer
}
.checkout__checkbox--checkmark {
height: 1.8rem;
width: 1.8rem;
border: 1px solid var(--border-color);
border-radius: .3rem;
display: block;
position: absolute;
top: 4px;
left: 0;
background: var(--white-color);
-webkit-transition: var(--transition);
transition: var(--transition)
}
.checkout__checkbox--checkmark::before {
left: .5rem;
top: .3rem;
width: .5rem;
height: .8rem;
border: solid #fff;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
position: absolute;
display: none
}
.checkout__input--label {
display: inline-block
}
.checkout__input--label__star {
color: var(--secondary-color)
}
.checkout__input--field {
width: 100%;
border: 1px solid var(--border-color2);
height: 4.5rem;
padding: 0 1.5rem
}
.checkout__input--field:focus {
border-color: var(--secondary-color)
}
.checkout__notes--textarea__field {
width: 100%;
border: 1px solid var(--border-color2);
padding: 1rem 1.5rem .5rem;
resize: none
}
.checkout__notes--textarea__field:focus {
border-color: var(--secondary-color)
}
@media only screen and (max-width:991px) {
.checkout__section--header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
.section__header--title {
font-size: 2rem;
line-height: 2.2rem
}
@media only screen and (min-width:1200px) {
.section__header--title {
font-size: 2.2rem;
line-height: 2.4rem
}
}
@media only screen and (max-width:575px) {
.section__header--title {
margin-bottom: .8rem
}
}
.section__header--desc {
margin-top: .5rem
}
.layout__flex--item {
color: var(--text-gray-color)
}
@media only screen and (max-width:991px) {
.layout__flex--item {
margin-top: 1rem
}
}
.layout__flex--item__link {
color: var(--secondary-color)
}
.section__shipping--address {
padding: 3rem 0 2rem
}
@media only screen and (min-width:992px) {
.section__shipping--address {
padding: 4rem 0 3rem
}
}
.section__shipping--address.pt-10 {
padding-top: 1rem
}
.section__shipping--address.pt-0 {
padding-top: 0
}
.checkout__input--select {
position: relative
}
.checkout__input--select__field {
width: 100%;
height: 4.5rem;
padding: .5rem 1.5rem;
border: 1px solid var(--border-color2);
-webkit-appearance: none;
cursor: pointer
}
.checkout__input--select__field:focus {
border-color: var(--secondary-color)
}
.previous__link--content {
margin-left: 2rem;
color: var(--secondary-color)
}
@media only screen and (max-width:575px) {
.previous__link--content {
margin-left: 0;
margin-top: 1rem
}
}
.checkout__footer {
border: 0
}
@media only screen and (max-width:575px) {
.checkout__content--step__footer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.checkout__sidebar {
background: #fafafa;
border: 1px solid var(--border-color2);
padding: 3rem 2.5rem;
position: -webkit-sticky;
position: sticky;
top: 0
}
@media only screen and (max-width:991px) {
.checkout__sidebar {
padding: 3rem 1.8rem
}
}
@media only screen and (max-width:767px) {
.checkout__sidebar {
margin-top: 3rem
}
}
.product__thumbnail {
width: 7rem;
border: 1px solid var(--border-color2);
position: relative;
line-height: 1
}
.product__thumbnail--quantity {
position: absolute;
top: -6px;
right: -5px;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: #7f7f7f;
color: var(--white-color);
text-align: center;
border-radius: 50%;
font-size: 1.2rem
}
.product__description {
padding-left: 1.5rem
}
.product__description--name {
font-size: 1.4rem;
line-height: 2rem;
font-weight: 600;
opacity: .9
}
.product__description--variant {
font-size: 1.2rem;
color: var(--light-color);
line-height: 2rem
}
.checkout__product--table {
margin-bottom: 2rem
}
.checkout__product--table .cart__table--body__list {
padding: 1rem 2rem 1rem 0
}
.checkout__product--table .cart__table--body__list:last-child {
padding-right: 0
}
.checkout__discount--code {
margin-bottom: 2.5rem
}
.checkout__discount--code__input--field {
width: 100%;
border: 1px solid var(--border-color2);
height: 4.5rem;
padding: 0 1.5rem
}
.checkout__discount--code__input--field:focus {
border-color: var(--secondary-color)
}
.checkout__discount--code__btn {
height: 4.5rem;
line-height: 4.5rem;
margin-left: 2rem;
padding: 0 2.5rem
}
.checkout__total {
border-top: 1px solid var(--border-color2);
padding-top: 1.2rem
}
.checkout__total--table {
width: 100%
}
.checkout__total--calculated__text {
font-size: 1.3rem;
color: var(--text-gray-color)
}
.checkout__total--title {
color: var(--text-gray-color)
}
.checkout__total--footer__list {
padding-top: 3rem;
position: relative
}
.checkout__total--footer__list::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background: #e4e4e4;
top: 1.5rem;
left: 0
}
.checkout__total--footer__title {
font-size: 1.6rem
}
.checkout__total--footer__amount {
font-size: 2.2rem;
font-weight: 600
}
.checkout__order--summary__title {
font-size: 2rem;
line-height: 2.2rem
}
@media only screen and (min-width:1200px) {
.checkout__order--summary__title {
font-size: 2.2rem;
line-height: 2.4rem
}
}
.payment__history {
margin-top: 2rem
}
.payment__history--title {
font-size: 2rem;
line-height: 2.2rem
}
@media only screen and (min-width:1200px) {
.payment__history--title {
font-size: 2.2rem;
line-height: 2.4rem
}
}
@media only screen and (max-width:575px) {
.payment__history--inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.payment__history--list {
margin-right: 1.5rem
}
@media only screen and (max-width:1199px) {
.payment__history--list {
margin-bottom: 1rem
}
}
.payment__history--list:last-child {
margin-right: 0
}
@media only screen and (max-width:1199px) {
.payment__history--list {
margin-right: 1rem
}
}
.payment__history--link {
padding: 0 2rem;
background: var(--white-color);
color: var(--primary-color);
border: 1px solid var(--primary-color)
}
@media only screen and (max-width:1199px) {
.payment__history--link {
font-size: 1.5rem;
padding: 0 .8rem
}
}
.checkout__now--btn {
width: 100%;
text-align: center
}
.my__account--section__inner {
background: var(--white-color);
-webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
padding: 3rem 2rem
}
@media only screen and (min-width:1199px) {
.my__account--section__inner {
padding: 5rem 4rem
}
}
@media only screen and (max-width:991px) {
.my__account--section__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.account__left--sidebar {
border-right: 1px solid var(--border-color2);
padding-right: 3rem;
margin-right: 3rem;
width: 18rem
}
@media only screen and (min-width:1199px) {
.account__left--sidebar {
padding-right: 5rem;
margin-right: 5rem;
width: 23rem
}
}
@media only screen and (max-width:991px) {
.account__left--sidebar {
width: 100%;
padding-right: 0;
margin-right: 0;
border-right: 0;
border-bottom: 1px solid var(--border-color2);
padding-bottom: 2.5rem;
margin-bottom: 2.5rem
}
}
.account__wrapper {
width: calc(100% - 18rem)
}
@media only screen and (min-width:1199px) {
.account__wrapper {
width: calc(100% - 23rem)
}
}
@media only screen and (max-width:991px) {
.account__wrapper {
width: 100%
}
}
@media only screen and (max-width:991px) {
.account__menu {
width: 250px;
margin-right: 3rem
}
}
@media only screen and (max-width:479px) {
.account__menu {
margin-right: 0
}
}
.account__menu--list {
font-size: 1.5rem;
line-height: 2.5rem;
font-weight: 600;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
margin-bottom: 1.5rem
}
.account__menu--list:last-child {
margin-bottom: 0
}
.account__menu--list:hover {
color: var(--secondary-color)
}
.account__menu--list.active {
color: var(--secondary-color)
}
@media only screen and (min-width:992px) {
.account__menu--list {
font-size: 1.6rem
}
}
.account__details.two {
padding-top: 0
}
@media only screen and (min-width:992px) {
.account__details {
padding-top: 3rem
}
}
@media only screen and (max-width:479px) {
.account__details {
padding-top: 3rem
}
}
.account__details--title {
margin-bottom: 1rem
}
.account__details--desc {
color: var(--text-gray-color);
line-height: 3rem;
margin-bottom: 2rem;
font-size: 1.5rem
}
.account__details--link {
color: var(--secondary-color);
border-bottom: 1px solid var(--secondary-color);
font-size: 1.5rem
}
.account__details--link:hover {
color: var(--primary-color);
border-color: var(--primary-color)
}
.new__address--btn {
padding: 0 2.5rem
}
@media only screen and (min-width:992px) {
.new__address--btn {
font-size: 1.5rem
}
}
.account__details--footer {
margin-top: 3rem
}
.account__details--footer__btn {
background: var(--white-color);
border: 1px solid var(--black-color);
padding: 0 2.5rem;
height: 4.5rem;
line-height: 4.1rem;
border-radius: 2.5rem;
margin-right: 1rem;
font-size: 1.5rem
}
.account__details--footer__btn:last-child {
margin-right: 0
}
.account__details--footer__btn:hover {
color: var(--secondary-color);
border-color: var(--secondary-color)
}
.account__welcome--text {
font-size: 1.6rem;
margin-bottom: 2rem
}
@media only screen and (min-width:992px) {
.account__welcome--text {
font-size: 1.8rem;
margin-bottom: 3rem
}
}
.account__content--title {
font-weight: 600
}
.account__table {
width: 100%;
border: 1px solid var(--border-color2);
border-spacing: 0;
border-bottom: 0
}
@media only screen and (max-width:479px) {
.account__table {
border: 0
}
}
@media only screen and (max-width:767px) {
.account__table--header {
display: none
}
}
.account__table--header__child--items {
text-align: left;
border-bottom: 1px solid var(--border-color2);
padding: 1.7rem 1.3rem;
font-size: 1.5rem
}
.account__table--header__child--items:last-child {
text-align: right
}
@media only screen and (min-width:1200px) {
.account__table--header__child--items {
font-size: 1.6rem;
padding: 1.7rem 1.5rem
}
}
@media only screen and (max-width:767px) {
.account__table--body.mobile__none {
display: none
}
}
.account__table--body.mobile__block {
display: none
}
@media only screen and (max-width:767px) {
.account__table--body.mobile__block {
display: block
}
}
@media only screen and (max-width:767px) {
.account__table--body__child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 2rem;
border-bottom: 1px solid #ddd;
padding-bottom: 2rem
}
.account__table--body__child:last-child {
margin-bottom: 0
}
}
.account__table--body__child--items {
border-bottom: 1px solid var(--border-color2);
padding: 1.7rem 2rem;
color: var(--text-gray-color)
}
.account__table--body__child--items:last-child {
text-align: right
}
@media only screen and (max-width:767px) {
.account__table--body__child--items {
padding: .5rem 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border: 0
}
}
@media only screen and (max-width:479px) {
.account__table--body__child--items {
padding: .5rem 0
}
}
.error__section {
background: #f9fafc
}
@media only screen and (max-width:1199px) {
.error__content--img {
max-width: 600px
}
}
@media only screen and (max-width:767px) {
.error__content--img {
max-width: 450px
}
}
@media only screen and (max-width:575px) {
.error__content--img {
max-width: 100%;
padding: 0 3rem
}
}
.error__content--title {
font-weight: 600;
margin-bottom: 1.5rem;
font-size: 2rem;
line-height: 3rem
}
@media only screen and (min-width:576px) {
.error__content--title {
margin-bottom: 1.5rem;
font-size: 2.6rem;
line-height: 3rem
}
}
@media only screen and (min-width:768px) {
.error__content--title {
margin-bottom: 1.8rem;
font-size: 3.3rem;
line-height: 4rem
}
}
@media only screen and (min-width:992px) {
.error__content--title {
font-size: 4rem;
line-height: 4.5rem;
margin-bottom: 2rem
}
}
@media only screen and (min-width:1200px) {
.error__content--title {
font-size: 4.5rem;
line-height: 5rem;
margin-bottom: 2.5rem
}
}
@media only screen and (min-width:1366px) {
.error__content--title {
font-size: 5rem;
line-height: 5.5rem
}
}
.error__content--desc {
font-size: 1.5rem
}
@media only screen and (min-width:768px) {
.error__content--desc {
font-size: 1.7rem;
line-height: 2.5rem;
margin-bottom: 2.5rem
}
}
@media only screen and (min-width:992px) {
.error__content--desc {
font-size: 1.8rem;
line-height: 2.5rem;
margin-bottom: 2.5rem
}
}
@media only screen and (min-width:1200px) {
.error__content--desc {
font-size: 2rem;
line-height: 2.5rem;
margin-bottom: 3rem
}
}
@media only screen and (min-width:992px) {
.error__content--btn {
font-size: 1.6rem
}
}
.account__login {
background: var(--white-color);
padding: 2.5rem;
border-radius: 1rem;
-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
box-shadow: 0 5px 30px rgba(0, 0, 0, .1)
}
@media only screen and (min-width:992px) {
.account__login {
padding: 3rem
}
}
.account__login--header__title {
font-weight: 600
}
.account__login--header__desc {
font-size: 1.5rem;
font-weight: 600
}
.account__login--input {
width: 100%;
height: 4.8rem;
border: 1px solid var(--border-color);
border-radius: .5rem;
padding: 0 1.5rem;
margin-bottom: 1.5rem
}
@media only screen and (min-width:768px) {
.account__login--input {
height: 5.2rem
}
}
@media only screen and (min-width:992px) {
.account__login--input {
font-size: 1.5rem
}
}
.account__login--input:focus {
border-color: var(--secondary-color)
}
.account__login--btn {
width: 100%;
border-radius: .5rem;
font-size: 1.5rem
}
@media only screen and (min-width:992px) {
.account__login--btn {
font-size: 1.7rem
}
}
@media only screen and (max-width:767px) {
.account__login--btn {
height: 4.5rem;
line-height: 4.5rem
}
}
.account__login--signup__text {
text-align: center;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-gray-color)
}
.account__login--signup__text button {
padding: 0;
border: 0;
background: inherit
}
.account__login--signup__text button:hover {
color: var(--secondary-color)
}
.account__login--forgot {
font-weight: 600;
color: var(--secondary-color);
font-size: 1.5rem;
padding: 0;
border: 0;
background: inherit
}
@media only screen and (max-width:575px) {
.account__login--forgot {
margin-top: .6rem
}
}
.account__login--forgot:hover {
color: var(--primary-color)
}
@media only screen and (max-width:767px) {
.account__login.register {
margin-top: 3rem
}
}
@media only screen and (max-width:575px) {
.account__login--remember__forgot {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
@media only screen and (max-width:575px) {
.account__login--remember .checkout__checkbox--checkmark {
top: 0;
top: 5px;
-webkit-transform: inherit;
transform: inherit
}
}
.login__remember--label {
font-size: 1.3rem;
font-weight: 600
}
@media only screen and (min-width:992px) {
.login__remember--label {
font-size: 1.5rem
}
}
.account__login--divide {
text-align: center;
position: relative;
padding: 1rem 0
}
.account__login--divide::before {
position: absolute;
content: "";
width: 100%;
height: .1rem;
background: var(--border-color2);
top: 50%;
left: 0;
-webkit-transform: translatey(-50%);
transform: translatey(-50%)
}
.account__login--divide__text {
padding: 0 .8rem;
background: var(--white-color);
position: relative;
font-weight: 500;
color: var(--light-color)
}
@media only screen and (min-width:992px) {
.account__login--divide__text {
font-size: 1.5rem
}
}
.account__social--link {
height: 4.2rem;
line-height: 4.2rem;
padding: 0 2.5rem;
color: var(--white-color);
border-radius: .5rem;
font-weight: 600;
margin-right: 1rem
}
.account__social--link.facebook {
background: #4867aa
}
.account__social--link.facebook:hover {
background: var(--secondary-color);
color: var(--white-color)
}
.account__social--link.google {
background: #e94235
}
.account__social--link.google:hover {
background: var(--secondary-color);
color: var(--white-color)
}
.account__social--link.twitter {
background: #55adee
}
.account__social--link.twitter:hover {
background: var(--secondary-color);
color: var(--white-color)
}
.account__social--link:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.account__social--link {
padding: 0 2rem
}
}
@media only screen and (min-width:992px) {
.account__social--link {
padding: 0 3.2rem;
margin-right: 1.2rem;
font-size: 1.5rem
}
}
@media only screen and (min-width:1200px) {
.account__social--link {
padding: 0 4.5rem;
margin-right: 2rem
}
}
@media only screen and (max-width:575px) {
.account__social--link {
height: 4rem;
line-height: 4rem;
padding: 0 1.4rem
}
}
.compare__heading--maintitle {
font-size: 2rem
}
@media only screen and (min-width:992px) {
.compare__heading--maintitle {
font-size: 3rem;
height: 3.2rem
}
}
.compare__table {
border: 1px solid var(--border-color2);
border-spacing: 0;
border-bottom: 0
}
.compare__table--items__child {
padding: 1.2rem;
border-left: 1px solid var(--border-color2);
border-bottom: 1px solid var(--border-color2);
text-align: center
}
.compare__table--items__child:first-child {
border-left: 0
}
@media only screen and (max-width:991px) {
.compare__table--items__child {
min-width: 200px
}
}
.compare__table--items__child--header {
padding: 1rem;
border-bottom: 1px solid var(--border-color2);
text-transform: uppercase;
background: var(--gray-color2);
font-size: 1.4rem
}
@media only screen and (min-width:992px) {
.compare__table--items__child--header {
font-size: 1.5rem
}
}
.compare__product--title {
font-size: 1.4rem;
line-height: 2.4rem;
margin-bottom: 1rem;
text-align: center
}
.compare__product--thumbnail {
border-radius: .5rem
}
.compare__remove {
padding: 0;
float: right;
width: 100%;
border: 0;
background: inherit;
text-align: center;
color: var(--text-gray-color);
margin-bottom: 5px
}
.compare__remove:hover {
color: var(--secondary-color)
}
.compare__description {
color: var(--text-gray-color);
padding: .5rem 0;
font-size: 1.5rem;
line-height: 2.8rem;
text-align: center
}
.compare__instock {
text-transform: uppercase;
font-size: 1.3rem;
text-align: center
}
.compare__product--price {
color: var(--text-gray-color)
}
.compare__cart--btn {
border-radius: .5rem;
text-transform: uppercase;
padding: 0 2rem;
height: 4rem;
line-height: 4rem;
font-size: 1.3rem
}
@media only screen and (min-width:992px) {
.compare__cart--btn {
height: 4.2rem;
line-height: 4.2rem;
padding: 0 2.5rem
}
}
.face__step {
margin-bottom: 3.5rem;
padding-bottom: 3rem
}
.face__step:last-child {
margin-bottom: 0;
padding-bottom: 0
}
.face__step--title {
font-weight: 600
}
@media only screen and (max-width:767px) {
.face__step--title.mb-30 {
margin-bottom: 2.2rem
}
}
.faq__accordion--btn {
-webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .1);
box-shadow: 0 2px 22px rgba(0, 0, 0, .1);
padding: 1.8rem 6rem 1.8rem 2rem;
font-size: 1.5rem;
border-radius: .5rem
}
.faq__accordion--btn .accordion__items--button__icon {
right: 2rem
}
@media only screen and (min-width:768px) {
.faq__accordion--btn {
font-size: 1.7rem
}
}
div#preloader {
width: 100%;
height: 100%;
background: #fff;
z-index: 9999;
position: fixed;
overflow: hidden
}
.addloaded {
opacity: 0;
transition: 1s ease-out;
-webkit-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-ms-transition: 1s ease-out;
-o-transition: 1s ease-out;
pointer-events: none
}
@-webkit-keyframes spinner {
to {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg)
}
}
@keyframes spinner {
to {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg)
}
}
@-webkit-keyframes letters-loading {
0%,
100%,
75% {
opacity: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
25%,
50% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
}
@keyframes letters-loading {
0%,
100%,
75% {
opacity: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
25%,
50% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
}
.loader {
text-transform: uppercase;
color: var(--white-color);
font-size: 40px;
font-family: arial;
position: fixed;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden
}
@media only screen and (max-width:767px) {
.loader {
width: 100%;
padding: 0 2rem;
text-align: center
}
}
.loader span {
position: relative;
top: 30px;
border-radius: 8px;
padding: 0 10px;
background-color: var(--secondary-color);
-webkit-animation: .7s ease-in-out infinite alternate;
animation: .7s ease-in-out infinite alternate;
-webkit-animation-name: loading-txt;
animation-name: loading-txt;
width: 4.5rem;
height: 4.5rem;
line-height: 4.5rem;
text-align: center;
font-size: 2.5rem;
font-weight: 700
}
@media only screen and (max-width:767px) {
.loader span {
width: 3rem;
height: 3rem;
line-height: 3rem;
font-size: 1.6rem
}
}
@-webkit-keyframes loading-txt {
to {
top: 0
}
}
@keyframes loading-txt {
to {
top: 0
}
}
.loader span:nth-child(2) {
-webkit-animation-delay: .15s;
animation-delay: .15s
}
.loader span:nth-child(3) {
-webkit-animation-delay: .3s;
animation-delay: .3s
}
.loader span:nth-child(4) {
-webkit-animation-delay: .45s;
animation-delay: .45s
}
.loader span:nth-child(5) {
-webkit-animation-delay: .6s;
animation-delay: .6s
}
.loader span:nth-child(6) {
-webkit-animation-delay: .75s;
animation-delay: .75s
}
.loader span:nth-child(7) {
-webkit-animation-delay: .9s;
animation-delay: .9s
}
.privacy__policy--content {
margin-bottom: 2rem
}
.privacy__policy--content:last-child {
margin-bottom: 0
}
.privacy__policy--content__title {
font-size: 2rem;
line-height: 2.5rem;
margin-bottom: .8rem
}
@media only screen and (min-width:768px) {
.privacy__policy--content__title {
font-size: 2.2rem;
line-height: 2.5rem
}
}
@media only screen and (min-width:1600px) {
.privacy__policy--content__title {
font-size: 2.5rem;
line-height: 2.8rem;
margin-bottom: 1.2rem
}
}
.privacy__policy--content__subtitle {
font-size: 1.8rem;
line-height: 2.5rem;
margin-bottom: .8rem
}
@media only screen and (min-width:1600px) {
.privacy__policy--content__subtitle {
font-size: 2rem;
line-height: 2.5rem;
margin-bottom: 1rem
}
}
.privacy__policy--content__desc {
font-size: 1.4rem;
margin-bottom: 1.5rem
}
@media only screen and (min-width:1200px) {
.privacy__policy--content__desc {
font-size: 1.5rem
}
}
[data-animation] .newsletter__popup--inner {
opacity: 0;
visibility: hidden;
-webkit-transition: all .5s cubic-bezier(.51, .92, .24, 1.15);
transition: all .5s cubic-bezier(.51, .92, .24, 1.15)
}
[data-animation].newsletter__show .newsletter__popup--inner {
opacity: 1;
visibility: visible;
-webkit-transition-delay: .2s;
transition-delay: .2s
}
.newsletter__popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 1rem;
cursor: pointer;
visibility: hidden;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 999
}
.newsletter__popup.newsletter__show {
visibility: visible;
opacity: 1
}
.newsletter__popup.newsletter__show .newsletter__popup--inner {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.newsletter__popup--inner {
position: relative;
width: 88%;
max-height: 80vh;
border-radius: 10px;
background: var(--white-color);
-webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, .06);
box-shadow: 2px 0 20px rgba(0, 0, 0, .06);
overflow: auto;
cursor: default;
-webkit-transform: translateY(-50px);
transform: translateY(-50px)
}
@media only screen and (min-width:576px) {
.newsletter__popup--inner {
width: 80%
}
}
@media only screen and (min-width:768px) {
.newsletter__popup--inner {
width: 655px
}
}
@media only screen and (min-width:992px) {
.newsletter__popup--inner {
width: 720px
}
}
@media only screen and (min-width:1200px) {
.newsletter__popup--inner {
width: 760px
}
}
.newsletter__popup--close__btn {
position: absolute;
top: 4px;
right: 4px;
background: var(--secondary-color);
color: var(--white-color);
line-height: 2.8rem;
border: 0;
text-transform: uppercase;
font-size: 1.2rem;
border-radius: 50%;
padding: 0;
width: 3rem;
height: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.newsletter__popup--close__btn:hover {
background: var(--primary-color)
}
@media only screen and (min-width:992px) {
.newsletter__popup--close__btn {
width: 3.2rem;
height: 3.2rem
}
}
.newsletter__popup--close__btn>* {
pointer-events: none
}
.newsletter__popup--thumbnail {
width: 280px
}
@media only screen and (min-width:992px) {
.newsletter__popup--thumbnail {
width: 320px
}
}
@media only screen and (min-width:1200px) {
.newsletter__popup--thumbnail {
width: 330px
}
}
@media only screen and (max-width:767px) {
.newsletter__popup--thumbnail {
display: none
}
}
.newsletter__popup--box__right {
width: 100%;
padding: 4rem 2rem 2.2rem;
text-align: center
}
@media only screen and (min-width:576px) {
.newsletter__popup--box__right {
padding: 4rem 2rem 3rem
}
}
@media only screen and (min-width:768px) {
.newsletter__popup--box__right {
width: calc(100% - 280px);
padding: 3rem 2rem
}
}
@media only screen and (min-width:992px) {
.newsletter__popup--box__right {
width: calc(100% - 320px);
padding: 4rem 2.5rem
}
}
@media only screen and (min-width:1200px) {
.newsletter__popup--box__right {
width: calc(100% - 330px);
padding: 4rem 3rem
}
}
.newsletter__popup--title {
margin-bottom: 1.3rem
}
@media only screen and (min-width:992px) {
.newsletter__popup--title {
margin-bottom: 2rem;
font-size: 2.5rem;
line-height: 2.5rem
}
}
@media only screen and (min-width:1200px) {
.newsletter__popup--title {
font-size: 2.8rem;
line-height: 2.8rem
}
}
.newsletter__popup--content--desc {
color: var(--text-gray-color);
display: inline-block;
line-height: 2.2rem;
font-size: 1.5rem;
margin-bottom: 1.4rem
}
@media only screen and (min-width:768px) {
.newsletter__popup--content--desc {
line-height: 2.2rem;
font-size: 1.5rem
}
}
@media only screen and (min-width:992px) {
.newsletter__popup--content--desc {
font-size: 1.6rem;
margin-bottom: 2.2rem
}
}
.newsletter__popup--subscribe__input {
width: 100%;
height: 4rem;
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 0 15px
}
.newsletter__popup--subscribe__input:focus {
border-color: var(--secondary-color)
}
@media only screen and (min-width:768px) {
.newsletter__popup--subscribe__input {
height: 4.5rem
}
}
.newsletter__popup--subscribe__btn {
width: 100%;
height: 4rem;
background: var(--secondary-color);
color: var(--white-color);
border: 0;
padding: 0 2rem;
font-size: 1.5rem;
text-transform: uppercase;
font-weight: 500;
border-radius: 5px;
margin-top: 1.5rem
}
.newsletter__popup--subscribe__btn:hover {
background: var(--primary-color)
}
@media only screen and (min-width:768px) {
.newsletter__popup--subscribe__btn {
height: 4.5rem
}
}
.newsletter__popup--footer {
margin-top: 1.2rem
}
.newsletter__popup--dontshow__again--text {
color: var(--text-gray-color);
cursor: pointer;
font-size: 1.4rem
}
@media only screen and (min-width:768px) {
.newsletter__popup--dontshow__again--text {
font-size: 1.6rem
}
}
Back to Directory
File Manager