/* ============================================================================ */
/* chefspro VIEWSION.net LS Shop Template V3.36 | 2025-02-14 10:03:21 */
/* ============================================================================ */
/* ==================================================================== chefspro / lorz */
/* ============================================================================ */
.bgColor-gedeckter-tisch, .theme-gedeckter-tisch .bgColor-theme, .theme-gedeckter-tisch.bgColor-theme {
background-color: #9FC546;
}
.bdColor-gedeckter-tisch, .theme-gedeckter-tisch .bdColor-theme, .theme-gedeckter-tisch.bdColor-theme, .panel.theme-gedeckter-tisch.bdColor-theme {
border-color: #9FC546 !important;
}
.color-gedeckter-tisch, .theme-gedeckter-tisch .color-theme, .theme-gedeckter-tisch .color-theme-links a, .theme-gedeckter-tisch.color-theme, .panel.theme-gedeckter-tisch .color-theme, header li.u-gedeckter-tisch.active > a, header li.u-gedeckter-tisch:hover > a, header li.u-gedeckter-tisch .active > a, header li.u-gedeckter-tisch a:hover {
color: #9FC546 !important;
}
.bgColor-buffet, .theme-buffet .bgColor-theme, .theme-buffet.bgColor-theme {
background-color: #85989E;
}
.bdColor-buffet, .theme-buffet .bdColor-theme, .theme-buffet.bdColor-theme, .panel.theme-buffet.bdColor-theme {
border-color: #85989E !important;
}
.color-buffet, .theme-buffet .color-theme, .theme-buffet .color-theme-links a, .theme-buffet.color-theme, .panel.theme-buffet .color-theme, header li.u-buffet.active > a, header li.u-buffet:hover > a, header li.u-buffet .active > a, header li.u-buffet a:hover {
color: #85989E !important;
}
.bgColor-fingerfood, .theme-fingerfood .bgColor-theme, .theme-fingerfood.bgColor-theme {
background-color: #A9B683;
}
.bdColor-fingerfood, .theme-fingerfood .bdColor-theme, .theme-fingerfood.bdColor-theme, .panel.theme-fingerfood.bdColor-theme {
border-color: #A9B683 !important;
}
.color-fingerfood, .theme-fingerfood .color-theme, .theme-fingerfood .color-theme-links a, .theme-fingerfood.color-theme, .panel.theme-fingerfood .color-theme, header li.u-fingerfood.active > a, header li.u-fingerfood:hover > a, header li.u-fingerfood .active > a, header li.u-fingerfood a:hover {
color: #A9B683 !important;
}
.bgColor-aufsteller, .theme-aufsteller .bgColor-theme, .theme-aufsteller.bgColor-theme {
background-color: #67403d;
}
.bdColor-aufsteller, .theme-aufsteller .bdColor-theme, .theme-aufsteller.bdColor-theme, .panel.theme-aufsteller.bdColor-theme {
border-color: #67403d !important;
}
.color-aufsteller, .theme-aufsteller .color-theme, .theme-aufsteller .color-theme-links a, .theme-aufsteller.color-theme, .panel.theme-aufsteller .color-theme, header li.u-aufsteller.active > a, header li.u-aufsteller:hover > a, header li.u-aufsteller .active > a, header li.u-aufsteller a:hover {
color: #67403d !important;
}
.bgColor-bar, .theme-bar .bgColor-theme, .theme-bar.bgColor-theme {
background-color: #A76F6E;
}
.bdColor-bar, .theme-bar .bdColor-theme, .theme-bar.bdColor-theme, .panel.theme-bar.bdColor-theme {
border-color: #A76F6E !important;
}
.color-bar, .theme-bar .color-theme, .theme-bar .color-theme-links a, .theme-bar.color-theme, .panel.theme-bar .color-theme, header li.u-bar.active > a, header li.u-bar:hover > a, header li.u-bar .active > a, header li.u-bar a:hover {
color: #A76F6E !important;
}
.bgColor-tafeln, .theme-tafeln .bgColor-theme, .theme-tafeln.bgColor-theme {
background-color: #82937D;
}
.bdColor-tafeln, .theme-tafeln .bdColor-theme, .theme-tafeln.bdColor-theme, .panel.theme-tafeln.bdColor-theme {
border-color: #82937D !important;
}
.color-tafeln, .theme-tafeln .color-theme, .theme-tafeln .color-theme-links a, .theme-tafeln.color-theme, .panel.theme-tafeln .color-theme, header li.u-tafeln.active > a, header li.u-tafeln:hover > a, header li.u-tafeln .active > a, header li.u-tafeln a:hover {
color: #82937D !important;
}
.bgColor-einrichtung, .theme-einrichtung .bgColor-theme, .theme-einrichtung.bgColor-theme {
background-color: #A6BDC3;
}
.bdColor-einrichtung, .theme-einrichtung .bdColor-theme, .theme-einrichtung.bdColor-theme, .panel.theme-einrichtung.bdColor-theme {
border-color: #A6BDC3 !important;
}
.color-einrichtung, .theme-einrichtung .color-theme, .theme-einrichtung .color-theme-links a, .theme-einrichtung.color-theme, .panel.theme-einrichtung .color-theme, header li.u-einrichtung.active > a, header li.u-einrichtung:hover > a, header li.u-einrichtung .active > a, header li.u-einrichtung a:hover {
color: #A6BDC3 !important;
}
.bgColor-berufsbekleidung, .theme-berufsbekleidung .bgColor-theme, .theme-berufsbekleidung.bgColor-theme {
background-color: #64B98D;
}
.bdColor-berufsbekleidung, .theme-berufsbekleidung .bdColor-theme, .theme-berufsbekleidung.bdColor-theme, .panel.theme-berufsbekleidung.bdColor-theme {
border-color: #64B98D !important;
}
.color-berufsbekleidung, .theme-berufsbekleidung .color-theme, .theme-berufsbekleidung .color-theme-links a, .theme-berufsbekleidung.color-theme, .panel.theme-berufsbekleidung .color-theme, header li.u-berufsbekleidung.active > a, header li.u-berufsbekleidung:hover > a, header li.u-berufsbekleidung .active > a, header li.u-berufsbekleidung a:hover {
color: #64B98D !important;
}
.bgColor-kueche, .theme-kueche .bgColor-theme, .theme-kueche.bgColor-theme {
background-color: #5EA0C9;
}
.bdColor-kueche, .theme-kueche .bdColor-theme, .theme-kueche.bdColor-theme, .panel.theme-kueche.bdColor-theme {
border-color: #5EA0C9 !important;
}
.color-kueche, .theme-kueche .color-theme, .theme-kueche .color-theme-links a, .theme-kueche.color-theme, .panel.theme-kueche .color-theme, header li.u-kueche.active > a, header li.u-kueche:hover > a, header li.u-kueche .active > a, header li.u-kueche a:hover {
color: #5EA0C9 !important;
}
.bgColor-kuechentechnik, .theme-kuechentechnik .bgColor-theme, .theme-kuechentechnik.bgColor-theme {
background-color: #C1C2BD;
}
.bdColor-kuechentechnik, .theme-kuechentechnik .bdColor-theme, .theme-kuechentechnik.bdColor-theme, .panel.theme-kuechentechnik.bdColor-theme {
border-color: #C1C2BD !important;
}
.color-kuechentechnik, .theme-kuechentechnik .color-theme, .theme-kuechentechnik .color-theme-links a, .theme-kuechentechnik.color-theme, .panel.theme-kuechentechnik .color-theme, header li.u-kuechentechnik.active > a, header li.u-kuechentechnik:hover > a, header li.u-kuechentechnik .active > a, header li.u-kuechentechnik a:hover {
color: #C1C2BD !important;
}
.bgColor-kuechenmoebel, .theme-kuechenmoebel .bgColor-theme, .theme-kuechenmoebel.bgColor-theme {
background-color: #38B4AE;
}
.bdColor-kuechenmoebel, .theme-kuechenmoebel .bdColor-theme, .theme-kuechenmoebel.bdColor-theme, .panel.theme-kuechenmoebel.bdColor-theme {
border-color: #38B4AE !important;
}
.color-kuechenmoebel, .theme-kuechenmoebel .color-theme, .theme-kuechenmoebel .color-theme-links a, .theme-kuechenmoebel.color-theme, .panel.theme-kuechenmoebel .color-theme, header li.u-kuechenmoebel.active > a, header li.u-kuechenmoebel:hover > a, header li.u-kuechenmoebel .active > a, header li.u-kuechenmoebel a:hover {
color: #38B4AE !important;
}
.bgColor-sale, .theme-sale .bgColor-theme, .theme-sale.bgColor-theme {
background-color: #fcb02b;
}
.bdColor-sale, .theme-sale .bdColor-theme, .theme-sale.bdColor-theme, .panel.theme-sale.bdColor-theme {
border-color: #fcb02b !important;
}
.color-sale, .theme-sale .color-theme, .theme-sale .color-theme-links a, .theme-sale.color-theme, .panel.theme-sale .color-theme, header li.u-sale.active > a, header li.u-sale:hover > a, header li.u-sale .active > a, header li.u-sale a:hover {
color: #fcb02b !important;
}
/* ============================================================================ */
/* RESET
/* ============================================================================ */
*, *::before, *::after {
box-sizing: inherit;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
img, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
html, body {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
scroll-behavior: smooth;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
line-height: 1;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*:focus {
outline: none;
}
a {
text-decoration: none;
}
body {
/* ============================================================================ */
/* BASICS
/* ============================================================================ */
line-height: 1.6;
color: #414141;
background-color: #e2e2e2;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
/* Typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h-25, .h-30, .h-35, .h-40 {
font-weight: 600;
line-height: 1.2125em;
margin-top: -0.2em;
margin-bottom: 0.2em;
color: #000;
}
h1, .h1 {
font-size: 1.734375em;
}
h2, .h2 {
font-size: 1.265625em;
}
h3, .h3 {
font-size: 1.078125em;
}
h4, .h4 {
font-size: 1.03125em;
}
h5, .h5 {
font-size: 1.03125em;
}
h6, .h6 {
font-size: 1.03125em;
}
@media (max-width: 767px) {
h1, .h1 {
font-size: 1.265625em;
}
h2, .h2 {
font-size: 1.10625em;
}
h3, .h3 {
font-size: 1.03125em;
}
}
p {
margin: 10px 0 0 0;
}
p img {
margin: 0;
max-width: 100%;
height: auto;
}
a {
color: #000;
}
strong {
font-weight: bold !important;
}
.ta-r {
text-align: right;
}
.fs-larger-110 {
font-size: 110%;
line-height: 100%;
}
.fs-larger-120 {
font-size: 120%;
line-height: 100%;
}
.fs-larger-130 {
font-size: 130%;
line-height: 100%;
}
.fs-larger-140 {
font-size: 140%;
line-height: 100%;
}
.fs-larger-150 {
font-size: 150%;
line-height: 100%;
}
.fs-larger-160 {
font-size: 160%;
line-height: 100%;
}
.fs-larger-170 {
font-size: 170%;
line-height: 100%;
}
.fs-larger-180 {
font-size: 180%;
line-height: 100%;
}
.fs-larger-190 {
font-size: 190%;
line-height: 100%;
}
.fs-larger-200 {
font-size: 200%;
line-height: 100%;
}
.color-text {
color: #414141;
}
.color-h {
color: #000;
}
/* ============================================================================ */
/* Flexbox Grid - based on Bootstrap 4.5.2
/* ============================================================================ */
/* Grid Classes
================================================== */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container, .container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container, .container-sm, .container-md {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container, .container-sm, .container-md, .container-lg {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
max-width: 1140px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col, .no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.order-first {
order: -1;
}
.order-last {
order: 13;
}
.order-0 {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
.order-6 {
order: 6;
}
.order-7 {
order: 7;
}
.order-8 {
order: 8;
}
.order-9 {
order: 9;
}
.order-10 {
order: 10;
}
.order-11 {
order: 11;
}
.order-12 {
order: 12;
}
.offset-1 {
margin-left: 8.3333333333%;
}
.offset-2 {
margin-left: 16.6666666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.3333333333%;
}
.offset-5 {
margin-left: 41.6666666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.3333333333%;
}
.offset-8 {
margin-left: 66.6666666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.3333333333%;
}
.offset-11 {
margin-left: 91.6666666667%;
}
@media (min-width: 576px) {
.col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-sm-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-sm-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-sm-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-sm-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-sm-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-sm-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-sm-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-sm-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-sm-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-sm-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-sm-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%;
}
.order-sm-first {
order: -1;
}
.order-sm-last {
order: 13;
}
.order-sm-0 {
order: 0;
}
.order-sm-1 {
order: 1;
}
.order-sm-2 {
order: 2;
}
.order-sm-3 {
order: 3;
}
.order-sm-4 {
order: 4;
}
.order-sm-5 {
order: 5;
}
.order-sm-6 {
order: 6;
}
.order-sm-7 {
order: 7;
}
.order-sm-8 {
order: 8;
}
.order-sm-9 {
order: 9;
}
.order-sm-10 {
order: 10;
}
.order-sm-11 {
order: 11;
}
.order-sm-12 {
order: 12;
}
.offset-sm-0 {
margin-left: 0;
}
.offset-sm-1 {
margin-left: 8.3333333333%;
}
.offset-sm-2 {
margin-left: 16.6666666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.3333333333%;
}
.offset-sm-5 {
margin-left: 41.6666666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.3333333333%;
}
.offset-sm-8 {
margin-left: 66.6666666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.3333333333%;
}
.offset-sm-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 768px) {
.col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-md-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-md-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-md-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-md-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-md-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-md-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-md-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-md-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-md-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-md-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-md-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
.order-md-first {
order: -1;
}
.order-md-last {
order: 13;
}
.order-md-0 {
order: 0;
}
.order-md-1 {
order: 1;
}
.order-md-2 {
order: 2;
}
.order-md-3 {
order: 3;
}
.order-md-4 {
order: 4;
}
.order-md-5 {
order: 5;
}
.order-md-6 {
order: 6;
}
.order-md-7 {
order: 7;
}
.order-md-8 {
order: 8;
}
.order-md-9 {
order: 9;
}
.order-md-10 {
order: 10;
}
.order-md-11 {
order: 11;
}
.order-md-12 {
order: 12;
}
.offset-md-0 {
margin-left: 0;
}
.offset-md-1 {
margin-left: 8.3333333333%;
}
.offset-md-2 {
margin-left: 16.6666666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.3333333333%;
}
.offset-md-5 {
margin-left: 41.6666666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.3333333333%;
}
.offset-md-8 {
margin-left: 66.6666666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.3333333333%;
}
.offset-md-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 992px) {
.col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-lg-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-lg-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-lg-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-lg-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-lg-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-lg-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-lg-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-lg-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-lg-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-lg-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-lg-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
.order-lg-first {
order: -1;
}
.order-lg-last {
order: 13;
}
.order-lg-0 {
order: 0;
}
.order-lg-1 {
order: 1;
}
.order-lg-2 {
order: 2;
}
.order-lg-3 {
order: 3;
}
.order-lg-4 {
order: 4;
}
.order-lg-5 {
order: 5;
}
.order-lg-6 {
order: 6;
}
.order-lg-7 {
order: 7;
}
.order-lg-8 {
order: 8;
}
.order-lg-9 {
order: 9;
}
.order-lg-10 {
order: 10;
}
.order-lg-11 {
order: 11;
}
.order-lg-12 {
order: 12;
}
.offset-lg-0 {
margin-left: 0;
}
.offset-lg-1 {
margin-left: 8.3333333333%;
}
.offset-lg-2 {
margin-left: 16.6666666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.3333333333%;
}
.offset-lg-5 {
margin-left: 41.6666666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.3333333333%;
}
.offset-lg-8 {
margin-left: 66.6666666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.3333333333%;
}
.offset-lg-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-xl-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-xl-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-xl-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-xl-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-xl-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-xl-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-xl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-xl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-xl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-xl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-xl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%;
}
.order-xl-first {
order: -1;
}
.order-xl-last {
order: 13;
}
.order-xl-0 {
order: 0;
}
.order-xl-1 {
order: 1;
}
.order-xl-2 {
order: 2;
}
.order-xl-3 {
order: 3;
}
.order-xl-4 {
order: 4;
}
.order-xl-5 {
order: 5;
}
.order-xl-6 {
order: 6;
}
.order-xl-7 {
order: 7;
}
.order-xl-8 {
order: 8;
}
.order-xl-9 {
order: 9;
}
.order-xl-10 {
order: 10;
}
.order-xl-11 {
order: 11;
}
.order-xl-12 {
order: 12;
}
.offset-xl-0 {
margin-left: 0;
}
.offset-xl-1 {
margin-left: 8.3333333333%;
}
.offset-xl-2 {
margin-left: 16.6666666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.3333333333%;
}
.offset-xl-5 {
margin-left: 41.6666666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.3333333333%;
}
.offset-xl-8 {
margin-left: 66.6666666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.3333333333%;
}
.offset-xl-11 {
margin-left: 91.6666666667%;
}
}
/* Display Classes
================================================== */
.d-none {
display: none !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-block {
display: block !important;
}
.d-table {
display: table !important;
}
.d-table-row {
display: table-row !important;
}
.d-table-cell {
display: table-cell !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-inline {
display: inline !important;
}
.d-sm-inline-block {
display: inline-block !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-table {
display: table !important;
}
.d-sm-table-row {
display: table-row !important;
}
.d-sm-table-cell {
display: table-cell !important;
}
.d-sm-flex {
display: flex !important;
}
.d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-block {
display: block !important;
}
.d-md-table {
display: table !important;
}
.d-md-table-row {
display: table-row !important;
}
.d-md-table-cell {
display: table-cell !important;
}
.d-md-flex {
display: flex !important;
}
.d-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-lg-inline {
display: inline !important;
}
.d-lg-inline-block {
display: inline-block !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-table {
display: table !important;
}
.d-lg-table-row {
display: table-row !important;
}
.d-lg-table-cell {
display: table-cell !important;
}
.d-lg-flex {
display: flex !important;
}
.d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
.d-xl-none {
display: none !important;
}
.d-xl-inline {
display: inline !important;
}
.d-xl-inline-block {
display: inline-block !important;
}
.d-xl-block {
display: block !important;
}
.d-xl-table {
display: table !important;
}
.d-xl-table-row {
display: table-row !important;
}
.d-xl-table-cell {
display: table-cell !important;
}
.d-xl-flex {
display: flex !important;
}
.d-xl-inline-flex {
display: inline-flex !important;
}
}
/* Flex Variations
================================================== */
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-fill {
flex: 1 1 auto !important;
}
.flex-grow-0 {
flex-grow: 0 !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
.flex-shrink-0 {
flex-shrink: 0 !important;
}
.flex-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.align-content-start {
align-content: flex-start !important;
}
.align-content-end {
align-content: flex-end !important;
}
.align-content-center {
align-content: center !important;
}
.align-content-between {
align-content: space-between !important;
}
.align-content-around {
align-content: space-around !important;
}
.align-content-stretch {
align-content: stretch !important;
}
.align-self-auto {
align-self: auto !important;
}
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.align-self-stretch {
align-self: stretch !important;
}
@media (min-width: 576px) {
.flex-sm-row {
flex-direction: row !important;
}
.flex-sm-column {
flex-direction: column !important;
}
.flex-sm-row-reverse {
flex-direction: row-reverse !important;
}
.flex-sm-column-reverse {
flex-direction: column-reverse !important;
}
.flex-sm-wrap {
flex-wrap: wrap !important;
}
.flex-sm-nowrap {
flex-wrap: nowrap !important;
}
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-sm-fill {
flex: 1 1 auto !important;
}
.flex-sm-grow-0 {
flex-grow: 0 !important;
}
.flex-sm-grow-1 {
flex-grow: 1 !important;
}
.flex-sm-shrink-0 {
flex-shrink: 0 !important;
}
.flex-sm-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-sm-start {
justify-content: flex-start !important;
}
.justify-content-sm-end {
justify-content: flex-end !important;
}
.justify-content-sm-center {
justify-content: center !important;
}
.justify-content-sm-between {
justify-content: space-between !important;
}
.justify-content-sm-around {
justify-content: space-around !important;
}
.align-items-sm-start {
align-items: flex-start !important;
}
.align-items-sm-end {
align-items: flex-end !important;
}
.align-items-sm-center {
align-items: center !important;
}
.align-items-sm-baseline {
align-items: baseline !important;
}
.align-items-sm-stretch {
align-items: stretch !important;
}
.align-content-sm-start {
align-content: flex-start !important;
}
.align-content-sm-end {
align-content: flex-end !important;
}
.align-content-sm-center {
align-content: center !important;
}
.align-content-sm-between {
align-content: space-between !important;
}
.align-content-sm-around {
align-content: space-around !important;
}
.align-content-sm-stretch {
align-content: stretch !important;
}
.align-self-sm-auto {
align-self: auto !important;
}
.align-self-sm-start {
align-self: flex-start !important;
}
.align-self-sm-end {
align-self: flex-end !important;
}
.align-self-sm-center {
align-self: center !important;
}
.align-self-sm-baseline {
align-self: baseline !important;
}
.align-self-sm-stretch {
align-self: stretch !important;
}
}
@media (min-width: 768px) {
.flex-md-row {
flex-direction: row !important;
}
.flex-md-column {
flex-direction: column !important;
}
.flex-md-row-reverse {
flex-direction: row-reverse !important;
}
.flex-md-column-reverse {
flex-direction: column-reverse !important;
}
.flex-md-wrap {
flex-wrap: wrap !important;
}
.flex-md-nowrap {
flex-wrap: nowrap !important;
}
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-md-fill {
flex: 1 1 auto !important;
}
.flex-md-grow-0 {
flex-grow: 0 !important;
}
.flex-md-grow-1 {
flex-grow: 1 !important;
}
.flex-md-shrink-0 {
flex-shrink: 0 !important;
}
.flex-md-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-md-start {
justify-content: flex-start !important;
}
.justify-content-md-end {
justify-content: flex-end !important;
}
.justify-content-md-center {
justify-content: center !important;
}
.justify-content-md-between {
justify-content: space-between !important;
}
.justify-content-md-around {
justify-content: space-around !important;
}
.align-items-md-start {
align-items: flex-start !important;
}
.align-items-md-end {
align-items: flex-end !important;
}
.align-items-md-center {
align-items: center !important;
}
.align-items-md-baseline {
align-items: baseline !important;
}
.align-items-md-stretch {
align-items: stretch !important;
}
.align-content-md-start {
align-content: flex-start !important;
}
.align-content-md-end {
align-content: flex-end !important;
}
.align-content-md-center {
align-content: center !important;
}
.align-content-md-between {
align-content: space-between !important;
}
.align-content-md-around {
align-content: space-around !important;
}
.align-content-md-stretch {
align-content: stretch !important;
}
.align-self-md-auto {
align-self: auto !important;
}
.align-self-md-start {
align-self: flex-start !important;
}
.align-self-md-end {
align-self: flex-end !important;
}
.align-self-md-center {
align-self: center !important;
}
.align-self-md-baseline {
align-self: baseline !important;
}
.align-self-md-stretch {
align-self: stretch !important;
}
}
@media (min-width: 992px) {
.flex-lg-row {
flex-direction: row !important;
}
.flex-lg-column {
flex-direction: column !important;
}
.flex-lg-row-reverse {
flex-direction: row-reverse !important;
}
.flex-lg-column-reverse {
flex-direction: column-reverse !important;
}
.flex-lg-wrap {
flex-wrap: wrap !important;
}
.flex-lg-nowrap {
flex-wrap: nowrap !important;
}
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-lg-fill {
flex: 1 1 auto !important;
}
.flex-lg-grow-0 {
flex-grow: 0 !important;
}
.flex-lg-grow-1 {
flex-grow: 1 !important;
}
.flex-lg-shrink-0 {
flex-shrink: 0 !important;
}
.flex-lg-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-lg-start {
justify-content: flex-start !important;
}
.justify-content-lg-end {
justify-content: flex-end !important;
}
.justify-content-lg-center {
justify-content: center !important;
}
.justify-content-lg-between {
justify-content: space-between !important;
}
.justify-content-lg-around {
justify-content: space-around !important;
}
.align-items-lg-start {
align-items: flex-start !important;
}
.align-items-lg-end {
align-items: flex-end !important;
}
.align-items-lg-center {
align-items: center !important;
}
.align-items-lg-baseline {
align-items: baseline !important;
}
.align-items-lg-stretch {
align-items: stretch !important;
}
.align-content-lg-start {
align-content: flex-start !important;
}
.align-content-lg-end {
align-content: flex-end !important;
}
.align-content-lg-center {
align-content: center !important;
}
.align-content-lg-between {
align-content: space-between !important;
}
.align-content-lg-around {
align-content: space-around !important;
}
.align-content-lg-stretch {
align-content: stretch !important;
}
.align-self-lg-auto {
align-self: auto !important;
}
.align-self-lg-start {
align-self: flex-start !important;
}
.align-self-lg-end {
align-self: flex-end !important;
}
.align-self-lg-center {
align-self: center !important;
}
.align-self-lg-baseline {
align-self: baseline !important;
}
.align-self-lg-stretch {
align-self: stretch !important;
}
}
@media (min-width: 1200px) {
.flex-xl-row {
flex-direction: row !important;
}
.flex-xl-column {
flex-direction: column !important;
}
.flex-xl-row-reverse {
flex-direction: row-reverse !important;
}
.flex-xl-column-reverse {
flex-direction: column-reverse !important;
}
.flex-xl-wrap {
flex-wrap: wrap !important;
}
.flex-xl-nowrap {
flex-wrap: nowrap !important;
}
.flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-xl-fill {
flex: 1 1 auto !important;
}
.flex-xl-grow-0 {
flex-grow: 0 !important;
}
.flex-xl-grow-1 {
flex-grow: 1 !important;
}
.flex-xl-shrink-0 {
flex-shrink: 0 !important;
}
.flex-xl-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-xl-start {
justify-content: flex-start !important;
}
.justify-content-xl-end {
justify-content: flex-end !important;
}
.justify-content-xl-center {
justify-content: center !important;
}
.justify-content-xl-between {
justify-content: space-between !important;
}
.justify-content-xl-around {
justify-content: space-around !important;
}
.align-items-xl-start {
align-items: flex-start !important;
}
.align-items-xl-end {
align-items: flex-end !important;
}
.align-items-xl-center {
align-items: center !important;
}
.align-items-xl-baseline {
align-items: baseline !important;
}
.align-items-xl-stretch {
align-items: stretch !important;
}
.align-content-xl-start {
align-content: flex-start !important;
}
.align-content-xl-end {
align-content: flex-end !important;
}
.align-content-xl-center {
align-content: center !important;
}
.align-content-xl-between {
align-content: space-between !important;
}
.align-content-xl-around {
align-content: space-around !important;
}
.align-content-xl-stretch {
align-content: stretch !important;
}
.align-self-xl-auto {
align-self: auto !important;
}
.align-self-xl-start {
align-self: flex-start !important;
}
.align-self-xl-end {
align-self: flex-end !important;
}
.align-self-xl-center {
align-self: center !important;
}
.align-self-xl-baseline {
align-self: baseline !important;
}
.align-self-xl-stretch {
align-self: stretch !important;
}
}
/* Margin Padding Classes
================================================== */
.m-0 {
margin: 0 !important;
}
.mt-0, .my-0 {
margin-top: 0 !important;
}
.mr-0, .mx-0 {
margin-right: 0 !important;
}
.mb-0, .my-0 {
margin-bottom: 0 !important;
}
.ml-0, .mx-0 {
margin-left: 0 !important;
}
.m-1 {
margin: 0.25rem !important;
}
.mt-1, .my-1 {
margin-top: 0.25rem !important;
}
.mr-1, .mx-1 {
margin-right: 0.25rem !important;
}
.mb-1, .my-1 {
margin-bottom: 0.25rem !important;
}
.ml-1, .mx-1 {
margin-left: 0.25rem !important;
}
.m-2 {
margin: 0.5rem !important;
}
.mt-2, .my-2 {
margin-top: 0.5rem !important;
}
.mr-2, .mx-2 {
margin-right: 0.5rem !important;
}
.mb-2, .my-2 {
margin-bottom: 0.5rem !important;
}
.ml-2, .mx-2 {
margin-left: 0.5rem !important;
}
.m-3 {
margin: 1rem !important;
}
.mt-3, .my-3 {
margin-top: 1rem !important;
}
.mr-3, .mx-3 {
margin-right: 1rem !important;
}
.mb-3, .my-3 {
margin-bottom: 1rem !important;
}
.ml-3, .mx-3 {
margin-left: 1rem !important;
}
.m-4 {
margin: 1.5rem !important;
}
.mt-4, .my-4 {
margin-top: 1.5rem !important;
}
.mr-4, .mx-4 {
margin-right: 1.5rem !important;
}
.mb-4, .my-4 {
margin-bottom: 1.5rem !important;
}
.ml-4, .mx-4 {
margin-left: 1.5rem !important;
}
.m-5 {
margin: 3rem !important;
}
.mt-5, .my-5 {
margin-top: 3rem !important;
}
.mr-5, .mx-5 {
margin-right: 3rem !important;
}
.mb-5, .my-5 {
margin-bottom: 3rem !important;
}
.ml-5, .mx-5 {
margin-left: 3rem !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0, .py-0 {
padding-top: 0 !important;
}
.pr-0, .px-0 {
padding-right: 0 !important;
}
.pb-0, .py-0 {
padding-bottom: 0 !important;
}
.pl-0, .px-0 {
padding-left: 0 !important;
}
.p-1 {
padding: 0.25rem !important;
}
.pt-1, .py-1 {
padding-top: 0.25rem !important;
}
.pr-1, .px-1 {
padding-right: 0.25rem !important;
}
.pb-1, .py-1 {
padding-bottom: 0.25rem !important;
}
.pl-1, .px-1 {
padding-left: 0.25rem !important;
}
.p-2 {
padding: 0.5rem !important;
}
.pt-2, .py-2 {
padding-top: 0.5rem !important;
}
.pr-2, .px-2 {
padding-right: 0.5rem !important;
}
.pb-2, .py-2 {
padding-bottom: 0.5rem !important;
}
.pl-2, .px-2 {
padding-left: 0.5rem !important;
}
.p-3 {
padding: 1rem !important;
}
.pt-3, .py-3 {
padding-top: 1rem !important;
}
.pr-3, .px-3 {
padding-right: 1rem !important;
}
.pb-3, .py-3 {
padding-bottom: 1rem !important;
}
.pl-3, .px-3 {
padding-left: 1rem !important;
}
.p-4 {
padding: 1.5rem !important;
}
.pt-4, .py-4 {
padding-top: 1.5rem !important;
}
.pr-4, .px-4 {
padding-right: 1.5rem !important;
}
.pb-4, .py-4 {
padding-bottom: 1.5rem !important;
}
.pl-4, .px-4 {
padding-left: 1.5rem !important;
}
.p-5 {
padding: 3rem !important;
}
.pt-5, .py-5 {
padding-top: 3rem !important;
}
.pr-5, .px-5 {
padding-right: 3rem !important;
}
.pb-5, .py-5 {
padding-bottom: 3rem !important;
}
.pl-5, .px-5 {
padding-left: 3rem !important;
}
@media (min-width: 576px) {
.m-sm-0 {
margin: 0 !important;
}
.mt-sm-0, .my-sm-0 {
margin-top: 0 !important;
}
.mr-sm-0, .mx-sm-0 {
margin-right: 0 !important;
}
.mb-sm-0, .my-sm-0 {
margin-bottom: 0 !important;
}
.ml-sm-0, .mx-sm-0 {
margin-left: 0 !important;
}
.m-sm-1 {
margin: 0.25rem !important;
}
.mt-sm-1, .my-sm-1 {
margin-top: 0.25rem !important;
}
.mr-sm-1, .mx-sm-1 {
margin-right: 0.25rem !important;
}
.mb-sm-1, .my-sm-1 {
margin-bottom: 0.25rem !important;
}
.ml-sm-1, .mx-sm-1 {
margin-left: 0.25rem !important;
}
.m-sm-2 {
margin: 0.5rem !important;
}
.mt-sm-2, .my-sm-2 {
margin-top: 0.5rem !important;
}
.mr-sm-2, .mx-sm-2 {
margin-right: 0.5rem !important;
}
.mb-sm-2, .my-sm-2 {
margin-bottom: 0.5rem !important;
}
.ml-sm-2, .mx-sm-2 {
margin-left: 0.5rem !important;
}
.m-sm-3 {
margin: 1rem !important;
}
.mt-sm-3, .my-sm-3 {
margin-top: 1rem !important;
}
.mr-sm-3, .mx-sm-3 {
margin-right: 1rem !important;
}
.mb-sm-3, .my-sm-3 {
margin-bottom: 1rem !important;
}
.ml-sm-3, .mx-sm-3 {
margin-left: 1rem !important;
}
.m-sm-4 {
margin: 1.5rem !important;
}
.mt-sm-4, .my-sm-4 {
margin-top: 1.5rem !important;
}
.mr-sm-4, .mx-sm-4 {
margin-right: 1.5rem !important;
}
.mb-sm-4, .my-sm-4 {
margin-bottom: 1.5rem !important;
}
.ml-sm-4, .mx-sm-4 {
margin-left: 1.5rem !important;
}
.m-sm-5 {
margin: 3rem !important;
}
.mt-sm-5, .my-sm-5 {
margin-top: 3rem !important;
}
.mr-sm-5, .mx-sm-5 {
margin-right: 3rem !important;
}
.mb-sm-5, .my-sm-5 {
margin-bottom: 3rem !important;
}
.ml-sm-5, .mx-sm-5 {
margin-left: 3rem !important;
}
.p-sm-0 {
padding: 0 !important;
}
.pt-sm-0, .py-sm-0 {
padding-top: 0 !important;
}
.pr-sm-0, .px-sm-0 {
padding-right: 0 !important;
}
.pb-sm-0, .py-sm-0 {
padding-bottom: 0 !important;
}
.pl-sm-0, .px-sm-0 {
padding-left: 0 !important;
}
.p-sm-1 {
padding: 0.25rem !important;
}
.pt-sm-1, .py-sm-1 {
padding-top: 0.25rem !important;
}
.pr-sm-1, .px-sm-1 {
padding-right: 0.25rem !important;
}
.pb-sm-1, .py-sm-1 {
padding-bottom: 0.25rem !important;
}
.pl-sm-1, .px-sm-1 {
padding-left: 0.25rem !important;
}
.p-sm-2 {
padding: 0.5rem !important;
}
.pt-sm-2, .py-sm-2 {
padding-top: 0.5rem !important;
}
.pr-sm-2, .px-sm-2 {
padding-right: 0.5rem !important;
}
.pb-sm-2, .py-sm-2 {
padding-bottom: 0.5rem !important;
}
.pl-sm-2, .px-sm-2 {
padding-left: 0.5rem !important;
}
.p-sm-3 {
padding: 1rem !important;
}
.pt-sm-3, .py-sm-3 {
padding-top: 1rem !important;
}
.pr-sm-3, .px-sm-3 {
padding-right: 1rem !important;
}
.pb-sm-3, .py-sm-3 {
padding-bottom: 1rem !important;
}
.pl-sm-3, .px-sm-3 {
padding-left: 1rem !important;
}
.p-sm-4 {
padding: 1.5rem !important;
}
.pt-sm-4, .py-sm-4 {
padding-top: 1.5rem !important;
}
.pr-sm-4, .px-sm-4 {
padding-right: 1.5rem !important;
}
.pb-sm-4, .py-sm-4 {
padding-bottom: 1.5rem !important;
}
.pl-sm-4, .px-sm-4 {
padding-left: 1.5rem !important;
}
.p-sm-5 {
padding: 3rem !important;
}
.pt-sm-5, .py-sm-5 {
padding-top: 3rem !important;
}
.pr-sm-5, .px-sm-5 {
padding-right: 3rem !important;
}
.pb-sm-5, .py-sm-5 {
padding-bottom: 3rem !important;
}
.pl-sm-5, .px-sm-5 {
padding-left: 3rem !important;
}
}
@media (min-width: 768px) {
.m-md-0 {
margin: 0 !important;
}
.mt-md-0, .my-md-0 {
margin-top: 0 !important;
}
.mr-md-0, .mx-md-0 {
margin-right: 0 !important;
}
.mb-md-0, .my-md-0 {
margin-bottom: 0 !important;
}
.ml-md-0, .mx-md-0 {
margin-left: 0 !important;
}
.m-md-1 {
margin: 0.25rem !important;
}
.mt-md-1, .my-md-1 {
margin-top: 0.25rem !important;
}
.mr-md-1, .mx-md-1 {
margin-right: 0.25rem !important;
}
.mb-md-1, .my-md-1 {
margin-bottom: 0.25rem !important;
}
.ml-md-1, .mx-md-1 {
margin-left: 0.25rem !important;
}
.m-md-2 {
margin: 0.5rem !important;
}
.mt-md-2, .my-md-2 {
margin-top: 0.5rem !important;
}
.mr-md-2, .mx-md-2 {
margin-right: 0.5rem !important;
}
.mb-md-2, .my-md-2 {
margin-bottom: 0.5rem !important;
}
.ml-md-2, .mx-md-2 {
margin-left: 0.5rem !important;
}
.m-md-3 {
margin: 1rem !important;
}
.mt-md-3, .my-md-3 {
margin-top: 1rem !important;
}
.mr-md-3, .mx-md-3 {
margin-right: 1rem !important;
}
.mb-md-3, .my-md-3 {
margin-bottom: 1rem !important;
}
.ml-md-3, .mx-md-3 {
margin-left: 1rem !important;
}
.m-md-4 {
margin: 1.5rem !important;
}
.mt-md-4, .my-md-4 {
margin-top: 1.5rem !important;
}
.mr-md-4, .mx-md-4 {
margin-right: 1.5rem !important;
}
.mb-md-4, .my-md-4 {
margin-bottom: 1.5rem !important;
}
.ml-md-4, .mx-md-4 {
margin-left: 1.5rem !important;
}
.m-md-5 {
margin: 3rem !important;
}
.mt-md-5, .my-md-5 {
margin-top: 3rem !important;
}
.mr-md-5, .mx-md-5 {
margin-right: 3rem !important;
}
.mb-md-5, .my-md-5 {
margin-bottom: 3rem !important;
}
.ml-md-5, .mx-md-5 {
margin-left: 3rem !important;
}
.p-md-0 {
padding: 0 !important;
}
.pt-md-0, .py-md-0 {
padding-top: 0 !important;
}
.pr-md-0, .px-md-0 {
padding-right: 0 !important;
}
.pb-md-0, .py-md-0 {
padding-bottom: 0 !important;
}
.pl-md-0, .px-md-0 {
padding-left: 0 !important;
}
.p-md-1 {
padding: 0.25rem !important;
}
.pt-md-1, .py-md-1 {
padding-top: 0.25rem !important;
}
.pr-md-1, .px-md-1 {
padding-right: 0.25rem !important;
}
.pb-md-1, .py-md-1 {
padding-bottom: 0.25rem !important;
}
.pl-md-1, .px-md-1 {
padding-left: 0.25rem !important;
}
.p-md-2 {
padding: 0.5rem !important;
}
.pt-md-2, .py-md-2 {
padding-top: 0.5rem !important;
}
.pr-md-2, .px-md-2 {
padding-right: 0.5rem !important;
}
.pb-md-2, .py-md-2 {
padding-bottom: 0.5rem !important;
}
.pl-md-2, .px-md-2 {
padding-left: 0.5rem !important;
}
.p-md-3 {
padding: 1rem !important;
}
.pt-md-3, .py-md-3 {
padding-top: 1rem !important;
}
.pr-md-3, .px-md-3 {
padding-right: 1rem !important;
}
.pb-md-3, .py-md-3 {
padding-bottom: 1rem !important;
}
.pl-md-3, .px-md-3 {
padding-left: 1rem !important;
}
.p-md-4 {
padding: 1.5rem !important;
}
.pt-md-4, .py-md-4 {
padding-top: 1.5rem !important;
}
.pr-md-4, .px-md-4 {
padding-right: 1.5rem !important;
}
.pb-md-4, .py-md-4 {
padding-bottom: 1.5rem !important;
}
.pl-md-4, .px-md-4 {
padding-left: 1.5rem !important;
}
.p-md-5 {
padding: 3rem !important;
}
.pt-md-5, .py-md-5 {
padding-top: 3rem !important;
}
.pr-md-5, .px-md-5 {
padding-right: 3rem !important;
}
.pb-md-5, .py-md-5 {
padding-bottom: 3rem !important;
}
.pl-md-5, .px-md-5 {
padding-left: 3rem !important;
}
}
@media (min-width: 992px) {
.m-lg-0 {
margin: 0 !important;
}
.mt-lg-0, .my-lg-0 {
margin-top: 0 !important;
}
.mr-lg-0, .mx-lg-0 {
margin-right: 0 !important;
}
.mb-lg-0, .my-lg-0 {
margin-bottom: 0 !important;
}
.ml-lg-0, .mx-lg-0 {
margin-left: 0 !important;
}
.m-lg-1 {
margin: 0.25rem !important;
}
.mt-lg-1, .my-lg-1 {
margin-top: 0.25rem !important;
}
.mr-lg-1, .mx-lg-1 {
margin-right: 0.25rem !important;
}
.mb-lg-1, .my-lg-1 {
margin-bottom: 0.25rem !important;
}
.ml-lg-1, .mx-lg-1 {
margin-left: 0.25rem !important;
}
.m-lg-2 {
margin: 0.5rem !important;
}
.mt-lg-2, .my-lg-2 {
margin-top: 0.5rem !important;
}
.mr-lg-2, .mx-lg-2 {
margin-right: 0.5rem !important;
}
.mb-lg-2, .my-lg-2 {
margin-bottom: 0.5rem !important;
}
.ml-lg-2, .mx-lg-2 {
margin-left: 0.5rem !important;
}
.m-lg-3 {
margin: 1rem !important;
}
.mt-lg-3, .my-lg-3 {
margin-top: 1rem !important;
}
.mr-lg-3, .mx-lg-3 {
margin-right: 1rem !important;
}
.mb-lg-3, .my-lg-3 {
margin-bottom: 1rem !important;
}
.ml-lg-3, .mx-lg-3 {
margin-left: 1rem !important;
}
.m-lg-4 {
margin: 1.5rem !important;
}
.mt-lg-4, .my-lg-4 {
margin-top: 1.5rem !important;
}
.mr-lg-4, .mx-lg-4 {
margin-right: 1.5rem !important;
}
.mb-lg-4, .my-lg-4 {
margin-bottom: 1.5rem !important;
}
.ml-lg-4, .mx-lg-4 {
margin-left: 1.5rem !important;
}
.m-lg-5 {
margin: 3rem !important;
}
.mt-lg-5, .my-lg-5 {
margin-top: 3rem !important;
}
.mr-lg-5, .mx-lg-5 {
margin-right: 3rem !important;
}
.mb-lg-5, .my-lg-5 {
margin-bottom: 3rem !important;
}
.ml-lg-5, .mx-lg-5 {
margin-left: 3rem !important;
}
.p-lg-0 {
padding: 0 !important;
}
.pt-lg-0, .py-lg-0 {
padding-top: 0 !important;
}
.pr-lg-0, .px-lg-0 {
padding-right: 0 !important;
}
.pb-lg-0, .py-lg-0 {
padding-bottom: 0 !important;
}
.pl-lg-0, .px-lg-0 {
padding-left: 0 !important;
}
.p-lg-1 {
padding: 0.25rem !important;
}
.pt-lg-1, .py-lg-1 {
padding-top: 0.25rem !important;
}
.pr-lg-1, .px-lg-1 {
padding-right: 0.25rem !important;
}
.pb-lg-1, .py-lg-1 {
padding-bottom: 0.25rem !important;
}
.pl-lg-1, .px-lg-1 {
padding-left: 0.25rem !important;
}
.p-lg-2 {
padding: 0.5rem !important;
}
.pt-lg-2, .py-lg-2 {
padding-top: 0.5rem !important;
}
.pr-lg-2, .px-lg-2 {
padding-right: 0.5rem !important;
}
.pb-lg-2, .py-lg-2 {
padding-bottom: 0.5rem !important;
}
.pl-lg-2, .px-lg-2 {
padding-left: 0.5rem !important;
}
.p-lg-3 {
padding: 1rem !important;
}
.pt-lg-3, .py-lg-3 {
padding-top: 1rem !important;
}
.pr-lg-3, .px-lg-3 {
padding-right: 1rem !important;
}
.pb-lg-3, .py-lg-3 {
padding-bottom: 1rem !important;
}
.pl-lg-3, .px-lg-3 {
padding-left: 1rem !important;
}
.p-lg-4 {
padding: 1.5rem !important;
}
.pt-lg-4, .py-lg-4 {
padding-top: 1.5rem !important;
}
.pr-lg-4, .px-lg-4 {
padding-right: 1.5rem !important;
}
.pb-lg-4, .py-lg-4 {
padding-bottom: 1.5rem !important;
}
.pl-lg-4, .px-lg-4 {
padding-left: 1.5rem !important;
}
.p-lg-5 {
padding: 3rem !important;
}
.pt-lg-5, .py-lg-5 {
padding-top: 3rem !important;
}
.pr-lg-5, .px-lg-5 {
padding-right: 3rem !important;
}
.pb-lg-5, .py-lg-5 {
padding-bottom: 3rem !important;
}
.pl-lg-5, .px-lg-5 {
padding-left: 3rem !important;
}
}
@media (min-width: 1200px) {
.m-xl-0 {
margin: 0 !important;
}
.mt-xl-0, .my-xl-0 {
margin-top: 0 !important;
}
.mr-xl-0, .mx-xl-0 {
margin-right: 0 !important;
}
.mb-xl-0, .my-xl-0 {
margin-bottom: 0 !important;
}
.ml-xl-0, .mx-xl-0 {
margin-left: 0 !important;
}
.m-xl-1 {
margin: 0.25rem !important;
}
.mt-xl-1, .my-xl-1 {
margin-top: 0.25rem !important;
}
.mr-xl-1, .mx-xl-1 {
margin-right: 0.25rem !important;
}
.mb-xl-1, .my-xl-1 {
margin-bottom: 0.25rem !important;
}
.ml-xl-1, .mx-xl-1 {
margin-left: 0.25rem !important;
}
.m-xl-2 {
margin: 0.5rem !important;
}
.mt-xl-2, .my-xl-2 {
margin-top: 0.5rem !important;
}
.mr-xl-2, .mx-xl-2 {
margin-right: 0.5rem !important;
}
.mb-xl-2, .my-xl-2 {
margin-bottom: 0.5rem !important;
}
.ml-xl-2, .mx-xl-2 {
margin-left: 0.5rem !important;
}
.m-xl-3 {
margin: 1rem !important;
}
.mt-xl-3, .my-xl-3 {
margin-top: 1rem !important;
}
.mr-xl-3, .mx-xl-3 {
margin-right: 1rem !important;
}
.mb-xl-3, .my-xl-3 {
margin-bottom: 1rem !important;
}
.ml-xl-3, .mx-xl-3 {
margin-left: 1rem !important;
}
.m-xl-4 {
margin: 1.5rem !important;
}
.mt-xl-4, .my-xl-4 {
margin-top: 1.5rem !important;
}
.mr-xl-4, .mx-xl-4 {
margin-right: 1.5rem !important;
}
.mb-xl-4, .my-xl-4 {
margin-bottom: 1.5rem !important;
}
.ml-xl-4, .mx-xl-4 {
margin-left: 1.5rem !important;
}
.m-xl-5 {
margin: 3rem !important;
}
.mt-xl-5, .my-xl-5 {
margin-top: 3rem !important;
}
.mr-xl-5, .mx-xl-5 {
margin-right: 3rem !important;
}
.mb-xl-5, .my-xl-5 {
margin-bottom: 3rem !important;
}
.ml-xl-5, .mx-xl-5 {
margin-left: 3rem !important;
}
.p-xl-0 {
padding: 0 !important;
}
.pt-xl-0, .py-xl-0 {
padding-top: 0 !important;
}
.pr-xl-0, .px-xl-0 {
padding-right: 0 !important;
}
.pb-xl-0, .py-xl-0 {
padding-bottom: 0 !important;
}
.pl-xl-0, .px-xl-0 {
padding-left: 0 !important;
}
.p-xl-1 {
padding: 0.25rem !important;
}
.pt-xl-1, .py-xl-1 {
padding-top: 0.25rem !important;
}
.pr-xl-1, .px-xl-1 {
padding-right: 0.25rem !important;
}
.pb-xl-1, .py-xl-1 {
padding-bottom: 0.25rem !important;
}
.pl-xl-1, .px-xl-1 {
padding-left: 0.25rem !important;
}
.p-xl-2 {
padding: 0.5rem !important;
}
.pt-xl-2, .py-xl-2 {
padding-top: 0.5rem !important;
}
.pr-xl-2, .px-xl-2 {
padding-right: 0.5rem !important;
}
.pb-xl-2, .py-xl-2 {
padding-bottom: 0.5rem !important;
}
.pl-xl-2, .px-xl-2 {
padding-left: 0.5rem !important;
}
.p-xl-3 {
padding: 1rem !important;
}
.pt-xl-3, .py-xl-3 {
padding-top: 1rem !important;
}
.pr-xl-3, .px-xl-3 {
padding-right: 1rem !important;
}
.pb-xl-3, .py-xl-3 {
padding-bottom: 1rem !important;
}
.pl-xl-3, .px-xl-3 {
padding-left: 1rem !important;
}
.p-xl-4 {
padding: 1.5rem !important;
}
.pt-xl-4, .py-xl-4 {
padding-top: 1.5rem !important;
}
.pr-xl-4, .px-xl-4 {
padding-right: 1.5rem !important;
}
.pb-xl-4, .py-xl-4 {
padding-bottom: 1.5rem !important;
}
.pl-xl-4, .px-xl-4 {
padding-left: 1.5rem !important;
}
.p-xl-5 {
padding: 3rem !important;
}
.pt-xl-5, .py-xl-5 {
padding-top: 3rem !important;
}
.pr-xl-5, .px-xl-5 {
padding-right: 3rem !important;
}
.pb-xl-5, .py-xl-5 {
padding-bottom: 3rem !important;
}
.pl-xl-5, .px-xl-5 {
padding-left: 3rem !important;
}
}
/* Buttons */
.btn {
background: #fcb02b;
color: white;
display: inline-block;
border-radius: 0px 0px 10px 0px;
cursor: pointer;
line-height: 1em;
padding: 0.5em 0.5em;
padding-bottom: 0.45em;
text-transform: uppercase;
border: none;
text-align: center;
}
.btn:hover {
background: #fcb02b;
}
.btn .icon {
line-height: 0px;
height: 1em;
}
/*
a.btn,
button,
button.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #54afe9;
color: white;
display: inline-block;
text-decoration: none;
font-size: 12px;
cursor: pointer;
line-height: 32px;
height: 32px;
padding: 0px 8px;
text-transform: uppercase;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
a.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
text-decoration: none;
}
a.btn.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
a.btn span,
button span,
input[type="submit"] span,
input[type="reset"] span,
input[type="button"] span {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
@media (max-width: 767px) {
a.btn,
button,
button.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
line-height: 37px;
height: 40px;
}
}
.title-featured{
margin-bottom:20px;
}
/* ============================================================================ */
/* HEADER
/* ============================================================================ */
header {
box-shadow: 0 0 5px 0 #666;
background-color: #333333;
z-index: 100;
}
header .container {
position: relative;
}
header .logo {
background-color: transparent;
right: 5px;
left: 15px;
height: 170px;
overflow: hidden;
border-radius: 0 0 0 0;
position: absolute;
z-index: 1;
}
header .logo a {
background-color: transparent;
width: 100%;
height: 100%;
text-align: center;
padding: 55px 0px 0 0;
display: block;
}
header .logo .svg {
width: 80%;
height: 80%;
}
/* .header-top */
.header-top {
background-color: #666;
font-size: 14px;
line-height: 50px;
color: #ffffff;
height: 50px;
}
.header-top .usp {
overflow: hidden;
}
.header-top .usp > a {
display: inline-block;
}
.header-top .tab-btn {
overflow: hidden;
text-align: right;
height: 50px;
}
.header-top .tab-btn .bi {
font-size: 80%;
opacity: 1;
}
.header-top .tab-btn .hyg .bi {
margin-right: 2px;
}
.header-top .tab-btn a {
display: inline-block;
padding: 15px 20px;
padding-top: 17px;
line-height: 20px;
font-weight: bold;
font-size: 15.75px;
letter-spacing: 1.26px;
margin: 0;
}
.header-top a {
color: #ffffff;
line-height: 16px;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
margin-right: 1em;
font-size: 12px;
}
.header-top a:last-child {
margin-right: 0;
}
.header-top a:hover {
opacity: 0.8;
}
.header-top .bi {
margin: 0 0.5em 0.2em 0;
font-size: 140%;
opacity: 0.6;
vertical-align: middle;
}
.header-top .col-10 {
overflow: hidden;
height: 50px;
}
.header-main {
padding-top: 33px;
}
#formSearch {
background-color: #E8E8E8;
width: 500px;
height: 47px;
border-radius: 0 10px 0 0;
position: relative;
overflow: hidden;
}
#formSearch form {
display: inline-block;
position: relative;
overflow: hidden;
}
#formSearch form input {
line-height: 20px;
margin: 8px;
padding: 6px 15px 6px 30px;
border: none;
background-color: transparent;
font-size: 15px;
width: 100%;
width: calc(100% - 12px);
-webkit-appearance: none !important;
border-radius: 0 !important;
}
#formSearch form input::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #A7A7A7;
opacity: 1;
/* Firefox */
}
#formSearch form input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #A7A7A7;
}
#formSearch form input::-ms-input-placeholder {
/* Microsoft Edge */
color: #A7A7A7;
}
#formSearch form.search {
width: 70%;
}
#formSearch form.catalog {
width: 30%;
}
.no-catalog-search #formSearch form.search {
width: 100%;
}
.no-catalog-search #formSearch form.search input {
border: none;
}
.no-catalog-search #formSearch form.catalog {
display: none;
}
#formSearch form.search input {
border-right: 1px solid #363636;
}
#formSearch i {
position: absolute;
left: 10px;
top: 14px;
color: #686868;
}
.header-main .tb {
text-align: right;
font-size: 20px;
position: absolute;
right: 0px;
top: 10px;
}
.header-main .tb > a {
padding: 0 15px;
border-right: 1px solid rgba(233, 233, 233, 0.3);
display: inline-block;
line-height: 20px;
position: relative;
color: #e9e9e9;
}
.header-main .tb > a.cart {
border: none;
padding-right: 0;
}
.header-main .tb > a.cart span {
margin-left: 0.2rem;
}
.header-main .tb .i {
top: 2px;
color: #363636;
}
.header-main .badge {
background-color: #C8000A;
color: #fff;
position: absolute;
top: -8px;
margin-left: -8px !important;
border-radius: 8px;
padding: 0 5px;
min-width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
font-family: Arial;
font-weight: bold;
text-align: center;
letter-spacing: 0;
}
header .nav {
margin-top: 35px;
width: 100%;
}
header .nav a {
color: #e9e9e9;
}
header .nav .active a {
color: #fcb02b;
}
header .nav ul {
margin: 0;
}
header .nav .ind {
width: 20px;
height: 20px;
overflow: hidden;
display: block;
position: absolute;
bottom: -25px;
left: 50%;
margin-left: -10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
header .nav .lev-1 ul {
display: none;
}
header .nav .panel {
margin: 0;
height: 0px;
max-height: 0px;
overflow: hidden;
visibility: hidden;
background-color: #e9e9e9;
border: none;
border-top: 8px solid #fcb02b;
position: absolute;
z-index: 10;
margin-left: -40px;
opacity: 0;
/*
-webkit-transition: opacity 0.3s, max-height 0.3s, visibility .1s;
-moz-transition: opacity 0.3s, max-height 0.3s, visibility .1s;
transition: opacity 0.3s, max-height 0.3s, visibility .1s;
*/
-webkit-transition: all 0.3s;
-moz-transition: all 0.3;
transition: all 0.3s;
padding-left: 40px;
padding-right: 40px;
}
header .nav .panel a {
color: #202e34;
}
header .nav > ul {
display: flex;
justify-content: space-between;
position: relative;
flex-wrap: wrap;
}
header .nav > ul > li {
white-space: nowrap;
font-size: 12px;
line-height: 42px;
}
header .nav > ul > li > a {
position: relative;
display: block;
line-height: 42px;
overflow: hidden;
}
header .nav > ul > li.u-neu {
background-color: #fcb02b;
border-radius: 0 10px 0 0;
padding-left: 15px;
padding-right: 15px;
margin-right: -5px;
}
header .nav > ul > li.u-neu a {
color: #fff;
}
@media (min-width: 1200px) {
header .nav > ul > li {
font-size: 15px;
}
.header-top a {
font-size: 13px;
}
#formSearch {
width: 600px;
}
}
.mctrl_btn {
position: absolute;
left: 30px;
width: 30px;
height: 40px;
top: -2px;
z-index: 2;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s;
}
.mctrl_btn > div {
background-color: #fff;
width: 100%;
height: 3px;
position: absolute;
top: 20px;
transition: all 0.4s;
left: 0px;
}
.mctrl_btn > div.a {
top: 12px;
}
.mctrl_btn > div.c {
top: 28px;
}
.mctrl .mctrl_btn > div {
top: 20px;
}
.mctrl #mctrl {
transform: translate(110%, 0px);
}
.mctrl_btn > div {
width: 100%;
height: 3px;
position: absolute;
top: 20px;
transition: all 0.4s;
}
.mctrl .mctrl_btn > div {
top: 20px;
}
.mctrl .mctrl_btn > div.a {
transform: rotate(-45deg);
}
.mctrl .mctrl_btn > div.b {
opacity: 0;
}
.mctrl .mctrl_btn > div.c {
transform: rotate(45deg);
}
@media (max-width: 1199.98px) {
.header-top .tab-btn a {
padding: 15px 10px;
}
}
@media (max-width: 991.98px) {
/*
.layout-chefspro .header-top .col-2:after {
content: 'for private professionals';
display:block;
position:absolute;
left:130px;
top:5px;
white-space: nowrap;
color:#414141
}
*/
header {
position: fixed;
top: 0px;
width: 100%;
}
body {
padding-top: 85px;
}
header .header-top, header .header-top .col-10 {
height: 40px;
line-height: 40px;
}
header .header-main {
padding-top: 0;
}
header .nav {
display: none;
}
.header-top .tab-btn a {
line-height: 16px;
padding: 12px 10px;
font-size: 14px;
}
header .logo {
height: 100px;
margin-right: -5px;
box-shadow: none;
}
header .logo a {
padding-top: 48px;
padding-bottom: 15px;
}
#prohoga header .logo a {
padding-top: 42px;
}
#chefspro header .logo a {
padding-top: 44px;
padding-bottom: 18px;
}
#top-table-gmbh header .logo a {
padding-top: 38px;
}
#cent-marketing-schweiz #swiss-flag {
top: 10px;
left: 55px;
width: 20px;
height: 20px;
}
.layout-chefspro header .logo {
padding-top: 1px;
padding-bottom: 3px;
}
#formSearch {
width: 80%;
border-radius: 0;
}
.header-main .tb > a.cart span.total {
display: none;
}
.mctrl_btn {
opacity: 1;
visibility: visible;
}
}
@media (max-width: 767.98px) {
body {
padding-top: 96px;
}
.header-top .usp, .header-top .tab-btn, #formSearchX {
display: none;
}
#formSearch {
top: 50px;
position: absolute;
left: 0px;
width: 100%;
}
#formSearch i {
left: 20px;
}
#formSearch form input {
padding-left: 40px;
}
#formSearch form input::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
font-size: 70%;
}
#formSearch form.search {
width: 65%;
}
#formSearch form.catalog {
width: 35%;
}
header .header-top {
height: 0px;
}
header .header-main {
height: 97px;
}
header .logo {
border-radius: 0;
}
header .logo svg {
color: #5C5C5C;
}
header .logo a {
background-color: transparent;
}
header .logo {
height: 40px;
margin-left: 40px;
margin-right: -90px;
top: 6px;
box-shadow: none;
background-color: transparent;
}
header .logo a {
padding-top: 0px;
padding-bottom: 0px;
}
#prohoga header .logo a {
padding-top: 0px;
margin-top: -1px;
}
#chefspro header .logo a {
padding-top: 0px;
margin-top: 8px;
padding-right: 50%;
}
#top-table-gmbh .logo a {
padding-top: 0px !important;
margin-top: -6px;
}
#cent-marketing-schweiz .logo svg {
width: 60px;
margin-left: -25px;
margin-top: 1px;
}
#cent-marketing-schweiz #swiss-flag {
top: 8px;
right: 0px;
left: auto;
width: 20px;
height: 20px;
}
.header-main .tb > a {
padding: 0 10px;
}
.mctrl_btn {
left: 15px;
top: 3px;
}
.mctrl_btn > div {
background-color: #5C5C5C;
}
.layout-chefspro header .logo {
padding-top: 7px;
padding-bottom: 4px;
width: 60px;
}
}
header .nav > ul > li > .panel > ul {
display: block;
}
header .nav > ul > li > .panel > ul > li > a {
font-size: 13.5px;
display: block;
margin-bottom: 5px;
}
header .nav > ul > li > .panel > ul > li {
line-height: 20px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
header .nav > ul > li > .panel > ul > li li:nth-child(7) {
visibility: hidden;
}
header .nav > ul > li > .panel > ul > li li:nth-child(7)::before {
content: "...";
visibility: visible;
}
header .nav > ul > li > .panel > ul > li li:nth-child(n+8) {
display: none;
}
header .nav > ul > li:hover .panel {
height: auto;
opacity: 1;
box-shadow: 0 0 4px 0 #202e34;
visibility: visible;
padding-bottom: 40px;
max-height: 1000px;
transition-delay: 0.2s;
clip-path: polygon(-5% 0%, -5% 105%, 105% 105%, 105% 0%);
}
header .nav > ul > li:hover .ind {
opacity: 1;
bottom: -15px;
}
header .nav .panel .label {
border-bottom: 1px solid #ddd;
width: 100%;
display: block;
line-height: 60px;
text-align: left;
padding: 0;
margin-bottom: 15px;
font-size: 15px;
margin-top: 40px;
}
@media (max-width: 767px) {
.header-top .my-account {
display: none;
}
}
.header-top .currencies {
float: left;
}
.header-top .currencies a.active {
font-weight: 600;
}
.header-top .languages {
float: left;
}
.languages .flag {
float: left;
background-image: url(flags.png);
background-repeat: no-repeat;
margin-right: 10px;
overflow: hidden;
text-indent: -9999px;
width: 16px;
height: 16px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.languages .flag.nl {
background-position: -7px -2px;
}
.languages .flag.de {
background-position: -7px -22px;
}
.languages .flag.en {
background-position: -7px -42px;
}
.languages .flag.fr {
background-position: -7px -62px;
}
.languages .flag.es {
background-position: -7px -82px;
}
.languages .flag.it {
background-position: -7px -102px;
}
.languages .flag.el {
background-position: -7px -122px;
}
.languages .flag.tr {
background-position: -7px -142px;
}
.languages .flag.pt {
background-position: -7px -162px;
}
.languages .flag.pl {
background-position: -7px -182px;
}
.languages .flag.sv {
background-position: -7px -202px;
}
.languages .flag.ru {
background-position: -7px -222px;
}
.languages .flag.da {
background-position: -7px -242px;
}
.languages .flag.no {
background-position: -7px -262px;
}
.languages .flag.fc {
background-position: -7px -282px;
}
.languages .flag.us {
background-position: -3px -302px;
}
@media (max-width: 767px) {
body {
overflow-x: hidden;
}
.wrapper {
background-color: white;
position: relative;
z-index: 1;
left: 0px;
transition: left 0.25s ease-in-out;
-moz-transition: left 0.25s ease-in-out;
-webkit-transition: left 0.25s ease-in-out;
}
}
.breadcrumbs {
color: #999;
font-size: 12px;
text-align: right;
margin-top: 20px;
}
.breadcrumbs a {
color: #797979;
font-size: 12px;
}
/* .slider
================================================== */
/* .headline */
.headlines {
margin-bottom: 60px;
position: relative;
max-width: 1920px;
margin: auto;
}
.slider, .slider .bg, .slider .row {
height: 630px;
overflow: hidden;
}
.slider .info {
background-color: #FFFFFFCC;
margin-top: 30px;
border-radius: 0 20px 0 0;
padding: 60px;
max-width: 50%;
}
.slider .bg {
background-color: #686868 !important;
background: no-repeat center center;
background-size: cover;
max-width: 1920px;
margin: auto;
}
.slider .container {
margin-top: -600px;
}
.slider .btn {
margin-top: 15px;
}
@media (max-width: 767.98px) {
.slider, .slider .bg, .slider .row {
height: 300px;
overflow: hidden;
}
.slider .container {
margin-top: -300px;
}
.slider .info {
padding: 30px;
max-width: 80%;
}
}
.layout-chefspro .slider .h2 {
color: #666;
}
/* .usp
================================================== */
span.usp {
white-space: nowrap;
line-height: 1.5rem;
}
/* .categories
================================================== */
.catheader {
margin-bottom: 30px;
margin-top: 30px;
}
.catheader > div {
padding-top: 40%;
background-color: #E8E8E8;
background-size: cover;
border-radius: 0 0 20px 0;
}
.categories .category {
margin-bottom: 30px;
background-color: #363636;
border-radius: 0 0 20px 0;
overflow: hidden;
}
.categories .category > div {
position: relative;
}
.categories .category .img-box {
padding-top: 40%;
background-color: rgba(255, 255, 255, 0.6);
overflow: hidden;
position: relative;
}
.categories .category .img-box .img {
padding-top: 40%;
background-size: cover;
overflow: hidden;
position: absolute;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
transition: all 0.4s;
}
.categories .category:hover .img-box {
opacity: 0.85;
}
.categories .category:hover .img-box .img {
opacity: 0.8;
transform: scale(1.2);
}
.categories .category .title {
background-color: #272727;
color: #ffffff;
line-height: 45px;
margin: 0;
padding: 5px 0 0 20px;
display: block;
transition: all 0.2s;
}
.categories .category:hover .title {
background-color: transparent !important;
}
.categories .category .description {
background-color: #fff;
opacity: 0;
color: #000;
padding: 40px 20px;
position: absolute;
width: 100%;
height: 100%;
top: 100%;
display: block;
margin: 0;
transition: all 0.4s;
}
.categories .category:hover .description {
opacity: 0.75;
top: 0px;
}
.categories .category .label {
display: block;
position: absolute;
}
.categories .category .label.new {
background-color: #fcb02b;
color: #fff;
right: 0px;
top: 0px;
font-size: 20px;
padding: 7px 10px 4px 10px;
margin: 0;
text-transform: uppercase;
}
.categories .category .label.amount {
right: 10px;
bottom: 13px;
}
.contBottom {
margin-top: 200px;
opacity: 0.5;
}
/*
.categories .category {
border: 1px solid #e5e5e5;
margin: 0px -1px -1px 0px;
padding: 0px;
position: relative;
background-color: red;
}
.categories .category img {
background-color: #f7f7f7;
width: 100%;
height: auto;
position: relative;
top: 0px;
left: 0px;
}
.categories .category divX {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
padding: 15px 19px;
}
.categories .category span {
background-color: $colorText;
color: white;
text-transform: uppercase;
line-height: 22px;
}
@media (min-width: 992px) {
.categories .category.hover span,
.categories .category.hover img {
opacity: 0.6;
}
}
.categories .category span.title {
position: relative;
margin-top: 15px;
font-size: 16px;
box-shadow: -4px 0 0 0 #414141, 4px 0 0 0 #414141;
margin-left: 4px;
}
.categories .category span.amount {
position: absolute;
bottom: 15px;
right: 19px;
font-size: 12px;
padding: 0px 4px 0px 5px;
}
.categories .category span.amount .glyphicon {
font-size: 10px;
margin-right: 4px;
opacity: 1;
vertical-align: 1px;
}
@media (max-width: 992px) {
.categories .category div {
padding: 11px 14px;
}
.categories .category span.amount {
bottom: 11px;
right: 14px;
}
}
*/
/* .collection
================================================== */
.collection-tb {
text-align: right;
margin-bottom: 30px;
}
.collection-tb form {
border-bottom: 1px solid #e3e3e3;
}
.collection-tb select {
padding: 5px;
border: 1px solid #e3e3e3;
margin-bottom: -1px;
}
/* .products
================================================== */
.product-item {
margin-bottom: 30px;
}
.product-item > div {
background-color: #f7f7f7;
position: relative;
border: 1px solid #e3e3e3;
border-radius: 0 0 15px 0;
overflow: hidden;
}
.product-item:hover > div {
border-color: #ccc;
}
.product-item .img-box {
padding-top: 100%;
background-color: #fff;
overflow: hidden;
position: relative;
}
.product-item .img-box .img {
background-size: 90%;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
position: absolute;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
transition: all 0.4s;
}
/*
.product-item:hover .img-box {
opacity: .85;
}
.product-item:hover .img-box .img {
opacity: .8;
transform: scale(1.2);
}
*/
.product-item .img-box .code {
color: #a8a8a8;
background-color: #f7f7f7;
font-size: 11px;
padding: 0 3px;
position: absolute;
bottom: 0px;
right: 0px;
}
.product-item .info-box {
position: relative;
height: 90px;
}
.product-item .title {
position: absolute;
color: #666666;
font-size: 14px;
line-height: 15px;
height: 45px;
top: 15px;
left: 15px;
right: 10px;
overflow: hidden;
}
.product-item .price {
position: absolute;
font-size: 12px;
font-weight: bold;
line-height: 14px;
bottom: 10px;
right: 10px;
left: 15px;
overflow: hidden;
text-align: right;
color: #666666;
}
.product-item .price > span {
float: right;
}
.product-item .price .vpe {
font-size: 10px;
margin-top: 2px;
font-weight: normal;
float: left;
}
.product-item .description {
background-color: #fff;
opacity: 0;
color: #000;
padding: 15px 15px;
position: absolute;
width: 100%;
height: 100%;
top: 100%;
display: block;
margin: 0;
transition: all 0.4s;
font-size: 12px;
line-height: 15px;
}
.product-item .description:after {
content: "";
height: 0px;
display: block;
position: absolute;
bottom: 0px;
width: 100%;
box-shadow: 0 0 30px 30px #fff;
}
/*
.product-item:hover .description {
opacity: .75;
top: 0px;
}
*/
.product-item .label {
display: block;
position: absolute;
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
top: 0px;
color: #fff;
}
.product-item .label.new {
background-color: #fcb02b;
right: 0px;
border-radius: 0 0 0 11px;
}
.product-item .label.discount {
background-color: #ffbd5d;
left: 0px;
border-radius: 0 0 11px 0;
}
.product-item .label.amount {
right: 10px;
bottom: 13px;
}
.search-match .product-item > div {
background-color: #dcffe2;
border-color: #00a92b;
}
.categories + .no-products-found {
display: none;
}
/*
.products .col-md-10 {
padding-right: 0px;
}
.products .col-md-10 .no-products-found {
padding: 0px 15px;
font-style: italic;
}
@media (max-width: 992px) {
.products .col-md-10 {
padding-left: 0px;
}
}
.product-item {
margin-bottom: 30px;
}
.product-item a {
color: #f7f7f7;
text-decoration: none;
}
.product-item .image-wrap img {
background-color: #f7f7f7;
border: 1px solid #e5e5e5;
border-bottom: 0px;
width: 100%;
height: auto;
position: relative;
top: 0px;
left: 0px;
}
.product-item .image-wrap {
position: relative;
}
.product-item .image-wrap .sale-new {
position: absolute;
background-color: #414141;
padding: 5px;
line-height: 12px;
font-size: 12px;
text-align: center;
top: 15px;
left: 15px;
z-index: 1;
text-transform: uppercase;
}
.sale-new.right {
right: 15px;
left: inherit !important;
}
.product-item .image-wrap .description {
position: absolute;
top: 0px;
width: 100%;
background-color: rgb(65, 65, 65);
background-color: rgba(65, 65, 65, 0);
height: 0px;
overflow: hidden;
color: #f7f7f7;
font-size: 12px;
-moz-transition: background-color 0.3s ease;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
z-index: 2;
line-height: 20px;
}
.product-item .image-wrap .description .text {
overflow: hidden;
padding: 0px 10px;
}
.product-item .image-wrap .description .stars {
margin-bottom: 3px;
}
.product-item .image-wrap .cart {
display: inline-block;
position: relative;
margin: auto;
padding: 0px 4px;
text-transform: uppercase;
border: 1px solid;
margin-top: 10px;
text-decoration: none;
color: #54afe9;
}
.product-item .image-wrap:hover .description {
height: 100%;
background-color: rgba(65, 65, 65, 0.8);
padding: 20px;
}
.product-item .info {
padding: 11px 15px 15px 15px;
border: 1px solid #e5e5e5;
min-height: 88px;
}
.product-item .info .title {
text-decoration: none;
color: #414141;
font-weight: 600;
line-height: 20px;
display: block;
max-height: 40px;
overflow: hidden;
}
.product-item .info .old-price {
text-decoration: line-through;
color: #797979;
font-size: 12px;
}
.product-item .info.strict {
height: auto;
overflow: auto;
}
.product-item .info.strict .unit-price {
display: block;
clear: both;
}
@media (max-width: 1025px) {
.product-item .image-wrap .description {
display: none;
}
.product-item .image-wrap .description .text {
padding: 0px;
}
}
/* .sidebar
================================================== */
.sidebar .nav.categories a {
display: block;
border-bottom: 1px solid #ccc;
opacity: 1;
padding: 5px 0;
font-size: 15px;
line-height: 20px;
}
.sidebar .nav.categories li:last-child a {
border: none;
}
.sidebar .nav.categories li li.active > a, .sidebar .nav.categories a:hover {
color: #000 !important;
}
.sidebar .nav.categories > ul, .sidebar .nav.categories > ul > li > ul {
margin: 0;
}
.sidebar .nav.categories > ul > li, .sidebar .nav.categories > ul > li > ul ul {
display: none;
}
.sidebar .nav.categories > ul > li.active, .sidebar .nav.categories > ul > li.active > ul > li.active > ul, .sidebar .nav.categories > ul > li.active > ul > li.active > ul > li.active > ul {
display: block;
margin-bottom: 15px;
}
.sidebar .nav.categories > ul > li.active > a {
font-weight: bold;
font-size: 20px;
margin-bottom: 20px;
margin-top: -10px;
padding: 10px 0;
}
/*
.sidebar {
color: #797979;
margin-bottom: 20px;
}
.sort {
padding-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
}
.sidebar strong {
display: block;
padding-top: 10px;
}
.modes {
font-size: 1.5em;
padding-left: 3px;
}
.list .info { border-left: 0px !important; }
.list .description { margin-left: -15px; }
.list .image-wrap { border: 1px solid #e5e5e5 !important; flex: 1 }
.list .image-wrap img { padding: 0 !important; border: none !important; }
.list .col-lg-5, .list .col-md-5 { padding: 0 !important; }
.list .col-md-8, .list .col-lg-8, , .list .col-sm-7, .list .col-xs-7 {
margin: 0 auto !important;
border-right: 1px solid #e5e5e5 !important;
}
.row.is-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 15px;
margin-right: 15px;
}
.row.is-flex > [class*='col-'] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-inline-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media (min-device-width: 1200px) {
strong.visible-lg {
pointer-events:none;
}
}
[id^="filter"] { padding-top: 5px; }
[id^="filter"].in,
[id^="filter"].collapsing {
display: block!important;
}
*/
/* .price-filter */
/*
.price-filter {
padding-bottom: 40px;
}
.price-filter-range {
font-size: 10px;
}
#collection-filter-price {
height: 12px;
border: 1px solid #e5e5e5;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin: 3px 4px 8px 8px;
position: relative;
}
#collection-filter-price .ui-slider-range {
background-color: #f7f7f7;
border: 1px solid #e5e5e5;
margin: -1px 0 0 -1px;
position: absolute;
height: 12px;
}
#collection-filter-price .ui-slider-handle {
display: block;
position: absolute;
width: 16px;
height: 16px;
border: 0;
top: -3px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
margin-left: -10px;
cursor: col-resize;
border: 1px solid #ccc;
background-color: white;
outline: none;
}
.price-filter-range .min {
float: left;
}
.price-filter-range .max {
float: right;
}
*/
/* select */
/*
.sidebar select {
display: block;
margin-bottom: 10px;
max-width: 100%;
}
@media (max-width: 992px) {
.sort {
padding-bottom: 0px;
border-bottom: 0px;
}
.price-filter {
display: none;
}
.sidebar {
margin-bottom: 30px;
margin-top: -15px;
}
.sidebar .item {
display: none;
padding-top: 10px;
padding-bottom: 25px;
}
.sidebar .item.active {
display: block;
}
.sidebar .item .itemLink {
margin-top: 5px;
}
}
@media (max-width: 767px) {
.sidebar .item {
border-bottom: 0px;
}
.sidebar {
border-bottom: 1px solid #f0f0f0;
}
}
*/
/* .pagination
================================================== */
.pagination {
font-size: 12px;
line-height: 22px;
}
.pagination ul {
text-align: right;
}
.pagination ul li {
display: inline-block;
margin-left: 10px;
}
.pagination ul li a {
display: block;
border: 1px solid #ccc;
padding: 0 5px;
color: #666;
text-align: center;
min-width: 25px;
}
.pagination ul li a svg {
margin-bottom: -1px;
}
.pagination ul li.active a {
border-color: #000 !important;
background-color: #fff !important;
}
/*
.pager {
font-size: 12px;
color: #797979;
margin: 0px;
padding-top: 0px;
}
.pager .left {
font-size: 12px;
}
.pager ul {
border: 1px solid #e5e5e5;
}
.pager ul li {
display: inline;
}
.pager ul li a {
color: #797979;
float: left;
padding: 5px 13px;
line-height: 20px;
text-decoration: none;
border-right: 1px solid #f0f0f0;
}
.pager ul li a:hover {
color: #414141;
}
.pager ul li a .glyphicon {
font-size: 10px;
line-height: 18px;
}
.pager ul li:last-child a {
border-right: 0px;
}
.pager ul li.active a {
background-color: #f7f7f7;
}
.pager ul li.prev a {
border-left-width: 1px;
}
.pager ul li.disabled {
display: none;
}
*/
/* Product page
================================================== */
.product .pt, .product .stammArt, .product .parent-id, .product .stammBez, .product .addImages, .product .st, .product .parentGroup {
display: none;
}
.product .content {
margin-top: 50px;
}
.product .content > div {
margin-bottom: 20px;
}
.product .images .main {
background-color: #fff;
border: 1px solid #e3e3e3;
padding-top: 100%;
overflow: hidden;
position: relative;
}
.product .images .main img {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
}
.product .images .add .col .img {
padding-top: 100%;
overflow: hidden;
position: relative;
border: 1px solid #e3e3e3;
}
.product .images .add .col img {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
}
.product .add-to-cart.btn {
line-height: 40px;
height: 39px;
font-size: 9px;
font-weight: bold;
background-color: #C8000A;
padding: 0 10px;
border: 1px solid transparent;
}
.product .qty {
font-size: 16px;
line-height: 40px;
height: 40px;
text-align: center;
border: 1px solid #e3e3e3;
min-width: 40px;
}
.product table th {
text-align: left;
font-weight: bolder;
padding-right: 20px;
}
.no-catalog-search .product table.details .catalogPage {
display: none;
}
.product .content ul {
margin-left: 1em;
}
.product .content li {
list-style: disc;
}
.product .price {
font-size: 20px;
line-height: 40px;
}
.product .discount-label {
display: inline-block;
font-weight: bold;
color: #ffbd5d;
padding-right: 5px;
margin-right: 5px;
border-right: 1px solid #ccc;
}
.product-price .old-price {
color: #ffbd5d !important;
}
.no-outofstock-sale {
color: #eb6161;
font-size: 80%;
line-height: 120%;
}
/* Newsletter Form
================================================== */
#formNewsletter {
position: relative;
}
#formNewsletter input {
background-color: transparent;
border: none;
width: 100%;
line-height: 1em;
padding: 0.5em 0.5em;
padding-bottom: 0.45em;
font-size: 1em;
color: #000;
}
#formNewsletter > div {
overflow: hidden;
padding-right: 10px;
background-color: #E8E8E8;
line-height: 0px;
height: 2em;
}
#formNewsletter .btn {
float: right;
height: 2em;
}
/* Shop locked
================================================== */
.shop-locked .shop-locked-vh {
visibility: hidden !important;
}
.shop-locked .shop-locked-dn {
display: none !important;
}
/* External Login
================================================== */
.ext-login {
padding: 15px;
}
.ext-login input {
width: 100%;
}
.ext-login form {
padding-top: 10px;
}
.ext-login input.email, .ext-login input.password {
background-color: #fff;
border: none;
padding: 5px;
margin-bottom: 10px;
}
.ext-login .btn {
height: 3em;
}
/* footer
================================================== */
footer {
margin-top: 200px;
background-color: #333333;
color: #cccccc;
padding-top: 50px;
font-size: 85%;
}
footer a {
color: #ffffff !important;
}
footer a:hover {
opacity: 0.6;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer .h1, footer .h2, footer .h3, footer .h4, footer .h5, footer .h6, footer .h-25, footer .h-30, footer .h-35, footer .h-40 {
color: #ffffff;
}
footer .col > div {
margin: 40px 0;
}
footer .payment .ico {
display: inline-block;
height: 22px;
width: auto;
line-height: 35px;
margin-right: 5px;
border-radius: 5px;
overflow: hidden;
}
footer .payment .ico img {
height: 22px;
width: auto;
}
footer .bot {
background-color: #171717;
padding: 15px;
margin-top: 40px;
padding-bottom: 50px;
}
/* GUI
================================================== */
.gui {
margin-top: 30px;
}
.gui a.gui-button-large, .gui a.gui-button-small, .gui-block, .gui-block.gui-closed .gui-block-title, .gui-block-option, .gui-block-option img.gui-border, .gui-block-option-block, .gui-block-title span, .gui-image, .gui-input, .gui-text, .gui-messages ul, .messages ul, .gui-number, .gui-popover, .gui-popover-bg, .gui-popover-content, .gui-popover-title a, .gui-select, .gui-table, .gui-block-content .gui-mask, .gui-block-content {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.gui .gui-progressbar {
background-color: transparent;
}
.messages {
margin-top: 30px;
margin-bottom: 0px !important;
}
.gui-popover {
position: fixed;
left: 50%;
top: 50%;
width: 80%;
max-width: 800px;
}
.gui-div-faq-questions ul, .gui-content-wysiwyg ul {
margin-left: 30px !important;
margin: 5px;
list-style-type: initial;
}
.gui-div-faq-questions ol, .gui-content-wysiwyg ol {
margin: 5px 30px;
list-style-type: decimal;
}
.bi::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 1rem 1rem;
width: 1rem;
height: 1rem;
}
.ico {
display: inline-flex;
align-self: center;
}
.ico svg {
height: 1em;
width: 1em;
top: 0.125em;
position: relative;
}
#mctrl {
display: none;
}
#mctrl .tab-btn a {
color: #fff !important;
background-image: none !important;
text-align: center;
font-size: 20px !important;
}
#mctrl .nav a {
display: block;
line-height: 36px;
margin-top: -1px;
font-size: 16px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px 30px;
color: #414141;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 1rem 1rem;
}
#mctrl .nav a .ico {
margin-right: 5px;
}
#mctrl .nav > ul {
background-color: #fff;
margin-bottom: 30px;
}
#mctrl .nav ul ul {
padding-left: 15px;
display: none;
}
#mctrl .nav .active > a {
background-color: #414141;
color: #fff;
}
#mctrl .nav .active > ul {
display: block;
}
#mctrl .nav .active > ul > li {
background-color: #4141412d;
}
#mctrl {
width: 100%;
background-color: #E7EBEB;
position: fixed;
z-index: 99;
top: 0px;
padding: 120px 0;
padding-top: 97px;
right: 110%;
bottom: 0px;
transition: transform 0.4s;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
display: block;
box-shadow: 0 0 10px 0 #666;
}
.productSel {
position: relative;
}
.productSel .select {
border: 1px solid #e3e3e3;
overflow: scroll;
max-height: 0px;
visibility: hidden;
opacity: 0;
background-color: #fff;
position: absolute;
z-index: 1;
top: 50px;
transition: all 0.4s;
width: 100%;
box-shadow: 0px 3px 3px #d1d1d1;
}
.productSel:hover .select {
visibility: visible;
opacity: 1;
max-height: 300px;
}
.productSel:hover .arrow {
opacity: 0;
transition: all 0.4s;
}
.productSel .itm.sel {
box-shadow: 0px 2px 2px #e3e3e3;
}
.productSel .select .itm:hover, .productSel .itm.cur {
background-color: #f3f3f3;
}
.productSel .itm.sel {
border: 1px solid #eca20f;
height: 50px;
line-height: 40px;
color: #eca20f;
z-index: 2;
position: relative;
}
.productSel .itm.sel .arrow {
position: absolute;
right: 20px;
top: 20px;
}
.productSel .itm {
border-bottom: 1px solid #e3e3e3;
padding: 6px 15px;
background-color: #fff;
overflow: hidden;
width: 100%;
display: block;
}
.productSel .itm .lft {
width: 50px;
height: 50px;
float: left;
border: 1px solid #e3e3e3;
background-color: #fff;
margin-right: 10px;
}
.productSel img {
width: 40px;
height: 40px;
margin: 4px;
}
.productSel .itm .rgt {
position: relative;
}
.productSel .itm .rgt .info {
margin-right: 110px;
line-height: 20px;
}
.productSel .itm .rgt .price {
position: absolute;
right: 30px;
top: 0px;
text-align: right;
width: 100px;
}
.bySearch .spinner {
opacity: 0;
}
.bySearch.loading .spinner {
opacity: 1;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-bottom;
border: 0.2em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner 0.75s linear infinite;
opacity: 0;
transition: opacity 1s;
transition-delay: 1s;
}
.spinner > span {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.box {
background-color: #E8E8E8;
border-radius: 0 0 20px 0;
}
.box .bg {
height: 100%;
background-size: cover;
}
.box .pad {
padding: 60px;
}
.side-pullout {
position: absolute;
top: 230px;
left: -200px;
transition: left 0.3s;
}
.side-pullout:hover {
left: 0px;
}
.side-pullout .flap {
width: 60px;
height: 60px;
background-color: red;
position: absolute;
right: -60px;
}
.side-pullout .cont {
width: 200px;
background-color: #fff;
padding: 20px;
line-height: 20px;
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none;
}
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pswp img {
max-width: none;
}
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001;
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
display: block;
}
.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
will-change: opacity;
}
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pswp__container, .pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Prevent selection and tap highlights */
.pswp__container, .pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
/* for open/close transition */
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__bg {
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none;
}
.pswp__container, .pswp__zoom-wrap {
-webkit-backface-visibility: hidden;
}
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0;
}
/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility: hidden;
}
/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background: #222;
}
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0;
}
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC;
}
.pswp__error-msg a {
color: #CCC;
text-decoration: underline;
}
/* SKIN */
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Contents:
1. Buttons
2. Share modal and links
3. Index indicator ("1 of X" counter)
4. Caption
5. Loading indicator
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
*/
/*
1. Buttons
*/
/*