@charset "utf-8"; :root { --swiper-navigation-sides-offset: -30px; --structural-content-padding-horizontal-computed: var(--structural-content-padding-horizontal); --structural-content-padding-vertical-computed: var(--structural-content-padding-vertical); --iconheight: 25px; --iconwidth: 25px; --scrollbarthickness: 25px; --overlaygradient-background: linear-gradient(var(--overlaygradient-background-direction), var(--overlaygradient-background-start-colour) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-colourwhite: linear-gradient(var(--overlaygradient-background-direction), var(--colourwhite) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-colourlightgrey: linear-gradient(var(--overlaygradient-background-direction), var(--colourlightgrey) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-colourdarkgrey: linear-gradient(var(--overlaygradient-background-direction), var(--colourdarkgrey) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-colourblack: linear-gradient(var(--overlaygradient-background-direction), var(--colourblack) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour1: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour1) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour1light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour1light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour1dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour1dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour2: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour2) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour2light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour2light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour2dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour2dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour3: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour3) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour3light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour3light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour3dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour3dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour4: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour4) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour4light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour4light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour4dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour4dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour5: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour5) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour5light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour5light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour5dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour5dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour6: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour6) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour6light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour6light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour6dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour6dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour7: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour7) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour7light: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour7light) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); --overlaygradient-background-themecolour7dark: linear-gradient(var(--overlaygradient-background-direction), var(--themecolour7dark) var(--overlaygradient-background-start-pos), var(--overlaygradient-background-end-colour) var(--overlaygradient-background-end-pos)); } @media print { .noprint { display: none; } } /* Resets */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html, section { background-color: var(--page-background-colour); color: var(--page-foreground-colour); } body, html { color: var(--page-foreground-colour); height: 100%; width: 100%; } body { position: relative; overflow-x: hidden; } body, html, div, h1, h2, h3, h4, h5, h6, p, li, img, form, label, input, select, textarea { margin: 0; padding: 0; font-family: var(--font-body-face); font-weight: var(--font-body-weight); font-size: 1rem; font-style: normal; line-height: 1.4rem; border: none; } img, div { outline: none; } ul, ol { padding: 0px; margin: 0px 0px 0px 20px; } section img, .mce-content-body img { max-width: 100%; height: auto; } strong { font-weight: 800; } a { color: var(--link-relaxed-colour); text-decoration: none; } a.imagefancyboxtrigger:hover { cursor: zoom-in; } section a:not(.button) { color: var(--link-relaxed-colour); } section a:not(.button):hover { color: var(--link-hover-colour); text-decoration: var(--link-hover-decoration); } label { display: inline-block; } /* /Resets */ /* Typography */ h1, section h1 { font-family: var(--font-title-face); font-weight: var(--font-title-weight); text-transform: var(--font-title-transform); letter-spacing: var(--font-title-spacing); font-size: var(--font-title-size-h1); line-height: var(--font-title-lineheight-h1); word-wrap: break-word; margin-bottom: calc(var(--structural-content-padding-vertical)/2); } h2, section h2 { font-family: var(--font-title-face); font-weight: var(--font-title-weight); text-transform: var(--font-title-transform); letter-spacing: var(--font-title-spacing); font-size: var(--font-title-size-h2); line-height: var(--font-title-lineheight-h2); word-wrap: break-word; margin-bottom: calc(var(--structural-content-padding-vertical)/2); } h3, section h3 { font-family: var(--font-title-face); font-weight: var(--font-title-weight); text-transform: var(--font-title-transform); letter-spacing: var(--font-title-spacing); font-size: var(--font-title-size-h3); line-height: var(--font-title-lineheight-h3); word-wrap: break-word; margin-bottom: calc(var(--structural-content-padding-vertical)/2); } h4, h5, h6 { font-family: var(--font-title-face); font-weight: var(--font-title-weight); text-transform: var(--font-title-transform); font-size: var(--font-title-size-h456); line-height: var(--font-title-lineheight-h456); margin-bottom: calc(var(--structural-content-padding-vertical)/2); } h1.general-font, h2.general-font, h3.general-font, h4.general-font, h5.general-font, h6.general-font { font-family: var(--font-body-face); font-weight: var(--font-body-weight); font-size: var(--font-body-size); line-height: var(--font-body-lineheight); } p, li, label { font-size: var(--font-body-size); line-height: var(--font-body-lineheight); } /* /Typography */ /* BG and FG colours */ .bg-colourwhite { background-color: var(--colourwhite) !important; } .bg-colourlightgrey { background-color: var(--colourlightgrey) !important; } .bg-colourdarkgrey { background-color: var(--colourdarkgrey) !important; } .bg-colourblack { background-color: var(--colourblack) !important; } .bg-themecolour1 { background-color: var(--themecolour1) !important; } .bg-themecolour1light { background-color: var(--themecolour1light) !important; } .bg-themecolour1dark { background-color: var(--themecolour1dark) !important; } .bg-themecolour2 { background-color: var(--themecolour2) !important; } .bg-themecolour2light { background-color: var(--themecolour2light) !important; } .bg-themecolour2dark { background-color: var(--themecolour2dark) !important; } .bg-themecolour3 { background-color: var(--themecolour3) !important; } .bg-themecolour3light { background-color: var(--themecolour3light) !important; } .bg-themecolour3dark { background-color: var(--themecolour3dark) !important; } .bg-themecolour4 { background-color: var(--themecolour4) !important; } .bg-themecolour4light { background-color: var(--themecolour4light) !important; } .bg-themecolour4dark { background-color: var(--themecolour4dark) !important; } .bg-themecolour5 { background-color: var(--themecolour5) !important; } .bg-themecolour5light { background-color: var(--themecolour5light) !important; } .bg-themecolour5dark { background-color: var(--themecolour5dark) !important; } .bg-themecolour6 { background-color: var(--themecolour6) !important; } .bg-themecolour6light { background-color: var(--themecolour6light) !important; } .bg-themecolour6dark { background-color: var(--themecolour6dark) !important; } .bg-themecolour7 { background-color: var(--themecolour7) !important; } .bg-themecolour7light { background-color: var(--themecolour7light) !important; } .bg-themecolour7dark { background-color: var(--themecolour7dark) !important; } .fg-colourwhite { color: var(--colourwhite) !important; } .fg-colourlightgrey { color: var(--colourlightgrey) !important; } .fg-colourdarkgrey { color: var(--colourdarkgrey) !important; } .fg-colourblack { color: var(--colourblack) !important; } .fg-themecolour1 { color: var(--themecolour1) !important; } .fg-themecolour1light { color: var(--themecolour1light) !important; } .fg-themecolour1dark { color: var(--themecolour1dark) !important; } .fg-themecolour2 { color: var(--themecolour2) !important; } .fg-themecolour2light { color: var(--themecolour2light) !important; } .fg-themecolour2dark { color: var(--themecolour2dark) !important; } .fg-themecolour3 { color: var(--themecolour3) !important; } .fg-themecolour3light { color: var(--themecolour3light) !important; } .fg-themecolour3dark { color: var(--themecolour3dark) !important; } .fg-themecolour4 { color: var(--themecolour4) !important; } .fg-themecolour4light { color: var(--themecolour4light) !important; } .fg-themecolour4dark { color: var(--themecolour4dark) !important; } .fg-themecolour5 { color: var(--themecolour5) !important; } .fg-themecolour5light { color: var(--themecolour5light) !important; } .fg-themecolour5dark { color: var(--themecolour5dark) !important; } .fg-themecolour6 { color: var(--themecolour6) !important; } .fg-themecolour6light { color: var(--themecolour6light) !important; } .fg-themecolour6dark { color: var(--themecolour6dark) !important; } .fg-themecolour7 { color: var(--themecolour7) !important; } .fg-themecolour7light { color: var(--themecolour7light) !important; } .fg-themecolour7dark { color: var(--themecolour7dark) !important; } /* Following chunk might not be needed if the subsequent rules work universally .fg-colourwhite p a:not(.button),.fg-colourwhite label a:not(.button){color:var(--colourlightgrey);} .fg-colourlightgrey p a:not(.button),.fg-colourlightgrey label a:not(.button){color:var(--colourwhite);} .fg-colourdarkgrey p a:not(.button),.fg-colourdarkgrey label a:not(.button){color:var(--colourblack);} .fg-colourblack p a:not(.button),.fg-colourblack label a:not(.button){color:var(--colourdarkgrey);} .fg-themecolour1 p a:not(.button),.fg-themecolour1 label a:not(.button){color:var(--themecolour1light);} .fg-themecolour1light p a:not(.button),.fg-themecolour1light label a:not(.button){color:var(--themecolour1dark);} .fg-themecolour1dark p a:not(.button),.fg-themecolour1dark label a:not(.button){color:var(--themecolour1light);} .fg-themecolour2 p a:not(.button),.fg-themecolour2 label a:not(.button){color:var(--themecolour2light);} .fg-themecolour2light p a:not(.button),.fg-themecolour2light label a:not(.button){color:var(--themecolour2dark);} .fg-themecolour2dark p a:not(.button),.fg-themecolour2dark label a:not(.button){color:var(--themecolour2light);} .fg-themecolour3 p a:not(.button),.fg-themecolour3 label a:not(.button){color:var(--themecolour3light);} .fg-themecolour3light p a:not(.button),.fg-themecolour3light label a:not(.button){color:var(--themecolour3dark);} .fg-themecolour3dark p a:not(.button),.fg-themecolour3dark label a:not(.button){color:var(--themecolour3light);} .fg-themecolour4 p a:not(.button),.fg-themecolour4 label a:not(.button){color:var(--themecolour4light);} .fg-themecolour4light p a:not(.button),.fg-themecolour4light label a:not(.button){color:var(--themecolour4dark);} .fg-themecolour4dark p a:not(.button),.fg-themecolour4dark label a:not(.button){color:var(--themecolour4light);} .fg-themecolour5 p a:not(.button),.fg-themecolour5 label a:not(.button){color:var(--themecolour5light);} .fg-themecolour5light p a:not(.button),.fg-themecolour5light label a:not(.button){color:var(--themecolour5dark);} .fg-themecolour5dark p a:not(.button),.fg-themecolour5dark label a:not(.button){color:var(--themecolour5light);} .fg-themecolour6 p a:not(.button),.fg-themecolour6 label a:not(.button){color:var(--themecolour6light);} .fg-themecolour6light p a:not(.button),.fg-themecolour6light label a:not(.button){color:var(--themecolour6dark);} .fg-themecolour6dark p a:not(.button),.fg-themecolour6dark label a:not(.button){color:var(--themecolour6light);} .fg-themecolour7 p a:not(.button),.fg-themecolour7 label a:not(.button){color:var(--themecolour7light);} .fg-themecolour7light p a:not(.button),.fg-themecolour7light label a:not(.button){color:var(--themecolour7dark);} .fg-themecolour7dark p a:not(.button),.fg-themecolour7dark label a:not(.button){color:var(--themecolour7light);} .fg-colourwhite p a:not(.button):hover,.fg-colourwhite label a:not(.button):hover{color:var(--colourlightgrey);} .fg-colourlightgrey p a:not(.button):hover,.fg-colourlightgrey label a:not(.button):hover{color:var(--colourwhite);} .fg-colourdarkgrey p a:not(.button):hover,.fg-colourdarkgrey label a:not(.button):hover{color:var(--colourblack);} .fg-colourblack p a:not(.button):hover,.fg-colourblack label a:not(.button):hover{color:var(--colourdarkgrey);} .fg-themecolour1 p a:not(.button):hover,.fg-themecolour1 label a:not(.button):hover{color:var(--themecolour1light);} .fg-themecolour1light p a:not(.button):hover,.fg-themecolour1light label a:not(.button):hover{color:var(--themecolour1dark);} .fg-themecolour1dark p a:not(.button):hover,.fg-themecolour1dark label a:not(.button):hover{color:var(--themecolour1light);} .fg-themecolour2 p a:not(.button):hover,.fg-themecolour2 label a:not(.button):hover{color:var(--themecolour2light);} .fg-themecolour2light p a:not(.button):hover,.fg-themecolour2light label a:not(.button):hover{color:var(--themecolour2dark);} .fg-themecolour2dark p a:not(.button):hover,.fg-themecolour2dark label a:not(.button):hover{color:var(--themecolour2light);} .fg-themecolour3 p a:not(.button):hover,.fg-themecolour3 label a:not(.button):hover{color:var(--themecolour3light);} .fg-themecolour3light p a:not(.button):hover,.fg-themecolour3light label a:not(.button):hover{color:var(--themecolour3dark);} .fg-themecolour3dark p a:not(.button):hover,.fg-themecolour3dark label a:not(.button):hover{color:var(--themecolour3light);} .fg-themecolour4 p a:not(.button):hover,.fg-themecolour4 label a:not(.button):hover{color:var(--themecolour4light);} .fg-themecolour4light p a:not(.button):hover,.fg-themecolour4light label a:not(.button):hover{color:var(--themecolour4dark);} .fg-themecolour4dark p a:not(.button):hover,.fg-themecolour4dark label a:not(.button):hover{color:var(--themecolour4light);} .fg-themecolour5 p a:not(.button):hover,.fg-themecolour5 label a:not(.button):hover{color:var(--themecolour5light);} .fg-themecolour5light p a:not(.button):hover,.fg-themecolour5light label a:not(.button):hover{color:var(--themecolour5dark);} .fg-themecolour5dark p a:not(.button):hover,.fg-themecolour5dark label a:not(.button):hover{color:var(--themecolour5light);} .fg-themecolour6 p a:not(.button):hover,.fg-themecolour6 label a:not(.button):hover{color:var(--themecolour6light);} .fg-themecolour6light p a:not(.button):hover,.fg-themecolour6light label a:not(.button):hover{color:var(--themecolour6dark);} .fg-themecolour6dark p a:not(.button):hover,.fg-themecolour6dark label a:not(.button):hover{color:var(--themecolour6light);} .fg-themecolour7 p a:not(.button):hover,.fg-themecolour7 label a:not(.button):hover{color:var(--themecolour7light);} .fg-themecolour7light p a:not(.button):hover,.fg-themecolour7light label a:not(.button):hover{color:var(--themecolour7dark);} .fg-themecolour7dark p a:not(.button):hover,.fg-themecolour7dark label a:not(.button):hover{color:var(--themecolour7light);} */ .fg-colourwhite a:not(.button) { color: var(--colourlightgrey); } .fg-colourlightgrey a:not(.button) { color: var(--colourwhite); } .fg-colourdarkgrey a:not(.button) { color: var(--colourblack); } .fg-colourblack a:not(.button) { color: var(--colourdarkgrey); } .fg-themecolour1 a:not(.button) { color: var(--themecolour1light); } .fg-themecolour1light a:not(.button) { color: var(--themecolour1dark); } .fg-themecolour1dark a:not(.button) { color: var(--themecolour1light); } .fg-themecolour2 a:not(.button) { color: var(--themecolour2light); } .fg-themecolour2light a:not(.button) { color: var(--themecolour2dark); } .fg-themecolour2dark a:not(.button) { color: var(--themecolour2light); } .fg-themecolour3 a:not(.button) { color: var(--themecolour3light); } .fg-themecolour3light a:not(.button) { color: var(--themecolour3dark); } .fg-themecolour3dark a:not(.button) { color: var(--themecolour3light); } .fg-themecolour4 a:not(.button) { color: var(--themecolour4light); } .fg-themecolour4light a:not(.button) { color: var(--themecolour4dark); } .fg-themecolour4dark a:not(.button) { color: var(--themecolour4light); } .fg-themecolour5 a:not(.button) { color: var(--themecolour5light); } .fg-themecolour5light a:not(.button) { color: var(--themecolour5dark); } .fg-themecolour5dark a:not(.button) { color: var(--themecolour5light); } .fg-themecolour6 a:not(.button) { color: var(--themecolour6light); } .fg-themecolour6light a:not(.button) { color: var(--themecolour6dark); } .fg-themecolour6dark a:not(.button) { color: var(--themecolour6light); } .fg-themecolour7 a:not(.button) { color: var(--themecolour7light); } .fg-themecolour7light a:not(.button) { color: var(--themecolour7dark); } .fg-themecolour7dark a:not(.button) { color: var(--themecolour7light); } .fg-colourwhite a:not(.button):hover { color: var(--colourlightgrey); } .fg-colourlightgrey a:not(.button):hover { color: var(--colourwhite); } .fg-colourdarkgrey a:not(.button):hover { color: var(--colourblack); } .fg-colourblack a:not(.button):hover { color: var(--colourdarkgrey); } .fg-themecolour1 a:not(.button):hover { color: var(--themecolour1light); } .fg-themecolour1light a:not(.button):hover { color: var(--themecolour1dark); } .fg-themecolour1dark a:not(.button):hover { color: var(--themecolour1light); } .fg-themecolour2 a:not(.button):hover { color: var(--themecolour2light); } .fg-themecolour2light a:not(.button):hover { color: var(--themecolour2dark); } .fg-themecolour2dark a:not(.button):hover { color: var(--themecolour2light); } .fg-themecolour3 a:not(.button):hover { color: var(--themecolour3light); } .fg-themecolour3light a:not(.button):hover { color: var(--themecolour3dark); } .fg-themecolour3dark a:not(.button):hover { color: var(--themecolour3light); } .fg-themecolour4 a:not(.button):hover { color: var(--themecolour4light); } .fg-themecolour4light a:not(.button):hover { color: var(--themecolour4dark); } .fg-themecolour4dark a:not(.button):hover { color: var(--themecolour4light); } .fg-themecolour5 a:not(.button):hover { color: var(--themecolour5light); } .fg-themecolour5light a:not(.button):hover { color: var(--themecolour5dark); } .fg-themecolour5dark a:not(.button):hover { color: var(--themecolour5light); } .fg-themecolour6 a:not(.button):hover { color: var(--themecolour6light); } .fg-themecolour6light a:not(.button):hover { color: var(--themecolour6dark); } .fg-themecolour6dark a:not(.button):hover { color: var(--themecolour6light); } .fg-themecolour7 a:not(.button):hover { color: var(--themecolour7light); } .fg-themecolour7light a:not(.button):hover { color: var(--themecolour7dark); } .fg-themecolour7dark a:not(.button):hover { color: var(--themecolour7light); } .button.fg-colourwhite { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=colourwhite) !important; } .button.fg-colourlightgrey { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=colourblack) !important; } .button.fg-colourdarkgrey { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=colourblack) !important; } .button.fg-colourblack { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=colourblack) !important; } .button.fg-themecolour1 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour1) !important; } .button.fg-themecolour1light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour1light) !important; } .button.fg-themecolour1dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour1dark) !important; } .button.fg-themecolour2 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour2) !important; } .button.fg-themecolour2light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour2light) !important; } .button.fg-themecolour2dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour2dark) !important; } .button.fg-themecolour3 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour3) !important; } .button.fg-themecolour3light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour3light) !important; } .button.fg-themecolour3dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour3dark) !important; } .button.fg-themecolour4 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour4) !important; } .button.fg-themecolour4light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour4light) !important; } .button.fg-themecolour4dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour4dark) !important; } .button.fg-themecolour5 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour5) !important; } .button.fg-themecolour5light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour5light) !important; } .button.fg-themecolour5dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour5dark) !important; } .button.fg-themecolour6 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour6) !important; } .button.fg-themecolour6light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour6light) !important; } .button.fg-themecolour6dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour6dark) !important; } .button.fg-themecolour7 { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour7) !important; } .button.fg-themecolour7light { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour7light) !important; } .button.fg-themecolour7dark { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour7dark) !important; } .button.fg-colourwhite.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=colourwhite) !important; } .button.fg-colourlightgrey.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=colourblack) !important; } .button.fg-colourdarkgrey.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=colourblack) !important; } .button.fg-colourblack.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=colourblack) !important; } .button.fg-themecolour1.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour1) !important; } .button.fg-themecolour1light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour1light) !important; } .button.fg-themecolour1dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour1dark) !important; } .button.fg-themecolour2.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour2) !important; } .button.fg-themecolour2light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour2light) !important; } .button.fg-themecolour2dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour2dark) !important; } .button.fg-themecolour3.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour3) !important; } .button.fg-themecolour3light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour3light) !important; } .button.fg-themecolour3dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour3dark) !important; } .button.fg-themecolour4.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour4) !important; } .button.fg-themecolour4light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour4light) !important; } .button.fg-themecolour4dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour4dark) !important; } .button.fg-themecolour5.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour5) !important; } .button.fg-themecolour5light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour5light) !important; } .button.fg-themecolour5dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour5dark) !important; } .button.fg-themecolour6.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour6) !important; } .button.fg-themecolour6light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour6light) !important; } .button.fg-themecolour6dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour6dark) !important; } .button.fg-themecolour7.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour7) !important; } .button.fg-themecolour7light.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour7light) !important; } .button.fg-themecolour7dark.left { background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour7dark) !important; } .button.fg-colourwhite.with-border { border-color: var(--colourwhite) !important; } .button.fg-colourlightgrey.with-border { border-color: var(--colourlightgrey) !important; } .button.fg-colourdarkgrey.with-border { border-color: var(--colourdarkgrey) !important; } .button.fg-colourblack.with-border { border-color: var(--colourblack) !important; } .button.fg-themecolour1.with-border { border-color: var(--themecolour1) !important; } .button.fg-themecolour1light.with-border { border-color: var(--themecolour1light) !important; } .button.fg-themecolour1dark.with-border { border-color: var(--themecolour1dark) !important; } .button.fg-themecolour2.with-border { border-color: var(--themecolour2) !important; } .button.fg-themecolour2light.with-border { border-color: var(--themecolour2light) !important; } .button.fg-themecolour2dark.with-border { border-color: var(--themecolour2dark) !important; } .button.fg-themecolour3.with-border { border-color: var(--themecolour3) !important; } .button.fg-themecolour3light.with-border { border-color: var(--themecolour3light) !important; } .button.fg-themecolour3dark.with-border { border-color: var(--themecolour3dark) !important; } .button.fg-themecolour4.with-border { border-color: var(--themecolour4) !important; } .button.fg-themecolour4light.with-border { border-color: var(--themecolour4light) !important; } .button.fg-themecolour4dark.with-border { border-color: var(--themecolour4dark) !important; } .button.fg-themecolour5.with-border { border-color: var(--themecolour5) !important; } .button.fg-themecolour5light.with-border { border-color: var(--themecolour5light) !important; } .button.fg-themecolour5dark.with-border { border-color: var(--themecolour5dark) !important; } .button.fg-themecolour6.with-border { border-color: var(--themecolour6) !important; } .button.fg-themecolour6light.with-border { border-color: var(--themecolour6light) !important; } .button.fg-themecolour6dark.with-border { border-color: var(--themecolour6dark) !important; } .button.fg-themecolour7.with-border { border-color: var(--themecolour7) !important; } .button.fg-themecolour7light.with-border { border-color: var(--themecolour7light) !important; } .button.fg-themecolour7dark.with-border { border-color: var(--themecolour7dark) !important; } /* /BG and FG colours */ /* Structural */ .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } .m-0 { margin: 0 !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mr-0, .mx-0 { margin-right: 0 !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .ml-0, .mx-0 { margin-left: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1, .my-1 { margin-top: 0.25rem !important; } .mr-1, .mx-1 { margin-right: 0.25rem !important; } .mb-1, .my-1 { margin-bottom: 0.25rem !important; } .ml-1, .mx-1 { margin-left: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mr-2, .mx-2 { margin-right: 0.5rem !important; } .mb-2, .my-2 { margin-bottom: 0.5rem !important; } .ml-2, .mx-2 { margin-left: 0.5rem !important; } .m-3 { margin: 1rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mr-3, .mx-3 { margin-right: 1rem !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-3, .mx-3 { margin-left: 1rem !important; } .m-4 { margin: 1.5rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mr-4, .mx-4 { margin-right: 1.5rem !important; } .mb-4, .my-4 { margin-bottom: 1.5rem !important; } .ml-4, .mx-4 { margin-left: 1.5rem !important; } .m-5 { margin: 3rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .mr-5, .mx-5 { margin-right: 3rem !important; } .mb-5, .my-5 { margin-bottom: 3rem !important; } .ml-5, .mx-5 { margin-left: 3rem !important; } .text-right { text-align: right; } .text-left { text-align: left; } .text-center { text-align: center; } .rightfloat { float: right !important; margin-left: 20px; margin-bottom: 10px; } .leftfloat { float: left; margin-right: 20px; margin-bottom: 10px; } .clamp-1, .clamp-2, .clamp-3, .clamp-4, .clamp-5, .clamp-6, .clamp-7, .clamp-8, .clamp-9, .clamp-10 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-1 { line-clamp: 1; -webkit-line-clamp: 1; } .clamp-2 { line-clamp: 2; -webkit-line-clamp: 2; } .clamp-3 { line-clamp: 3; -webkit-line-clamp: 3; } .clamp-4 { line-clamp: 4; -webkit-line-clamp: 4; } .clamp-5 { line-clamp: 5; -webkit-line-clamp: 5; } .clamp-6 { line-clamp: 6; -webkit-line-clamp: 6; } .clamp-7 { line-clamp: 7; -webkit-line-clamp: 7; } .clamp-8 { line-clamp: 8; -webkit-line-clamp: 8; } .clamp-9 { line-clamp: 9; -webkit-line-clamp: 9; } .clamp-10 { line-clamp: 10; -webkit-line-clamp: 10; } section { position: relative; z-index: 1; } section .main { position: relative; z-index: 1; } section .parallaxbackground { position: relative; } .inner { margin: 0px auto; max-width: 1200px; position: relative; width: calc(100% - 2*var(--structural-content-padding-horizontal-computed)); } .bigger-inner { margin: 0 auto; margin: 0px auto; max-width: 1500px; position: relative; width: calc(100% - 2*var(--structural-content-padding-horizontal-computed)); } .columnwrapper { display: flex; flex-wrap: wrap; /*justify-content:center;*/ justify-content: left; padding-bottom: calc(var(--structural-content-padding-vertical-computed) - var(--structural-grid-column-spacing)); } /*.columnwrapper.left{ justify-content:left; }*/ .columnwrapper+.columnwrapper { margin-top: calc(-1 * (var(--structural-content-padding-vertical-computed) - var(--structural-grid-column-spacing))); } .column2, .column3, .column4, .column5 { margin: 0 var(--structural-grid-column-spacing) var(--structural-grid-column-spacing) 0; overflow: hidden; } .column2.allowoverflow, .column3.allowoverflow, .column4.allowoverflow, .column5.allowoverflow { overflow: visible; } .column1 { flex-basis: 100%; margin: 0 0 var(--structural-grid-column-spacing) 0; } .column2 { flex-basis: calc(50% - var(--structural-grid-column-spacing)/2); } .column3 { flex-basis: calc(33.33% - var(--structural-grid-column-spacing)*2/3); } .column4 { flex-basis: calc(25% - var(--structural-grid-column-spacing)*3/4); } .column5 { flex-basis: calc(20% - var(--structural-grid-column-spacing)*4/5); } .column2:nth-child(2n), .column3:nth-child(3n), .column4:nth-child(4n), .column5:nth-child(5n) { margin-right: 0; } .column2:last-child, .column3:last-child, .column4:last-child, .column5:last-child { margin-right: 0 !important; } section .image-right .columnwrapper { flex-direction: row-reverse; } section .image-right .columnwrapper .column2, section .image-right .columnwrapper .column3, section .image-right .columnwrapper .column4, section .image-right .columnwrapper .column5 { margin: 0 0 var(--structural-grid-column-spacing) var(--structural-grid-column-spacing); } section .image-right .columnwrapper .column2:nth-child(2n), section .image-right .columnwrapper .column3:nth-child(3n), section .image-right .columnwrapper .column4:nth-child(4n), section .image-right .columnwrapper .column5:nth-child(5n), section .image-right .columnwrapper .column2:last-child, section .image-right .columnwrapper .column3:last-child, section .image-right .columnwrapper .column4:last-child, section .image-right .columnwrapper .column5:last-child { margin-left: 0; } @media only screen and (max-width:1080px) { /* Max 3 columns */ .column4, .column5 { flex-basis: calc(33.33% - var(--structural-grid-column-spacing)*2/3); } .column4:nth-child(4n), .column5:nth-child(5n) { margin: 0 var(--structural-grid-column-spacing) var(--structural-grid-column-spacing) 0; } .column4:nth-child(3n), .column5:nth-child(3n) { margin-right: 0; } } @media only screen and (max-width:850px) { /* Max 2 columns */ .column3, .column4, .column5 { flex-basis: calc(50% - var(--structural-grid-column-spacing)/2); } .column3:nth-child(3n), .column4:nth-child(3n), .column5:nth-child(3n), .column4:nth-child(4n), .column5:nth-child(5n) { margin: 0 var(--structural-grid-column-spacing) var(--structural-grid-column-spacing) 0; } .column3:nth-child(2n), .column4:nth-child(2n), .column5:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width:600px) { /* Mobiles - same breakpoint used widely */ .column2, .column3, .column4, .column5 { flex-basis: 100%; margin-right: 0 !important; margin-left: 0 !important; } } .overlaygradient, .overlayimage { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: var(--headerfooter-border-radius); } .overlaygradient { z-index: 5; background: var(--overlaygradient-background); opacity: var(--overlaygradient-opacity); } .overlayimage { z-index: 6; background-image: url(../site/furniture/overlay-default.png); background-repeat: no-repeat; background-position: var(--overlayimage-position) !important; background-size: var(--overlayimage-size); } .overlaygradient.colourwhite { background: var(--overlaygradient-background-colourwhite); } .overlaygradient.colourlightgrey { background: var(--overlaygradient-background-colourlightgrey); } .overlaygradient.colourdarkgrey { background: var(--overlaygradient-background-colourdarkgrey); } .overlaygradient.colourblack { background: var(--overlaygradient-background-colourblack); } .overlaygradient.themecolour1 { background: var(--overlaygradient-background-themecolour1); } .overlaygradient.themecolour1light { background: var(--overlaygradient-background-themecolour1light); } .overlaygradient.themecolour1dark { background: var(--overlaygradient-background-themecolour1dark); } .overlaygradient.themecolour2 { background: var(--overlaygradient-background-themecolour2); } .overlaygradient.themecolour2light { background: var(--overlaygradient-background-themecolour2light); } .overlaygradient.themecolour2dark { background: var(--overlaygradient-background-themecolour2dark); } .overlaygradient.themecolour3 { background: var(--overlaygradient-background-themecolour3); } .overlaygradient.themecolour3light { background: var(--overlaygradient-background-themecolour3light); } .overlaygradient.themecolour3dark { background: var(--overlaygradient-background-themecolour3dark); } .overlaygradient.themecolour4 { background: var(--overlaygradient-background-themecolour4); } .overlaygradient.themecolour4light { background: var(--overlaygradient-background-themecolour4light); } .overlaygradient.themecolour4dark { background: var(--overlaygradient-background-themecolour4dark); } .overlaygradient.themecolour5 { background: var(--overlaygradient-background-themecolour5); } .overlaygradient.themecolour5light { background: var(--overlaygradient-background-themecolour5light); } .overlaygradient.themecolour5dark { background: var(--overlaygradient-background-themecolour5dark); } .overlaygradient.themecolour6 { background: var(--overlaygradient-background-themecolour6); } .overlaygradient.themecolour6light { background: var(--overlaygradient-background-themecolour6light); } .overlaygradient.themecolour6dark { background: var(--overlaygradient-background-themecolour6dark); } .overlaygradient.themecolour7 { background: var(--overlaygradient-background-themecolour7); } .overlaygradient.themecolour7light { background: var(--overlaygradient-background-themecolour7light); } .overlaygradient.themecolour7dark { background: var(--overlaygradient-background-themecolour7dark); } .overlayimage.colourwhite { background-image: url(../site/furniture/overlay-colourwhite.png); } .overlayimage.colourlightgrey { background-image: url(../site/furniture/overlay-colourlightgrey.png); } .overlayimage.colourdarkgrey { background-image: url(../site/furniture/overlay-colourdarkgrey.png); } .overlayimage.colourblack { background-image: url(../site/furniture/overlay-colourblack.png); } .overlayimage.themecolour1 { background-image: url(../site/furniture/overlay-themecolour1.png); } .overlayimage.themecolour1light { background-image: url(../site/furniture/overlay-themecolour1light.png); } .overlayimage.themecolour1dark { background-image: url(../site/furniture/overlay-themecolour1dark.png); } .overlayimage.themecolour2 { background-image: url(../site/furniture/overlay-themecolour2.png); } .overlayimage.themecolour2light { background-image: url(../site/furniture/overlay-themecolour2light.png); } .overlayimage.themecolour2dark { background-image: url(../site/furniture/overlay-themecolour2dark.png); } .overlayimage.themecolour3 { background-image: url(../site/furniture/overlay-themecolour3.png); } .overlayimage.themecolour3light { background-image: url(../site/furniture/overlay-themecolour3light.png); } .overlayimage.themecolour3dark { background-image: url(../site/furniture/overlay-themecolour3dark.png); } .overlayimage.themecolour4 { background-image: url(../site/furniture/overlay-themecolour4.png); } .overlayimage.themecolour4light { background-image: url(../site/furniture/overlay-themecolour4light.png); } .overlayimage.themecolour4dark { background-image: url(../site/furniture/overlay-themecolour4dark.png); } .overlayimage.themecolour5 { background-image: url(../site/furniture/overlay-themecolour5.png); } .overlayimage.themecolour5light { background-image: url(../site/furniture/overlay-themecolour5light.png); } .overlayimage.themecolour5dark { background-image: url(../site/furniture/overlay-themecolour5dark.png); } .overlayimage.themecolour6 { background-image: url(../site/furniture/overlay-themecolour6.png); } .overlayimage.themecolour6light { background-image: url(../site/furniture/overlay-themecolour6light.png); } .overlayimage.themecolour6dark { background-image: url(../site/furniture/overlay-themecolour6dark.png); } .overlayimage.themecolour7 { background-image: url(../site/furniture/overlay-themecolour7.png); } .overlayimage.themecolour7light { background-image: url(../site/furniture/overlay-themecolour7light.png); } .overlayimage.themecolour7dark { background-image: url(../site/furniture/overlay-themecolour7dark.png); } section.mobileonly { display: none; } @media only screen and (max-width:1080px) { /* On/off desktop blocks */ section.desktoponly { display: none; } section.mobileonly { display: block; } } section .block-padding-tb { padding-top: var(--structural-content-padding-vertical-computed); padding-bottom: var(--structural-content-padding-vertical-computed); } section .block-padding-t { padding-top: var(--structural-content-padding-vertical-computed); } section .block-padding-b { padding-bottom: var(--structural-content-padding-vertical-computed); } .inline-block { display: inline-block !important } /* /Structural */ /* Animations */ .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } } @keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } } .slide-in { transform: translateX(0); } @keyframes slideInRight { 0% { opacity: 0; width: 0; } 100% { opacity: 1; width: 460px; } } @keyframes slideInLeft { 0% { opacity: 1; width: 460px; } 100% { opacity: 0; width: 0; } } @keyframes increase { 0% { width: 0; } 100% { width: 100%; } } @keyframes decreaseandincrease { 0% { width: 100%; } 50% { width: 0; } 100% { width: 100%; } } img.hoverzoom { transition: transform 0.3s ease !important; } img.hovertranslate { transition: transform 1s ease !important; } img.hoverzoom:hover { transform: scale(1.05); } img.hovertranslate { transform: scale(1.1) translate(-13px, 0); } img.hovertranslate:hover { transform: scale(1.1) translate(13px, 0); } /* @media only screen and (max-width:800px) { img.hovertranslate { transform: scale(1.5) translate(-20px, 0); } img.hovertranslate:hover { transform: scale(1.5) translate(20px, 0); } } */ @media only screen and (max-width:600px) { /* Same boundary as columns all stacking */ img.hoverzoom:hover, img.hovertranslate, img.hovertranslate:hover { transform: none; } } /* /Animations */ /* Header and main menu */ nav { position: relative; z-index: 9997; width: 100%; box-shadow: var(--header-shadow); } nav.fixed, nav.slideout { position: sticky; top: var(--content-inset); } nav.fixed { width: calc(100% - 2*var(--content-inset)); min-height: 72px; margin: var(--content-inset); border-radius: var(--headerfooter-border-radius); background-color: var(--headerbackgroundcolour); } nav.slideout { background-color: transparent; box-shadow: none; } nav { color: var(--menuentrycolour); font-weight: var(--font-body-weight); text-transform: var(--font-menu-transform); } /* Logo */ nav a.mainlogo { display: block; float: left; padding: var(--mainlogo-padding); } nav.slideout a.mainlogo { /* Logo fixed in its own container */ position: fixed; top: 20px; left: 0; padding: 20px 30px 20px 30px; background-color: var(--headerbackgroundcolour); color: var(--menuentrycolour); z-index: 4; border-top-right-radius: var(--structural-border-radius); border-bottom-right-radius: var(--structural-border-radius); box-shadow: var(--header-shadow); } nav a.mainlogo img { width: auto; height: var(--header-logo-height); } /* Menu bar */ nav .navigation-wrapper { width: 100%; min-height: 72px; padding: 0; /*margin-top:10px;*/ } nav.slideout .navigation-wrapper { position: fixed; top: 20px; left: 0; width: 100%; min-height: 40px; z-index: 9997; padding: 0; margin: 0; } nav .navigation-wrapper .menutrigger-wrapper { display: none; position: absolute; top: 0px; right: 0px; min-height: 100%; z-index: 2; border-top-left-radius: var(--structural-border-radius); border-bottom-left-radius: var(--structural-border-radius); } nav.slideout .navigation-wrapper .menutrigger-wrapper { background-color: var(--headerbackgroundcolour); } nav.slideout .navigation-wrapper .menutrigger-wrapper { box-shadow: var(--header-shadow); } nav.slideout .navigation-wrapper .menutrigger-wrapper { display: block; } nav .navigation-wrapper .menutrigger-wrapper .menutrigger { display: block; width: 72px; height: 72px; background-image: url(../app_furniture/icon-navigation.php?img=menu&col=navicons); background-position: center; background-repeat: no-repeat; background-size: 30px; cursor: pointer; } nav .navigation-wrapper .menutrigger-wrapper.menuopen { /* Lock to top of screen */ position: fixed; box-shadow: none; } nav .navigation-wrapper .menutrigger-wrapper.menuopen .menutrigger { background-image: url(../app_furniture/icon-navigation.php?img=close&col=navicons); } nav .mainmenu-list-wrapper { align-items: center; z-index: 1; transition: transform 0.3s ease; padding: 0; /*margin-top:5px;*/ } nav.slideout .mainmenu-list-wrapper { position: fixed; right: 0; transform: translateX(100%); max-width: calc(100% - 50px); height: 72px; padding: 0 80px 0 20px; border-top-left-radius: var(--structural-border-radius); border-bottom-left-radius: var(--structural-border-radius); box-shadow: none; background-color: var(--headerbackgroundcolour); } nav.slideout .mainmenu-list-wrapper.active { box-shadow: var(--header-shadow); transform: translateX(0); } /* Firefox */ nav .mainmenu-list-wrapper { scrollbar-width: thin; scrollbar-color: var(--themecolour1) var(--themecolour1); } /* Chrome, Edge, and Safari */ nav .mainmenu-list-wrapper::-webkit-scrollbar { width: 13px; } nav .mainmenu-list-wrapper::-webkit-scrollbar-track { background: var(--themecolour1); } nav .mainmenu-list-wrapper::-webkit-scrollbar-thumb { background-color: var(--headerbackgroundcolour); border-radius: 10px; border: 3px solid #ffffff; } nav .mainmenu-list-wrapper ul.menuitems { /* Top level list */ text-align: left; padding: 6px 0px 0px 0px; margin: 0px; list-style: none; } nav .mainmenu-list-wrapper ul.menuitems li { /* All menu list items */ position: relative; display: block; max-width: 250px; margin: 0; padding: 0; text-align: left; } nav .mainmenu-list-wrapper ul.menuitems>li { /* Top-level list items */ display: inline-block; max-width: 999px; padding: 0px; margin: 0px; border-top-left-radius: var(--menu-border-radius); border-top-right-radius: var(--menu-border-radius); border-bottom-left-radius: var(--menu-border-radius); border-bottom-right-radius: var(--menu-border-radius); } nav .mainmenu-list-wrapper ul.menuitems>li:not(.search, .separate):hover { background-color: var(--headerbackgroundcolourhover); } nav .mainmenu-list-wrapper ul.menuitems>li.hassub { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } nav .mainmenu-list-wrapper ul.menuitems>li.separate { float: right; margin-top: 11px; } nav .mainmenu-list-wrapper .submenu-list-wrapper, nav .mainmenu-list-wrapper .sub2menu-list-wrapper { display: none; width: 250px; } nav .mainmenu-list-wrapper .submenu-list-wrapper { display: none; position: absolute; top: 100%; left: 0; z-index: 100; } nav .mainmenu-list-wrapper .submenu-list-wrapperbg { padding: 10px 0px; background-color: var(--headerbackgroundcolourhover); border-top-right-radius: var(--menu-border-radius); border-bottom-left-radius: var(--menu-border-radius); border-bottom-right-radius: var(--menu-border-radius); box-shadow: var(--header-shadow); } nav .mainmenu-list-wrapper ul.submenu-list { margin: 0; padding: 0; list-style: none } nav .mainmenu-list-wrapper .sub2menu-list-wrapper { display: none; position: absolute; top: -10px; left: 100%; right: auto; max-width: 120%; min-width: 250px; padding: 0; } nav .mainmenu-list-wrapper .sub2menu-list-wrapper.reverse { left: auto; right: 100%; } nav .mainmenu-list-wrapper .sub2menu-list-wrapper .sub2menu-list-wrapperbg { padding: 10px 0px; background-color: var(--headerbackgroundcolourhover); border-top-right-radius: var(--menu-border-radius); border-bottom-left-radius: var(--menu-border-radius); border-bottom-right-radius: var(--menu-border-radius); box-shadow: var(--header-shadow); } nav .mainmenu-list-wrapper .sub2menu-list-wrapper.reverse .sub2menu-list-wrapperbg { border-top-left-radius: var(--menu-border-radius); border-bottom-left-radius: var(--menu-border-radius); border-bottom-right-radius: var(--menu-border-radius); border-top-right-radius: 0; } nav .mainmenu-list-wrapper ul.sub2menu-list { margin: 0; padding: 0; list-style: none; } nav .mainmenu-list-wrapper:not(.active) ul.menuitems>li:hover .submenu-list-wrapper { display: block; } nav .mainmenu-list-wrapper:not(.active) .submenu-item:hover .sub2menu-list-wrapper { display: block; } /* Menu links */ nav .mainmenu-list-wrapper ul.menuitems li a:not(.buttonstyle) { /* All menu list item links */ position: relative; display: block; width: 100%; padding: 10px var(--menupadding-lr-fullsize); font-size: 1rem; line-height: 1.2rem; font-weight: var(--font-body-weight); text-transform: var(--font-menu-transform); } nav .mainmenu-list-wrapper ul.menuitems>li>a:not(.buttonstyle) { /* Top-level list item links */ min-width: auto; margin: 0; padding: 20px var(--menupadding-lr-fullsize); } nav.slideout .mainmenu-list-wrapper ul.menuitems>li>a:not(.buttonstyle) { /* Top-level list item links */ padding: 20px 15px 20px 15px; } /*nav.slideout .mainmenu-list-wrapper ul.menuitems>li>a.buttonstyle { /* Button in the menu bar * / padding-right:40px; /* Same as defined for the .button and .buttonstyle class to allow for an icon in the button * / }*/ nav .mainmenu-list-wrapper ul.menuitems>li.hassub>a:not(.buttonstyle) { /* Top-level list item links with submenus */ padding-right: calc(25px + var(--menupadding-lr-fullsize)); } /*nav .mainmenu-list-wrapper ul.menuitems li.has-sub a{ /* Sub menu links with sub2menus * / padding-right:40px; }*/ nav .mainmenu-list-wrapper ul.menuitems li a.pagenolink { cursor: default; } nav .mainmenu-list-wrapper a:not(.buttonstyle) { color: var(--menuentrycolour); font-weight: var(--font-body-weight); text-transform: var(--font-menu-transform); } nav .mainmenu-list-wrapper a:hover:not(.buttonstyle) { color: var(--menuentrycolourselected); } nav .mainmenu-list-wrapper ul li.selected>a { color: var(--menuentrycolourselected); font-weight: bold; } /* Sub menu trigger icons */ nav .mainmenu-list-wrapper .submenu-trigger, nav .mainmenu-list-wrapper .sub2menu-trigger { position: absolute; background-image: url(../app_furniture/icon-navigation.php?img=direction&dir=down&col=navicons); background-repeat: no-repeat; background-position: center; background-size: 18px; display: block; height: 14px; width: 16px; transform: rotate(0) scale(1); transition: .3s all ease; top: 10px; right: 15px; padding: 10px 10px; z-index: 99; cursor: pointer; } nav .mainmenu-list-wrapper .submenu-trigger { top: 20px; right: var(--menupadding-lr-fullsize); } nav.slideout .mainmenu-list-wrapper .submenu-trigger { top: 20px; right: var(--menupadding-lr-fullsize); } nav .mainmenu-list-wrapper .sub2menu-trigger { transform: rotate(270deg); } nav .mainmenu-list-wrapper .submenu-trigger.rotate180, nav .mainmenu-list-wrapper .sub2menu-trigger.rotate180 { transform: rotate(180deg) scale(1); transition: 0.3s all ease; } nav .with-preview .mainmenu-list-wrapper { margin-top: 49px; } /*- Main menu */ /* Menu search */ nav .mainmenu-list-wrapper ul.menuitems li.search { float: right; margin-right: 25px; } nav.slideout .mainmenu-list-wrapper ul.menuitems li.search { margin-right: 0; } nav .mainmenu-list-wrapper ul.menuitems li.search .search-wrapper-toggle { background-image: url(../app_furniture/icon-navigation.php?img=search&col=navicons); background-position: center; background-repeat: no-repeat; transition: 0.2s all ease; padding: 30px 30px; cursor: pointer; background-size: 30px; border-radius: var(--menu-border-radius); } nav .mainmenu-list-wrapper ul.menuitems li.search .search-wrapper-toggle:hover { background-color: var(--headerbackgroundcolourhover); } nav .mainmenu-list-wrapper ul.menuitems li.search .search-wrapper-toggle.opened { background-image: url(../app_furniture/icon-navigation.php?img=close&col=navicons); } nav.slideout .mainmenu-list-wrapper ul.menuitems li.search .search-wrapper-toggle { padding: 30px 40px; } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper { position: absolute; top: 0; right: 70px; z-index: 10; width: 0px; opacity: 0; overflow: hidden; padding: 10px 0; transition: all 0.5s ease; } nav.slideout .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper { padding: 10px 0; right: 85px; } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper.active { opacity: 1; width: 400px; transition: all 0.5s ease; } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--colourblack); opacity: 1; /* Firefox */ } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper input:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--colourblack); opacity: 1; /* Firefox */ } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper input::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--colourblack); opacity: 1; /* Firefox */ } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper input { width: 100%; color: var(--colourblack); padding: 6px 16px; border-radius: var(--input-border-radius); } /*.with-preview .search-input-wrapper{ top:70px; }*/ /*- Menu search */ @media screen and (max-width:1400px) { nav .mainmenu-list-wrapper ul.menuitems li a:not(.buttonstyle) { /* All menu list item links */ padding: 10px var(--menupadding-lr-reducedsize); } nav .mainmenu-list-wrapper ul.menuitems>li>a:not(.buttonstyle) { /* Top-level list item links */ padding: 20px var(--menupadding-lr-reducedsize); } nav .mainmenu-list-wrapper ul.menuitems>li.hassub>a:not(.buttonstyle) { /* Top-level list item links with submenus */ padding-right: calc(25px + var(--menupadding-lr-reducedsize)); } nav .mainmenu-list-wrapper .submenu-trigger, nav.slideout .mainmenu-list-wrapper .submenu-trigger { right: var(--menupadding-lr-reducedsize); } } /* Mobile menu breakpoint */ @media screen and ((max-width:1200px) or (max-height:700px)) { /* Mobile menu breakpoint */ /* Also change boundary in function checkDevicemode() (default.js) for nav CSS */ nav .navigation-wrapper .menutrigger-wrapper { display: block; } nav .mainmenu-list-wrapper, nav.slideout .mainmenu-list-wrapper { position: fixed; top: 0; right: -100%; height: 100%; width: calc(100% - 20px); max-width: 490px; overflow: auto; border-radius: 0; padding: 30px 20px 30px 20px; margin: 0; background-color: var(--headerbackgroundcolour); /*box-shadow:1px 8px 10.4px 3px #00000040;*/ box-shadow: var(--header-shadow); transition: all 0.3s ease; } nav .mainmenu-list-wrapper.active { right: 0; transition: all 0.3s ease; } nav .mainmenu-list-wrapper ul.menuitems li { /* All menu list items */ width: 100%; max-width: 100%; margin: 0; text-align: left; } nav .mainmenu-list-wrapper ul.menuitems>li:not(.search):hover { background-color: transparent; } nav .mainmenu-list-wrapper ul.menuitems li.inactive { opacity: 1 !important; /* Reveal menu list items even if the search input was revealed before viewport width changed */ } nav .mainmenu-list-wrapper ul.menuitems>li.hassub>a { /* Top-level list item links with submenus */ padding-right: 15px; } nav .mainmenu-list-wrapper ul.menuitems>li.separate { float: none; margin-top: 0px; } nav .mainmenu-list-wrapper ul.menuitems>li.selected .submenu-list-wrapper { display: block; } nav .mainmenu-list-wrapper:not(.active) ul.menuitems>li:hover .submenu-list-wrapper, nav .mainmenu-list-wrapper:not(.active) ul.menuitems>li:hover .sub2menu-list-wrapper { display: none; } nav .mainmenu-list-wrapper ul.menuitems>li .submenu-list-wrapper, nav .mainmenu-list-wrapper ul.menuitems>li .sub2menu-list-wrapper { position: relative; top: 0; left: 0; right: auto; max-width: 100%; min-width: 100%; } nav .mainmenu-list-wrapper ul.menuitems>li .submenu-list-wrapper.active, nav .mainmenu-list-wrapper ul.menuitems>li .sub2menu-list-wrapper.active { background-color: transparent; box-shadow: none; } nav .mainmenu-list-wrapper ul.menuitems>li .submenu-list-wrapper .submenu-list-wrapperbg, nav .mainmenu-list-wrapper ul.menuitems>li .sub2menu-list-wrapper .sub2menu-list-wrapperbg { background-color: transparent; box-shadow: none; padding: 0px 0px 0px 20px; } nav .mainmenu-list-wrapper ul.menuitems>li>a:not(.buttonstyle), nav.slideout .mainmenu-list-wrapper ul.menuitems>li>a:not(.buttonstyle) { /* Top-level list item links */ padding: 10px 15px; } nav .mainmenu-list-wrapper .submenu-trigger, nav.slideout .mainmenu-list-wrapper .submenu-trigger, nav .mainmenu-list-wrapper .sub2menu-trigger { display: inline-block; position: relative; top: 5px; right: auto; padding: 10px 20px; } nav .mainmenu-list-wrapper .sub2menu-trigger { transform: rotate(0deg); } nav .mainmenu-list-wrapper ul.menuitems li.search { float: none; margin-right: 0; } nav .mainmenu-list-wrapper ul.menuitems li.search .search-wrapper-toggle { position: relative; float: right; width: 80px; padding: 30px 30px !important; } nav .mainmenu-list-wrapper ul.menuitems li.search .search-wrapper-toggle.opened { background-image: url(../app_furniture/icon-navigation.php?img=search&col=navicons); } nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper, nav .mainmenu-list-wrapper ul.menuitems li.search .search-input-wrapper.active { position: relative; top: 0; right: auto !important; width: calc(100% - 80px); opacity: 1; padding: 14px 0 !important; } } /*- Mobile menu breakpoint */ /*- Nav */ /* Footer */ footer { border-bottom: 1px solid var(--footerbackgroundcolour); /* Forces the bottom --content-inset margin to work */ } footer .footercontainer { position: relative; width: calc(100% - 2*var(--content-inset)); margin: var(--content-inset); background-color: var(--footerbackgroundcolour); padding: 0 0 var(--structural-content-padding-vertical-computed) 0; border-radius: var(--headerfooter-border-radius); } footer .image-overlay { position: absolute; width: 100%; height: 100%; z-index: 0; } footer .image-overlay img { width: 100%; height: 100%; object-fit: cover; object-position: center; } footer .inner { position: relative; } footer .socialicons a { /* If the social icon graphics aren't square-cornered then box-shadow doesn't work properly If a site has square graphics then the shadow can be applied within the site's custom stylesheet box-shadow:var(--button-relaxed-shadows); */ transition: all 0.2s ease-in-out; } footer .socialicons a:hover { transform: var(--button-hover-translate); /* box-shadow:var(--button-hover-shadows); */ transition: all 0.2s ease-in-out; } */ footer .page-overlay { background-color: rgba(0, 0, 0, 0.0); transition: 0.2s all ease; } footer .page-overlay.active { position: fixed; top: 0; left: 0; height: 100%; background-color: rgba(72, 72, 72, 0.6); width: 100%; z-index: 10; transition: 0.2s all ease; pointer-events: none; } /* / Footer */ /* Pages shown in a Fancybox modal */ .popup-header { /* Should generally match the style of the