/* compiled by scssphp v0.7.5 on Mon, 28 Oct 2024 11:52:32 +0100 (0.5639s) */

 /**
 * Global reset
 */
 /*sub, sup,*/
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, 
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: #a7d34a; text-decoration: none; transition: all ease 0.3s }
a:hover { color: #a7d34a }

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: 2em; font-weight: 400; padding-bottom: 1em; margin-bottom: 1em; position: relative; border-bottom: 2px solid #6b9c00; text-transform: uppercase; letter-spacing: 2px }
@media screen and (max-width: 640px) {h1 { font-size: calc(2em * 0.8) } }

h2 { font-size: 1.5em; font-weight: 400; 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; font-weight: 400 }
@media screen and (max-width: 640px) {h3 { font-size: calc(1.5em * 0.8) } }

h4 { font-size: 1.25em; font-weight: 400 }
@media screen and (max-width: 640px) {h4 { font-size: calc(1.25em * 0.8) } }

h5 { font-size: 0.75em; font-weight: 400 }
@media screen and (max-width: 640px) {h5 { font-size: calc(0.75em * 0.8) } }

h6 { font-size: 0.563em; font-weight: 400 }
@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: #00416a; 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: #a7d34a }

html { overflow-x: hidden; color: #00416a; 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 Mon, 28 Oct 2024 11:52:32 +0100 (0.5629s) */

@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 Mon, 28 Oct 2024 11:52:33 +0100 (0.4982s) */

@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.faq.list { border-bottom: 1px solid #aeaeae }
.view.faq.list ul { list-style: none }
.view.faq.list h1 { margin-bottom: 0.3em }
.view.faq.list .faqInfo { margin-bottom: 1.5em }
.view.faq.list .categoryList { margin-bottom: 3em }
.view.faq.list .categoryList ul li { display: inline-block; border: 1px solid #546a25 }
.view.faq.list .categoryList ul li a { display: block; color: #546a25; text-transform: uppercase; padding: 0.2em 1em; text-decoration: none; font-size: 0.9em; font-weight: 700; letter-spacing: 0.1em }
.view.faq.list .categoryList ul li.active, 
.view.faq.list .categoryList ul li.current, 
.view.faq.list .categoryList ul li:hover { background: #546a25 }
.view.faq.list .categoryList ul li.active a, 
.view.faq.list .categoryList ul li.current a, 
.view.faq.list .categoryList ul li:hover a { color: #fff }
.view.faq.list .questionShow .questionCategory { border: 1px solid #aeaeae; padding: 1em; font-weight: 700 }
.view.faq.list .questionShow .questionCategory span { display: inline-block }
.view.faq.list .questionShow .questionCategory span.categoryTitle { float: left; text-transform: uppercase; letter-spacing: 3px }
.view.faq.list .questionShow .questionCategory span.categoryQuestionLink { float: right; text-align: right; text-transform: uppercase; letter-spacing: 3px; color: #546a25 }
.view.faq.list .questionShow .questionCategory span.categoryQuestionLink a { color: inherit }
.view.faq.list .questionShow .questionCategory span.questionTitle { clear: both; width: 100% }
.view.faq.list .questionShow .questionCategory span.questionTitle h4 { margin-bottom: 0; text-transform: none; font-weight: 700; font-size: 1em; letter-spacing: normal }
.view.faq.list .questionShow .text { padding: 1.5em 0; border-bottom: 1px solid #aeaeae }
.view.faq.list .categoryQuestionList { margin-bottom: 2em }
.view.faq.list .categoryQuestionList h2 { margin-bottom: 0.8em }
.view.faq.list .categoryQuestionList article ul li a { font-weight: 700; color: #546a25 }
.view.faq.list .categoryQuestionList article ul li a:hover { text-decoration: none; color: #546a25 }
/* compiled by scssphp v0.7.5 on Mon, 28 Oct 2024 11:52:33 +0100 (0.5066s) */

@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: #6b9c00; color: #fff; font-family: Roboto; cursor: pointer; transition: all ease 0.2s }
button:hover { background: #89b033 }
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 }
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 Mon, 28 Oct 2024 11:52:34 +0100 (0.662s) */

@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; /*background: #ddd;*/ 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 70%; margin: 1em 0 }
@media screen and (max-width: 768px) {body #wrapper > header #logo { z-index: 399 } }
body #wrapper > header #logo a { display: block; margin: 0 auto }
body #wrapper > header #logo a img { max-height: calc(50px * 2 - 1em) }
body #wrapper > header #contactInfo { position: absolute; z-index: 100; top: 0.5em; left: 65%; font-size: 0.875em; text-transform: uppercase; color: #999 }
body #wrapper > header #contactInfo a { font-weight: 600 }
@media screen and (max-width: 768px) {body #wrapper > header #contactInfo { right: auto; left: 0.5em; top: calc(50px * 2 + 2.55em); color: #ddd }
body #wrapper > header #contactInfo a { color: #fff } }
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: #6b9c00; 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: #6b9c00; color: #fff; padding: 0.5em 1em }
body #wrapper > header #cart .cartShopForm .cartWrapper .links #checkout:hover { background: #7aa61a }
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: #94d600; color: #fff; 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: #6b9c00; 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; margin: 0 auto; min-height: inherit; padding: 0 1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; list-style: none; text-transform: uppercase; font-size: 0.925em }
body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.active > a { color: #d3e9a5 }
body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain > li > a { font-weight: 400; width: 90%; margin: 0 auto; text-align: center }
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: #6b9c00; 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: #a7d34a; 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: #b0d75c }
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: #6b9c00; 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: #6b9c00; color: #fff; background: #608c00 }
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: #6b9c00; color: #fff; background: #567d00 }
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: #6b9c00; color: #fff; background: #608c00 }
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: #6b9c00; color: #fff; background: #608c00 }
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: #567d00 }
body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li a:hover { background: #405e00 }
body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li ul li a { background: #4b6d00 }
body #wrapper > header nav:not(#userMetaNav) .menuWrapper ul.navMain li.subTree.open > ul li ul li ul li a:hover { background: #364e00 }
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: 2em; box-sizing: border-box; background: #6b9c00; 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 }
/* compiled by scssphp v0.7.5 on Mon, 28 Oct 2024 11:52:34 +0100 (0.5376s) */

@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: #6b9c00; color: #fff; border-top: 1px solid #567d00; 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: #d3e1b3 }
#cookieNotification #infoContainer a:hover { color: #fff }
#cookieNotification #infoContainer .buttons { margin: 0 1em }
#cookieNotification #infoContainer .buttons button { background: #4b6d00; font-size: 0.8em; padding: 0.5em 1em; transition: all ease 0.3s; width: auto; border: 1px solid #405e00 }
#cookieNotification #infoContainer .buttons button:hover { background: #567d00 }

.view.infoContent.infoContent303 a { display: inline-block; margin: 1em }

#wrapper > .layout.main { /*max-width: $siteWidth;*/ }
#wrapper > .layout.main main { width: 100%; /*padding: 0 1em;*/ padding: 0; box-sizing: border-box; margin: auto }
#wrapper > .layout.main main #breadcrumbs { display: none }
#wrapper > .layout.main main .view.infoContent { width: calc(100% - (1.618em * 2)); max-width: calc(800px - 1.618em); padding: 0 1.618em; 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: #6b9c00; 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 .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 .infoContent100 h2 { position: relative; padding-bottom: 2em }
#wrapper > .layout.main main .infoContent100 h2::after { content: ""; position: absolute; left: 35%; bottom: 0; height: 8px; width: 30%; border-bottom: 8px solid #6b9c00 }
#wrapper > .layout.main main .news.list { background: #ddd; margin: calc(1.618em * 2) 0 }
#wrapper > .layout.main main .news.list .content { max-width: 800px; margin: 0 auto; width: calc(100% - (1.618em * 2)); max-width: calc(800px - 1.618em); padding: calc(1.618em * 2) 1.618em 1.618em 1.618em }
#wrapper > .layout.main main .news.list .content ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em }
#wrapper > .layout.main main .news.list .content ul li { position: relative; padding: 0; /*&::after {
 content: '';
 position: absolute;
 left: 35%;
 bottom: 0;
 height: 8px;
 width: 30%;
 border-bottom: 8px solid $primary-color;
 }
 &:last-child::after {
 border: none;
 }*/ }
#wrapper > .layout.main main .news.list .content ul li article header a h3 { margin-bottom: 0 }
#wrapper > .layout.main main .news.list .content ul li article .content { margin: 0; padding: 0.6180469716em 0 }
#wrapper > .layout.main main .news.list .content .meta { text-align: center; position: relative; top: calc(1.618em * 1.5) }
#wrapper > .layout.main main .infoContent224 { padding-top: 1.618em }
#wrapper > .layout.main main .puffList { padding-top: calc(1.618em * 2) }
#wrapper > .layout.main main .puffList::after { clear: both; content: ""; display: table }
#wrapper > .layout.main main .puffList::before { content: ''; width: 100%; margin-bottom: calc(1.618em * 2); /*border-top: 1px solid shade($baseBackgroundColor, 10%);*/ }
#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 .infoContent100, 
#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: 0.5em 0 1.5em 0 }
#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; /*border-top: 1px solid shade($baseBackgroundColor, 10%);*/ 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 #6b9c00; 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 }
/* compiled by scssphp v0.7.5 on Mon, 28 Oct 2024 11:52:35 +0100 (0.5823s) */

@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 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw) }
.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 { clear: both }
.view.slideshow .cycle-slideshow > li .description p:last-child { margin-bottom: 0 }
@media screen and (min-width: 768px) {.view.slideshow .cycle-slideshow > li .description { background: rgba(148, 214, 0, 0.91); width: 100%; position: absolute; bottom: 0; right: 0; padding: 1em 2em; color: #fff } }
.view.slideshow .cycle-slideshow > li .image { position: relative; max-width: 100% }
.view.slideshow .cycle-slideshow > li .image img { max-height: 600px; display: block; position: relative; width: 100%; object-fit: cover; color: blue }
@media screen and (max-width: 768px) {.view.slideshow .cycle-slideshow > li .image img { height: auto !important } }
.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: 300; background: rgba(148, 214, 0, 0.91) }
@media screen and (max-width: 768px) {.view.slideshow .cycle-slideshow > li .description { position: relative; width: 100%; font-size: 0.8em; padding: 1em } }
.view.slideshow .cycle-pager { text-align: center; font-size: 2em }
.view.slideshow .cycle-pager span { color: #94d600 }
.view.slideshow .cycle-pager .cycle-pager-active { color: #a7d34a }
.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.jpg) no-repeat; background-size: cover }
.view.contact.formContactByPhone .marginal { display: flex; flex-flow: row wrap; justify-content: space-between; max-width: 80%; 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: #6b9c00; 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% / 3) - 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: 100%; left: -100%; bottom: 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.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: #a7d34a }
.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: #6b9c00; color: #fff; padding: 1em }
.view.checkoutShow .checkoutForm .customerAccount .links a:hover { background: #7aa61a }
.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% / 3) - 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% / 1) - 2%); margin: 1%; box-sizing: border-box; overflow: hidden }
@media screen and (max-width: 768px) {.view.referenceList .references li { flex-basis: calc(100% / 1 - 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: auto; /*calc(100% - #{$puffsSpacing});*/ left: 0; /*-100%;*/ bottom: 3%; /*top: 0;*/ background: rgba(0, 65, 106, .8); color: #fff; padding: 1em 1em 0 1em; /*1em;*/ box-sizing: border-box; transition: all ease 0.2s; display: flex; justify-content: center; align-items: center; flex-flow: column; line-height: 1em }
.view.referenceList .references li .referenceText > a { color: #fff; display: none }
.view.referenceList .references li .referenceText .referenceTitle { padding-bottom: 0.5em }
.view.referenceList .references li .referenceText .referenceTitle .referenceDate { padding-right: 1em }
.view.referenceList .references li .referenceText .referenceTitle p { text-transform: uppercase; font-weight: 600; display: inline }
.view.referenceList .references li .referenceText .referenceSummary { color: #fff }
.view.referenceList .references li .referenceText .referenceSummary a { color: inherit }
@media screen and (max-width: 768px) {.view.referenceList .references li .referenceText { left: 0; bottom: 3%; top: unset; height: auto; padding-bottom: 0 } }
.view.referenceList .references li .referenceText.show { left: 0 }
.view.referenceShow { display: flex; flex-direction: column-reverse }
.view.referenceShow .referenceImages { min-height: 450px }
.view.referenceShow .referenceImages::after { clear: both; content: ""; display: table }
.view.referenceShow .referenceImages .slideshow { height: auto }
.view.referenceShow .referenceImages .slideshow li { list-style: none; height: auto !important; max-height: 400px; overflow: hidden }
.view.referenceShow .referenceImages .slideshow .slideshowPager { display: flex; flex-flow: row wrap }
.view.referenceShow .referenceImages .slideshow .slideshowPager a { flex: 0 1 20% }
@media screen and (max-width: 768px) {.view.referenceShow .referenceImages .slideshow .slideshowPager a { flex-basis: calc(33% - 5px); margin-right: 5px } }
.view.referenceShow ~ .referenceListAll { margin-top: 9em }
.view.referenceShow ~ .referenceListAll .references { display: flex; flex-flow: row wrap }
.view.referenceShow ~ .referenceListAll .references li { flex-basis: calc((100% / (3 * 2)) - 2%) }
@media screen and (max-width: 768px) {.view.referenceShow ~ .referenceListAll .references li { flex-basis: calc(100% / 3 - 2%) } }
@media screen and (max-width: 640px) {.view.referenceShow ~ .referenceListAll .references li { flex-basis: calc(100% / 2 - 2%) } }
@media screen and (max-width: 480px) {.view.referenceShow ~ .referenceListAll .references li { flex-basis: calc(100% / 1 - 2%); text-align: center } }
.view.referenceShow ~ .referenceListAll .references li .referenceImage a img { height: calc(113.3333333333px) }
/* compiled by scssphp v0.7.5 on Mon, 28 Oct 2024 11:52:36 +0100 (0.4837s) */

@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) { }