/* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:22 +0200 (0.0066s) */ #snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-weight: 400 } #snackbar .close { color: #aaa; float: right; font-size: 28px; font-weight: bold } #snackbar .close:hover, #snackbar .close:focus { color: black; text-decoration: none; cursor: pointer } #snackbar.info { background-color: #333 } #snackbar.warning { background-color: #ffe65c; color: #000 } #snackbar.error { background-color: #f00 } #snackbar.success { background-color: #4dc92e; color: #000 } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s } @-webkit-keyframes fadein {from { bottom: 0; opacity: 0 } to { bottom: 30px; opacity: 1 } } @keyframes fadein {from { bottom: 0; opacity: 0 } to { bottom: 30px; opacity: 1 } } @-webkit-keyframes fadeout {from { bottom: 30px; opacity: 1 } to { bottom: 0; opacity: 0 } } @keyframes fadeout {from { bottom: 30px; opacity: 1 } to { bottom: 0; opacity: 0 } } .modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000; background-color: rgba(0, 0, 0, 0.12) } .modal.show { display: block; -webkit-animation: fadein 0.5s; animation: fadein 0.5s } .modal.hide { -webkit-animation: fadeOut 0.5s; animation: fadeOut 0.5s } @-webkit-keyframes fadein {from { opacity: 0 } to { opacity: 1 } } @keyframes fadein {from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadeOut {from { opacity: 1; display: block } to { opacity: 0; display: none } } @keyframes fadeOut {from { opacity: 1; display: block } to { opacity: 0; display: none } } .modal .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border-radius: 2px; width: 80% } .modal .modal-content .close { color: #aaa; float: right; font-size: 28px; font-weight: bold } .modal .modal-content .close:hover, .modal .modal-content .close:focus { color: black; text-decoration: none; cursor: pointer } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:22 +0200 (0.1928s) */ /** * Global reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent } body { line-height: 1 } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block } nav ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent } ins { background-color: #ff9; color: #000; text-decoration: none } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold } del { text-decoration: line-through } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help } table { border-collapse: collapse; border-spacing: 0 } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 } input, select { vertical-align: middle } @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } a { color: #bc9268; text-decoration: none; transition: all ease 0.3s } a:hover { color: #c9a886 } body { font-family: Lato; font-weight: 300; line-height: 1.618em; color: inherit; font-size: inherit; background: none } h1, h2, h3, h4, h5, h6 { margin: 0.6180469716em 0; line-height: 1em; font-family: Lato } h1 { font-size: 2.441em; color: #3d3d3d; text-transform: uppercase } @media screen and (max-width: 640px) {h1 { font-size: calc(2.441em * 0.8) } } h2 { font-size: 1.953em; color: #3d3d3d } @media screen and (max-width: 640px) {h2 { font-size: calc(1.953em * 0.8) } } h3 { font-size: 1.563em; color: #3d3d3d } @media screen and (max-width: 640px) {h3 { font-size: calc(1.563em * 0.8) } } h4 { font-size: 1.25em; color: #3d3d3d } @media screen and (max-width: 640px) {h4 { font-size: calc(1.25em * 0.8) } } h5 { font-size: 0.75em; color: #3d3d3d } @media screen and (max-width: 640px) {h5 { font-size: calc(0.75em * 0.8) } } h6 { font-size: 0.563em; color: #3d3d3d } @media screen and (max-width: 640px) {h6 { font-size: calc(0.563em * 0.8) } } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a h1, a h2, a h3, a h4, a h5, a h6 { color: #000; transition: all ease 0.2s } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, a h1:hover, a h2:hover, a h3:hover, a h4:hover, a h5:hover, a h6:hover { color: #bc9268 } html { overflow-x: hidden; color: #000; line-height: 1.618em; background: #fff; font-size: 1em } hr { color: #aaa; background: #aaa; clear: both } img { max-width: 100%; height: auto } nav ol, nav ul { list-style-type: none; padding: 0; margin: 0 } nav ol li, nav ul li { padding: 0 } li, ol, ul { list-style: inherit; list-style-position: inside; padding-left: 0 } p { margin-bottom: 0.6180469716em } th, td { vertical-align: top; font-family: inherit; font-size: inherit } #wrapper { height: unset !important } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:22 +0200 (0.1932s) */ @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } .iconAdd::before, .iconCss::before, .iconCopy::before, .iconClose::before, .iconDelete::before, .iconEdit::before, .iconImage::before, .iconInfo::before { font: normal normal normal 1em/1 'FontAwesome'; speak: none; text-rendering: auto; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } /** * Icons * * Font Awsome * - Icon ref: http://fontawesome.io/icons/ */ .icon { overflow: hidden; text-indent: 200%; white-space: nowrap; display: inline-block; vertical-align: text-top } .iconText { text-indent: 18px; width: auto } .iconText.iconText:hover { text-decoration: underline } /** * A */ .iconAdd::before { content: "\f055"; display: inline-block; margin-right: 0.5em } /** * B */ /** * C */ .iconCss::before { content: "\f13c"; display: inline-block; margin-right: 0.5em } .iconCopy::before { content: "\f24d"; display: inline-block; margin-right: 0.5em } .iconClose::before { content: "\f057"; display: inline-block; margin-right: 0.5em } /** * D */ .iconDelete::before { content: "\f056"; display: inline-block; margin-right: 0.5em } /** * E */ .iconEdit::before { content: "\f14b"; display: inline-block; margin-right: 0.5em } /** * G */ /** * H */ /** * I */ .iconImage::before { content: "\f03e"; display: inline-block; margin-right: 0.5em } .iconInfo::before { content: "\f129"; display: inline-block; margin-right: 0.5em } /** * L */ /** * M */ /** * N */ /** * O */ /** * P */ .iconPrinter { background: url('/images/icons/printer.png') no-repeat left } /** * R */ /** * S */ /** * T */ /** * U */ .paginationList { margin: 1.618em 0 } .paginationList .paginationList { list-style-type: none; padding: 0; margin: 0; display: inline-block; overflow: hidden; font-size: 0.8em; background: red; display: none } .paginationList .paginationList li { padding: 0 } .paginationList .paginationList li { float: left; margin-right: 0.6180469716em } .paginationList .paginationList li a { display: block; border: solid 1px rgba(255, 255, 255, .5); border-radius: 5px; color: rgba(0, 0, 0, .5); padding: 1em; background: rgba(255, 255, 255, .75) } .paginationList .paginationList li:hover a, .paginationList .paginationList li.active a { border-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); background: rgba(255, 255, 255, 1) } .paginationList .paginationList li.active, .paginationList .paginationList li.previous-off, .paginationList .paginationList li.next-off .paginationList .paginationList li.next, .paginationList .paginationList li.previous { font-weight: bold } .paginationList .entriesTotal { font-size: 0.8em } p.error { font-size: 18px; font-weight: 600; margin-bottom: 0.5em; color: red } .searchForm { margin-bottom: 10px } .searchForm .field { float: left; margin-right: 10px } .searchForm .field label { display: inline; vertical-align: middle } .searchForm fieldset.multiple { float: left; margin-right: 10px; padding: 0; width: 400px; position: relative } .searchForm fieldset.multiple .field { clear: none !important; float: left !important; margin-top: 5px } .searchForm fieldset.multiple .field label { vertical-align: top } .searchForm p.buttons { width: auto; clear: none; float: left; margin: 0 } .inTable .field { position: relative } .inTable .field label { position: absolute; top: -1.5em; left: 0; width: 100%; text-indent: -999em } .inTable .field input, .inTable .field select { width: 95% } ul.notification { padding: 5px; list-style: none } li.notification { color: #000; background: #dedede; border: 1px solid #000; background-image: url('/images/icons/bullet_black.png'); background-position: 10px center; background-repeat: no-repeat; margin: 10px 0; padding: 15px 10px 15px 50px } li.notification.dataSaved, li.notification.dataDeleted { color: #4f8a10; background-color: #dff2bf; background-image: url('/images/icons/ok.png'); background-position: 10px center; background-repeat: no-repeat; border: 1px solid #4f8a10; margin: 10px 0; padding: 15px 10px 15px 50px } li.notification.dataError { color: #8a0f0f; background-color: #fccac3; background-image: url('/images/icons/exclamation.png'); background-position: 10px center; background-repeat: no-repeat; border: 1px solid #e02727; margin: 10px 0; padding: 15px 10px 15px 50px } li.notification.dataInformation { color: #00529b; background-color: #bde5f8; background-image: url('/images/icons/information.png'); background-position: 10px center; background-repeat: no-repeat; border: 1px solid #00529b; margin: 10px 0; padding: 15px 10px 15px 50px } li.notification.dataWarning { color: #9f6000; background-color: #feefb3; background-image: url('/images/icons/error.png'); background-position: 10px center; background-repeat: no-repeat; border: 1px solid #9f6000; margin: 10px 0; padding: 15px 10px 15px 50px } #localeList li { text-indent: -9999em; list-style-type: none; display: inline-block; float: left; margin-left: 5px } #localeList li a { display: block; width: 24px; height: 24px; outline: none } #localeList li.sv_SE a { background: transparent url("/images/locales/24/se.png") no-repeat center !important } #localeList li.en_GB a { background: transparent url("/images/locales/24/gb.png") no-repeat center !important } #localeList li.da_DK a { background: transparent url("/images/locales/24/dk.png") no-repeat center !important } #localeList li.fr_FR a { background: transparent url("/images/locales/24/fr.png") no-repeat center !important } #localeList li.fi_FI a { background: transparent url("/images/locales/24/fi.png") no-repeat center !important } #localeList li.en_US a { background: transparent url("/images/locales/24/us.png") no-repeat center !important } #localeList li.no_NO a { background: transparent url("/images/locales/24/no.png") no-repeat center !important } #localeList li.de_DE a { background: transparent url("/images/locales/24/de.png") no-repeat center !important } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:22 +0200 (0.1993s) */ @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } body { counter-reset: fieldset } button { border: none; padding: 0.5em 1em; background: #fff; color: #000; font-family: Lato; cursor: pointer; transition: all ease 0.2s } button:hover { background: #fff } button:focus { outline: 1px solid #fff } button.disabled { cursor: not-allowed; background-color: #999 } fieldset { border: 0; margin-bottom: 1.25em; padding: 0; padding-top: 0.5em } fieldset.multiple { border: 0; margin: 0; padding: 0 } fieldset.multiple .field { float: left; clear: left; position: relative } fieldset.multiple label { padding-left: 1.25em; font-weight: normal } fieldset.multiple input { position: absolute; top: 0.5em; left: 0 } fieldset legend { position: relative } fieldset legend::before { counter-increment: fieldset; content: counter(fieldset); position: absolute; left: -34px; background: white; padding: inherit; border-radius: 50%; height: 10px; width: 10px; line-height: 8px; text-align: center; border: 2px solid #e1e1e1; padding: 8px; top: -5px; color: #e1e1e1 } @media screen and (max-width: 640px) {fieldset legend { margin-left: 1.5em } } input.radio { border: 0; background: none } input.text, input.secret, input.password { padding: 0.25em 0.3em; font-family: Lato; font-size: 0.8em } select { padding: 0.55em 0.3em } textarea { min-width: 250px; overflow: auto; padding: 0.25em 0.3em; font-family: Lato; font-size: 0.8em } [placeholder]::-webkit-input-placeholder { color: #999; font-size: inherit } [placeholder]:-moz-placeholder { color: #999; font-size: inherit } [placeholder]::-moz-placeholder { color: #999; font-size: inherit } [placeholder]:-ms-input-placeholder { color: #999; font-size: inherit } label { font-weight: bolder; cursor: pointer } legend { font-size: 18px; font-weight: bold; line-height: 1 } form { display: block } form::after { clear: both; content: ""; display: table } form .buttons { overflow: hidden; margin: 1em 0 } form .buttons button { text-transform: uppercase } form .error { color: #b30015 } form .error input { border-color: #b30015 } form .errorField input, form .errorField select, form .errorField textarea { background: #b30015 } form .field { .line-height: 2 } form.marginal .field { display: flex; margin-top: 0.5em; flex-flow: row wrap } @media screen and (max-width: 640px) {form.marginal .field { flex-flow: column wrap } } form.marginal .field label { flex: 1 1 20% } form.marginal .field input, form.marginal .field select, form.marginal .field textarea { flex: 1 1 70% } form.marginal .multiple { margin-bottom: -2em } form.marginal .multiple label { width: auto; float: none } form.marginal .multiple .field { margin-bottom: 0; position: relative; top: -2em; left: 11.5em } form.marginal .result label { width: auto; float: none; font-weight: normal } form.marginal .result.error { border: 1px solid; margin: 10px 0px; padding: 15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; color: #d8000c; background-color: #ffbaba; background-image: url('/images/icons/exclamation.png') } .filterForm form { display: flex; flex-flow: row wrap } @media screen and (max-width: 768px) {.filterForm form { flex-flow: column wrap } } .filterForm form .field { float: none } @media screen and (max-width: 768px) {.filterForm form .field { display: flex } .filterForm form .field label { min-width: 30% } .filterForm form .field select { min-width: 70% } } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:23 +0200 (0.2097s) */ @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } body #wrapper #preHeader .container { display: grid; grid-row-gap: 1em; display: -ms-grid; grid-template-columns: 20% 60% 20%; grid-template-rows: auto; grid-template-areas: "localeList infoContent localeList"; background-color: #bc9268; padding: 0.5em; box-sizing: border-box } body #wrapper #preHeader .container .infoContent { text-align: center; font-family: 'Times New Roman', Times, serif; color: white; text-transform: uppercase } body #wrapper #preHeader .container .infoContent p { margin-bottom: unset; padding-bottom: unset } body #wrapper #preHeader .container .view.searchForm { margin-bottom: 0 } body #wrapper #preHeader .container .view.searchForm form .field label { display: none } body #wrapper #preHeader .container .view.searchForm form .field input { vertical-align: top; padding: 0.29em 0.3em; box-sizing: border-box; box-shadow: 0px 0px 2px #ccc; width: 100% } body #wrapper #preHeader .container .view.searchForm form .buttons { display: none } @media screen and (max-width: 640px) {body #wrapper #preHeader .container .view.searchForm { display: none } } body #wrapper > header { position: relative; max-width: 1484px; width: 100%; margin: auto; padding: 0 1em; box-sizing: border-box; display: flex; flex-flow: row; justify-content: space-between; flex-flow: row wrap } @media screen and (max-width: 768px) {body #wrapper > header { flex-flow: row nowrap; min-height: 160px; padding-bottom: 2em } } body #wrapper > header #logo { display: flex; justify-content: center; align-items: center; flex: 1 1 100%; margin: 0.5em 0 } @media screen and (max-width: 768px) {body #wrapper > header #logo { z-index: 199; flex: 0 1 calc(100% - 60px); order: 2; position: absolute; margin: 1em auto; text-align: center; left: 0; right: 0; width: 50% } } body #wrapper > header #logo img { max-height: 109px } body #wrapper > header #cart { margin-left: auto; margin-top: -2em; height: 60px } @media screen and (max-width: 768px) {body #wrapper > header #cart { order: 3; align-self: flex-end; margin-top: unset; margin-bottom: 1em; position: absolute; right: 2em; top: 3em } } body #wrapper > header #cart .cartShopForm label { display: initial; position: relative; z-index: 202; padding: 0.3em 2.8em 0.3em 0; box-sizing: border-box; font-size: 0.875em; text-align: right; line-height: 60px; min-height: 2em; z-index: 301 } body #wrapper > header #cart .cartShopForm label::after { background: url('/images/custom/Appearance/13.png') 0 0; content: ''; width: 58px; height: 50px; position: absolute; right: 0; top: 0; z-index: 1; transition: all ease 0.2s } body #wrapper > header #cart .cartShopForm label .cartTitle { display: none; margin-right: 68px } @media screen and (max-width: 640px) {body #wrapper > header #cart .cartShopForm label .cartTitle { display: none } } body #wrapper > header #cart .cartShopForm label .itemsAmount { display: none } body #wrapper > header #cart .cartShopForm label .quantity { background: #fff; color: #000; background-color: #e6e6e6; position: absolute; top: -11px; right: -13px; border-radius: 50%; height: 20px; width: 20px; display: inline-block; line-height: 20px; text-align: center; z-index: 5 } body #wrapper > header #cart .cartShopForm #cartList:checked ~ label::after { background: url('/images/custom/Appearance/13.png') -58px 0 } body #wrapper > header #cart .cartShopForm .cartWrapper .links { margin: 1em 0 } body #wrapper > header #cart .cartShopForm .cartWrapper .links #checkout { background: #fff; color: #000; padding: 0.5em 1em } body #wrapper > header #cart .cartShopForm .cartWrapper .links #checkout:hover { background: #fff } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents { margin-bottom: 0.5em } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents .cartItem .productImage { max-width: 60px } body #wrapper > header #cart .cartShopForm .cartWrapper .itemsAmount { font-size: 0.8em; font-weight: 500; margin-top: 0.5em } body #wrapper > header #cart .cartShopForm .cartWrapper { background: #fafafa; color: #000; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease-in-out } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper { padding-top: 60px } } body #wrapper > header #cart .cartShopForm .cartWrapper .container { position: relative; padding: 2em; max-width: 980px; margin: auto; box-sizing: border-box; height: auto; top: -100%; transition: all ease 0.4s } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper .container { text-align: center } } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul { margin: 2em 0 } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li { list-style: none; display: flex; margin: 1em 0 } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li { flex-direction: column; justify-content: center; align-items: center; margin: 2em 0; padding-bottom: 2em; border-bottom: 1px solid #c8c8c8 } } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .productDescription { display: flex; flex: 1 1 50% } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .productDescription > * { margin: 0 0.5em } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .productDescription h3 { font-size: 1.5em; margin: 0 1em; flex: 1 1 50% } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .productDescription { flex-direction: column; justify-content: center; align-items: center; text-align: center } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .productDescription > * { margin: 1em 0 !important } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .productDescription h3 { font-size: 1em } } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .cartControls .controls { display: flex } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .cartControls .controls a { padding: 0 0.1em; background: #ccc; color: #000; border-radius: 50%; height: 21px; width: 20px; display: block; vertical-align: middle; text-align: center; margin: 0 0.5em; opacity: 0.4 } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .cartControls .controls a:first-child { line-height: 21px } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .cartControls .controls a:last-child { line-height: 22px } body #wrapper > header #cart .cartShopForm .cartWrapper .container .cartContents ul li .cartControls .controls a:hover { opacity: 1 } body #wrapper > header #cart .cartShopForm #cartList { display: none } body #wrapper > header #cart .cartShopForm #cartList:checked ~ .cartWrapper { opacity: 1; visibility: visible; z-index: 299 } body #wrapper > header #cart .cartShopForm #cartList:checked ~ .cartWrapper .container { top: 0 } body #wrapper > header #cart .cartShopForm #cartList:not(:checked) ~ .cartWrapper { transition: all ease 0.4s; transition-delay: 0.1s } body #wrapper > header nav:not(#userMetaNav) { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); flex: 1 1 1000%; min-height: 60px } @media screen and (max-width: 768px) {body #wrapper > header nav:not(#userMetaNav) { flex: 0 1 auto; order: 1; align-self: flex-end; width: 110% } } body #wrapper > header nav:not(#userMetaNav) #mobileMenu { display: none } body #wrapper > header nav:not(#userMetaNav) .label-toggle { display: none } body #wrapper > header nav:not(#userMetaNav) #localeList { display: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper { min-height: inherit; position: relative; margin-top: 60px; font-family: 'Times New Roman', sans-serif; /* * Menu below logo */ /* * Menu next to logo */ } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain { max-width: 1484px; min-height: inherit; padding: 0 1em; box-sizing: border-box; margin: auto; display: flex; justify-content: center; align-items: center; list-style: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.active a { color: #bc9268 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.open > ul { display: block } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li { line-height: 60px; position: relative } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a { display: block; background: #fff; color: #000; padding: 0 1em; transition: all ease 0.3s; font-size: 1.3em; text-transform: uppercase; letter-spacing: 3px; background: transparent; color: #000 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a:hover, body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a:active, body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a:focus { color: #bc9268 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a > .dropdown { transition: all ease 0.2s; padding: 0.5em; margin-left: 5px; position: relative } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a > .dropdown:hover { background: #e6e6e6 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a > .dropdown::after { content: ''; border-style: solid; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin-bottom: 4px; transition: all ease 0.2s; transform: rotate(45deg); -webkit-transform: rotate(45deg) } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a > .dropdown.open::after { transform: rotate(225deg); -webkit-transform: rotate(225deg) } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.open > ul { display: block } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li ul { display: none; position: absolute; top: 100%; min-width: 100%; z-index: 109; background: #ccc; color: #000 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li ul li.subTree a { background: #ccc; color: #000 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li ul li.subTree a:hover { color: #bc9268 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li ul li.subTree a .dropdown { position: absolute; right: 0; top: 0; padding: 0 0.5em } @media screen and (max-width: 768px) {body #wrapper > header nav:not(#userMetaNav) .menuWrapper .label-toggle { position: absolute; right: 1em; top: calc(60px * 0.3); cursor: pointer; padding: 10px 35px 16px 0px; display: block; left: 2em } body #wrapper > header nav:not(#userMetaNav) .menuWrapper .label-toggle span, body #wrapper > header nav:not(#userMetaNav) .menuWrapper .label-toggle span:before, body #wrapper > header nav:not(#userMetaNav) .menuWrapper .label-toggle span:after { height: 4px; width: 35px; background: #000; cursor: pointer; border-radius: 1px; position: absolute; display: block; content: ''; transition: all 0.2s ease-in-out } body #wrapper > header nav:not(#userMetaNav) .menuWrapper .label-toggle span:before { top: -10px } body #wrapper > header nav:not(#userMetaNav) .menuWrapper .label-toggle span:after { bottom: -10px } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ .label-toggle { top: 2em } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ .label-toggle span { background-color: transparent } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ .label-toggle span:before, body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ .label-toggle span:after { top: 0 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ .label-toggle span:before { transform: rotate(45deg) } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ .label-toggle span:after { transform: rotate(-45deg) } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain { height: 0; padding: calc(60px * 1.5) 0 0; opacity: 0; visibility: hidden; align-items: center; text-align: center; flex-flow: column wrap; transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1) } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li { min-height: 60px; height: auto; display: block; width: 100%; margin: 0 auto } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li:hover, body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.open a { background: #ccc; color: #000 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a { display: block } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li a:hover { background: #ccc; color: #000 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree a { position: relative } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree a .dropdown { position: absolute; right: 0; top: 0; padding: 0 1.5em; height: 100% } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree a .dropdown::after { position: absolute; top: 40%; bottom: 0px; height: 0px; right: 50% } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree ul { position: relative; margin-bottom: 1px } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree ul li a .dropdown { position: absolute; right: 0; top: 0; padding: 0 1.5em; height: 100% } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree ul li a .dropdown::after { position: absolute; top: 40%; bottom: 0px; height: 0px; right: 50% } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ ul.navMain { opacity: 1; height: 100vh; visibility: visible } } @media screen and (min-width: 768px) {body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li { position: unset !important } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .megamenu ul, body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li ul ul { display: block } body #wrapper > header nav:not(#userMetaNav) .menuWrapper .megamenu { display: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu { width: 90%; position: absolute; top: 0; display: block; height: 100%; left: 0; right: 0; margin: auto; z-index: 203 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu::after { clear: both; content: ""; display: table } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul { display: flex !important; flex-flow: row wrap; justify-content: center; padding: 2em; box-sizing: border-box; background: #fff; color: #000; background: #fff } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul > li { font-weight: 600; padding: 0 1em } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul > li a:hover { opacity: 0.6 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul > li .dropdown { display: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul > li ul { display: flex; flex-flow: column wrap } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul > li ul li { font-weight: 300 } } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .view.searchForm { max-width: 11em; margin: 0 auto; padding-top: 1.5em; display: none } @media screen and (max-width: 640px) {body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .view.searchForm { display: block; margin-bottom: 0 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .view.searchForm form .field { margin-right: 0; float: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .view.searchForm form .field label { display: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .view.searchForm form .field input { vertical-align: top; padding: 0.29em 0.3em; box-sizing: border-box; box-shadow: 0px 0px 2px #ccc; width: 100% } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li .view.searchForm form .buttons { display: none } } body #wrapper > header nav#userMetaNav { display: none } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:23 +0200 (0.1934s) */ @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } /* Footer at bottom by flexbox method */ /** * Apply directly to html */ html { height: 100% } body { min-height: 100%; height: 100% } #wrapper { min-height: 100%; height: 100vh; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column } header { flex-shrink: 0 } .layout { -webkit-flex: 1 0 auto; /* Safari 6.1+ */ -ms-flex: 1 0 auto; /* IE 10 */ flex: 1 0 auto } footer { flex-shrink: 0 } #cookieNotification { background: #fff; color: #000; position: fixed; bottom: 0; width: 100%; padding: 1em; box-sizing: border-box; text-align: center; border-top: 1px solid #ccc; color: #fff; z-index: 999 } #cookieNotification #infoContainer { display: flex; justify-content: center; align-items: center; flex-flow: row wrap } #cookieNotification #infoContainer form { margin: 0; width: auto } #cookieNotification #infoContainer p { margin: 0 } #cookieNotification #infoContainer a { color: #fff } #cookieNotification #infoContainer a:hover { color: #fff } #cookieNotification #infoContainer .buttons { margin: 0 1em } #cookieNotification #infoContainer .buttons button { background: #b3b3b3; font-size: 0.8em; padding: 0.5em 1em; transition: all ease 0.3s; width: auto; border: 1px solid #999 } #cookieNotification #infoContainer .buttons button:hover { background: #ccc } #wrapper { overflow-x: hidden } #wrapper .infoContent100 { display: flex; flex-direction: column } #wrapper .infoContent100 .row { display: flex; flex-direction: row; margin: 1.5em 0 } @media screen and (max-width: 640px) {#wrapper .infoContent100 .row { flex-direction: column; margin: 0 } } #wrapper .infoContent100 .row .column { flex: 1 1 auto } #wrapper > .layout.introMain main { max-width: 1484px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto } #wrapper > .layout.introMain main .view.infoContent::after { clear: both; content: ""; display: table } #wrapper > .layout.introMain main .view.infoContent .CTA { display: none } #wrapper > .layout.main main { max-width: 1484px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto } #wrapper > .layout.main main .view { /** * Module specific css should be placed in /modules and not here */ } #wrapper > .layout.main main .view.infoContent::after { clear: both; content: ""; display: table } #wrapper > .layout.main main .view.infoContent .CTA { display: none } #wrapper > .layout.misc { max-width: 1484px; padding: 1em; box-sizing: border-box; margin: auto; display: flex; flex-flow: column wrap; justify-content: space-between } #wrapper > .layout.misc main { flex-basis: 100% } #wrapper > .layout.misc aside { flex-basis: 25%; display: none; order: 2 } @media screen and (max-width: 768px) {#wrapper > .layout.misc aside { display: none } } #wrapper > footer { max-width: 1484px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto; margin-top: 2em; border-top: 1px solid #e6e6e6; padding-top: 2em; margin-top: 2em } #wrapper > footer .footerContentWrapper .footerContactForm { display: none } #wrapper > footer .footerContentWrapper .footerContactForm .contact { background: url("/images/") no-repeat #fafafa; background-size: cover; padding: 1em; margin-top: 2em; box-sizing: border-box; text-align: center } #wrapper > footer .footerContentWrapper .footerContactForm .contact .field label { display: none } #wrapper > footer .footerContentWrapper .footerContactForm .contact .field input { flex: 0 1 70%; margin: auto } #wrapper > footer .footerContentWrapper .view.infoContent { max-width: 1484px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto } #wrapper > footer .footerContentWrapper .view.infoContent::after { clear: both; content: ""; display: table } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper { display: flex; justify-content: space-around } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo { border-right: 1px solid #000; text-align: center; width: 100%; letter-spacing: 1px; padding: 3em 0 } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo:last-child { border: none } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo p, #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo a { max-width: 250px; padding: 0 1em; box-sizing: border-box; margin: auto; font-family: 'Times New Roman', sans-serif } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo a { font-weight: bold; font-family: Lato; margin-top: 1.5em; display: block } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo.social img { margin: 0 1.5em } @media screen and (max-width: 768px) {#wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper { flex-direction: column } #wrapper > footer .footerContentWrapper .view.infoContent .footerInfoWrapper .footerInfo { border: none } } #wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper { display: flex; justify-content: space-around } @media screen and (max-width: 768px) {#wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper { flex-direction: column } } #wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper .footerNav { text-align: center; width: 100%; padding: 3em 0; font-weight: bold; font-size: 1.1em; line-height: 1.5em } #wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper .footerNav p, #wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper .footerNav a { max-width: 250px; padding: 0 1em; box-sizing: border-box; margin: auto } #wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper .footerNav a { font-family: Lato; display: block } #wrapper > footer .footerContentWrapper .view.infoContent .footerNavWrapper .footerNav.orgNr { color: #bc9268; margin-top: 1em; display: block } #wrapper > footer .creditsWrapper .credits { max-width: 1484px; width: 100%; box-sizing: border-box; margin: auto; font-size: 0.8em; opacity: 0.8; padding: 2em 1em 1em; border-top: 1px solid #e6e6e6; margin-top: 2em } #wrapper > footer .creditsWrapper .credits a { color: inherit } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:23 +0200 (0.2436s) */ @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } .view.slideshow .cycle-slideshow > li { width: 100%; overflow: hidden; list-style: none } .view.slideshow .cycle-slideshow > li + li { display: none } .view.slideshow .cycle-slideshow > li #description { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(217, 237, 228, 0.90); box-sizing: border-box; width: 25%; height: 50%; display: block } @media screen and (max-width: 980px) {.view.slideshow .cycle-slideshow > li #description { max-width: 400px; min-width: 250px; width: auto; max-height: 400px; min-height: 250px; height: auto } } @media screen and (max-width: 640px) {.view.slideshow .cycle-slideshow > li #description { max-width: 400px; min-width: 250px; width: auto; max-height: 400px; min-height: 250px; height: auto } } .view.slideshow .cycle-slideshow > li #description h1 { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Lato; color: #bc9268; padding: 2em; text-transform: uppercase; text-align: center; font-size: 2vw; font-weight: 400; line-height: 2em } @media screen and (max-width: 640px) {.view.slideshow .cycle-slideshow > li #description h1 { font-size: 2.441em; padding: unset } } .view.slideshow .cycle-slideshow > li .image { position: relative; max-width: 100%; max-height: 600px } .view.slideshow .cycle-slideshow > li .image.full { width: 100%; height: 535px } .view.slideshow .cycle-slideshow > li .image.left { width: 50% } @media screen and (max-width: 640px) {.view.slideshow .cycle-slideshow > li .image.left { width: 100% } } .view.slideshow .cycle-slideshow > li .image.right { width: 50% } @media screen and (max-width: 640px) {.view.slideshow .cycle-slideshow > li .image.right { width: 100% } } .view.slideshow .cycle-pager { display: none; text-align: center; font-size: 3em; color: #808080 } .view.slideshow .cycle-pager .cycle-pager-active { color: #fff } .view.slideshow.Custom #container { position: relative } .view.slideshow.Custom #container img.left { width: 50% } @media screen and (max-width: 640px) {.view.slideshow.Custom #container img.left { width: 100% } } .view.slideshow.Custom #container img.right { width: 50% } @media screen and (max-width: 640px) {.view.slideshow.Custom #container img.right { width: 100% } } .view.slideshow.Custom #container #description { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(217, 237, 228, 0.90); box-sizing: border-box; width: 25%; height: 50%; display: block } @media screen and (max-width: 980px) {.view.slideshow.Custom #container #description { max-width: 400px; min-width: 250px; width: auto; max-height: 400px; min-height: 250px; height: auto } } @media screen and (max-width: 640px) {.view.slideshow.Custom #container #description { max-width: 400px; min-width: 250px; width: auto; max-height: 400px; min-height: 250px; height: auto } } .view.slideshow.Custom #container #description h1 { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Lato; color: #bc9268; padding: 2em; text-transform: uppercase; text-align: center; font-size: 2vw; font-weight: 400; line-height: 2em } @media screen and (max-width: 640px) {.view.slideshow.Custom #container #description h1 { font-size: 2.441em; padding: unset } } .view.contact.formContact { max-width: 300px } .view.news.list ul, .view.news.listAll ul { display: flex; flex-flow: column wrap; justify-content: space-between } .view.news.list ul li, .view.news.listAll ul li { list-style: none; flex: 1 1 calc(100% / 3); padding: 1em; box-sizing: border-box } .view.news.list ul li article, .view.news.listAll ul li article { display: flex; flex-flow: row wrap } .view.news.list ul li article header, .view.news.listAll ul li article header { flex: 0 1 100% } .view.news.list ul li article header time, .view.news.listAll ul li article header time { font-size: 0.8em; margin-top: -0.6180469716em } .view.news.list ul li article .image, .view.news.listAll ul li article .image { flex: 1 1 50%; margin-right: 2em } .view.news.list ul li article .content, .view.news.listAll ul li article .content { flex: 1 1 50%; align-self: center } .view.news.list .meta a, .view.news.listAll .meta a { background: #fff; color: #000; padding: 0.5em 1em } .view.news.show { margin-bottom: 4em } .view.news.show .image img { width: 100%; max-height: 400px; object-fit: cover } .view.news.list h2, .view.news.listAll h2 { background-color: #bc9268; color: white; font-weight: 400; padding: 1em; text-align: center; text-transform: uppercase } .view.news.list h2 a, .view.news.listAll h2 a { color: white } .view.news.list h2 a::hover, .view.news.listAll h2 a::hover, .view.news.list h2 a:hover, .view.news.listAll h2 a:hover { color: white } .view.news.list ul li article, .view.news.listAll ul li article { flex-flow: column wrap; text-align: center } .view.news.list ul li article header, .view.news.listAll ul li article header { display: none; flex: unset } .view.news.list ul li article header time, .view.news.listAll ul li article header time { display: none } .view.news.list ul li article .summary, .view.news.listAll ul li article .summary, .view.news.list ul li article .content, .view.news.listAll ul li article .content { max-width: 850px; font-family: 'Times New Roman', Times, serif; font-size: 24px; line-height: 1em; flex: unset } .view.news.list ul li article a.more, .view.news.listAll ul li article a.more { font-family: 'Lato'; font-weight: 700; font-size: 16px } .view.news.list .meta, .view.news.listAll .meta { display: none } .view.puffList { display: flex; flex-flow: row wrap } .view.puffList article { position: relative; justify-content: space-between; flex-basis: calc((100% / 4) - 2%); margin: 1%; box-sizing: border-box; overflow: hidden } @media screen and (max-width: 768px) {.view.puffList article { flex-basis: calc(100% / 3 - 2%) } } @media screen and (max-width: 640px) {.view.puffList article { flex-basis: calc(100% / 2 - 2%) } } @media screen and (max-width: 480px) {.view.puffList article { flex-basis: calc(100% / 1 - 2%); text-align: center } } .view.puffList article.titleBackground .blockLink { position: absolute; width: 100%; height: 100%; display: block; z-index: 2 } .view.puffList article.titleBackground .image { width: 100%; height: 200px; object-fit: cover; vertical-align: bottom } .view.puffList article.titleBackground .content { background: #ccc; color: #000; background-color: rgba(204, 204, 204, 0.7); position: absolute; width: 100%; height: 50%; left: 0; bottom: 0; padding: 1em; box-sizing: border-box; transition: all ease 0.2s; text-align: center } .view.puffList article.titleBackground .content p:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(transparent 70px, rgba(0, 0, 0, 0.6)) } .view.puffList article.titleBackground .content a { color: #fff } .view.puffList article.titleBackground .content.show { height: 100%; transition: all ease 0.2s } .view.puffList article.titleBackground .content.show p:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(transparent 70px, rgba(0, 0, 0, 0)) } .view.puffList article.standard a img { width: 100%; max-height: 180px; object-fit: cover } .view.puffList article.category.three { flex-basis: calc((100% / 1) - 2%); position: relative } @media screen and (min-width: 980px) {.view.puffList article.category.three { flex-basis: calc((100% / 3) - 2%) } } .view.puffList article.category.three #container { background-color: #000; overflow: hidden; width: auto; height: 500px } .view.puffList article.category.three #container img { transition: all ease-in-out 0.35s; height: 500px; object-fit: cover; transform: scale(1.12); -webkit-transform: scale(1.12); opacity: 1; position: relative; left: 50%; transform: translate(-50%, 0%) scale(1.12); -webkit-transform: translate(-50%, 0%) scale(1.12) } .view.puffList article.category.three #container section#caption:before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content: ''; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s } .view.puffList article.category.three #container section#caption h2 { color: #fff; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all ease-in-out 0.35s } .view.puffList article.category.three #container section#caption p { color: #fff; font-weight: 500; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; z-index: 1; margin: 0 auto; max-width: 300px; -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s } .view.puffList article.category.three #container section#caption a { z-index: 1; margin-top: 1em; color: #bc9268; text-decoration: none; border: 1px solid; box-sizing: border-box; padding: 0.5em 1em; display: block; text-align: center; transform: translate(-50%, 50%) !important; width: 160px; position: absolute; top: 50%; left: 50%; -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s } .view.puffList article.category.three #container:hover img { transition: all ease-in-out 0.35s; opacity: 0.5; position: relative; left: 50%; transform: translate(-50%, 0%) scale(1); -webkit-transform: translate(-50%, 0%) scale(1) } .view.puffList article.category.three #container:hover section#caption h2 { top: 35%; transition: all ease-in-out 0.35s } .view.puffList article.category.three #container:hover section#caption p, .view.puffList article.category.three #container:hover section#caption a { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } .view.puffList article.category.three #container:hover section#caption:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .view.puffList article.category.half { flex-basis: calc((100% / 1) - 2%); position: relative } @media screen and (min-width: 980px) {.view.puffList article.category.half { flex-basis: calc((100% / 2) - 2%); height: 480px } } .view.puffList article.category.half #container { overflow: hidden } .view.puffList article.category.half #container img { transition: all ease-in-out 0.4s; width: 100%; -webkit-filter: grayscale(0%); /* Safari */ filter: grayscale(0%) } .view.puffList article.category.half #container:hover img { transition: all ease-in-out 0.4s; -webkit-filter: grayscale(20%); /* Safari */ filter: grayscale(20%) } .view.puffList article.category.half #container:hover h4 { color: rgba(188, 146, 104, 1) } .view.puffList article.category.half #container:hover .slideIn { transition: all ease-in-out 0.35s; top: 50%; left: 100px; display: block; background-color: rgba(217, 237, 228, 0.90); box-sizing: border-box; padding: 1%; height: 350px; transform: translate(0%, -50%); width: 350px; color: #bc9268 } @media screen and (max-width: 980px) {.view.puffList article.category.half #container:hover .slideIn { top: 30px; left: 30px; bottom: 30px; right: 30px; -webkit-transform: scale(1); opacity: 1; -webkit-transform: scale(1); transform: scale(1); width: unset; height: unset } } .view.puffList article.category.half #container:hover .background.parallax { transition: all ease-in-out 0.35s; top: 0%; left: 0px; display: block; background-color: rgba(205, 194, 210, 0.9); width: 180px; height: 100% } @media screen and (max-width: 980px) {.view.puffList article.category.half #container:hover .background.parallax { display: none } } .view.puffList article.category.half #container h4 { position: absolute; font-size: 2.5em; top: 30%; left: 140px; max-width: 300px; text-transform: uppercase; text-align: center; z-index: 99; color: rgba(255, 255, 255, 1) } @media screen and (max-width: 980px) {.view.puffList article.category.half #container h4 { left: 50%; transform: translate(-50%, -50%) } } .view.puffList article.category.half #container .slideIn { transition: all ease-in-out 0.35s; position: absolute; top: 50%; left: -350px; display: block; background-color: rgba(217, 237, 228, 0.90); box-sizing: border-box; padding: 1%; height: 350px; transform: translate(0%, -50%); width: 350px; color: #bc9268 } .view.puffList article.category.half #container .slideIn p { margin-top: 50%; font-size: 1.4em; text-align: center; word-break: break-word; margin-bottom: 1em } @media screen and (max-width: 980px) {.view.puffList article.category.half #container .slideIn p { margin-top: unset; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } } .view.puffList article.category.half #container .slideIn a { margin-top: 1em; color: #bc9268; text-decoration: none; border: 1px solid; box-sizing: border-box; padding: 0.5em 1em; display: block; text-align: center; transform: translate(50%, 80%); width: 160px } @media screen and (max-width: 980px) {.view.puffList article.category.half #container .slideIn a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%) } } @media screen and (max-width: 980px) {.view.puffList article.category.half #container .slideIn { top: 30px; left: 30px; bottom: 30px; right: 30px; transform: scale(1.5); opacity: 0; width: unset; height: unset; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s } } .view.puffList article.category.half #container .background.parallax { transition: all ease-in-out 0.35s; position: absolute; top: 0%; left: -180px; display: block; background-color: rgba(205, 194, 210, 0.9); width: 180px; height: 100% } .view.product.relationList ul.productList, .view.product.list ul.productList { display: flex; flex-flow: row wrap } .view.product.relationList ul.productList li, .view.product.list ul.productList li { list-style: none; justify-content: space-between; flex-basis: calc((100% / 4) - 1%); padding: 1%; box-sizing: border-box } @media screen and (max-width: 768px) {.view.product.relationList ul.productList li, .view.product.list ul.productList li { flex-basis: calc(100% / 3) } } @media screen and (max-width: 640px) {.view.product.relationList ul.productList li, .view.product.list ul.productList li { flex-basis: calc(100% / 2) } } @media screen and (max-width: 480px) {.view.product.relationList ul.productList li, .view.product.list ul.productList li { flex-basis: calc(100% / 1) } } .view.product.relationList ul.productList li .image, .view.product.list ul.productList li .image { width: 100%; height: auto; overflow: hidden } .view.product.relationList ul.productList li .image img, .view.product.list ul.productList li .image img { width: 100%; height: calc(247.3333333333px); object-fit: cover; transition: all ease 0.2s } .view.product.relationList ul.productList li .image img:hover, .view.product.list ul.productList li .image img:hover { transform: scale(1.005) } .view.product.relationList ul.productList li h2, .view.product.list ul.productList li h2 { font-size: 1.5em } .view.product.relationList .loader ul.loaderList li, .view.product.list .loader ul.loaderList li { list-style: none } .view.product.show { display: flex; flex-flow: row wrap } @media screen and (max-width: 768px) {.view.product.show { flex-flow: column } } .view.product.show .information { flex: 0 1 50%; order: 2 } .view.product.show .information .description { margin-bottom: 2em } .view.product.show .information #variantDataTable { margin: 2em 0 } .view.product.show .information #variantDataTable tr { border-bottom: 1px solid #ccc } .view.product.show .information #variantDataTable tr td { min-width: 100px; padding: 6px } .view.product.show .templateImages { list-style: none; flex: 0 1 50%; padding: 0 2em; box-sizing: border-box; order: 1 } @media screen and (max-width: 768px) {.view.product.show .templateImages { padding: 0 } } .view.product.show .templateImages #templatePicList { display: flex; flex-flow: row wrap } .view.product.show .templateImages #templatePicList .first { flex: 0 0 100% } .view.product.show .templateImages #templatePicList .first img { width: 100% } .view.product.show .templateImages #templatePicList .mini { flex: 0 1 25% } .view.product.show .templateImages #templatePicList .mini img { object-fit: cover; height: 100%; max-height: 150px } .view.product.show .buttons { margin-top: 2em } .view.product.show .buttons button { padding: 1em 2em } .view.product .breadcrumb { font-size: 0.8em; margin: 1em 0; flex: 0 0 100% } .view.product .breadcrumb ul { display: flex } .view.product .breadcrumb ul li { padding-right: 0.5em } .view.product .breadcrumb ul li::after { content: '/'; margin-left: 0.5em } .view.product .information::after { clear: both; content: ""; display: table } .view.product.list ul.productList li .image img { object-fit: contain !important } .view.product.show .buttons button { color: #bc9268; text-decoration: none; border: 1px solid; box-sizing: border-box; padding: 1em 0.5em; display: block; box-sizing: border-box; text-align: center; width: 160px } .view.product.toplist { padding: 3em 2em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); padding: unset !important; background-image: unset !important } .view.product.toplist h2 { font-size: 2rem; text-transform: uppercase; text-align: center; margin-bottom: 2em } .view.product.toplist .productList.toplist { display: flex; flex-flow: row wrap; justify-content: space-around } .view.product.toplist .productList.toplist li { background: #fff; color: #000; list-style: none; justify-content: space-between; flex-basis: calc((100% / 4) - 2%); margin-bottom: 2%; box-sizing: border-box } @media screen and (max-width: 768px) {.view.product.toplist .productList.toplist li { flex-basis: calc(100% / 2 - 2%) } } @media screen and (max-width: 640px) {.view.product.toplist .productList.toplist li { flex-basis: calc(100% / 2 - 2%) } } @media screen and (max-width: 480px) {.view.product.toplist .productList.toplist li { flex-basis: calc(100% / 1) } } .view.product.toplist .productList.toplist li .image { width: 100%; height: auto; box-sizing: border-box; border: 20px solid #fff } .view.product.toplist .productList.toplist li .image img { width: 100%; height: calc(247.3333333333px); object-fit: cover; transition: all ease 0.2s; margin-bottom: -6px } .view.product.toplist .productList.toplist li .description { padding: 2em; box-sizing: border-box } .view.product.toplist .productList.toplist li .description .shortDescription { display: none } .view.product.toplist .productList.toplist li .description h3 a { font-size: 1.2rem; text-transform: uppercase; color: #000 } .view.product.toplist .productList.toplist li .description .discountPrice { display: inline-block; color: #bc9268 } .view.product.toplist .productList.toplist li .description .productPriceRecommended { font-weight: 100; opacity: 0.3; text-decoration: line-through; margin-left: 0.5em } .view.product.toplist .productList.toplist li .description .price { font-weight: 600 } .view.product.toplist .productList.toplist li .description .productShopNow .buttons button { background: #fff; color: #000; text-transform: uppercase; padding: 0.7em 2.5em; border: 2px solid #fff; background: #e6e6e6 } .view.product.toplist h2 { background-color: #cdc2d2; padding: 1em; color: #fff; font-weight: 400 } .view.product.toplist .productList.toplist li .image img { object-fit: contain } @media screen and (max-width: 640px) {.view.product.toplist .productList.toplist li .image img { object-fit: contain } } .view.product.toplist .productList.toplist li .description h3 a { font-size: 0.65em; font-weight: 400 } .view.product.toplist .productList.toplist li .description .shortDescription { display: none } .view.product.toplist .productList.toplist li .description .productPrice .productShopNow { display: none } .view.checkoutShow { display: flex; flex-flow: column wrap } .view.checkoutShow button { color: #bc9268; text-decoration: none; border: 1px solid; box-sizing: border-box; padding: 0.5em 1em; display: block; text-align: center } .view.checkoutShow .boolean.field { display: inline-block !important } .view.checkoutShow a { color: inherit } .view.checkoutShow a:hover { color: #bc9268 } .view.checkoutShow .checkoutTopbar { display: none; flex-flow: row wrap; flex: 1 1 100% } .view.checkoutShow .misc .checkoutProducts table.dataTable { width: 100% } .view.checkoutShow .misc .checkoutProducts table.dataTable thead { font-size: 0.8em; font-weight: 300 } .view.checkoutShow .misc .checkoutProducts table.dataTable tr { border-top: 1px solid #e6e6e6 } .view.checkoutShow .misc .checkoutProducts table.dataTable tr.toPayCharge td.productPriceTotal { font-weight: bold } .view.checkoutShow .misc .checkoutProducts table.dataTable th, .view.checkoutShow .misc .checkoutProducts table.dataTable td { text-align: left; padding: 1em; width: 14% } .view.checkoutShow .misc .checkoutProducts table.dataTable .icon { text-indent: unset } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay ul li { list-style: none; margin: 1em 0; padding: 1em; box-sizing: border-box } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay ul li:nth-child(even) { background: #f2f2f2 } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay ul li dl { display: flex; flex-flow: row wrap } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay ul li dl dt { flex: 0 0 40%; font-weight: bolder } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay ul li dl dd { flex: 0 0 60% } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation { display: flex; flex-flow: row wrap } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation dt { flex: 0 0 40%; font-weight: bolder } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation dd { flex: 0 0 60% } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation dt.toPay, .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation dd.toPay { font-weight: bold } .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation dt.vat, .view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay dl.summation dd.vat { font-size: 0.8em } @media screen and (max-width: 768px) {.view.checkoutShow .misc .checkoutProducts .dataTable { display: none } } @media screen and (min-width: 768px) {.view.checkoutShow .misc .checkoutProducts .alternativeCartDisplay { display: none } } @media screen and (max-width: 640px) {.view.checkoutShow .misc .checkoutProducts { margin-bottom: 2em } } .view.checkoutShow .misc .checkoutProducts .editCart { display: none } .view.checkoutShow .checkoutMoreSales { margin: 2em 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #fafafa; padding: 2em } .view.checkoutShow .checkoutMoreSales fieldset { max-width: 1484px; margin: auto } .view.checkoutShow .checkoutMoreSales .moreSales { display: flex; flex-flow: row wrap; justify-content: space-around } @media screen and (max-width: 640px) {.view.checkoutShow .checkoutMoreSales .moreSales { flex-flow: column wrap } } .view.checkoutShow .checkoutMoreSales .moreSales li { list-style: none; flex: 0 0 33%; text-align: center; padding: 1em; box-sizing: border-box } .view.checkoutShow .checkoutMoreSales .moreSales li .image img { width: 100%; height: 185px; object-fit: cover } .view.checkoutShow .checkoutMoreSales .moreSales li .text .info { display: none } .view.checkoutShow .checkoutMoreSales .moreSales li .frmAddProduct .field { display: none } .view.checkoutShow .checkoutMoreSales .moreSales li .frmAddProduct .buttons { margin: 1em } .view.checkoutShow .checkoutForm .countryForm { display: none } .view.checkoutShow .checkoutForm .paymentForm, .view.checkoutShow .checkoutForm .freightForm { margin-bottom: 2em } .view.checkoutShow .checkoutForm .paymentForm .orderPayment, .view.checkoutShow .checkoutForm .freightForm .orderPayment, .view.checkoutShow .checkoutForm .paymentForm .orderFreight, .view.checkoutShow .checkoutForm .freightForm .orderFreight { text-align: center } .view.checkoutShow .checkoutForm .paymentForm .orderPayment .field, .view.checkoutShow .checkoutForm .freightForm .orderPayment .field, .view.checkoutShow .checkoutForm .paymentForm .orderFreight .field, .view.checkoutShow .checkoutForm .freightForm .orderFreight .field { display: inline-block; clear: none; float: none; text-align: center; background: #f2f2f2; border: 1px solid #e6e6e6; border-radius: 5px; margin: 1em; font-size: 0.8em } .view.checkoutShow .checkoutForm .paymentForm .orderPayment .field:hover, .view.checkoutShow .checkoutForm .freightForm .orderPayment .field:hover, .view.checkoutShow .checkoutForm .paymentForm .orderFreight .field:hover, .view.checkoutShow .checkoutForm .freightForm .orderFreight .field:hover { background: #e6e6e6 } .view.checkoutShow .checkoutForm .paymentForm .orderPayment .field label, .view.checkoutShow .checkoutForm .freightForm .orderPayment .field label, .view.checkoutShow .checkoutForm .paymentForm .orderFreight .field label, .view.checkoutShow .checkoutForm .freightForm .orderFreight .field label { padding: 0.5em 2em; display: block } .view.checkoutShow .checkoutForm .paymentForm .orderPayment .field input, .view.checkoutShow .checkoutForm .freightForm .orderPayment .field input, .view.checkoutShow .checkoutForm .paymentForm .orderFreight .field input, .view.checkoutShow .checkoutForm .freightForm .orderFreight .field input { display: none } .view.checkoutShow .checkoutForm .paymentForm .orderPayment .field input:checked ~ label, .view.checkoutShow .checkoutForm .freightForm .orderPayment .field input:checked ~ label, .view.checkoutShow .checkoutForm .paymentForm .orderFreight .field input:checked ~ label, .view.checkoutShow .checkoutForm .freightForm .orderFreight .field input:checked ~ label { border: 2px solid #5dc204; position: relative } .view.checkoutShow .checkoutForm .paymentForm .orderPayment .field input:checked ~ label::after, .view.checkoutShow .checkoutForm .freightForm .orderPayment .field input:checked ~ label::after, .view.checkoutShow .checkoutForm .paymentForm .orderFreight .field input:checked ~ label::after, .view.checkoutShow .checkoutForm .freightForm .orderFreight .field input:checked ~ label::after { content: "\f058"; font: normal normal normal 1.5em/1 'FontAwesome'; color: #5dc204; position: absolute; top: 0; right: 0 } .view.checkoutShow .checkoutForm .customerAccount .links { text-align: center } .view.checkoutShow .checkoutForm .customerAccount .links a { background: #fff; color: #000; padding: 1em } .view.checkoutShow .checkoutForm .customerAccount .links a:hover { background: #fff } @media screen and (max-width: 640px) {.view.checkoutShow .checkoutForm .customerAccount .links a { display: block; width: 100%; box-sizing: border-box } } @media screen and (max-width: 640px) {.view.checkoutShow .checkoutForm .customerAccount { background: #f5f5f5 } .view.checkoutShow .checkoutForm .customerAccount fieldset legend { margin-left: 1.5em } } .view.checkoutShow .discountForm .field { display: inline-block } .view.checkoutShow .discountForm .field label { display: none } .view.checkoutShow .discountForm .buttons { display: inline-block; vertical-align: middle } .view.checkoutShow .discountForm .buttons button { padding: 0.6em 1em } .view.checkoutShow .customerAccount { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #fafafa; padding: 2em; margin-bottom: 2em } .view.checkoutShow .customerAccount fieldset { max-width: 1484px; margin: auto } .view.checkoutShow .customerAccount fieldset > * { margin: 1em 0 } .view.checkoutShow .orderForm { display: flex; flex-flow: row wrap } .view.checkoutShow .orderForm fieldset { flex: 0 1 50% } .view.checkoutShow .orderForm fieldset:nth-of-type(odd) { padding-right: 2em; box-sizing: border-box } @media screen and (max-width: 640px) {.view.checkoutShow .orderForm fieldset { flex: 0 1 100% } } .view.checkoutShow .orderForm fieldset .field { display: flex; justify-content: space-between; margin-top: 0.5em } @media screen and (max-width: 640px) {.view.checkoutShow .orderForm fieldset .field { flex-flow: column wrap } } .view.checkoutShow .orderForm fieldset .field label { flex: 0 1 30% } .view.checkoutShow .orderForm fieldset .field input, .view.checkoutShow .orderForm fieldset .field select, .view.checkoutShow .orderForm fieldset .field textarea { flex: 0 1 60% } .view.checkoutShow .orderForm fieldset .field.orderDeliverySame label { flex: 0 1 100% } .view.checkoutShow .orderSummary { display: none } .view.receiptTable .logo { display: none } .view.receiptTable .orderSummary dl { display: flex; flex-flow: row wrap } .view.receiptTable .orderSummary dl dt { flex: 0 1 30%; font-weight: bolder } .view.receiptTable .orderSummary dl dd { flex: 0 1 50% } @media screen and (max-width: 640px) {.view.receiptTable .orderSummary dl { flex-flow: column wrap } .view.receiptTable .orderSummary dl dt { flex: 0 1 100%; font-weight: bolder } .view.receiptTable .orderSummary dl dd { flex: 0 1 100% } } .view.receiptTable .orderItems table th, .view.receiptTable .orderItems table td { text-align: left } .view.receiptTable .additionalInformation { display: flex; flex-flow: row wrap } .view.receiptTable .additionalInformation table dl { display: flex; flex-flow: row wrap } .view.receiptTable .additionalInformation table dl dt { flex: 0 1 30%; font-weight: bolder } .view.receiptTable .additionalInformation table dl dd { flex: 0 1 50% } .view.referenceListAll .references { display: flex; flex-flow: column wrap } .view.referenceListAll .references li { margin: 1em; list-style: none; position: relative; justify-content: space-between; flex-basis: calc((100% / 4) - 2%); margin: 1%; box-sizing: border-box; overflow: hidden } @media screen and (max-width: 768px) {.view.referenceListAll .references li { flex-basis: calc(100% / 3 - 2%) } } @media screen and (max-width: 640px) {.view.referenceListAll .references li { flex-basis: calc(100% / 2 - 2%) } } @media screen and (max-width: 480px) {.view.referenceListAll .references li { flex-basis: calc(100% / 1 - 2%); text-align: center } } .view.referenceListAll .references li .referenceImage a img { width: 100%; height: calc(247.3333333333px); object-fit: cover; transition: all ease 0.2s } .view.referenceListAll .references #ajaxReferenceShow { display: flex } .view.referenceListAll .references #ajaxReferenceShow .close { order: 2 } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax { display: flex } @media screen and (max-width: 768px) {.view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax { flex-direction: column-reverse } } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages { flex: 0 1 50%; margin-right: 2em } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages::after { clear: both; content: ""; display: table } @media screen and (max-width: 768px) {.view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages { margin: 2em 0 } } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages .slideshow { padding-top: 362px !important } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages .slideshow li img { width: 100%; height: 342px; object-fit: cover } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages .slideshowPager { display: flex; flex-flow: row wrap } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages .slideshowPager a { flex: 0 1 20% } @media screen and (max-width: 768px) {.view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceImages .slideshowPager a { flex-basis: calc(33% - 5px); margin-right: 5px } } .view.referenceListAll .references #ajaxReferenceShow .referenceShowAjax .referenceText { flex: 0 1 50% } .view.referenceListAll .pagination ul { display: flex } .view.referenceListAll .pagination ul li { list-style: none; margin-right: 0.6em } .view.referenceList .references { display: flex; flex-flow: column wrap } .view.referenceList .references li { margin: 1em; list-style: none; position: relative; justify-content: space-between; flex-basis: calc((100% / 2) - 2%); margin: 1%; box-sizing: border-box; overflow: hidden } @media screen and (max-width: 768px) {.view.referenceList .references li { flex-basis: calc(100% / 2 - 2%) } } @media screen and (max-width: 640px) {.view.referenceList .references li { flex-basis: calc(100% / 1 - 2%) } } @media screen and (max-width: 480px) {.view.referenceList .references li { flex-basis: calc(100% / 1 - 2%); text-align: center } } .view.referenceList .references li .blockLink { position: absolute; height: calc(100% - 2%); width: 100%; display: block; z-index: 10 } .view.referenceList .references li .referenceImage img { width: 100%; height: calc(247.3333333333px); object-fit: cover; transition: all ease 0.2s } .view.referenceList .references li .referenceText { position: absolute; width: 100%; height: calc(100% - 2%); left: -100%; top: 0; background: rgba(0, 65, 106, .8); color: #fff; padding: 1em; box-sizing: border-box; transition: all ease 0.2s; display: flex; justify-content: center; align-items: center; flex-flow: column; text-align: center } .view.referenceList .references li .referenceText a { color: #fff } @media screen and (max-width: 768px) {.view.referenceList .references li .referenceText { left: 0; height: 70%; bottom: 3%; top: unset } } .view.referenceList .references li .referenceText.show { left: 0 } .view.referenceShow { display: flex; flex-direction: column-reverse } .view.referenceShow .referenceImages li { list-style: none } .view.referenceShow .referenceImages .slideshowPager { display: flex; flex-flow: row wrap } .view.referenceShow .referenceImages .slideshowPager a { flex: 0 1 20% } @media screen and (max-width: 768px) {.view.referenceShow .referenceImages .slideshowPager a { flex-basis: calc(33% - 5px); margin-right: 5px } } .view.userCustomerAccount { display: flex; flex-flow: column wrap } .view.userCustomerAccount form { display: flex; flex-flow: row wrap } .view.userCustomerAccount form fieldset { background: #fafafa; color: #000; padding: 2em; box-sizing: border-box; flex: 1 1 49% } .view.userCustomerAccount form fieldset .field { display: flex; flex-flow: row wrap; margin: 0.5em 0 } .view.userCustomerAccount form fieldset .field label { flex: 0 1 30% } .view.userCustomerAccount form fieldset .field input, .view.userCustomerAccount form fieldset .field textarea, .view.userCustomerAccount form fieldset .field select { flex: 1 1 67% } .view.userCustomerAccount form fieldset .field input.checkbox, .view.userCustomerAccount form fieldset .field textarea.checkbox, .view.userCustomerAccount form fieldset .field select.checkbox { flex: 1 1 10% } .view.userCustomerAccount form .buttons { flex: 0 0 100% } .view.customerOrderList table th, .view.customerOrderList table tr, .view.customerOrderList table td { padding: 1em } .view.customerOrderList table tr:nth-child(even) { background: #fafafa } .view.customerOrderShow .orderConfirmation { display: flex; flex-flow: row wrap } .view.customerOrderShow .orderConfirmation .marginal { display: flex; flex-flow: row wrap; max-width: 450px } .view.customerOrderShow .orderConfirmation .marginal dt, .view.customerOrderShow .orderConfirmation .marginal dd { flex: 0 1 44%; padding: 0.5em } .view.customerOrderShow .orderConfirmation .marginal dt:nth-of-type(even) { background: #fafafa } .view.customerOrderShow .orderConfirmation .marginal dd:nth-of-type(even) { background: #fafafa } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable { width: 100%; /* Force table to not be like tables anymore */ } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable thead { font-size: 0.8em; font-weight: 300 } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tr { border-top: 1px solid #e6e6e6 } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tr.toPayCharge td.productPriceTotal { font-weight: bold } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable th, .view.customerOrderShow .orderConfirmation .orderItems table.dataTable td { text-align: left; padding: 1em; width: 14% } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable .icon { text-indent: unset } @media screen and (max-width: 640px) {.view.customerOrderShow .orderConfirmation .orderItems table.dataTable { display: block; /* Hide table headers (but not display: none;, for accessibility) */ } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable thead, .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody, .view.customerOrderShow .orderConfirmation .orderItems table.dataTable th, .view.customerOrderShow .orderConfirmation .orderItems table.dataTable td, .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tr { display: block } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable thead tr { position: absolute; top: -9999px; left: -9999px } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tr { border: 1px solid #ccc } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50% !important } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap } } @media screen and (max-width: 640px) {.view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody td { width: 45% } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody td.productQuantity:before { content: 'Antal:'; padding: 0.5em } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody td.productTitle:before { content: 'Titel:'; padding: 0.5em } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody td.productCustomId:before { content: 'Variant:'; padding: 0.5em } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody td.productPrice:before { content: 'Pris:'; padding: 0.5em } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tbody td.productPriceTotal:before { content: 'Pris total:'; padding: 0.5em } .view.customerOrderShow .orderConfirmation .orderItems table.dataTable tfoot { display: none } } .view.instagram.listImages .header { display: inline-flex; align-items: center } .view.instagram.listImages .header h3 { text-transform: uppercase; color: #bc9268; padding-left: 1em; font-weight: 400 } .view.instagram.listImages .header img.logo { width: 38px } #cookieNotification #infoContainer .message .message p { color: #000 } #cookieNotification #infoContainer .message .message p a:hover, #cookieNotification #infoContainer .message .message p a { color: #bc9268 } /* compiled by scssphp v0.7.5 on Thu, 08 Apr 2021 08:39:23 +0200 (0.1742s) */ @font-face { font-family: 'FontAwesome'; src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?v=4.5.0"); src: url("/css/templates/default/library/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0") format('embedded-opentype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff2'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.woff2?v=4.5.0") format('woff'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.ttf?v=4.5.0") format('truetype'), url("/css/templates/default/library/fontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format('svg'); font-weight: normal; font-style: normal; } @media screen and (min-width: 980px) { } @media screen and (min-width: 768px) { } @media screen and (min-width: 640px) { } @media screen and (min-width: 480px) { }