@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*,*::before,*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
/* Fonts */
--font-family: "Poppins", sans-serif;
--font-titles: "Libre Baskerville", serif;
--main-font-size: 15px;
/* Colors */
--main-color: #043A71; /*blue*/
--text-color: #313232;
--text-color-alt: #043A71;
--text-color-alt-1: #043A71;
--text-color-light: #DBE4EB;
--rating-color: #FF7E64;
--nav-text-color: #fff;
--price-new-color: #CB3D71;
/* Borders */
--border-color: #929fc8;
--border-color-dark: #39553F;
/* Backgrounds */
--page-bg-color: #fff;
--bg-color: #f1f1f1;
--bg-color-light: #F6F7F8;
--bg-color-alt: #FAF9FF;
--bg-color-light: #DBE4EB;
--bg-color-dark-green: #043A71;
--dropdown-bg: #fff;
--mobile-nav-bg: #043A71;
--mobile-nav-dropdown-bg: #DBE4EB;
--list-group-item-color-hover: #fff;
--footer-bg: #808AAA;
--carousel-btn-bg: #ebebeb;
--box-shadow: rgba(35, 39, 43, 0.2) 0px 8px 20px;
/* Buttons */
--btn-primary-color: #fff;
--btn-primary-color-hover: #fff;
--btn-primary-bg: #043A71;
--btn-primary-bg-hover: #313232;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-default-bg: #313232;
--btn-default-bg-hover: #043A71;
--btn-alt-color: #313232;
--btn-alt-color-hover: #fff;
--btn-alt-bg: transparent;
--btn-alt-bg-hover: #043A71;
--btn-alt-border: #313232;
--btn-alt-border-hover: #043A71;
/* Form elements */
--input-bg: #F1F2F4;
--input-bg-alt: #fff;
--input-color: #21202A;
--radio-border-color: #7A797F;
--radio-checked-color: #043A71;
--radio-disabled-bg-color: #ddd;
--checkbox-border-color: #7A797F;
--checkbox-checked-color: #043A71;
--checkbox-disabled-bg-color: #ddd;
--checkbox-check-icon: url('data:image/svg+xml,');
/* Alerts */
--alert-check-icon: url('data:image/svg+xml,');
--alert-danger-icon: url('data:image/svg+xml,');
--alert-info-icon: url('data:image/svg+xml,');
--alert-warning-icon: url('data:image/svg+xml,');
--info-color: #0048FF;
--success-color: #00D304;
--warning-color: #E33C0A;
--danger-color: #FF0735;
/* Icons */
--top-link-phone: url('data:image/svg+xml,');
--top-link-user: url('data:image/svg+xml,');
--top-link-fav: url('data:image/svg+xml,');
--top-link-cart: url('data:image/svg+xml,');
--top-link-checkout: url('data:image/svg+xml,');
--cart-icon: url('data:image/svg+xml,');
--cart-icon-btn: url('data:image/svg+xml,');
--fav-icon: url('data:image/svg+xml,');
--search-icon: url('data:image/svg+xml,');
--compare-icon: url('data:image/svg+xml,');
--home-icon: url('data:image/svg+xml,');
--delete-icon: url('data:image/svg+xml,');
--delete-icon-small: url('data:image/svg+xml,');
--refresh-icon: url('data:image/svg+xml,'); --arrow-right-icon: url('data:image/svg+xml,');
--edit-icon: url('data:image/svg+xml,');
--trash-icon: url('data:image/svg+xml,');
--order-icon: url('data:image/svg+xml,');
--return-icon: url('data:image/svg+xml,');
--download-icon: url('data:image/svg+xml,');
--clock-icon: url('data:image/svg+xml,');
--comment-icon: url('data:image/svg+xml,');
--store-icon: url('data:image/svg+xml,');
--phone-icon: url('data:image/svg+xml,');
--leaf-icon: url('data:image/svg+xml,');
}
body {
font-family: var(--font-family);
font-optical-sizing: auto;
font-weight: 400;
color: var(--text-color);
font-size: var(--main-font-size);
line-height: 20px;
width: 100%;
background-color: var(--page-bg-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-titles);
font-weight: 400;
}
.fa {
font-size: var(--main-font-size);
}
.fa-refresh:before,
.fa-cloud-download:before,
.fa-eye:before,
.fa-exchange:before,
.fa-heart:before,
.fa-home:before,
.fa-times:before,
.fa-times-circle:before,
.fa-check-circle:before,
.fa-exclamation-circle:before,
.fa-info-circle:before,
.fa-reply:before {
content: "";
}
.fa-refresh,
.fa-cloud-download,
.fa-eye,
.fa-exchange,
.fa-heart,
.fa-home,
.fa-times,
.fa-times-circle,
.fa-check-circle,
.fa-exclamation-circle,
.fa-info-circle,
.fa-reply {
display: inline-block;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
transition: all ease-in 0.25s;
}
.fa-refresh {
background-image: var(--refresh-icon);
width: 22px;
height: 22px;
}
.fa-cloud-download {
background-image: var(--download-icon);
width: 25px;
}
.fa-eye {
background-image: var(--order-icon);
width: 19px;
height: 22px;
}
.fa-exchange {
background-color: var(--text-color);
width: 20px;
-webkit-mask: var(--compare-icon);
mask: var(--compare-icon);
}
.fa-heart {
background-color: var(--text-color);
width: 20px;
-webkit-mask: var(--fav-icon);
mask: var(--fav-icon);
}
.fa-home {
background-color: var(--text-color-alt);
width: 12px;
height: 12px;
-webkit-mask: var(--home-icon);
mask: var(--home-icon);
}
.fa-heart:hover,
.fa-exchange:hover,
.fa-home:hover {
background-color: var(--text-color);
}
.fa-home:hover {
background-color: var(--main-color);
}
.fa-times-circle,
.fa-times {
background-color: var(--text-color-alt-1);
-webkit-mask: var(--delete-icon);
mask: var(--delete-icon);
--svg: var(--delete-icon);
width: 18px;
height: 20px;
}
button:hover .fa-times-circle,
button:hover .fa-times {
background-color: var(--danger-color);
}
.fa-check-circle,
.fa-exclamation-circle,
.fa-info-circle {
width: 25px;
height: 25px;
}
.fa-check-circle {
background-image: var(--alert-check-icon);
}
.fa-exclamation-circle {
background-image: var(--alert-danger-icon);
}
.alert-warning .fa-exclamation-circle {
background-image: var(--alert-warning-icon);
}
.fa-info-circle {
background-image: var(--alert-info-icon);
}
.fa-reply {
background-image: var(--return-icon);
width: 20px;
}
h1 {
font-size: 48px;
margin: 0 0 30px;
}
h2 {
font-size: 36px;
margin: 20px 0;
}
h3 {
font-size: 28px;
margin: 20px 0;
line-height: 1.4;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 14px;
}
p {
font-size: var(--main-font-size);
line-height: 1.6;
margin: 0 0 15px;
}
ul {
list-style: inside;
}
ul li {
line-height: 1.8;
}
a {
color: var(--main-color);
}
a:focus,
a:hover {
color: var(--link-hover-color);
text-decoration: none;
}
a,
button {
transition: all ease-in 0.2s;
}
p a {
font-weight: 500;
}
hr {
border-top: solid 1px var(--border-color);
}
.table {
font-size: 15px;
border-collapse: inherit;
}
.table-bordered {
border: none;
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 12px;
/* white-space: nowrap; */
border: none;
border-bottom: 1px solid var(--border-color);
}
.table > thead > tr > td {
width: 1%;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
}
.table > thead > tr > td > strong {
font-weight: 400;
}
.table > thead > tr > td:nth-child(2) {
width: auto;
}
.table > tfoot > tr > td {
vertical-align: middle;
}
.table-hover > tbody > tr {
transition: all ease-in 0.2s;
}
.table-hover > tbody > tr:hover {
background-color: var(--bg-color-light);
}
legend {
font-size: 15px;
text-transform: uppercase;
padding: 7px 0;
color: var(--text-color);
border-color: var(--border-color);
}
label {
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
color: var(--text-color-alt-1);
}
.checkbox-inline,
.radio-inline {
padding-left: 30px;
}
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="datetime"].form-control,
input[type="datetime-local"].form-control,
input[type="date"].form-control,
input[type="month"].form-control,
input[type="time"].form-control,
input[type="week"].form-control,
input[type="number"].form-control,
input[type="email"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="color"].form-control,
.input-group-sm > .form-control {
font-size: 14px;
color: var(--input-color);
padding: 12px;
height: 48px;
box-shadow: none;
transition: all ease-in 0.2s;
background-color: var(--input-bg);
border: solid 1px transparent;
border-radius: 0;
}
select.form-control:focus,
textarea.form-control:focus,
input[type="text"].form-control:focus,
input[type="password"].form-control:focus,
input[type="datetime"].form-control:focus,
input[type="datetime-local"].form-control:focus,
input[type="date"].form-control:focus,
input[type="month"].form-control:focus,
input[type="time"].form-control:focus,
input[type="week"].form-control:focus,
input[type="number"].form-control:focus,
input[type="email"].form-control:focus,
input[type="url"].form-control:focus,
input[type="search"].form-control:focus,
input[type="tel"].form-control:focus,
input[type="color"].form-control:focus,
.input-group-sm > .form-control:focus {
color: var(--text-color);
border-color: var(--main-color);
}
textarea.form-control {
min-height: 150px;
}
select.form-control {
appearance: none;
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231c1e21' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 1.5rem center;
background-size: 17px 11px;
padding-right: 40px;
}
.input-group input,
.input-group select,
.input-group .dropdown-menu,
.input-group .popover {
font-size: 12px;
}
.input-group-addon {
background: none;
border: none;
font-size: 13px !important;
color: var(--text-color-alt);
text-transform: uppercase;
}
label.input-group-addon {
}
span.hidden-xs,
span.hidden-sm,
span.hidden-md,
span.hidden-lg {
display: inline;
}
div.required .control-label:before {
content: "* ";
}
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label {
color: var(--danger-color);
}
.has-error .form-control {
border-color: var(--danger-color);
}
.form-control:focus,
.has-error .form-control:focus {
box-shadow: none;
border-color: var(--body-border-color);
}
.checkbox label,
.radio label {
padding-left: 28px;
}
.radio label,
.checkbox label {
position: relative;
}
input[type="radio"] {
box-sizing: border-box;
width: 20px;
height: 20px;
margin: 6px;
padding: 0;
border: 2px solid var(--radio-border-color);
border-radius: 50%;
appearance: none;
background-color: transparent;
outline: none;
transition: outline 0.1s;
top: -6px;
left: 20px;
}
input[type="radio"]:not(:disabled):checked {
border-color: var(--radio-checked-color);
background-clip: content-box;
padding: 4px;
background-image: linear-gradient(90deg,var(--main-color) 0%, var(--main-color) 100%);
}
input[type="radio"]:disabled {
background-color: var(--radio-disabled-bg-color);
}
input[type="radio"]:focus-visible {
background-color: var(--radio-hover-color);
outline: 6px solid var(--radio-hover-color);
transform: scale(1.05);
}
input[type="radio"]:disabled:checked {
background-image: radial-gradient(circle, var(--radio-border-color) 0%, var(--radio-border-color) 50%, transparent 50%, transparent 100%);
}
input[type="checkbox"] {
box-sizing: border-box;
width: 20px;
height: 20px;
margin: 6px;
padding: 0;
border: 2px solid var(--checkbox-border-color);
border-radius: 30%;
appearance: none;
background-color: transparent;
outline: none;
transition: outline 0.1s;
top: -6px;
left: 20px;
}
input[type="checkbox"]:checked {
background-size: cover;
padding: 2px;
}
input[type="checkbox"]:not(:disabled):checked {
border-color: var(--checkbox-checked-color);
background-color: var(--main-color);
background-image: var(--checkbox-check-icon);
background-size: 13px 9px;
background-repeat: no-repeat;
background-position: 2px 4px;
}
input[type="checkbox"]:disabled {
background-color: var(--checkbox-disabled-bg-color);
}
input[type="checkbox"]:disabled:checked {
background-image: url('data:image/svg+xml;utf8,');
}
input[type="checkbox"]:focus-visible {
outline: 6px solid var(--checkbox-hover-color);
transform: scale(1.05);
}
.form-horizontal .checkbox,
.form-horizontal .checkbox-inline,
.form-horizontal .radio,
.form-horizontal .radio-inline {
margin-bottom: 5px;
}
.form-horizontal .radio-inline {
padding-top: 7px;
padding-left: 27px;
}
.form-horizontal .radio-inline input[type="radio"] {
top: 0;
}
.form-group {
margin-bottom: 10px;
}
.btn {
padding: 12px 30px;
font-size: 13px;
text-transform: uppercase;
border: none;
transition: all ease-in 0.2s;
color: var(--btn-primary-color);
background-color: var(--btn-primary-bg);
border-radius: 0;
}
.btn:hover,
.btn:focus {
box-shadow: 0 0 0 .2rem rgb(var(--btn-primary-bg));
}
.btn.active,
.btn:active {
box-shadow: none;
}
.btn-xs {
font-size: 12px;
}
.btn-sm {
font-size: 16px;
}
.btn-lg {
font-size: 18px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: 12px;
}
.btn-group > .btn-xs {
font-size: 9px;
}
.btn-group > .btn-sm {
font-size: 10.2px;
}
.btn-group > .btn-lg {
font-size: 15px;
}
.btn-default {
background-color: var(--btn-default-bg);
color: var(--btn-default-color);
border: none;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
background-color: var(--btn-default-bg-hover);
color: var(--btn-default-color-hover);
}
.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-color);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
background-color: var(--btn-primary-bg-hover);
color: var(--btn-primary-color-hover);
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
color: #fff;
background-color: var(--btn-primary-bg-hover);
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
background-color: var(--btn-primary-bg);
}
.btn-warning {
color: #fff;
text-shadow: none;
background-color: #faa732;
border: none;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
box-shadow: none;
}
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:hover,
.btn-danger:active:focus,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
color: var(--danger-color);
background-color: transparent;
}
.btn-success {
color: #fff;
text-shadow: none;
background-color: #5bb75b;
border: none;
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
box-shadow: none;
}
.btn-info {
color: var(--text-color);
background-color: transparent;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
background-color: transparent;
color: var(--text-color);
}
.btn-link {
cursor: pointer;
color: var(--text-color);
border-radius: 0;
font-size: 14px;
}
.btn-link:hover,
.btn-link:focus {
color: var(--link-hover-color);
background: none;
text-decoration: none;
transform: none;
}
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: rgba(0, 0, 0, 0);
background-image: none;
box-shadow: none;
}
.btn-inverse {
color: #fff;
background-color: #1d1d1d;
border-color: transparent;
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #000;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
padding: 15px 30px;
}
#list-view,
#grid-view {
background: none;
color: var(--text-color-alt);
border: none;
padding: 16px 10px 10px;
}
#list-view {
margin-right: 10px;
}
#list-view.active,
#grid-view.active {
color: var(--main-color);
}
#compare-total {
padding: 14px 0 0;
font-size: 13px;
text-transform: uppercase;
color: var(--main-color);
}
#compare-total:hover,
#compare-total:focus {
color: var(--text-color-alt);
}
.text-danger {
color: var(--danger-color);
font-size: 13px;
padding-top: 5px;
}
.well {
padding: 30px;
box-shadow: none;
background-color: transparent;
border-color: var(--border-color);
border-radius: 0;
}
.well h2 {
margin: 0 0 10px;
}
.well p strong {
font-weight: 400;
font-size: 20px;
}
.well .btn {
width: 100%;
}
#top {
padding: 8px 0;
background-color: var(--bg-color-light);
}
#top .pull-left,
#top .pull-right {
width: 50%;
}
#top-links .list-inline {
text-align: right;
margin-bottom: 7px;
}
#top-links .list-inline li a i {
margin-right: 5px;
}
#top-links .list-inline li:first-child a i {
vertical-align: middle;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
text-align: left;
transition: all ease-in 0.2s;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
color: var(--text-color);
background-color: transparent;
}
#form-currency {
padding: 4px 0 0;
}
#form-currency button .fa-caret-down {
font-size: 12px;
position: absolute;
top: 4px;
}
#top .btn-link,
#top-links li,
#top-links a {
color: var(--text-color-alt);
text-decoration: none;
font-size: 12px;
transition: all ease-in 0.2s;
line-height: 2;
}
#top-links li {
padding: 0 20px;
}
#top-links li:last-child {
padding-right: 0;
}
#top-links li a span,
#top-links li span,
#top .btn-link.dropdown-toggle span {
display: none;
}
#top-links li a,
#top .btn-link.dropdown-toggle {
color: var(--text-color-alt);
padding: 0;
position: relative;
text-transform: uppercase;
}
#top-links li a i {
display: none;
}
#top-links li a:before {
content: "";
display: block;
position: absolute;
left: -25px;
top: -13px;
background-size: contain;
width: 18px;
height: 18px;
}
#top-links > ul > li:first-child > a:before {
background-image: var(--top-link-phone);
}
#top-links > ul > li:nth-child(2) > a:before {
background-image: var(--top-link-user);
}
#top-links > ul > li:nth-child(3) > a:before {
background-image: var(--top-link-fav);
top: -12px;
}
#top-links > ul > li:nth-child(4) > a:before {
background-image: var(--top-link-cart);
width: 20px;
}
#top-links > ul > li:last-child > :before {
background-image: var(--top-link-checkout);
width: 20px;
}
.dropdown-menu {
padding: 8px 0;
background: var(--dropdown-bg);
z-index: 1001;
box-shadow: var(--box-shadow);
border: none;
border-radius: 0;
}
#top-links .dropdown-menu > li {
padding: 0;
}
#top-links .dropdown-menu > li > a,
#top-links .dropdown-menu > button.btn-link,
#form-currency .dropdown-menu > li > button.btn-link {
color: var(--text-color-alt);
padding: 3px 20px;
transition: all ease-in 0.2s;
text-transform: none;
font-size: 14px;
}
#top .btn-link:hover,
#top .btn-link:focus,
#top .btn-link:active,
#top-links a:hover {
color: var(--text-color);
background-color: transparent;
transform: none;
}
#top-links .dropdown-menu a {
text-shadow: none;
}
#top-links .dropdown-menu a:hover,
#top-links .dropdown-menu a:focus {
color: var(--text-color);
background: none;
}
#top-links .dropdown-menu {
top: 10px;
}
#top .btn-link strong {
font-size: 20px;
font-family: var(--font-family);
line-height: 14px;
color: var(--text-color);
font-weight: 300;
display: block;
width: 18px;
height: 18px;
float: left;
padding: 2px 0 0;
margin: 2px 6px 0 0;
}
#top-links {
padding-top: 3px;
}
#top-links a + a {
margin-left: 15px;
}
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
background-color: transparent;
border: none;
}
header {
padding: 20px 0;
}
header .row {
display: flex;
align-items: center;
}
header > .container > .row > .col-sm-3,
header > .container > .row > .col-sm-4,
header > .container > .row > .col-sm-5 {
display: flex;
align-items: center;
min-height: 48px;
}
header > .container > .row > .col-sm-3 {
width: 20%;
}
header > .container > .row > .col-sm-5 {
width: 60%;
}
#logo {
display: block;
width: 100%;
}
.header-search {
width: 55%;
}
.header-items {
margin-top: 10px;
margin-bottom: -40px;
}
.header-items .col-sm-4 a {
float: right;
font-weight: 600;
}
.header-items .col-sm-4 {
padding-left: 0px;
}
@media (min-width: 1200px) {
.header-items .col-sm-4 a {
white-space: nowrap;
}
}
@media (max-width: 800px) {
.header-items .col-sm-4 {
text-align: center;
padding-left: 15px;
margin-top: 10px;
}
.header-items .col-sm-4 a {
float: none;
padding-right: 0px;
}
}
@media(max-width: 1200px) {
.header-items {
margin-bottom: 0px;
}
}
#search {
width: 100%;
}
#search .btn {
position: absolute;
right: 0;
top: 0;
z-index: 3;
background: none;
transition: all ease-in 0.2s;
height: 48px;
width: 80px;
padding: 0 0 4px;
text-align: center;
}
#search .btn:hover {
}
#search button .fa {
--svg: var(--search-icon);
background-color: #858481;
-webkit-mask: var(--svg);
mask: var(--svg);
transition: background-color 0.2s;
width: 20px;
height: 20px;
display: inline-block;
margin: 9px 0 0;
}
#search button:hover .fa,
#search button:focus .fa {
background-color: var(--main-color);
}
.fa-search:before {
content: "";
}
.form-control::placeholder {
color: var(--text-color);
opacity: 0.5;
}
#search .form-control {
height: 48px;
line-height: 20px;
padding: 0 20px;
box-shadow: none;
font-size: 14px;
transition: all ease-in 0.2s;
border-radius: 3px;
}
#search .form-control:focus {
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: transparent;
}
#cart .fa-shopping-cart:before {
content: "";
}
#cart .fa-shopping-cart {
background-image: var(--cart-icon);
background-size: contain;
width: 28px;
height: 25px;
float: left;
margin: -5px 8px 0 0;
}
#cart {
text-align: right;
}
#cart > .btn {
background-color: transparent;
font-size: 14px;
font-weight: 500;
line-height: 18px;
padding: 0 30px;
width: auto;
height: 48px;
float: none;
display: inline-block;
text-transform: none;
color: var(--text-color-alt);
border-radius: 3px;
}
#cart > .btn:hover,
#cart > .btn:focus {
transform: none;
color: var(--text-color-alt);
}
#cart .dropdown-menu {
min-width: 400px;
overflow-y: auto;
max-height: 900px;
scrollbar-width: thin;
overflow-x: hidden;
margin: 0;
top: 48px;
padding: 10px 0 0;
}
#cart .dropdown-menu li:first-child,
#cart .dropdown-menu li:last-child div {
padding: 0 15px;
}
.btn-group.open .dropdown-toggle {
box-shadow: none;
}
#cart .dropdown-menu .table > tbody > tr > td {
border: none;
padding: 10px;
}
#cart .dropdown-menu .table > tbody > tr > td:nth-child(4) {
color: var(--text-color);
}
.img-thumbnail {
border-radius: 0;
border: none;
padding: 0;
}
#cart .table .img-thumbnail {
max-width: 50px;
height: auto;
border-radius: 5px;
}
#cart .dropdown-menu .table td {
font-size: 14px;
vertical-align: middle;
}
#cart .dropdown-menu .table td:first-child {
vertical-align: unset;
}
#cart .dropdown-menu .table-bordered tr:last-child td {
font-size: 18px;
font-weight: 500;
}
#cart .dropdown-menu .table td:nth-child(2) a {
font-size: 15px;
color: var(--text-color-alt);
}
#cart .dropdown-menu .table td:nth-child(2) a:hover {
color: var(--text-color);
}
#cart .dropdown-menu .table td .btn {
background: none;
border: none;
width: 26px;
height: 26px;
padding: 4px 0 0;
border-radius: 50px;
}
#cart .dropdown-menu .table tr td {
color: var(--text-color-alt);
}
#cart .fa-times {
background-color: var(--text-color-alt);
mask: var(--delete-icon-small);
--svg: var(--delete-icon-small);
width: 14px;
height: 16px;
}
#cart button:hover .fa-times {
background-color: var(--danger-color);
}
#cart .dropdown-menu .table tr td:nth-child(3) {
text-align: center;
}
#cart .dropdown-menu .table-striped tbody tr {
border-bottom: solid 1px var(--body-border-color);
}
#cart .dropdown-menu .table-bordered {
margin-bottom: 0;
}
#cart .dropdown-menu .table-bordered > tbody > tr > td {
vertical-align: baseline;
padding: 7px 10px;
}
#cart .dropdown-menu .table-bordered td strong {
font-weight: 500;
}
#cart .dropdown-menu .table-bordered tr td:last-child {
color: var(--text-color);
width: 25%;
}
#cart .dropdown-menu .table-bordered + p a {
padding: 10px 15px;
font-size: 12px;
letter-spacing: .5px;
text-transform: uppercase;
display: inline-block;
background-color: var(--btn-default-bg);
color: var(--btn-default-color);
flex: 1 0 0;
text-align: center;
}
#cart .dropdown-menu .table-bordered + p a:hover,
#cart .dropdown-menu .table-bordered + p a:focus,
#cart .dropdown-menu .table-bordered + p a:active {
background-color: var(--btn-default-bg-hover);
}
#cart .dropdown-menu .table-bordered + p a:last-child {
background-color: var(--btn-alt-bg);
color: var(--btn-alt-color);
border: solid 1px var(--btn-alt-border);
}
#cart .dropdown-menu .table-bordered + p a:last-child:hover,
#cart .dropdown-menu .table-bordered + p a:last-child:focus,
#cart .dropdown-menu .table-bordered + p a:last-child:active {
background-color: var(--btn-alt-bg-hover);
border-color: var(--btn-alt-border-hover);
color: var(--btn-alt-color-hover);
}
#cart .dropdown-menu .table-bordered + p a strong {
font-weight: 500;
}
#cart .dropdown-menu .table-bordered + p a strong i {
display: none;
}
#cart .dropdown-menu li div p {
margin: 15px 0;
display: flex;
}
#cart .dropdown-menu li:first-child p {
color: var(--text-color-alt);
margin: 30px 0;
}
#cart .dropdown-menu table {
margin-bottom: 10px;
}
header + .container,
header > .container {
width: 100%;
}
header + .container {
padding: 0;
position: sticky;
top: 0;
z-index: 1000;
}
#menu {
background-color: var(--text-color);
min-height: 40px;
width: auto;
border-radius: 0;
margin-bottom: 15px;
border: none;
}
#menu .nav > li > a {
color: var(--nav-text-color);
font-size: 13px;
text-transform: uppercase;
font-weight: 400;
padding: 20px 15px;
min-height: 16px;
background-color: transparent;
position: relative;
}
#menu .nav > li:hover > a {
color: var(--text-color-alt);
}
#menu .dropdown-menu {
padding: 10px 0;
min-width: 260px;
}
#menu .dropdown-inner {
display: table;
}
#menu .dropdown-inner ul {
display: table-cell;
}
#menu .dropdown-inner li {
padding: 5px 20px;
min-width: 200px;
}
#menu .dropdown-inner li a {
line-height: 20px;
color: var(--text-color-alt);
font-size: 15px;
}
#menu .dropdown-inner li a:hover,
#menu .dropdown-inner li a:focus {
color: var(--main-color);
}
#menu .see-all {
display: inline-block;
margin: 3px 20px;
font-weight: 600;
color: var(--main-color);
white-space: nowrap;
position: relative;
}
#menu .see-all:hover,
#menu .see-all:focus {
text-decoration: none;
color: var(--text-color-alt);
}
#menu #category {
float: left;
padding-left: 15px;
font-size: 13px;
text-transform: uppercase;
font-weight: 500;
line-height: 56px;
color: #fff;
}
#menu .btn-navbar {
font-stretch: expanded;
color: var(--nav-text-color);
background-color: transparent;
padding: 0;
float: right;
border: none;
margin-top: 8px;
margin-right: 15px;
border-radius: 3px;
width: 45px;
height: 40px;
}
#menu .btn-navbar .fa.fa-bars {
font-size: 26px;
}
.navbar-nav .dropdown-toggle:after {
content: "\f107";
font-family: FontAwesome;
font-size: 16px;
display: block;
float: right;
margin-left: 5px;
margin-top: 0;
}
#slideshow0 {
background: var(--bg-color-dark);
}
.swiper-pagination {
bottom: 20px !important;
}
.swiper-slide img {
display: inline-block;
border-radius: 0;
}
.swiper-pager .swiper-button-next:before,
.swiper-pager .swiper-button-prev:before {
font-size: 46px;
color: var(--text-color);
}
.swiper-button-next:before {
content: "\f105" !important;
}
.swiper-button-prev:before {
content: "\f104" !important;
}
.swiper-button-next,
.swiper-button-prev {
opacity: 0.7;
text-shadow: none !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
opacity: 1 !important;
}
.slideshow.swiper-viewport {
border: none;
}
@media (max-width: 767px) {
.slideshow.swiper-viewport {
margin: 0 0 10px;
}
}
.swiper-pagination-bullet {
transition: all 0.35s ease-in-out;
box-shadow: none !important;
width: 12px !important;
height: 12px !important;
background-color: #fff !important;
border: none !important;
position: relative;
}
.swiper-pagination-bullet:hover {
background-color: var(--text-color) !important;
}
.swiper-pagination-bullet-active {
background-color: var(--main-color) !important;
}
@keyframes hideAnimation {
to {
width:0;
height:0;
visibility: hidden;
}
}
@-webkit-keyframes hideAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
.alert {
padding: 30px;
font-size: var(--main-font-size);
text-align: center;
border: none;
border-radius: 0;
color: var(--text-color);
background-color: var(--bg-color-light);
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
z-index: 1001;
width: 400px !important;
line-height: 1.5;
top: calc(50% - 110px);
box-shadow: var(--box-shadow);
min-width: 450px;
animation: hideAnimation 0s ease-in 5s forwards;
-webkit-animation: hideAnimation 0s ease-in 5s forwards;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.alert .fa {
margin: 0 auto 10px auto;
display: block;
}
.alert a {
color: var(--main-color);
}
.alert a:hover,
.alert a:focus {
text-decoration: none;
color: var(--text-color-alt);
}
.alert-dismissible .close {
position: absolute;
top: 5px;
right: 12px;
float: none;
}
.alert-info {
position: static;
width: 100% !important;
animation: none;
}
.close {
text-shadow: none;
opacity: 0.5;
font-size: 24px;
font-weight: 400;
}
.close:focus,
.close:hover {
color: inherit;
opacity: 1;
}
@media (min-width: 768px) {
#menu .dropdown:hover .dropdown-menu {
display: block;
}
.navbar-nav {
display: inline-block;
float: none;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-collapse.collapse {
text-align: center;
}
.product-thumb .button-group button:first-child span {
display: inline-block !important;
}
}
#common-home {
padding: 0;
margin-top: -15px;
}
#common-home .row {
width: 100%;
margin: 0;
}
#common-home #content {
overflow: hidden;
padding: 0;
width: 100%;
}
#content {
min-height: 600px;
}
#product-category #content,
#product-product #tab-description,
#information-information #content {
font-size: 15px;
line-height: 1.5;
}
.slideshow .swiper-slide img {
width: 100%;
}
#common-home #content > h3 {
margin-left: 15px;
margin-right: 15px;
font-size: 36px;
}
@media (min-width: 576px) {
#common-home #content > h3 {
width: 100%;
}
}
@media (min-width: 768px) {
#common-home {
width: 100%;
}
#common-home #content > .row {
width: 750px;
margin-left: auto;
margin-right: auto;
}
#common-home #content > h3 {
width: 720px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 992px) {
#common-home #content > .row {
width: 990px;
}
#common-home #content > h3 {
width: 960px;
}
}
@media (min-width: 1200px) {
#common-home {
width: 100%;
}
#common-home #content > .row {
width: 1150px;
}
#common-home #content > h3 {
width: 1120px;
}
}
@media (min-width: 1600px) {
#common-home > *,
#top > .container,
header .container,
footer .container,
body > .container + .container,
.container {
width: 1400px;
margin: 0 auto;
}
#common-home #content > .row {
width: 1430px;
}
#common-home #content > h3 {
width: 1400px;
}
}
footer {
margin-top: 30px;
padding-top: 30px;
background-color: var(--footer-bg);
}
footer hr {
border-top: none;
border-bottom: 1px solid var(--border-color);
width: 100%;
left: 0;
right: 0;
position: absolute;
}
footer ul li {
line-height: 1.4;
}
footer a {
transition: all ease-in 0.2s;
color: var(--text-color-light);
font-size: 14px;
}
footer a:hover {
color: #fff;
}
footer h5 {
color: #fff;
font-family: var(--font-family);
font-size: 14px;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 10px;
}
footer p {
font-size: 12px;
margin: 40px auto 20px !important;
color: var(--text-color-light);
}
.breadcrumb {
margin: 0 0 15px;
padding: 8px 0;
background: none;
}
.breadcrumb > li {
padding: 0 8px;
position: relative;
white-space: nowrap;
font-size: 13px;
}
.breadcrumb > li:first-child {
padding-left: 0;
}
.breadcrumb > li + li:before {
content: "";
padding: 0;
}
.breadcrumb > li:after {
content: "/";
font-family: var(--font-family);
font-size: 13px;
color: var(--text-color-alt);
display: block;
position: absolute;
top: 0;
right: -5px;
}
.breadcrumb > li:last-child:after {
content: "";
}
.breadcrumb > li a {
color: var(--text-color-alt);
}
.breadcrumb > li:last-child a {
color: var(--text-color);
}
.breadcrumb > li a:hover,
.breadcrumb > li a:focus {
color: var(--main-color);
}
html[dir="rtl"] .breadcrumb > li::after {
top: -3px;
left: -5px;
width: 26px;
height: 26px;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
right: unset;
border-right: unset;
border-bottom: unset;
}
#product-category #content > h2 {
margin-top: 0;
}
#product-category #content h3 + .row > .col-sm-3 {
padding: 0 5px 0 0;
}
#product-category #content h3 + .row > .col-sm-3 ul {
list-style: none;
padding: 0;
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
}
#product-category #content h3 + .row > .col-sm-3 ul li a {
display: inline-block;
color: var(--nav-text-color);
background-color: var(--btn-primary-bg);
padding: 10px 15px;
width: 100%;
margin: 0 0 5px;
}
#product-category #content h3 + .row > .col-sm-3 ul li a:hover {
color: var(--nav-text-color);
background-color: var(--text-color);
}
#product-category #content h3 + .row + .row,
#product-category #content h3 + .row + br + .row,
#product-category #content h3 + .row + .row + .row + .row,
#product-category #content h2 + .row,
#product-category #content h2 + .cs__flex + .row,
#product-search #content h2 + .row,
#product-manufacturer #content h2 + .row {
background-color: var(--bg-color-light);
margin-bottom: 20px;
}
#product-category #content h2 + .cs__flex + .row,
#product-search #content h2 + .row,
#product-manufacturer #content h2 + .row {
background-color: var(--bg-color-light);
}
#product-category #content h3 + .row + .row select,
#product-category #content h2 + .row select,
#product-search #content h2 + .row select,
#product-category #content h3 + .row + br + .row select,
#product-category #content h3 + .row + .row select:focus,
#product-search #content h2 + .row select:focus,
#product-category #content h3 + .row + br + .row select:focus,
#product-category #content h2 + .row select:focus,
#product-category #content h2 + .cs__flex + .row select,
#product-category #content h2 + .cs__flex + .row select:focus,
#product-manufacturer #content h2 + .row .form-group select,
#product-manufacturer #content h2 + .row .form-group select:focus {
border-color: transparent;
background-color: transparent;
font-size: 13px;
}
#product-category #content h3 + .row + .row .col-md-3.col-xs-6,
#product-search #content h2 + .row .col-md-3.col-xs-6 {
padding-right: 0;
}
#product-category #content h3 + .row + .row + .row {
margin: 0 -25px;
}
#product-category #content h3 + .row + .row + .row + .row {
margin-top: -1px;
}
#product-category #content h2 + .row img,
#product-category #content h2 + .row p {
margin-top: 15px;
}
#product-category #content h3 + .row + .row .form-group,
#product-category #content h2 + .row .form-group,
#product-search #content h2 + .row .form-group,
#product-category #content h3 + .row + br + .row .form-group,
#product-category #content h2 + .cs__flex + .row .form-group {
margin-bottom: 0;
}
#product-category #content h2 + .row + hr {
display: none;
}
#product-search #content h2 + .row .col-md-2 + .col-md-3 {
text-align: right;
}
#product-category #content > .row > .col-sm-2 > img {
width: 100%;
margin-bottom: 20px;
}
#product-category #column-left .swiper-viewport {
box-shadow: none;
background-color: var(--bg-color-light);
border: none;
padding: 15px;
border-radius: 0;
}
#product-category #column-left .swiper-viewport .swiper-slide {
background-color: var(--bg-color-light);
}
#product-category #column-left .swiper-viewport .swiper-slide a {
display: inline-block;
width: 100%;
text-align: center;
}
#product-category #content .row .text-right {
padding: 27px 15px 0;
margin-bottom: 27px;
color: var(--text-color-alt);
font-size: 13px;
}
.pagination {
margin: 0;
border-radius: 0;
font-size: 13px;
}
.pagination > li > a,
.pagination > li > span {
border: none;
color: var(--text-color);
font-weight: 500;
width: 33px;
height: 33px;
transition: all ease-in 0.2s;
text-align: center;
margin-right: 5px;
padding: 7px 8px 8px;
background-color: transparent;
border-radius: 0;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: var(--main-color);
border-color: transparent;
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
background-color: var(--btn-primary-bg-hover);
color: var(--text-color-alt);
}
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-radius: 0 !important;
}
.display-control {
margin-bottom: 30px;
}
.list-group {
position: relative;
background-color: var(--bg-color-light);
margin-bottom: 20px;
}
.list-group-item:first-child,
.list-group-item:last-child {
border-radius: 0;
}
a.list-group-item {
color: var(--text-color);
background: none;
padding: 12px 20px;
font-size: 15px;
transition: all ease-in 0.2s;
position: relative;
border: none;
margin: 0;
border-radius: 0;
}
a.list-group-item:hover,
a.list-group-item:focus {
background: var(--bg-color-dark-green);
color: var(--list-group-item-color-hover);
padding-left: 15px;
}
.list-group a.active,
.list-group a.active:hover,
.list-group a.active:focus {
background: var(--main-color);
color: var(--list-group-item-color-hover);
padding-left: 20px;
}
.carousel-caption {
color: var(--text-color);
}
.carousel-control .icon-prev:before {
content: "\f053";
font-family: FontAwesome;
}
.carousel-control .icon-next:before {
content: "\f054";
font-family: FontAwesome;
}
#content .carousel {
width: 100%;
margin: 0 auto;
border-radius: 0;
border: solid 1px var(--body-border-color);
margin-bottom: 40px;
}
#content .carousel .swiper-pagination {
display: none;
}
#content .carousel .swiper-button-next,
#content .carousel .swiper-button-prev {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: var(--carousel-btn-bg);
text-align: center;
padding: 1px 0 0;
margin-top: -25px;
}
#content .carousel .swiper-button-next:hover,
#content .carousel .swiper-button-prev:hover {
}
#content .carousel .swiper-button-next:before,
#content .carousel .swiper-button-prev:before {
font-size: 25px;
color: var(--main-color);
vertical-align: middle;
}
#content .carousel:hover .swiper-button-next {
right: -23px !important;
opacity: 1;
}
#content .carousel:hover .swiper-button-prev {
left: -23px !important;
opacity: 1;
}
#common-home #content h3 + .row {
margin-bottom: 10px;
}
.product-layout {
padding: 0 10px;
}
.product-layout .product-thumb {
margin-bottom: 20px;
}
.product-list .product-thumb .caption {
min-height: unset;
}
.product-thumb .image a {
position: relative;
display: block;
overflow: hidden;
}
.product-thumb .image img {
margin: 20px auto 0 auto;
border-radius: 0;
transition: all ease-in 0.25s;
}
.product-grid .product-thumb .image {
float: none;
}
.product-list .product-thumb {
display: inline-block;
width: 100%;
}
.product-list .product-thumb .image {
float: left;
padding: 0 20px;
width: 30%;
}
.product-list .product-thumb .image + div {
float: left;
width: 70%;
padding: 0 20px 0 0;
}
.product-list .product-thumb .caption {
padding: 5px 20px;
}
.product-list .product-thumb .button-group {
padding: 20px;
}
.product-list .product-thumb .button-group button:first-child {
width: 150px;
}
.product-list .product-thumb .button-group button + button {
margin-left: 20px;
}
.product-list .product-thumb .button-group button + button {
left: 30px;
}
.product-list .product-thumb .price {
margin: 0;
}
.product-thumb h4 {
line-height: 1.4;
}
.product-thumb h4 a {
color: var(--text-color);
position: relative;
display: inline-block;
font-size: 15px;
font-weight: 500;
position: relative;
}
.product-thumb h4 a:hover {
color: var(--text-color-alt);
}
.product-thumb p {
font-size: 13px;
font-weight: 300;
line-height: 1.4;
}
.product-thumb .caption {
padding: 10px 25px;
min-height: 218px;
background-color: var(--bg-color-light);
}
.rating p {
color: var(--text-color-alt);
}
.rating a {
transition: all ease-in 0.2s;
margin: 0 10px;
color: var(--main-color);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
.rating a:hover {
color: var(--text-color-alt);
}
.product-thumb .rating {
padding-bottom: 10px;
}
.fa-stack {
font-size: 8px;
width: 1.6em;
margin: -5px 0 0;
padding: 1px 0 0;
}
.fa-star-o,
.fa-star {
color: var(--rating-color);
font-size: 15px;
}
.fa-star + .fa-star-o {
color: var(--rating-color);
}
h2.price {
margin: 0;
}
.product-thumb .price {
font-size: 15px;
font-weight: 600;
color: var(--text-color-alt-1);
font-family: var(--font-titles);
}
.product-thumb .price-old {
color: var(--text-color-alt);
text-decoration: line-through;
margin-left: 10px;
font-size: 13px;
font-weight: 400;
}
.product-thumb .price-tax {
font-family: var(--font-family);
color: var(--text-color-alt);
font-size: 14px;
display: block;
font-weight: 400;
}
.product-thumb .price-new {
color: var(--price-new-color);
}
.product-thumb .button-group {
display: inline-block;
width: 100%;
background-color: var(--bg-color-light);
}
.product-thumb .button-group button {
transition: all ease-in 0.2s;
background: none;
border: none;
border-radius: 50px;
}
.product-thumb:hover .image img {
transform: scale(1.1);
}
.product-thumb .button-group button:first-child {
margin: -8px 0 0;
width: 100%;
height: 40px;
padding: 10px 15px;
background-color: var(--btn-default-bg);
color: var(--btn-primary-color);
font-size: 12px;
letter-spacing: .5px;
text-transform: uppercase;
border-radius: 0;
position: relative;
overflow: hidden;
}
.product-thumb:hover .button-group button:first-child {
}
.product-thumb .button-group button:first-child .fa:before {
content: "";
}
.product-thumb .button-group button:first-child .fa {
background: var(--cart-icon-btn);
background-size: contain;
width: 20px;
height: 18px;
display: block;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: -7px;
transform: translateY(100%);
transition: opacity .15s ease, transform .25s ease;
}
.product-thumb .button-group button:first-child span {
display: block !important;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: -15px;
transition: transform .25s ease, opacity .15s ease;
}
.product-thumb .button-group button:first-child:hover span {
transform: translateY(25px) translateZ(0);
}
.product-thumb .button-group button:first-child:hover .fa {
transform: translateY(-29px) translateZ(0);
}
.product-thumb .button-group button + button {
margin: 0 0 0 15px;
padding: 3px 0 0;
position: absolute;
right: 30px;
top: 20px;
width: 40px;
height: 40px;
transform: translateY(20px);
opacity: 0;
}
.product-thumb .button-group button + button:hover {
background-color: var(--main-color);
}
.product-thumb .button-group button + button:hover i {
background-color: #fff;
}
.product-thumb:hover .button-group button + button {
opacity: 1;
transform: translateY(0);
}
.product-thumb .button-group button + button + button {
top: 65px;
}
.product-thumb .button-group button:first-child:hover {
background-color: var(--btn-default-bg-hover);
}
#content .swiper-viewport {
box-shadow: none;
margin-top: 0;
border-radius: 0;
}
#product-product #content > .row > .col-sm-8 {
width: 60%;
}
#product-product #content .row + p {
font-size: 13px;
}
#product-product #content .row + p a {
font-family: var(--font-titles);
text-transform: uppercase;
font-weight: 400;
font-size: 14px;
}
#product-product #content .row + p a:hover,
#product-product #content .row + p a:focus {
color: var(--text-color-alt);
}
#product-product #content > .row > .col-sm-4 {
width: 40%;
padding: 25px 30px;
background-color: var(--bg-color-light);
}
#product-product #content > .row > .col-sm-4 .btn-group {
margin-bottom: 10px;
}
#product-product #content > .row > .col-sm-4 .btn-group .btn {
background: none;
border: none;
margin: 0 10px 10px 0;
padding: 0;
width: 40px;
height: 40px;
border-radius: 40px;
background-color: white;
padding: 3px 0 0;
}
#product-product #content > .row > .col-sm-4 .btn-group .btn:hover,
#product-product #content > .row > .col-sm-4 .btn-group .btn:focus {
background-color: var(--main-color);
}
#product-product #content > .row > .col-sm-4 .btn-group .btn i {
background-color: var(--main-color);
}
#product-product #content > .row > .col-sm-4 .btn-group .btn:hover i,
#product-product #content > .row > .col-sm-4 .btn-group .btn:focus i {
background-color: #fff;
}
#product-product #content > .row > .col-sm-4 hr {
border-color: var(--border-color);
}
#product-product h1 {
font-size: 42px;
color: var(--text-color);
}
#product-product #content .col-sm-4 {
color: var(--text-color-alt);
}
#product-product h1 + ul li a {
color: var(--main-color);
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
}
#product-product h1 + ul li a:hover,
#product-product h1 + ul li a:focus {
color: var(--text-color-alt);
}
#product-product h1 + ul + ul li h2 {
font-size: 28px;
font-weight: 500;
color: var(--main-color);
border: none;
padding: 0;
margin: 5px 0;
}
#product .form-group > label[for="input-quantity"],
#product .form-group > input[name="quantity"] {
float: left;
width: auto;
}
#product .form-group > label[for="input-quantity"] {
margin: 13px 10px 0 0;
}
#product .form-group > input[name="quantity"] {
text-align: center;
width: auto;
margin-bottom: 15px;
background-color: var(--input-bg-alt);
}
#product .form-group > label {
float: left;
width: 100%;
}
#product h3 + .form-group.required .radio {
margin-bottom: 0;
}
#product h3 + .form-group.required input[type=radio] {
top: 9px;
}
#button-cart {
margin-bottom: 15px;
font-size: 13px;
}
#product + .rating {
margin: 20px 0 0;
}
#product + .rating p {
margin: 0;
font-size: 15px;
}
.thumbnail > img {
width: 100%;
transition: all ease-in .25s;
}
.thumbnails {
background-color: var(--bg-color-light);
overflow: auto;
clear: both;
list-style: none;
padding: 15px 15px 7px;
margin: 0;
text-align: center;
}
.thumbnails li {
overflow: hidden;
}
.image-additional {
display: inline-block;
margin: 0 5px 10px;
max-width: 80px;
}
.thumbnail {
border: none;
background-color: white;
padding: 0;
overflow: hidden;
}
.thumbnail:hover img,
.thumbnail:focus img {
transform: scale(1.05);
}
.image-additional > a.thumbnail {
display: block;
margin: 0;
transition: all ease-in .25s;
}
.image-additional > a.thumbnail.active,
.image-additional > a.thumbnail:focus,
.image-additional > a.thumbnail:hover {
transform: translateY(-5px);
transform: scale(1.05);
}
.mfp-figure figure {
background-color: #fff;
}
.mfp-title {
color: var(--text-color) !important;
padding-left: 20px;
font-size: 12px;
line-height: 30px !important;
}
.mfp-counter {
right: 20px !important;
color: var(--text-color) !important;
line-height: 30px !important;
}
.date .btn,
.time .btn,
.datetime .btn {
height: 48px;
}
.date .btn-default {
background-color: var(--btn-primary-bg);
}
.date .btn-default .fa {
vertical-align: super;
}
.nav-tabs {
background-color: var(--bg-color-light);
border-radius: 0;
border-bottom: none;
margin: 20px 0 0;
text-align: center;
}
.nav-tabs > li {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
margin: 0;
}
.nav-tabs li,
.nav-tabs li a {
color: var(--text-color-alt);
background: none;
}
.nav-tabs li a {
padding: 15px 20px;
border: none;
border-radius: 0;
margin: 0;
position: relative;
}
.nav-tabs li a:hover,
.nav-tabs li a:focus {
background-color: transparent;
color: var(--text-color);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: var(--nav-text-color);
background-color: var(--main-color);
border: none;
}
.tab-pane {
padding: 30px 0;
}
.tab-pane h1,
.tab-pane h2,
.tab-pane h3 {
margin-top: 0;
}
.tab-content {
margin-bottom: 30px;
background-color: var(--bg-color-light);
padding: 0 25px;
}
#tab-description ul li,
#tab-description div,
#tab-description p > font,
#tab-description p > font > font {
font-size: var(--main-font-size);
font-family: var(--font-family);
}
/* #tab-description ul li {
list-style: inside;
} */
#tab-description p img,
#tab-description img {
width: 100% !important;
border-radius: 3px;
margin-bottom: 15px;
}
#form-review label {
margin-bottom: 10px;
}
#form-review label:before {
left: -10px;
}
#form-review table tbody tr:first-child td {
border-top: solid 1px var(--border-color-alt);
}
#review > .row > .col-sm-6 {
font-size: 14px;
}
#form-review input[type="radio"] {
margin: 0 0 -4px;
}
.bootstrap-datetimepicker-widget {
border-radius: 3px !important;
background-color: #fff;
}
.bootstrap-datetimepicker-widget.bottom:before {
border-bottom-color: #fff !important;
}
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover,
.bootstrap-datetimepicker-widget td span.active {
background-color: var(--page-bg-color) !important;
color: var(--text-color) !important;
text-shadow: none !important;
font-weight: 700;
}
.bootstrap-datetimepicker-widget a[data-action] {
color: var(--text-color-alt);
background: none;
}
.bootstrap-datetimepicker-widget td span:hover {
background: var(--bg-color) !important;
color: var(--text-color) !important;
}
.bootstrap-datetimepicker-widget thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget td.day:hover,
.bootstrap-datetimepicker-widget td.hour:hover,
.bootstrap-datetimepicker-widget td.minute:hover,
.bootstrap-datetimepicker-widget td.second:hover {
background-color: var(--bg-color) !important;
}
.picker-switch .btn {
background-color: var(--main-color);
padding: 8px 20px;
margin: 10px 0;
}
.picker-switch .btn:hover,
.picker-switch .btn:focus {
color: #fff;
}
.bootstrap-datetimepicker-widget td span {
transition: all ease-in 0.2s;
border-radius: 0 !important;
}
#tab-specification .table tbody > tr > td:first-child {
white-space: unset;
}
#tab-specification .table tbody > tr > td:last-child {
white-space: normal;
}
#checkout-cart .table-responsive table {
margin-bottom: 40px;
}
#checkout-cart table.table > tbody > tr > td:first-child > a {
display: block;
}
#checkout-cart table.table > tbody > tr > td:first-child > a:hover img {
filter: grayscale(100%);
}
#checkout-cart table.table > tbody > tr > td:nth-child(2) {
vertical-align: middle;
}
#checkout-cart table.table > tbody > tr > td:nth-child(2) > a,
#product-compare .table thead + tbody > tr > td a {
color: var(--text-color);
font-size: 16px;
}
#checkout-cart table.table > tbody > tr > td:nth-child(2) > a:hover {
color: var(--text-color-alt);
}
#product-compare .table thead + tbody > tr > td a:hover,
#product-compare .table thead + tbody > tr > td a:focus {
color: var(--text-color-alt);
}
#checkout-cart table.table > tbody > tr > td:nth-child(2) > small {
font-size: 13px;
}
#checkout-cart table.table > tbody > tr > td:nth-child(3) {
vertical-align: middle;
}
#checkout-cart table.table > tbody > tr > td:nth-child(4) {
width: 16%;
padding-top: 8px;
vertical-align: middle;
}
#checkout-cart table.table > tbody > tr > td:nth-child(4) .input-group-btn {
margin: 4px 0 0;
}
#checkout-cart table.table > tbody > tr > td:nth-child(5) {
color: var(--text-color-alt);
}
#checkout-cart table.table > tbody > tr > td:last-child {
color: var(--main-color);
font-weight: 500;
}
#checkout-cart table.table > tbody > tr > td:nth-child(5),
#checkout-cart table.table > tbody > tr > td:last-child {
width: 10%;
vertical-align: middle;
}
#checkout-cart table.table > tbody > tr > td:nth-child(4) .btn.btn-danger {
padding: 13px 18px 13px;
}
#checkout-cart table.table > tbody > tr > td:nth-child(4) .btn-primary {
color: var(--main-color);
}
#checkout-cart table.table > tbody > tr > td:nth-child(4) .btn {
background: none;
border: none;
box-shadow: none;
text-shadow: none;
}
#checkout-cart table.table > thead > tr > td:nth-child(5),
#checkout-cart table.table > thead > tr > td:nth-child(6),
#checkout-cart table.table > tbody > tr > td:nth-child(5),
#checkout-cart table.table > tbody > tr > td:nth-child(6) {
text-align: center !important;
}
#checkout-cart table.table > tbody > tr > td .input-group .form-control[name^="quantity"] {
width: 55px;
text-align: center;
padding: 6px 10px;
margin: 4px 0 0;
}
#checkout-cart #accordion {
margin: 20px 0 10px;
}
#checkout-cart #accordion + br {
display: none;
}
.panel {
box-shadow: none;
}
.panel-group .panel {
border: none;
}
.panel > .panel-heading {
background-color: var(--bg-color-light);
border: none;
color: var(--text-color-alt);
border-radius: 0;
}
.panel-group .panel,
.panel-heading {
box-shadow: none;
}
.panel-group .panel {
background-color: var(--bg-color-light);
}
.panel-body {
padding: 30px;
color: var(--text-color);
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border: none;
border-radius: 0;
}
.panel-heading {
padding: 15px;
}
.panel-title {
font-family: var(--font-family);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: var(--text-color-alt-1);
}
.panel-title > a {
display: inline-block;
width: 100%;
}
.panel-title > a:hover {
color: var(--text-color-alt);
}
.panel-group .panel + .panel {
margin-top: 10px;
}
.panel-body input[type="text"],
.panel-body input[type="password"],
.panel-body select,
.panel-body textarea {
background-color: var(--input-bg-alt);
}
#collapse-coupon label {
padding-top: 12px;
}
#button-account,
#button-login {
min-width: 250px;
}
#button-coupon,
#button-voucher,
#button-quote {
font-size: 12px;
font-weight: 500;
padding: 12px 20px;
height: 48px;
background-color: var(--btn-default-bg);
}
#button-coupon:hover,
#button-coupon:focus,
#button-voucher:hover,
#button-voucher:focus,
#button-quote:hover,
#button-quote:focus {
background-color: var(--btn-default-bg-hover);
}
#button-quote {
float: right;
}
#collapse-voucher label {
padding-top: 5px;
}
#checkout-cart #accordion + br + .row table.table > tbody > tr > td {
white-space: normal;
vertical-align: middle;
}
#checkout-cart #accordion + br + .row table.table > tbody > tr:last-child > td {
border: none;
}
#checkout-cart #accordion + br + .row table.table > tbody > tr > td:last-child {
font-size: 18px;
}
#checkout-cart #accordion + br + .row table.table > tbody > tr:last-child > td:last-child {
font-size: 20px;
font-weight: 600;
}
#checkout-cart #accordion + br + .row table.table > tbody > tr > td > strong {
font-weight: 600 !important;
}
#checkout-cart .buttons .pull-right .btn {
width: 436px;
}
#checkout-cart #accordion + br + .row .table {
margin-bottom: 0;
}
#collapse-checkout-option .radio {
margin: 15px 0;
}
#collapse-checkout-option .col-sm-6 > h2 + p {
font-size: 18px;
}
#collapse-checkout-option .col-sm-6 .form-group > a,
.well .form-group a {
margin: 12px 0 7px;
display: inline-block;
font-size: 15px;
}
#checkout-checkout .panel-body .checkbox {
float: left;
margin-top: 10px;
width: 100%;
}
#checkout-checkout .panel-body .buttons input[type="checkbox"] {
float: left;
margin-top: 0;
margin-left: 0;
margin-right: 8px;
}
#checkout-checkout input[type="radio"]:checked {
background-image: linear-gradient(90deg,var(--main-color) 0%, var(--main-color) 100%);
}
#checkout-checkout .radio label {
margin-bottom: 10px;
}
#checkout-checkout .panel-body .buttons input[type="checkbox"]:before {
content: "";
}
#checkout-checkout .panel-body .buttons {
float: left;
width: 100%;
margin: 10px 0 0;
}
#checkout-checkout .panel-body .buttons .pull-right {
width: 100%;
font-size: 14px;
}
#checkout-checkout .panel-body .buttons .pull-right #button-register {
float: right;
margin: -16px 0 0;
}
#checkout-checkout .table tbody tr td a {
border: none;
}
#checkout-checkout .table tbody tr td a:hover,
#checkout-checkout .table tbody tr td a:focus {
color: var(--accent-color);
}
#checkout-checkout .table-hover > tbody > tr:hover {
background-color: var(--bg-color-light);
}
#checkout-checkout .agree {
color: var(--main-color);
}
#checkout-checkout .agree:hover,
#checkout-checkout .agree:focus {
color: var(--text-color-alt);
}
#collapse-checkout-option .panel-body h2 {
margin: 0 0 10px;
}
#collapse-payment-address > .panel-body > .row > .col-sm-6:first-child > fieldset#account + fieldset {
margin: 35px 0 0;
}
#payment-existing,
#shipping-existing {
margin-bottom: 10px;
}
#collapse-payment-address .form-horizontal br,
#collapse-shipping-address .form-horizontal br {
display: none;
}
input#button-payment-address,
input#button-payment-method,
input#button-guest,
input#button-shipping-address,
input#button-shipping-method,
input#button-confirm {
float: right;
}
#collapse-payment-method strong {
font-weight: 500;
}
#collapse-checkout-confirm table {
margin: 0;
}
#collapse-checkout-confirm table thead tr td:nth-child(3) {
width: 10%;
text-align: center;
}
#collapse-checkout-confirm table thead tr td:first-child {
width: 38%;
}
#collapse-checkout-confirm table tbody tr td:nth-child(3) {
text-align: center;
}
#collapse-checkout-confirm table tbody tr td:nth-child(4),
#collapse-checkout-confirm table tbody tr td:last-child {
font-weight: 500;
}
#collapse-checkout-confirm table tbody tr td:last-child {
color: var(--main-color);
}
#collapse-checkout-confirm table tfoot tr td {
border: none;
}
#collapse-checkout-confirm table tfoot tr td:last-child {
font-size: 18px;
font-weight: 500;
color: var(--main-color);
}
#collapse-checkout-confirm table tfoot tr:last-child td:last-child {
font-size: 20px;
font-weight: 500;
}
#collapse-checkout-confirm table tbody tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
#collapse-checkout-confirm table tbody tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
#collapse-shipping-method p strong {
font-weight: 500;
}
#account-login {
min-height: 700px;
}
#account-login .well {
min-height: 412px;
}
#account-login .well p + p {
margin-bottom: 20px;
}
#account-login #column-right .list-group {
margin-top: 0;
}
#account-login #content > .row > .col-sm-6:first-child .well {
display: flex;
flex-direction: column;
}
#account-login #content > .row > .col-sm-6:first-child .well p + p {
flex-grow: 1;
}
#column-right .list-group {
background-color: var(--bg-color-dark-green);
}
#account-account #column-right .list-group {
margin-top: 50px;
}
#account-register .form-horizontal .buttons {
margin: 0;
display: inline-block;
width: 100%;
}
#account-register .form-horizontal .buttons .pull-right {
width: 100%;
}
#account-register .form-horizontal .buttons .pull-right input[type="checkbox"] {
float: left;
margin: 0 10px 0 0;
}
#account-register .form-horizontal .buttons .pull-right input.btn {
float: right;
margin: -12px 0 0;
}
.form-horizontal .control-label {
text-align: left;
position: relative;
}
.form-horizontal .control-label:before {
position: absolute;
left: 5px;
}
#account-register label.col-sm-2 {
width: 12%;
}
#account-register label.col-sm-2 + div.col-sm-10 {
width: 88%;
}
body > .container + .container > .row > #content > h2 {
margin-top: 0;
}
#column-right .list-group a {
color: var(--nav-text-color);
padding: 12px 20px;
margin: 0;
position: relative;
border-bottom: solid 1px var(--border-color-dark);
}
#column-right .list-group a:last-child {
padding-bottom: 17px;
border: none;
}
#column-right .list-group a:first-child {
padding-top: 17px;
}
#column-right .list-group a:first-child:hover {
}
#column-right .list-group a:hover:before,
#column-right .list-group a:focus:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-2)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-5)));
display: block;
}
#column-right .list-group a:hover,
#column-right .list-group a:focus {
color: var(--text-color-light);
background: var(--main-color);
padding-left: 25px;
}
#column-right .list-group a:last-child:hover {
border-radius: 0;
}
.agree b {
font-weight: 400;
}
#account-edit h1,
#account-password h1,
#account-order h1,
#account-recurring h1,
#account-reward h1,
#account-return h1,
#account-transaction h1,
#account-newsletter h1,
#account-voucher h1,
#account-affiliate h1 {
font-size: 36px;
}
#account-account h2 + ul {
padding: 20px 0;
background-color: var(--bg-color-light);
margin-bottom: 20px;
}
#account-account #content .list-unstyled li {
line-height: 1.5;
overflow: hidden;
padding: 0 20px;
}
#account-account #content .list-unstyled li a {
color: var(--text-color);
position: relative;
font-size: 15px;
font-weight: 500;
display: inline-block;
padding: 8px 10px;
}
#account-account #content .list-unstyled li a:before {
content: "";
display: block;
background: var(--leaf-icon) no-repeat 0 0/contain;
width: 16px;
height: 16px;
position: absolute;
left: -15px;
top: 12px;
transform: translateX(-25px);
transition: all ease-in .3s;
opacity: 0;
}
#account-account #content .list-unstyled li a:hover,
#account-account #content .list-unstyled li a:focus {
color: var(--text-color-alt-1);
padding-left: 25px;
}
#account-account #content .list-unstyled li a:hover:before,
#account-account #content .list-unstyled li a:focus:before {
left: 0;
transform: translateX(0);
opacity: 1;
}
#account-account #content h2 {
font-size: 28px;
}
#account-account #content h2:first-child {
margin-top: 0;
}
#account-wishlist .table .btn,
#account-order .table .btn-info,
#account-order div.table-responsive .table .btn,
#account-return .table .btn,
#account-download .table .btn {
background: none;
border: none;
padding: 0 20px;
}
#account-wishlist .table .btn-danger:hover,
#account-wishlist .table .btn-danger:focus {
color: var(--danger-color);
}
#account-order .table .btn-info,
#account-return .table .btn,
#account-download .table .btn {
padding: 0 10px;
display: block;
margin: 0 auto;
}
#account-order .table .btn-info:hover,
#account-order .table .btn-info:focus,
#account-order div.table-responsive .table .btn-danger:hover,
#account-order div.table-responsive .table .btn-danger:focus {
color: var(--text-color);
}
#account-order div.table-responsive .table .btn-danger,
#account-download .table .btn {
color: var(--main-color);
}
#account-wishlist .table .btn .fa-shopping-cart:before,
#account-order div.table-responsive .table .btn .fa-shopping-cart:before {
content: "";
}
#account-wishlist .table .btn .fa-shopping-cart,
#account-order div.table-responsive .table .btn .fa-shopping-cart {
display: block;
background: var(--cart-icon);
background-size: contain;
width: 23px;
height: 20px;
}
#account-wishlist .table .btn-danger .fa-times:before {
content: "";
}
#account-wishlist .table .btn-danger .fa-times {
display: block;
width: 19px;
}
#account-wishlist .table .btn-danger .fa-times:hover,
#account-wishlist .table .btn-danger .fa-times:focus {
background-color: var(--danger-color);
}
#account-wishlist .table > thead > tr > td:first-child,
#account-wishlist .table > thead > tr > td:nth-child(4),
#checkout-cart table.table > thead > tr > td:first-child {
width: 10%;
}
#account-wishlist .table > thead > tr > td:nth-child(5) {
width: 15%;
}
#account-wishlist .table > thead > tr > td:last-child {
width: 16%;
text-align: center;
}
#account-order h2 + .table + .table + .table-responsive .table > tbody > tr:last-child > td:first-child,
#account-order h2 + .table + .table + .table-responsive .table > tbody > tr:last-child > td:last-child {
border-radius: 0;
}
#account-order h1 + div.table-responsive .table thead tr td:first-child,
#account-order h1 + div.table-responsive .table tbody tr td:first-child,
#account-order h1 + div.table-responsive .table tbody tr td:nth-child(3),
#account-order .table + div.table-responsive .table thead tr td,
#account-order .table + div.table-responsive .table tbody tr td,
#account-order .table + div.table-responsive .table tfoot tr td:nth-child(3),
#account-return h1 + div.table-responsive .table thead tr td,
#account-return h1 + div.table-responsive .table tbody tr td,
#account-reward .table thead tr td:last-child,
#account-reward .table tbody tr td:last-child,
#account-download .table thead tr td:first-child,
#account-download .table tbody tr td:first-child,
#account-download .table thead tr td:nth-child(3),
#account-download .table tbody tr td:nth-child(3),
#account-download .table thead tr td:nth-child(4),
#account-download .table tbody tr td:nth-child(4) {
text-align: center;
}
#account-order .table + div.table-responsive .table tbody tr td:first-child,
#account-order .table + div.table-responsive .table tbody tr td:nth-child(2),
#account-order .table + div.table-responsive .table thead tr td:first-child,
#account-order .table + div.table-responsive .table thead tr td:nth-child(2),
#account-return h1 + div.table-responsive .table thead tr td:nth-child(2),
#account-return h1 + div.table-responsive .table tbody tr td:nth-child(2) {
text-align: left;
}
#account-order .table + div.table-responsive .table thead tr td:first-child {
width: auto;
}
#account-order .table + div.table-responsive .table thead tr td:nth-child(2),
#account-order div.table-responsive + h3 + .table thead tr td:nth-child(2),
#account-address h2 + div.table-responsive > .table tbody tr td:last-child {
width: 1%;
}
#account-order h2 + .table-hover b {
font-weight: 600;
}
#account-address h2 + div.table-responsive > .table tbody tr td:last-child .btn {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
font-size: 0;
height: 20px;
padding: 0 20px;
}
#account-address h2 + div.table-responsive > .table tbody tr td:last-child .btn-info {
background-image: var(--edit-icon);
width: 20px;
}
#account-address h2 + div.table-responsive > .table tbody tr td:last-child .btn-danger {
background-color: var(--text-color);
mask: var(--delete-icon);
-webkit-mask: var(--delete-icon);
width: 17px;
padding: 0 9px;
}
#account-address h2 + div.table-responsive > .table tbody tr td:last-child .btn-danger:hover,
#account-address h2 + div.table-responsive > .table tbody tr td:last-child .btn-danger:focus {
background-color: var(--danger-color);
}
#account-order div.table-responsive + h3 + .table thead tr td:last-child {
width: auto;
}
#account-address h2 + .table-responsive > .table > tbody > tr:first-child > td {
border-top: solid 1px var(--border-color);
}
#account-order .buttons,
#account-reward .buttons,
#account-transaction .buttons,
#account-return .buttons,
#account-download .buttons {
margin-top: 20px;
}
#account-transaction p b {
font-weight: 600;
}
#account-order div.table-responsive .table tfoot tr td:nth-child(3) {
font-size: 17px;
text-align: left;
font-weight: 500;
}
#account-order div.table-responsive .table tfoot tr td:first-child {
border-left: solid 1px var(--body-border-color);
}
#account-order div.table-responsive .table tfoot tr td:last-child {
border-right: solid 1px var(--body-border-color);
}
#account-order div.table-responsive .table tfoot tr:last-child td:nth-child(3) {
font-size: 17px;
font-weight: 500;
}
#account-newsletter label.col-sm-2 {
width: 10%;
text-align: left;
}
#account-voucher .buttons .pull-right,
#account-affiliate .buttons .pull-right {
width: 100%;
padding: 20px 0 0;
}
#account-voucher .buttons .pull-right input[type="checkbox"],
#account-affiliate .buttons .pull-right input[type="checkbox"] {
float: left;
margin-top: 0;
margin-left: 0;
}
#account-voucher .buttons .pull-right .btn,
#account-affiliate .buttons .pull-right .btn {
float: right;
margin-top: -14px;
}
#product-compare .table thead tr td,
#product-compare .table tbody tr td {
white-space: unset;
}
#product-compare .table tbody tr td:first-child {
width: 8%;
}
#product-compare .table tbody tr td img {
min-width: 150px;
}
#product-compare .table tbody tr:nth-child(2) td {
text-align: left !important;
}
#product-compare .table > tbody > tr > td a strong {
font-weight: 400;
}
#product-compare .table > tbody > tr > td.rating .fa-stack {
margin: -5px 0 0;
}
#product-compare .table > tbody > tr > td > .btn-danger {
margin-top: 10px;
}
#affiliate-register input[type="checkbox"] {
margin-top: 11px;
vertical-align: top;
}
.modal-dialog {
margin: 5% auto 0;
}
.modal-content {
border: none;
box-shadow: var(--box-shadow);
padding: 30px;
border-radius: 3px;
}
.modal-header,
.modal-footer {
border: none;
}
.modal-header {
padding: 15px 0;
}
.modal-body {
background-color: var(--bg-color-dark-alt);
border-radius: 3px;
color: var(--text-color);
}
.modal-body img,
.modal-body p img {
width: 100% !important;
}
.modal-footer {
padding: 15px 0;
}
.modal-title {
color: var(--text-color);
}
#product-manufacturer #content h1 + p {
display: inline-block;
width: 100%;
padding: 20px 20px 10px;
background: var(--bg-color-light);
color: var(--text-color-alt);
}
#product-manufacturer #content h1 + p > strong {
float: left;
margin: 2px 10px 0 0;
font-weight: 500;
}
#product-manufacturer #content h1 + p > a {
color: var(--text-color-alt);
font-size: 16px;
font-weight: 500;
font-family: var(--font-titles);
padding: 4px 15px;
display: inline-block;
margin: 0 -8px 10px 0;
}
#product-manufacturer #content h1 + p > a:hover,
#product-manufacturer #content h1 + p > a:focus {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-color);
}
#product-manufacturer #content h2 {
border-bottom: solid 1px var(--border-color);
padding-bottom: 15px;
font-size: 26px;
}
#product-manufacturer #content h2 + .row .form-group {
margin-bottom: 0;
}
#product-manufacturer #content .row {
margin-bottom: 20px;
}
#product-manufacturer #content .row > .col-sm-3 {
width: 16%;
}
#product-manufacturer #content .row > .col-sm-3 > a {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
background-color: var(--btn-primary-bg);
color: var(--btn-primary-color);
padding: 12px 30px;
display: inline-block;
margin-bottom: 8px;
text-align: center;
width: 100%;
transition: all ease-in .25s;
}
#product-manufacturer #content .row > .col-sm-3 > a:hover,
#product-manufacturer #content .row > .col-sm-3 > a:focus {
background-color: var(--btn-primary-bg-hover);
}
#product-manufacturer #content .row .text-right {
color: var(--text-color-alt);
font-size: 13px;
}
#product-manufacturer #content > p + h2 + .row,
#product-manufacturer #content > .row + h2 + .row {
background: none;
}
#information-sitemap #content > .row .col-sm-6 > ul {
padding-left: 0;
list-style-position: inside;
}
#information-sitemap #content > .row .col-sm-6 > ul > li {
font-weight: 400;
font-family: var(--font-titles);
color: var(--accent-color);
background: var(--bg-color-light);
margin-bottom: 15px;
padding: 10px 20px;
list-style: none;
}
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li,
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li > ul {
text-transform: none;
list-style: none;
}
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li > ul {
padding-left: 15px;
}
#information-sitemap #content > .row .col-sm-6 > ul > li > a,
#information-sitemap #content > .row .col-sm-6 > ul > li {
font-size: 16px;
color: var(--main-color);
}
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li {
font-family: var(--font-family);
}
#information-sitemap #content > .row .col-sm-6 > ul > li > a:hover,
#information-sitemap #content > .row .col-sm-6 > ul > li > a:focus {
color: var(--text-color-alt);
}
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li {
font-weight: 400;
}
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li > a {
color: var(--text-color-alt);
}
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li > a:hover,
#information-sitemap #content > .row .col-sm-6 > ul > li > ul > li > a:focus {
color: var(--text-color-alt-1);
}
#information-sitemap #content ul li {
font-size: 15px;
line-height: 1.8;
}
#information-sitemap #content ul li a {
color: var(--text-color);
}
#information-sitemap #content ul li a:hover,
#information-sitemap #content ul li a:focus {
color: var(--text-color-alt);
}
#information-contact .panel-default {
border: none;
background-color: var(--bg-color-alt);
border-radius: 12px;
}
#information-contact .panel-default strong {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 10px;
display: inline-block;
position: relative;
padding: 0 0 0 35px;
margin-bottom: 15px;
}
#information-contact .panel-default .col-sm-3 strong:before {
content: "";
height: 25px;
width: 25px;
display: block;
position: absolute;
left: 0;
top: 0;
}
#information-contact .panel-default .col-sm-3:first-child strong:before {
background-image: var(--store-icon);
width: 27px;
}
#information-contact .panel-default .col-sm-3:nth-child(2) strong:before {
background-image: var(--phone-icon);
}
#information-contact .panel-default .col-sm-3:last-child strong:first-child:before {
background-image: var(--clock-icon);
}
#information-contact .panel-default .col-sm-3:last-child br + strong:before {
background-image: var(--comment-icon);
}
#information-contact .panel-default address {
margin-bottom: 10px;
}
#information-contact .panel-default .panel-body {
padding: 30px 25px;
background-color: var(--bg-color-light);
}
#information-contact legend {
font-size: 28px;
font-family: var(--font-titles);
font-weight: 400;
padding-bottom: 20px;
text-transform: none;
}
#product-search #content > .row > .col-sm-3 + .col-sm-3 {
padding-top: 13px;
}
#product-search #content > .row > .col-sm-3 + .col-sm-3 .checkbox-inline,
#product-search #content > .row > .col-sm-4 > #input-search {
margin-bottom: 10px;
}
#product-search #content > p > label > input {
margin-top: 7px;
}
#product-search #button-search {
margin-bottom: 30px;
width: 32%;
}
#product-search #content .row > .text-right {
font-size: 13px;
color: var(--text-color-alt);
}
#product-search #content h2 + .row {
margin: 0 0 20px;
}
#product-search #content h2 + .row + .row {
margin: 0 -10px 10px;
}
#product-search #content h2 + .row + .row + .row {
margin: 0 -10px;
}
/*//// Equal height thumbs /////*/
#common-home #content h3 + .row,
#product-category h3 + .row + .row + .row,
#product-category h2 + .row + hr + .row + .row,
#product-search h2 + .row + .row,
#product-product #content .row + h3 + .row {
display: flex;
flex-wrap: wrap;
}
#product-product #content .row + h3 + .row .col-sm-3 {
display: flex;
}
#common-home #content h3 + .row .product-layout,
.product-grid {
display: flex;
}
.product-list .product-thumb {
display: flex;
flex-direction: row;
}
.product-list .product-thumb .image {
flex: 0 0 25%;
}
#common-home #content h3 + .row .product-layout .product-thumb,
.product-grid .product-thumb,
#product-product #content .row + h3 + .row .product-thumb {
display: flex;
flex-direction: column;
flex: 1;
}
.product-grid .product-thumb .image + div,
.product-list .product-thumb .image + div {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.product-list .product-thumb .caption {
margin: 0;
}
#common-home #content h3 + .row .product-layout .product-thumb .caption,
.product-grid .product-thumb .caption,
#product-product #content .row + h3 + .row .product-thumb .caption {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#common-home #content h3 + .row .product-layout .product-thumb .price,
.product-grid .product-thumb .price,
#product-product #content .row + h3 + .row .product-thumb .price {
margin-top: auto;
}
#common-home .list-group a {
display: inline-block;
}
#common-home {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#home-about {
display: flex;
background-color: var(--bg-color-light);
margin: 20px 0 0;
}
#home-about > div {
flex: 1;
}
#about-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
#about-text {
padding: 40px 30px 40px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
#about-text > * {
max-width: 700px;
}
#home-products,
.blog-category {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
#home-products {
text-align: center;
padding: 60px 0;
}
#home-products .carousel p a {
font-size: 20px;
}
.carousel-control {
text-shadow: none;
color: var(--main-color);
}
.carousel-control:focus,
.carousel-control:hover {
color: var(--main-color);
}
/* Responsive styles */
@media (min-width: 1200px) {
#content .col-lg-2:nth-child(6n + 1),
#content .col-lg-3:nth-child(4n + 1),
#content .col-lg-4:nth-child(3n + 1),
#content .col-lg-6:nth-child(2n + 1) {
clear: left;
}
#top .pull-left,
#top .pull-right {
width: auto;
}
}
@media (max-width: 1600px) {
header > .container > .row {
width: 1170px;
margin: 0 auto;
}
.product-thumb .caption {
min-height: 240px;
}
#content .carousel {
width: 1120px;
}
#collapse-coupon label,
#collapse-voucher label {
padding-top: 5px;
}
#account-register label.col-sm-2 {
width: 14%;
}
#account-register label.col-sm-2 + div.col-sm-10 {
width: 86%;
}
#account-wishlist .table > thead > tr > td:last-child {
width: 20%;
}
#account-wishlist .table > thead > tr > td:nth-child(4) {
width: 12%;
}
#checkout-cart .buttons .pull-right .btn {
width: 360px;
}
#product-manufacturer #content .row > .col-sm-3 {
width: 20%;
}
}
@media (max-width: 1200px) {
#content .carousel {
width: 960px;
}
#top .container {
width: 100%;
}
#top-links li a:before {
top: -13px;
}
header > .container > .row {
width: auto;
}
header .col-sm-4 {
padding-left: 0;
}
header .col-sm-3 {
padding-right: 0;
}
#collapse-voucher label {
padding-top: 0;
}
#account-register label.col-sm-2 {
width: 18%;
}
#account-register label.col-sm-2 + div.col-sm-10 {
width: 82%;
}
#account-wishlist .table > thead > tr > td:last-child {
width: 24%;
}
#account-wishlist .table > thead > tr > td:nth-child(4) {
width: 15%;
}
#account-newsletter label.col-sm-2 {
width: 14%;
}
.product-thumb .caption {
min-height: 250px;
padding: 10px 20px 10px 20px;
}
#common-home .product-thumb .button-group button:first-child,
.product-grid .product-thumb .button-group button:first-child {
width: 100%;
}
#common-home .product-thumb .button-group button + button,
.product-grid .product-thumb .button-group button + button {
margin: 15px 0 0;
}
#checkout-cart .buttons .pull-right .btn {
width: 293px;
}
#account-edit #content,
#account-register #content,
#account-forgotten #content,
#account-password #content,
#account-address #content,
#account-wishlist #content,
#account-order #content,
#account-download #content,
#account-recurring #content,
#account-reward #content,
#account-return #content,
#account-transaction #content,
#account-newsletter #content,
#common-success #content,
#account-affiliate #content,
#account-voucher #content {
width: 71%;
}
}
@media (max-width: 992px) {
header > .container > .row > .col-sm-5 {
width: 55%;
}
header > .container > .row > .col-sm-3 {
width: 25%;
}
#content .carousel {
width: 720px;
}
.product-thumb {
margin-bottom: 20px;
}
.product-thumb .caption {
min-height: 210px;
}
.product-list .product-thumb .button-group {
border-left: none;
padding: 20px 0 0;
}
.product-list .product-thumb .button-group button:first-child {
width: 100%;
}
#list-view,
#grid-view {
padding: 17px 17px 14px;
}
.display-control-listgrid,
.display-control-compare {
margin-bottom: 20px;
}
.display-control-compare {
text-align: right;
}
#product-category .text-left,
#product-category .text-right {
width: 100%;
text-align: center;
}
#product-category #content h3 + .row + .row .col-md-3,
#product-category #content h2 + .row .col-md-3,
#product-category #content h2 + .cs__flex + .row .col-md-3,
#product-manufacturer #content h2 + .row .col-md-3 {
text-align: right;
}
#product-category #content h3 + .row + .row .col-xs-6,
#product-category #content h3 + .row + br + .row .col-xs-6,
#product-category #content h2 + .row .col-xs-6,
#product-search #content h2 + .row .col-xs-6,
#product-category #content h2 + .cs__flex + .row .col-xs-6,
#product-manufacturer #content h2 + .row .col-xs-6 {
width: 100%;
}
#product-category #content h2 + .row .col-md-4 {
margin-bottom: 10px;
}
#product-category #content h3 + .row + .row .col-md-3.col-xs-6,
#product-search #content h2 + .row .col-md-3.col-xs-6 {
padding-right: 15px;
}
#product-category #content h3 + .row > .col-sm-3 {
width: 100%;
}
#product-category #content h3 + .row + .row .col-md-3.col-xs-6,
#product-category #content h3 + .row + .row .col-md-4.col-xs-6,
#product-search #content h2 + .row .col-md-3.col-xs-6,
#product-search #content h2 + .row .col-md-4.col-xs-6 {
margin-bottom: 15px;
}
#checkout-cart table.table img {
height: auto;
}
#checkout-cart table.table > tbody > tr > td:first-child > a {
width: auto;
}
#collapse-coupon label {
padding-top: 0;
}
#checkout-cart #content .col-sm-offset-8 {
margin-left: 0;
width: 100%;
}
#account-register label.col-sm-2 {
width: 22%;
}
#account-register label.col-sm-2 + div.col-sm-10 {
width: 78%;
}
#account-newsletter label.col-sm-2 {
width: 16%;
}
#product-compare #content .table {
overflow-x: auto;
display: inline-block;
}
#account-voucher .buttons .pull-right .btn,
#account-affiliate .buttons .pull-right .btn {
float: left;
clear: both;
margin-top: 20px;
}
#account-login .well {
min-height: 456px;
}
#checkout-cart .buttons .pull-right .btn {
width: 100%;
}
#product-manufacturer #content .row > .col-sm-3 {
width: 25%;
}
#product-search #content > .row > .col-sm-4,
#product-search #content > .row > .col-sm-3,
#product-search #button-search {
width: 100%;
}
#carousel0 img {
padding: 0 20px;
}
}
@media (max-width: 767px) {
header .row {
display: block;
}
header > .container > .row > .col-sm-3,
header > .container > .row > .col-sm-4,
header > .container > .row > .col-sm-5 {
width: 100%;
padding: 0 15px;
min-height: unset;
}
.navbar-nav {
margin: 0 -15px;
}
.navbar-nav .dropdown-toggle:after {
margin-right: 16px;
font-size: 20px;
}
#common-home #content h3 + .row {
width: auto;
margin: 0 15px;
}
.product-thumb .button-group button:first-child span {
display: inline-block !important;
}
#product-category #content h3 + .row + .row,
#product-category #content h3 + .row + .row + .row,
#product-category #content h3 + .row + .row + .row + .row,
#product-category #content h2 + .row,
#product-search #content h2 + .row,
#product-search #content h2 + .row + .row,
#product-category #content h2 + .cs__flex + .row,
#product-category #content h2 + .cs__flex + .row + .row,
#product-category #content h2 + .filter + .row {
width: auto;
margin: 0 0 20px 0;
}
.product-layout {
padding: 0;
}
#product-category #content h3 + .row + .row,
#product-search #content h2 + .row,
#product-search #content h2 + .row + .row {
margin-bottom: 20px;
}
#product-category #content h3 + .row + .row + .row + .row {
margin-top: -1px;
}
#product-category #content h3 {
margin-left: 0;
}
#product-category #content h3 + .row > .col-sm-3 {
padding: 0 15px;
}
#content .carousel {
width: auto;
margin: 0 20px;
}
#logo {
margin: 0;
text-align: center;
}
#logo img {
max-width: 250px;
display: inline-block;
margin: 0 0 20px;
}
#search {
margin-bottom: 20px;
}
#cart {
text-align: center;
}
#cart .dropdown-menu .table > tbody > tr > td,
#account-return .table > tbody > tr > td:first-child {
width: 1% !important;
}
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(2) {
width: 5%;
}
.navbar-collapse {
background-color: var(--mobile-nav-bg);
box-shadow: var(--box-shadow);
}
.navbar-collapse.in {
overflow-x: hidden;
}
#menu .nav > li > a {
border-bottom: solid 1px var(--border-color-dark);
}
#menu .nav > li:last-child > a {
border: none;
}
#menu div.dropdown-inner > ul.list-unstyled {
display: block;
}
#menu div.dropdown-menu {
background-color: var(--mobile-nav-dropdown-bg);
margin-left: 0 !important;
padding: 20px 0;
box-shadow: none;
border-radius: 0;
border: none;
}
#menu .dropdown-inner {
display: block;
}
#menu .dropdown-inner a {
width: 100%;
display: inline-block;
}
#menu .see-all {
margin-top: 5px;
border: none;
width: 100%;
}
.header-logo,
.header-search {
width: 100%;
}
.header-search {
margin-bottom: 20px;
}
footer {
text-align: center;
}
#product-category #content h3 + .row + .row .col-md-3,
#product-category #content h2 + .row .col-md-3 {
text-align: left;
margin-bottom: 10px;
}
#product-category #content h3 + .row + .row .col-xs-6,
#product-category #content h2 + .row .col-xs-6 {
width: 50%;
margin-bottom: 0;
}
#product-product #content > .row > .col-sm-8,
#product-product #content > .row > .col-sm-4,
#product-product #content > .row > .col-sm-4 .btn-group {
width: 100%;
}
#product-product #content > .row > .col-sm-8 .btn-group .btn.btn-default {
width: auto;
}
#compare-total {
padding: 16px 0 0 10px;
}
#collapse-coupon label,
#collapse-voucher label {
padding-left: 0;
margin-bottom: 10px;
}
.panel-body {
padding: 20px;
}
#collapse-checkout-option > .panel-body > .row > .col-sm-6:first-child {
margin-bottom: 30px;
}
#collapse-payment-address > .panel-body > .row > .col-sm-6:first-child > fieldset#account + fieldset {
margin: 0;
}
.alert {
width: 100%;
}
.pull-right,
.pull-left,
.btn.btn-primary,
.btn.btn-default {
width: 100%;
}
#collapse-payment-method .buttons .pull-right input.btn,
#account-register .form-horizontal .buttons .pull-right input.btn {
float: none;
margin: 20px 0 0;
}
#checkout-cart > .row > #content > .buttons > .pull-left > a.btn,
#input-coupon,
#input-voucher {
margin-bottom: 10px;
}
#button-coupon,
#button-voucher,
#button-quote {
margin: 0;
border-radius: 30px;
}
#account-register .form-horizontal fieldset:nth-child(3) .form-group {
margin-bottom: 5px;
}
#account-register label.col-sm-2,
#account-register label.col-sm-2 + div.col-sm-10 {
width: 100%;
}
#account-forgotten .btn.btn-default,
#account-edit .btn.btn-default,
#account-password .btn.btn-default,
#account-address .btn.btn-default,
#account-return .btn.btn-default,
#account-newsletter .buttons .btn-default {
margin-bottom: 10px;
}
#cart .dropdown-menu {
width: 80%;
margin: 0 auto;
left: 0;
}
#cart .dropdown-menu .table td:first-child a {
width: auto;
background-color: #fff;
}
.table .btn {
width: auto;
}
#account-order #content > .row > .text-left,
#account-order #content > .row > .text-right,
#account-reward #content > .row > .text-left,
#account-reward #content > .row > .text-right,
#account-return #content > .row > .text-left,
#account-return #content > .row > .text-right,
#account-transaction #content > .row > .text-left,
#account-transaction #content > .row > .text-right,
#account-download #content > .row > .text-right {
text-align: center;
}
#account-newsletter label.col-sm-2,
.modal-footer .btn-default {
width: 100%;
margin-bottom: 10px;
}
.table-responsive {
border: none;
}
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > th {
border-bottom: var(--body-border-color) solid 1px;
}
.table {
overflow-x: auto;
display: inline-block;
}
.display-control-compare {
text-align: left !important;
}
#account-login .well {
min-height: auto;
}
#checkout-checkout .panel-body .buttons .pull-right #button-register {
margin: 10px 0 0;
}
.product-list .product-thumb .caption {
min-height: 0;
margin-left: 0;
}
.product-grid .product-thumb .caption {
min-height: 0;
}
.product-list .product-thumb .button-group {
border-left: none;
}
.product-thumb .caption {
min-height: auto;
}
footer h5 {
margin-bottom: 15px;
}
footer .col-sm-3 {
margin-bottom: 30px;
}
footer .col-sm-3:last-child {
margin-bottom: 0;
}
#product-search #content > .row > .col-sm-3 + .col-sm-3 {
padding-top: 15px;
}
#product-search #content h2 + .row .col-md-2 + .col-md-3,
#product-category #content h2 + .cs__flex + .row .col-md-3,
#product-manufacturer #content h2 + .row .col-md-3 {
text-align: left;
margin-bottom: 10px;
}
#product-product #content > .row > .col-sm-4 {
margin: 0 15px;
width: auto;
}
.tab-content {
margin-bottom: 15px;
}
#product-product #content > .row > .col-sm-4 .btn-group .btn {
width: auto;
}
#account-edit #content,
#account-register #content,
#account-forgotten #content,
#account-password #content,
#account-address #content,
#account-wishlist #content,
#account-order #content,
#account-download #content,
#account-recurring #content,
#account-reward #content,
#account-return #content,
#account-transaction #content,
#account-newsletter #content,
#common-success #content,
#account-affiliate #content,
#information-information #content,
#information-sitemap #content,
#information-contact #content,
#account-voucher #content,
#product-manufacturer #content {
width: auto;
padding: 30px 20px;
}
#common-success #content .pull-right {
float: none !important;
}
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > thead > tr > th:first-child {
border-left: solid 1px var(--body-border-color);
}
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > thead > tr > th:last-child {
border-right: solid 1px var(--body-border-color);
}
#product-manufacturer #content .row > .col-sm-3 {
width: 35%;
}
#checkout-cart .panel-body .input-group {
display: inline-block;
width: 100%;
}
#button-account,
#button-login {
width: 100%;
}
#information-contact .panel-default .col-sm-3 {
margin-bottom: 20px;
}
#product-category #content > .row > .col-sm-2 > img {
margin-bottom: 0;
}
.swiper-pager {
line-height: 24px !important;
}
#content .carousel .swiper-button-next, #content .carousel .swiper-button-prev {
width: 30px;
height: 30px;
margin-top: -15px;
}
#content .carousel .swiper-button-next:before, #content .carousel .swiper-button-prev:before {
font-size: 18px;
}
#home-about {
flex-direction: column;
}
#about-text {
padding: 40px 15px;
}
}
@media (max-width: 576px) {
#top .pull-left {
width: 30%;
}
#top .pull-right {
width: 70%;
}
#cart .dropdown-menu .table td:nth-child(3) {
width: 12%;
}
#cart .dropdown-menu {
min-width: 100%;
padding: 0 15px;
}
#product-category #content h3 + .row + .row .col-xs-6,
#product-category #content h2 + .row .col-xs-6 {
width: 100%;
}
#product-category #content h3 + .row + .row .col-md-4,
#product-category #content h2 + .row .col-md-4 {
margin-bottom: 10px;
}
#carousel0 img {
padding: 0 15px;
}
.nav-tabs li a {
padding: 15px;
}
}
@media (max-width: 478px) {
#logo {
margin: 0 0 20px;
}
#logo a {
width: 100%;
text-align: center;
display: inline-block;
}
#logo img {
margin-bottom: 0;
}
#cart .dropdown-menu li > div {
min-width: 100%;
}
#product-manufacturer #content .row > .col-sm-3 {
width: 100%;
}
.alert {
min-width: unset;
width: 100% !important;
}
#product-product #content > .row > .col-sm-4 {
padding: 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#content .col-md-2:nth-child(6n + 1),
#content .col-md-3:nth-child(4n + 1),
#content .col-md-4:nth-child(3n + 1),
#content .col-md-6:nth-child(2n + 1) {
clear: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#content .col-sm-2:nth-child(6n + 1),
#content .col-sm-3:nth-child(4n + 1),
#content .col-sm-4:nth-child(3n + 1),
#content .col-sm-6:nth-child(2n + 1) {
clear: left;
}
}
@media (min-width: 768px) {
#column-left .product-layout .col-md-3 {
width: 100%;
}
#column-left + #content .product-layout .col-md-3 {
width: 50%;
}
#column-left + #content + #column-right .product-layout .col-md-3 {
width: 100%;
}
#content + #column-right .product-layout .col-md-3 {
width: 100%;
}
}
#column-left .product-layout,
#column-right .product-layout {
width: 100%;
}
.input-group .form-control[name^="quantity"] {
min-width: 50px;
}
html[dir="rtl"] .checkbox input[type="checkbox"],
html[dir="rtl"] .checkbox-inline input[type="checkbox"],
html[dir="rtl"] .radio input[type="radio"],
html[dir="rtl"] .radio-inline input[type="radio"] {
position: absolute;
margin-top: 4px\9;
margin-right: -20px;
margin-left: unset;
}
html[dir="rtl"] .input-group-btn:last-child > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
html[dir="rtl"] .input-group .form-control:first-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
html[dir="rtl"] .container .row:first-child .col-sm-4,
html[dir="rtl"] .container .row:first-child .col-sm-5 {
float: right;
}
html[dir="rtl"] #cart .dropdown-menu {
left: 0;
right: auto;
}
@media (min-width: 768px) {
html[dir="rtl"] .navbar-nav {
float: right;
margin: 0;
}
html[dir="rtl"] .navbar-nav > li {
float: right;
}
}
.ribbon-left, .ribbon-right {
line-height: 1.6;
z-index: 999;
}
.ribbon-left {
--f: .5em; /* control the folded part */
position: absolute;
top: 0;
left: 0;
line-height: 1.8;
padding-inline: 1lh;
padding-bottom: var(--f);
border-image: conic-gradient(#0008 0 0) 51%/var(--f);
clip-path: polygon(
100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
transform-origin: 100% 100%;
background: var(--bg);
color: var(--fg);
}
.ribbon-right {
--f: .5em; /* control the folded part */
position: absolute;
top: 0;
right: 0;
line-height: 1.8;
padding-inline: 1lh;
padding-bottom: var(--f);
border-image: conic-gradient(#0008 0 0) 51%/var(--f);
clip-path: polygon(
100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
transform-origin: 0% 100%;
background: var(--bg);
color: var(--fg);
}
.bfinfoblocks {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 37px;
}
.bfinfoblocks img {
padding: 10px 1px;
width: 100% !important;
}
@media (max-width: 767px) {
.bfinfoblocks {
gap: 0px;
margin: 0 15px;
}
}
.mfp-close {
color: var(--main-color)!important;
}
#tab-review .table td,
#tab-review .table th {
white-space: normal;
}
.catimg img {
width: 100% !important;
margin-bottom: 20px;
}
#supermenu ul li div .supermenu-left,
#supermenu ul li div .supermenu-left ul.child-level,
.withflyout {
text-align: left;
}
#supermenu .withchildfo a.theparent {
padding: 5px 15px !important;
}
.search-container {
width: 100%;
}
.payment-logo {
width: 80px;
}
@media (max-width: 767px) {
.payment-logo {
margin: auto;
}
}
.footer-banners {
max-width: 1400px;
margin: 0 auto;
margin-top: 20px;
}
@media (min-width: 768px) {
.footer-banners {
max-width: 750px;
}
}
@media (min-width: 992px) {
.footer-banners {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.footer-banners {
max-width: 1170px;
}
}
@media (min-width: 1600px) {
.footer-banners {
max-width: 1400px;
margin: 0 auto;
}
}
.footer-banners > .row {
display: flex;
justify-content: space-between;
margin: 0 15px;
}
.footer-banners .col-sm-4 {
margin: auto;
}
.footer-banners .col-sm-2 {
padding: 0;
}
@media (max-width: 767px) {
.footer-banners > .row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}
.footer-banners > .row > .col-sm-2 {
flex: 0 0 22%;
max-width: 22%;
padding: 0;
}
.footer-banners > .row > .col-sm-3 {
flex: 0 0 100%;
max-width: 100%;
margin-top: 10px;
}
}
.blog-post-content ul,
.blog-post-content ol,
.tab-content ul,
.tab-content ol {
padding-left: 20px;
}
#content ul {
list-style: outside;
}
#content .list-unstyled {
padding-left: 0;
list-style: none;
}
@media (max-width: 767px) {
.row:has(.product-thumb-col),
.row:has(.product-main-col),
.row:has(.product-info-col) {
display: flex;
flex-direction: column;
}
.row > .product-thumb-col,
.row > .product-main-col,
.row > .product-info-col {
display: flex;
flex-direction: column;
}
.product-thumb-col { order: -2; }
.product-info-col { order: -1; }
.product-main-col { order: 0; }
}
.container-blog img {
max-width: 100%;
}
#product-category #content h2 + .row.blog-search {
background: none;
}
.blog-search .btn {
background: none;
}
.blog-search .input-group {
width: 100%;
}
.blog-search .input-group .btn {
position: absolute;
right: 0;
top: 0;
z-index: 3;
background: none;
transition: all ease-in 0.2s;
height: 48px;
width: 80px;
padding: 0 0 4px;
text-align: center;
}
.blog-search .input-group button .fa {
--svg: var(--search-icon);
background-color: #858481;
-webkit-mask: var(--svg);
mask: var(--svg);
transition: background-color 0.2s;
width: 20px;
height: 20px;
display: inline-block;
margin: 9px 0 0;
}
.blog-search .input-group button:hover .fa,
.blog-search .input-group button:focus .fa {
background-color: var(--main-color);
}
.blog-search .input-group .form-control {
height: 48px;
line-height: 20px;
padding: 0 20px;
box-shadow: none;
font-size: 14px;
transition: all ease-in 0.2s;
border-radius: 3px;
}
.blog-search .input-group-btn {
width: 0;
}
.video {
text-align: center;
}
.video-wrapper {
margin-bottom: 20px;
}
.video-wrapper .video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-wrapper .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 340px;
}
@media (max-width: 767px) {
.video-wrapper .video iframe {
min-width: 100%;
}
}
.infoimg {
max-width: 25%;
float: left;
}
.infotxt {
max-width: 73%;
float: right;
}
.infotxt p img,
.infoimg img {
margin-right: 30px;
max-width: 100%;
}
.infopages .infoblock {
-webkit-box-shadow: 0px 2px 3px 0px #EAEAEA;
-moz-box-shadow: 0px 2px 3px 0px #EAEAEA;
box-shadow: 0px 2px 3px 0px #EAEAEA;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #FFF;
padding: 0.8em;
margin-bottom: 15px;
margin-top: 15px;
border: 1px solid #EAEAEA;
}
.clearall {
clear: both;
}
@media (max-width: 767px) {
.infoimg {
max-width: 100%;
float: none;
margin-bottom: 20px;
}
.infotxt {
max-width: 100%;
float: none;
}
}