/* compiled by scssphp v0.7.5 on Tue, 23 Mar 2021 08:32:50 +0100 (0.1844s) */ /** * 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: #63bbdf; text-decoration: none; transition: all ease 0.3s } a:hover { color: #82c9e5 } body { font-family: Roboto; 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: inherit } h1 { font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; position: relative; text-transform: uppercase; letter-spacing: 2px } @media screen and (max-width: 640px) {h1 { font-size: calc(1.5em * 0.8) } } h2 { font-size: 1.5em; text-transform: uppercase; letter-spacing: 2px } @media screen and (max-width: 640px) {h2 { font-size: calc(1.5em * 0.8) } } h3 { font-size: 1.5em } @media screen and (max-width: 640px) {h3 { font-size: calc(1.5em * 0.8) } } h4 { font-size: 1.25em } @media screen and (max-width: 640px) {h4 { font-size: calc(1.25em * 0.8) } } h5 { font-size: 0.75em } @media screen and (max-width: 640px) {h5 { font-size: calc(0.75em * 0.8) } } h6 { font-size: 0.563em } @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: #575756; 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: #63bbdf } html { overflow-x: hidden; color: #575756; 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 } /* compiled by scssphp v0.7.5 on Tue, 23 Mar 2021 08:32:50 +0100 (0.1723s) */ @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 */ /** * 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 } .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 Tue, 23 Mar 2021 08:32:50 +0100 (0.162s) */ @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; } button { border: none; padding: 0.5em 1em; background: #6fb0d9; color: #fff; font-family: Roboto; cursor: pointer; transition: all ease 0.2s; display: inline-block; font-size: 1em; height: 3em; width: 50% } button:hover { background: #8cc0e1 } button:focus { outline: 1px solid #fff } 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 } input.radio { border: 0; background: none } input.text, input.secret, input.password { padding: 0.25em 0.3em; font-family: Roboto; font-size: inherit } select { padding: 0.55em 0.3em; color: #999 } @media screen and (max-width: 640px) {select { margin: 0 } } textarea { min-width: 250px; overflow: auto; padding: 0.25em 0.3em; font-family: Roboto; font-size: inherit } [placeholder]::-webkit-input-placeholder { color: #999; font-size: 0.8em } [placeholder]:-moz-placeholder { color: #999; font-size: 0.8em } [placeholder]::-moz-placeholder { color: #999; font-size: 0.8em } [placeholder]:-ms-input-placeholder { color: #999; font-size: 0.8em } 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; width: 100%; height: 60px } form .error { color: #ffbaba } form .error input { border-color: #ffbaba } form .errorField input, form .errorField select, form .errorField textarea { background: #ffbaba } 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 { display: none; 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 Tue, 23 Mar 2021 08:32:50 +0100 (0.1903s) */ @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 > header { position: relative; width: 100%; margin: auto; padding: 0 1em; box-sizing: border-box; display: flex; flex-flow: row; justify-content: space-between; flex-flow: row wrap } body #wrapper > header #logo { display: flex; justify-content: flex-start; align-items: center; flex: 1 1 50%; margin: 0.5em 0 } @media screen and (max-width: 768px) {body #wrapper > header #logo { z-index: 399 } } body #wrapper > header #logo img { max-height: 100px } body #wrapper > header #phoneNumber { display: flex; flex-direction: row-reverse; flex: 1 1 50%; justify-content: center; align-self: center; font-size: 1.5em } @media screen and (max-width: 768px) {body #wrapper > header #phoneNumber { font-size: 1em } } @media screen and (max-width: 480px) {body #wrapper > header #phoneNumber { font-size: 0.7em } } body #wrapper > header #cart { height: 50px } 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: 50px; min-height: 2em; z-index: 301 } body #wrapper > header #cart .cartShopForm label::after { background: url('/images/custom/Appearance/44.png') 0 0; content: ''; width: 22px; height: 24px; position: absolute; right: 0; top: 0; z-index: 1; transition: all ease 0.2s } body #wrapper > header #cart .cartShopForm label .cartTitle { margin-right: 30px } @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: #6fb0d9; color: #fff; 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/44.png') -21px 0 } body #wrapper > header #cart .cartShopForm .cartWrapper .links { margin: 1em 0 } body #wrapper > header #cart .cartShopForm .cartWrapper .links #checkout { background: #6fb0d9; color: #fff; padding: 0.5em 1em } body #wrapper > header #cart .cartShopForm .cartWrapper .links #checkout:hover { background: #7db8dd } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents { margin-bottom: 0.5em } 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: #fff; color: #000; max-width: 400px; width: 100%; padding: 2em; box-sizing: border-box; height: 100vh; position: fixed; z-index: 299; right: -400px; top: 0; transition: all ease 0.4s } body #wrapper > header #cart .cartShopForm .cartWrapper > * { opacity: 0; transition: opacity 1.6s } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul { margin: 2em 0 } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li { list-style: none; display: flex; margin: 1em 0 } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li { flex-direction: column; justify-content: center; align-items: center; margin: 2em 0; padding-bottom: 2em; border-bottom: 1px solid #ccc } } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .productDescription { display: flex; flex: 1 1 50%; flex-direction: column } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .productDescription > * { margin: 0 1em } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .productDescription h3 { font-size: 1em; flex: 1 1 50% } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .productDescription { flex-direction: column; justify-content: center; align-items: center; text-align: center } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .productDescription > * { margin: 1em 0 !important } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .productDescription h3 { font-size: 1em } } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .cartControls .controls { display: flex } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .cartControls .controls a { padding: 0 0.1em; background: #9dd7eb; color: #000; border-radius: 50%; height: 21px; width: 19px; display: block; vertical-align: middle; text-align: center; margin: 0 0.5em; opacity: 0.4 } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .cartControls .controls a:first-child { line-height: 21px } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .cartControls .controls a:last-child { line-height: 22px } body #wrapper > header #cart .cartShopForm .cartWrapper .cartContents ul li .cartControls .controls a:hover { opacity: 1 } @media screen and (max-width: 768px) {body #wrapper > header #cart .cartShopForm .cartWrapper { max-width: 100%; right: -100%; padding-top: calc(50px + (25px)) } } body #wrapper > header #cart .cartShopForm #cartList { display: none } body #wrapper > header #cart .cartShopForm #cartList:checked ~ .cartWrapper { position: fixed; right: 0 } body #wrapper > header #cart .cartShopForm #cartList:checked ~ .cartWrapper > * { opacity: 1 } body #wrapper > header nav:not(#userMetaNav) { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #6fb0d9; color: #fff; flex: 1 1 1000%; min-height: 50px } 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; /* * Menu below logo */ /* * Menu next to logo */ } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain { max-width: 1360px; min-height: inherit; padding: 0 1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; list-style: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.active > a { color: #45839c } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain > li > a { font-weight: 600 } 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: 50px; position: relative; flex: 1 0 auto; display: flex } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain > li a { display: block; background: #6fb0d9; color: #fff; padding: 0 1em; box-sizing: border-box; transition: all ease 0.3s } 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 { background: #63bbdf; color: #fff } 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: #73c2e2 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain > li a > .dropdown::after { content: ''; border: solid #fff; 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 { background: #6fb0d9; color: #fff } 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(50px * 0.3); cursor: pointer; padding: 10px 35px 16px 0px; display: block } 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: #fff; 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 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: 50px 0 0; opacity: 0; visibility: hidden; align-items: center; text-align: center; flex-flow: column; 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 { height: auto; display: block; width: 100%; margin: 0 auto; flex: unset } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li:hover, body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.open a { background: #6fb0d9; color: #fff; background: #649ec3 } 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: #6fb0d9; color: #fff; background: #598dae } 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:hover { background: #6fb0d9; color: #fff; background: #649ec3 } 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 { display: none } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul { display: block; overflow: visible; position: relative } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li a:hover { background: #6fb0d9; color: #fff; background: #649ec3 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > 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.open > ul li a .dropdown::after { position: absolute; top: 40%; bottom: 0px; height: 0px; right: 50% } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li a { background: #598dae } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li a:hover { background: #436a82 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li ul li a { background: #4e7b98 } body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li ul li a:hover { background: #38586d } body #wrapper > header nav:not(#userMetaNav) .menuWrapper #mobileMenu:checked ~ ul.navMain { opacity: 1; min-height: 100vh; height: 100%; 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: 100%; 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: flex-start; padding-top: 1em; box-sizing: border-box; background: #6fb0d9; color: #fff } body #wrapper > header nav:not(#userMetaNav) .menuWrapper li.open .megamenu > ul > li { font-weight: 600; padding: 0 1em; line-height: 2.5em; margin-bottom: 2em; min-width: 280px } 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#userMetaNav { display: none } body #wrapper > header .headerContact { display: flex; align-items: center; margin-right: 2em; height: 82px } @media screen and (max-width: 768px) {body #wrapper > header .headerContact { display: none } } body #wrapper > header .headerContact .headerContactInfo { float: left; line-height: 67px; padding-right: 1em } body #wrapper > header .headerContact .headerSocial { border-left: 1px solid #ccc; padding-left: 1em; float: right } @media screen and (min-width: 980px) {#wrapper > header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap } #wrapper > header.scrolled { position: fixed; width: 100%; z-index: 120; background: #fff; padding-top: 0 } #wrapper > header.scrolled #logo > a > img { max-width: 50% } #wrapper > header.scrolled #phoneNumber { font-size: 1em } } /* compiled by scssphp v0.7.5 on Tue, 23 Mar 2021 08:32:50 +0100 (0.1715s) */ @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 { position: fixed; bottom: 0; width: 100%; padding: 1em; box-sizing: border-box; text-align: center; background: #6fb0d9; color: #fff; border-top: 1px solid #598dae; 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; height: auto } #cookieNotification #infoContainer a { color: #565657 } #cookieNotification #infoContainer a:hover { color: #000 } #cookieNotification #infoContainer .buttons { margin: 0 1em } #cookieNotification #infoContainer .buttons button { background: #4e7b98; font-size: 0.8em; padding: 0.5em 1em; transition: all ease 0.3s; width: auto; border: 1px solid #436a82 } #cookieNotification #infoContainer .buttons button:hover { background: #598dae } #wrapper > .layout.introMain #main { max-width: 80%; margin: 0 auto } #wrapper > .layout.introMain .infoContent270 { max-width: 75%; box-sizing: border-box; padding: 2em; margin: 0 auto } #wrapper > .layout.main { margin-bottom: 4em } #wrapper > .layout.main main { max-width: 1360px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto } #wrapper > .layout.main main #breadcrumbs { display: none } #wrapper > .layout.main main .view.infoContent { max-width: 800px; margin: auto } #wrapper > .layout.main main .view.infoContent::after { clear: both; content: ""; display: table } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper { background: #efefef; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 3em; margin-bottom: 3em; padding: 3em 0; text-align: center; clear: both } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper::after { clear: both; content: ""; display: table } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent { max-width: 1078px; margin: auto } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff { width: 24%; float: left; position: relative } @media screen and (max-width: 768px) {#wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff { width: 50% } } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff img { transition: all ease 0.3s } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff:hover img { transform: scale(1.2) } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff a.blockLink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2 } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff .circleImage { background: #6fb0d9; width: 186px; height: 186px; border-radius: 50%; margin: auto; position: relative } @media screen and (max-width: 768px) {#wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff .circleImage { width: 125px; height: 125px } } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff .circleImage img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto } #wrapper > .layout.main main .view.infoContent .fourPuffsWrapper .fourPuffsContent .circlePuff p { text-transform: uppercase; font-size: 0.9em; font-weight: 600; margin-top: 1em } #wrapper > .layout.main main .view.infoContent.infoContent273 { position: relative; max-width: 100% } #wrapper > .layout.main main .view.infoContent.infoContent273 > div { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw) } #wrapper > .layout.main main .view.infoContent.infoContent273 #videoText { position: absolute; color: #fff; background: rgba(87, 87, 86, 0.5); bottom: 10%; right: 0; font-size: 1.5em; padding: 2em; box-sizing: border-box; max-width: 50% } #wrapper > .layout.main main .view.infoContent.infoContent273 #videoText h2 { margin: 0 0 1em 0 } #wrapper > .layout.main main .view.infoContent.infoContent273 #videoText p { line-height: 1.2; font-size: 60% } @media screen and (max-width: 768px) {#wrapper > .layout.main main .view.infoContent.infoContent273 #videoText { position: relative; padding: 0.5em; max-width: 100%; bottom: 0.3em; margin: 0; background: transparent; color: #575756 } } #wrapper > .layout.main main .view.infoContent.infoContent100 { margin-bottom: 4em } #wrapper > .layout.main main .view .leftSide img { float: left } @media screen and (max-width: 640px) {#wrapper > .layout.main main .view .leftSide img { float: none; text-align: center } } #wrapper > .layout.main main .view.formContact { margin: 0 auto; width: 60% } #wrapper > .layout.main main .view.formContact button { float: right; width: 20% } #wrapper > .layout.main main .referenceList { float: left; width: 45%; text-align: center } #wrapper > .layout.main main .referenceList::after { clear: both; content: ""; display: table } #wrapper > .layout.main main .referenceList h2 { position: relative; padding-bottom: 2em } #wrapper > .layout.main main .referenceList h2::after { content: ""; position: absolute; left: 35%; bottom: 0; height: 8px; width: 30%; border-bottom: 8px solid #6fb0d9 } #wrapper > .layout.main main .news.list { width: 45%; margin: 0 auto; text-align: center } #wrapper > .layout.main main .news.list::after { clear: both; content: ""; display: table } @media screen and (max-width: 768px) {#wrapper > .layout.main main .news.list { width: 100%; float: none } } #wrapper > .layout.main main .news.list h2 { position: relative; padding-bottom: 2em } #wrapper > .layout.main main .news.list h2::after { content: ""; position: absolute; left: 35%; bottom: 0; height: 8px; width: 30%; border-bottom: 8px solid #6fb0d9 } #wrapper > .layout.main main .news.list ul li { position: relative } #wrapper > .layout.main main .news.list ul li::after { content: ''; position: absolute; left: 35%; bottom: 0; height: 8px; width: 30%; border-bottom: 8px solid #6fb0d9 } #wrapper > .layout.main main .news.list ul li:last-child::after { border: none } #wrapper > .layout.main main .puffList { padding-top: 4em; margin-bottom: 4em } #wrapper > .layout.main main .puffList::after { clear: both; content: ""; display: table } #wrapper > .layout.main main .puffList::before { content: ''; width: 100%; margin-bottom: 4em; border-top: 1px solid #e6e6e6 } #wrapper > .layout.main main .puffList h4 { margin-top: 1em; font-size: 1em; letter-spacing: 2px; text-transform: uppercase; font-weight: 600 } @media screen and (max-width: 768px) {#wrapper > .layout.main main .referenceList, #wrapper > .layout.main main .newsList { float: none; width: 100% } } #wrapper > .layout.main main .puffList { clear: both } #wrapper > .layout.misc { max-width: 1360px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto; display: flex } #wrapper > .layout.misc aside { display: none } #wrapper > .layout.misc main { flex-basis: 100%; max-width: 800px; margin: auto } #wrapper > .layout.misc main #breadcrumbs { margin-top: 1.7em } #wrapper > .layout.misc main #breadcrumbs li { display: inline-block } @media screen and (max-width: 640px) {#wrapper > .layout.misc aside { display: none } #wrapper > .layout.misc main { flex-basis: 100% } } #wrapper > footer { max-width: 1360px; width: 100%; padding: 0 1em; box-sizing: border-box; margin: auto; margin-top: 2em; padding-top: 2em; margin-top: 2em } #wrapper > footer .footerContentWrapper .view.infoContent { max-width: 1360px; width: 100%; box-sizing: border-box; margin: auto } #wrapper > footer .footerContentWrapper .view.infoContent::after { clear: both; content: ""; display: table } #wrapper > footer .footerContentWrapper .view.infoContent .footerContact { clear: both; margin-top: 2em; display: flex; justify-content: space-evenly; flex: 0 1 100% } @media screen and (max-width: 768px) {#wrapper > footer .footerContentWrapper .view.infoContent .footerContact { flex-direction: column } } #wrapper > footer .footerContentWrapper .view.infoContent .footerContact .contactDiv { clear: both; margin-top: 2em; display: flex; flex-direction: column; margin-right: 2em; padding-top: 1em; border-top: 8px solid #6fb0d9; flex: 1 1 20% } @media screen and (max-width: 768px) {#wrapper > footer .footerContentWrapper .view.infoContent .footerContact .contactDiv { margin-right: 0; flex: 1 1 100% } } #wrapper > footer .footerContentWrapper .view.infoContent .footerContact .footerMap { margin-top: 2em } #wrapper > footer .creditsWrapper .credits { max-width: 1360px; 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 } #wrapper #cart { display: none } /* compiled by scssphp v0.7.5 on Tue, 23 Mar 2021 08:32:51 +0100 (0.2007s) */ @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 .description { width: 50%; position: absolute; bottom: 10%; right: 0; padding: 2em; box-sizing: border-box; color: #fff; font-size: 1.2em; font-weight: 600; background: rgba(87, 87, 86, 0.47) } @media screen and (max-width: 768px) {.view.slideshow .cycle-slideshow > li .description { position: relative; width: 100%; background: transparent; color: #9dd7eb !important; font-size: 0.8em; padding: 1em } } .view.slideshow .cycle-pager { display: none } .view.contact.formContactByPhone { max-width: 1360px; width: 100%; text-align: center; margin: 3em auto 0; padding: 2em; box-sizing: border-box; background: url(/images/templates/default/footerContactBg.png) no-repeat; background-size: cover } .view.contact.formContactByPhone .marginal { display: flex; flex-flow: row wrap; justify-content: center; max-width: 80%; width: 40%; margin: auto } .view.contact.formContactByPhone .marginal .field { margin-bottom: 0.5em } .view.contact.formContactByPhone .marginal .field.name { flex: 0 1 49% } .view.contact.formContactByPhone .marginal .field.email { flex: 0 1 49% } .view.contact.formContactByPhone .marginal .field.phone { flex: 0 1 100% } .view.contact.formContactByPhone .marginal .field.errand { flex: 0 1 100% } .view.contact.formContactByPhone .marginal .field label { display: none } .view.contact.formContactByPhone .marginal .field input, .view.contact.formContactByPhone .marginal .field textarea { margin: auto; padding: 0.5em } @media screen and (max-width: 768px) {.view.contact.formContactByPhone .marginal .field.name { flex: 0 1 100% } .view.contact.formContactByPhone .marginal .field.email { flex: 0 1 100% } .view.contact.formContactByPhone .marginal .field.phone { flex: 0 1 100% } .view.contact.formContactByPhone .marginal .field.errand { flex: 0 1 100%; width: 100% } .view.contact.formContactByPhone .marginal .field input, .view.contact.formContactByPhone .marginal .field textarea { margin: unset; min-width: unset } } .view.contact.formContact { max-width: 800px; margin: 2em auto 0 } .view.news.list ul { display: flex; flex-flow: column wrap; justify-content: space-between } .view.news.list ul li { list-style: none; flex: 1 1 calc(100% / 3); padding: 1em; box-sizing: border-box } .view.news.list ul li article { display: flex; flex-flow: row wrap } .view.news.list ul li article header { flex: 0 1 100% } .view.news.list ul li article header time { font-size: 0.8em; margin-top: -0.6180469716em } .view.news.list ul li article .image { flex: 1 1 50%; margin-right: 2em } .view.news.list ul li article .content { flex: 1 1 50%; align-self: center } .view.news.list .meta a { background: #6fb0d9; color: #fff; padding: 0.5em 1em } .view.news.listAll { margin-top: 2em; padding-top: 2em; border-top: 1px solid #e6e6e6 } .view.news.listAll > ul li { list-style: none; padding: 1em } .view.news.listAll > ul li article time { font-size: 0.8em; margin-top: -0.6180469716em } .view.news.listAll .pagination ul { display: flex; flex-flow: row wrap } .view.news.listAll .pagination ul li { list-style: none; margin-right: 0.6em } .view.news.show .image img { width: 100% } .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 { position: absolute; width: 100%; height: 20%; bottom: 0; background: rgba(56, 179, 219, 0.75); 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.puffList article.titleBackground .content a { color: #fff } @media screen and (max-width: 768px) {.view.puffList article.titleBackground .content { left: 0; height: 70% } } .view.puffList article.titleBackground .content.show { left: 0; transition: all ease 0.2s } .view.puffList article.standard a img { width: 100%; max-height: 180px; object-fit: cover } .view.product.list ul.productList { display: flex; flex-flow: row wrap } .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.list ul.productList li { flex-basis: calc(100% / 3) } } @media screen and (max-width: 640px) {.view.product.list ul.productList li { flex-basis: calc(100% / 2) } } @media screen and (max-width: 480px) {.view.product.list ul.productList li { flex-basis: calc(100% / 1) } } .view.product.list ul.productList li .image { width: 100%; height: auto; overflow: hidden } .view.product.list ul.productList li .image img { width: 100%; height: calc(226.6666666667px); object-fit: cover; transition: all ease 0.2s } .view.product.list ul.productList li .image img:hover { transform: scale(1.1) } .view.product.list ul.productList li h2 { font-size: 1.5em } .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.checkoutShow { display: flex; flex-flow: column wrap } .view.checkoutShow a { color: inherit } .view.checkoutShow a:hover { color: #63bbdf } .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 } } .view.checkoutShow .misc .checkoutProducts .editCart { display: none } .view.checkoutShow .checkoutMoreSales { margin: 2em 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #fff; padding: 2em } .view.checkoutShow .checkoutMoreSales fieldset { max-width: 1360px; 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: #6fb0d9; color: #fff; padding: 1em } .view.checkoutShow .checkoutForm .customerAccount .links a:hover { background: #7db8dd } .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: #fff; padding: 2em; margin-bottom: 2em } .view.checkoutShow .customerAccount fieldset { max-width: 1360px; 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: row 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(226.6666666667px); 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: row 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(226.6666666667px); 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 } } /* compiled by scssphp v0.7.5 on Tue, 23 Mar 2021 08:32:51 +0100 (0.1539s) */ @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) { }