@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Site colours */
:root {
	--feature: #35A936;
    --feature2: #35A936;
	--text: #faf9f6;
    --text-dark: #000;
	--links: #35A936;
    --links--hover: #faf9f6;
	--error: #dd0000;	
	--borders-input: #ccc;
	--borders-light: #606060; 
	--temp-text: deeppink;
	--discount: #dd0000;
    --button-bg: #35A936;
    --button-text: #faf9f6;
	--nav-desktop-bg: #8D99AE;
	--nav-desktop-text: #faf9f6;
	--nav-mobile-bg: #262626;
	--nav-mobile-text: #faf9f6;
    --footer-bg: #eee;
	--footer-text: #333;
	--table-footer-bg: #eee; 	
}

/* Site widessss */
@view-transition {
  navigation: auto;
}

html {font-family: 'Montserrat', arial, verdana, sans-serif; font-size: 16px; color: var(--text); box-sizing: border-box; -webkit-tap-highlight-color: #faf9f6; min-height: 100%; background-color: #faf9f6;  scroll-behavior: smooth; overflow-x: hidden}
button, textarea, select, input[type='text'], input[type='password'] {font-family: 'Montserrat', arial, verdana, sans-serif; font-size: 1em;}
textarea, select, input[type='text'], input[type='password'] {border: 1px solid var(--borders-input); outline: none; box-sizing: border-box; background: #fff; padding: 8px 10px; }
select:focus, input[type='text']:focus, input[type='password']:focus, textarea:focus {outline: 5px solid rgba(0,0,0,0.08);}
button {cursor:pointer;}
hr {border: none; margin: 30px 0; padding: 0; height: 1px; background: #ddd;}

body {position:relative; display: flex; flex-direction: column; margin: 0; padding: 0; min-height: 100vh; }
body > header {flex-grow: 0; flex-shrink: 0;}
body > .main {flex-grow: 1; flex-shrink: 0;}
body > footer {flex-grow: 0; flex-shrink: 0;}
body.rtl {text-align: right!important} 

.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}
.font-remove {display: none}

.waiting {}
body > .waiting {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.4); }
.waiting:before {content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; box-sizing: border-box; border: 8px solid #fff; border-radius: 50%;}
.waiting:after {content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin-top: -18px; margin-left: -18px; box-sizing: border-box; border: 4px solid var(--feature); border-top-color: transparent; border-radius: 50%; animation: spin 1.5s infinite linear}

.temp-text {color:var(--temp-text)}
a {text-decoration: none; color: var(--links)}
a:hover {text-decoration: none; color: var(--links--hover)}
p {display: block; margin-top: 1em; margin-bottom: 1em; line-height: 1.4em}
small {font-size: 0.8em; line-height: 1.4}
select option:disabled {color: #b8b8b8;}

.hidden {display:none;}
.any--sticky {position: sticky;  top: 0; overflow-y: auto; }
.empty {text-align:center; margin: 1em 0; } 
.empty:before {content: ""; display: block; padding-top: 1px; margin-bottom: 40px; }
.empty:after {content: ""; display: block; padding-bottom: 1px; margin-top: 40px; }
.error-message {color: var(--error);}
.discount {color:var(--discount); }

/* Universal padding // UNIP */
.unip:before {content: ""; position: relative; display:block; margin-bottom: 30px; padding-top: 1px; }
.unip:after {content: ""; position: relative; display:block; margin-top: 30px; padding-bottom: 1px; }
.unip--l:before {margin-bottom: 60px;}
.unip--l:after {margin-top: 60px;}
.unip--s:before {margin-bottom: 15px;}
.unip--s:after {margin-top: 15px;}

/* Headings */
h1, h2, h3, h4, h5 {line-height: 1;}
h1, .title-xlarge {display: block; font-size: clamp(1.125rem, 0.589rem + 1.429vw, 1.875rem); margin: 2rem 0 1rem 0; font-weight: 400;}
h2, .title-large {display: block; font-size: clamp(1.563rem, 0.179rem + 3.69vw, 3.5rem); line-height: clamp(1.563rem, 0.179rem + 3.69vw, 3.5rem); margin: 0rem 0 3rem 0; font-weight: 200;}
h3, .title-medium {display: block; font-size: 1.2em; margin: 20px 0 1rem 0; font-weight: 700;}
h4, h5, h6, .title-small {display: block; font-size: 1.1em; margin: 20px 0 1rem 0; font-weight: 700;}

.content-text h2 {margin-top: 0px;}
.container .content-text strong {color: var(--feature); font-size: clamp(1rem, 0.866rem + 0.357vw, 1.188rem); font-weight: 600; line-height: clamp(1.125rem, 0.679rem + 1.19vw, 1.75rem)}


.modal-grid-text h1, .title-large {display: block; font-size: clamp(1.563rem, 0.179rem + 3.69vw, 3.5rem); line-height: clamp(1.563rem, 0.179rem + 3.69vw, 3.5rem); margin: 0rem 0 2rem 0; font-weight: 200;}

.content-text ul {}
.content-text ul li {margin-bottom: 5px;}


table {border: 1px solid #ccc; border-collapse: collapse; }
table td {border-top: 1px solid #ccc; }

.stockcontainer { border-radius: 24px; padding-right: 20px;}
table.stocktable {border-collapse: collapse; position: relative; border: 0px solid #ccc; width: 100%
        }
table.stocktable td {border-bottom: 1px solid #666666; text-align: left; padding:10px 20px;  }
table.stocktable th {text-align: left; position: relative; top: 0px;  background-color:var(--feature); padding:10px 20px;  	
}
table.stocktable tr:nth-child(odd) {background: rgba(251,248,248,0.05)
}

table.stocktable th:first-of-type {border-top-left-radius:10px;}
table.stocktable th:last-of-type {border-top-right-radius:10px;}

.cta {}
.cta a {display: block; background-color: var(--button-bg); padding: 5px 20px; border: 2px solid var(--button-bg); border-radius: 4px; color: var(--button-text); transition: all ease-in 0.1s; text-align: center; text-decoration: none; }
.cta a:hover {color: var(--button-bg); background-color: var(--button-text); }

.button-container {display: flex; position: relative; margin: 20px 0; align-content: center; justify-content: space-between; gap: 20px; }
.button-container button {position: relative; box-sizing: border-box; display: inline-block; background-color: var(--button-bg); padding: 10px 50px; border: 2px solid var(--button-bg); border-radius: 4px; color: var(--button-text); font-weight: 400; text-align:center; transition: all ease-in 0.1s;}
.button-container button:hover {position: relative; background-color: #fff; color: var(--button-bg)}
.button-container a {position: relative;  box-sizing: border-box; display: inline-block; background-color: var(--button-bg); padding: 10px 50px; border: 2px solid var(--button-bg); color: #f00; border-radius: 4px; color: #faf9f6; font-weight: 400; text-align:center; transition: all ease-in 0.1s;}
.button-container a:hover {background: var(--button-text); color: var(--button-bg); border: 2px solid var(--button-bg);}
.button-container button.inactive {color:#eee; background: #ccc; border-color: #ccc; pointer-events: none;}
.button-container a.inactive {color:#eee; background: #ccc; border-color: #ccc; pointer-events: none;}
.button-container button.dimmed {color:#fff; background: #ccc; border-color: #ccc; }
.button-container a.dimmed {color:#faf9f6; background: #ccc; border-color: #ccc; }
table .button-container {margin: 0;}

@media screen and (max-width: 900px) { 
    .button-container button {display: block; width: 100%;}
    .button-container a {display: block; width: 100%;}
}
@media screen and (max-width: 900px) { 
	.button-container {flex-direction: column; gap: 10px; }
}

a.back-link {display: flex; border: 2px solid var(--feature); padding: 5px; padding-right: 20px; border-radius: 50px; align-items: center; width: min-content; gap:10px;  background-color: rgba(0, 0, 0, 0.5); }
 a.back-link .nav-left {
     display: block;
     width: 30px;
        height: 30px;
        background-image: url(../_IMG/nav-left.svg);
     background-size: 60% 60%;
     background-repeat: no-repeat;
     background-position: center
      }

/* Body Containers + Columns */
.main {position: relative; display: flex; flex-direction: column; justify-content: center;  background-image:url("../_IMG/default-bg.jpg"); background-color: #000000; background-size: cover; background-attachment: fixed; background-repeat: no-repeat}

@media screen and (max-height: 1000px) { }

@media screen and (max-width: 1300px) { 
    .main {padding-top: 0px; padding-bottom: 0px}
    .main:has(.container-sub-v2) {padding-top: 140px; padding-bottom: 80px}
}


.main-bg-default {}

.splash {position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
background-color: #000000}

.splash-inner {
    position: relative;
    background-color: #ff9900;
    width: 100%;
    min-height: 100vh;}
.slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transform: scale(1);
        animation: fadeZoom 24s infinite ease-in-out;
      }
.slide-caption {position: absolute; top: 30px; right: 30px; text-align: right; opacity: 0; animation: textFade 24s infinite ease-in-out; color: #ffffff}
.slide-caption-01 {animation-delay: 0s;}
.slide-caption-02 {animation-delay: 4s;}
.slide-caption-03 {animation-delay: 8s;}
.slide-caption-04 {animation-delay: 12s;}
.slide-caption-05 {animation-delay: 16s;}
.slide-caption-06 {animation-delay: 20s;}

      .slide-01 {
        background-image: url("../_IMG/splash/splash-image-1.jpg");
        animation-delay: 0s;
      }
      .slide-02 {
        background-image: url("../_IMG/splash/splash-image-2.jpg");
        animation-delay: 4s;
      }
      .slide-03 {
        background-image: url("../_IMG/splash/splash-image-3.jpg");
        animation-delay: 8s;
      }
      .slide-04 {
        background-image: url("../_IMG/splash/splash-image-4.jpg");
        animation-delay: 12s;
      }
      .slide-05 {
        background-image: url("../_IMG/splash/splash-image-5.jpg");
        animation-delay: 16s;
      }
      .slide-06 {
        background-image: url("../_IMG/splash/splash-image-6.jpg");
        animation-delay: 20s;
      }

      @keyframes fadeZoom {
        0% {
          opacity: 0;
          transform: scale(1);
        }
        5% {
          opacity: 1;
          transform: scale(1);
        }
        25% {
          opacity: 1;
          transform: scale(1.08);
        }
        30% {
          opacity: 0;
          transform: scale(1.1);
        }
        100% {
          opacity: 0;
          transform: scale(1.1);
        }
      }

 @keyframes textFade {
        0% {
          opacity: 0;
          
        }
        5% {
          opacity: 1;
          
        }
        25% {
          opacity: 1;
          
        }
        30% {
          opacity: 0;
          
        }
        100% {
          opacity: 0;
          
        }
      }












ul.fancy-list{list-style: none; padding-left: 0px; margin-left: 0px; margin-top: 30px;}
ul.fancy-list li {margin-bottom: 10px; display: flex; align-items: center }
ul.fancy-list li span.tick {display: inline-block; width: 20px; margin-right: 10px; height:20px;background-image: url("../_IMG/tick-green.svg"); flex: none; background-size: 20px 20px;}
ul.fancy-list li span.text {display: inline-block;}
ul.fancy-list li strong {display: block}




.container-header {position:relative; margin-left: auto; margin-right: auto; max-width: 2560px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.container {position:relative; margin-left: auto; margin-right: auto; max-width: 1700px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }

.container-splash {position:relative; margin-left: auto; margin-right: auto; max-width: 1700px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; padding-bottom: 30px;  }
.splash-grid {display: grid; grid-template-columns: 1fr 1fr; color: #faf9f6; }
.splash-grid div {display: flex; flex-direction: column; }
.splash-grid div h1 {font-size: clamp(1.375rem, 0.75rem + 1.667vw, 2.25rem); letter-spacing: 0.4rem; }
.splash-grid div .content-text {margin: 0px;}
.splash-grid div p {max-width: 500px; font-size: clamp(1rem, 0.732rem + 0.714vw, 1.175rem)}
.splash-grid div:last-of-type {justify-content: flex-end}
.splash-grid .splash-logos {background-color: rgba(0,0,0,0.74);  width: 100%; max-width: 368px; display: flex; align-items: center; gap:30px; border-bottom-left-radius:24px; border-bottom-right-radius:24px; padding: 40px; margin: 0px auto; box-sizing: border-box}
.splash-grid .splash-logos span img {width: 100%;}
.splash-grid .splash-logos span.splash-logo-latham img{max-width: 200px;}
.splash-grid .splash-logos span.splash-logo-x img{max-width:28px;}
.splash-grid .splash-logos span.splash-logo-accoya img{}

.splash-grid .content-button {margin: 1em; max-width: 1300px; padding: 0 0px; }
.splash-grid .content-button a {display: block; margin: 0 auto; padding: 10px 20px; max-width: 300px; color: var(--button-text); background: none ; font-weight: 400; font-size: clamp(1.125rem, 0.5rem + 1.667vw, 2rem); border-radius: 16px; width: 100%;  text-align: center; border: 2px solid var(--button-bg); transition:all ease-in-out 0.2s; box-sizing: border-box }
.splash-grid .content-button a:hover {background-color: var(--button-bg)}




.container .container {padding-left: 0; padding-right: 0;}
.content-image {margin: 30px auto; width: 100%; max-width: 1300px; }
.content-image img {width: 100%; border-radius: 10px; }
.content-text {margin: 30px auto; max-width: 1300px; padding: 0 30px; box-sizing: border-box;}
.container .content-text {padding: 0; }


.cookies-table {border:1px solid #ccc; border-collapse: collapse; width: 100%; ma-wiidth: 1300px; margin: 20px auto;}
.cookies-table thead td {font-weight: 700;}
.cookies-table td {padding: 5px 10px; border: 1px solid #ccc; text-align: left;}

@media screen and (max-width: 600px) {
	.container {padding-left: 30px; padding-right: 30px; } 
	.content-text {padding-left: 15px; padding-right: 15px; } 
}


.button-small {display:inline-block; padding: 3px 8px; margin: 1px; font-size: 0.8em; color: var(--button-text); background: var(--button-bg); border: 1px solid var(--button-bg); border-radius: 8px; cursor:pointer; transition: all ease-in 0.1s; }
.button-small:hover {color: var(--button-bg); background-color: var(--button-text); }

.detail-table {border: none; border-collapse: collapse; width: 100%; margin: 20px 0;}
.detail-table thead tr td {font-size: 0.8em; opacity: 0.6;}
.detail-table tbody tr td {border-top: 1px solid var(--table-borders); border-bottom: 1px solid var(--table-borders); }
.detail-table tfoot tr td {border-top: 1px solid var(--table-borders); border-bottom: 1px solid var(--table-borders); background: var(--table-footer-bg); }
.detail-table tr td {padding: 10px 5px}
.detail-table td:first-child {padding-left: 0;}
.detail-table td:last-child {padding-right: 0;}
.detail-table tfoot td:first-child {padding-left: 10px;}
.detail-table tfoot td:last-child {padding-right: 10px;}
.detail-table .product {position: relative; display:flex; flex-direction: column; padding-left: 110px; min-height: 90px; gap: 5px; }
.detail-table .product .image {position: absolute; top: 0; left: 0; width: 100px; height: 70px; border: 1px solid var(--borders-light); border-radius: 4px; align-content: center; justify-content: center; background: #fff; overflow: hidden;}
.detail-table .product .image img {poistion: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.detail-table .product .name {font-weight: 700;}
.detail-table .product .choices {font-size: 0.9em;}
@media only screen and (max-width: 600px) {
	.detail-table .product {padding-left: 0; min-height: 0;}
	.detail-table .product .image {display:none; position: relative; width: auto; height: 60px; }
}

.detail-table tr.unavailable td {background: #f7bfbf;}
.detail-table tr.unavailable td:first-child {padding-left: 10px;}
.detail-table tr.unavailable td:last-child {padding-right: 10px;}
.detail-table tr.unavailable td .discount {display: none;}
.detail-table tr.unavailable td .unavailable-message {margin: 5px 0; color: var(--error); font-weight: 700;}

/* Headers */

header {position: relative; width: 100%;}

@media only screen and (max-width: 900px) {
	.pre-header {display:none;}
}



.header {background: rgba(0,0,0,0.9);  position: fixed; top: 0px; z-index: 10; width: 100%}
.header .header__inner {position: relative;  display: flex; align-items: center; gap:20px; padding: 0px 15px }
.header .header__inner a {position: relative;  padding: 10px 15px; color: #faf9f6; font-size: 16px; line-height: 1;}
.header .header__inner a b {position: absolute; background-color: var(--feature2); width: 16px; left: 50%; margin-left: 6px; bottom: 50%; margin-bottom: 5px; border-radius: 9px; padding: 8px 0; text-align: center; font-size: 10px; line-height: 0; color: #faf9f6; }
.header .header__inner a b.user-logged-in {display: none; }
.header .header__inner a b.user-logged-in:after {content: ""; position: absolute; box-sizing: border-box; top: 50%; left: 50%; width: 10px; height: 5px; margin-top: -3px; margin-left: -5px; border-bottom: 2px solid #faf9f6; border-left: 2px solid #faf9f6; transform: rotate(-45deg);}
.header .header__inner a b.cart-item-count {display:none;}

.header .header__x img{position:relative; display:block; height: 20px; }
.header .header__accoya img {position:relative; display:block; height: 28px; }
.header .header__logo img {width: auto; height: 100%; object-fit: contain; max-height: 38px;}

a.cta-nav {display: flex!important; align-items: center; gap:10px; transition: all ease-in-out 0.2s; flex-wrap: nowrap; width: max-content;}
a.cta-nav img {max-width: 24px;}
a.cta-nav:hover {color: var(--feature)}
a.cta-button {display: flex!important; align-items: center; gap:10px; background-color: var(--button-bg); border:2px solid var(--button-bg); border-radius: 4px; transition: all ease-in-out 0.2s}
a.cta-button:hover {background-color: #000000;}
.header .header__search {position: relative; flex-grow: 1; margin: 0; padding: 0 70px;  }
.header .header__search form {display:block; position: relative; }
.header .header__search input[type=text] {width: 100%; border-style: none; padding: 14px; border: 1px solid #ddd; }
.header .header__search input[type=text]::placeholder{ color: #aaa; }
.header .header__search button {position: absolute; top: 50%; right: 0; margin-top: -25px;  width: 50px; height: 50px; border: none; outline: none; background:none; font-size: 20px; font-weight: bold; cursor: pointer; color:var(--feature); ; pointer-events: none;  }
.header .header__search__replace {display:none;}
.header .header__inner a.search-button {display: none; }
.header .header__inner a.nav-button {display: none; }
.header .header__inner a.nav-button i {display:block; position: relative; width: 28px; height: 15px; border-top: 3px solid var(--feature); border-bottom: 3px solid  var(--feature);}
.header .header__inner a.nav-button i:after {content: ""; position: absolute;  display:block; top: 6px; left: 0; width: 100%; height: 3px; background: var(--feature); }
.header .settings {position: relative; background: var(--feature); height: 0; overflow: hidden;}  
.header .settings > div {position: absolute; left: 0; bottom: 0; width: 100%;}
.header .settings.active {height: auto; }
.header .settings.active > div {position: relative; }
.header .settings .form {display:flex; gap: 20px; margin: 0; }
.header .settings .form .field {margin: 0; flex-grow: 1}
.header .settings .form .field label {position: absolute; top:3px; left: 10px; color: #666; font-size: 11px; z-index: 1; pointer-events: none;padding: 0; margin: 0; }
.header .settings .form .field select {border: none; padding-top: 18px; padding-bottom: 6px;}
.header .settings .form .button-container {margin: 0;}
.header .settings .form .button-container button {border-color: #faf9f6;}
.header .header__inner a.nav-button {display: block; margin-left: 20px; }

.header .header__inner a.cta-nav i {position: absolute; top: 5px; left: 10px; width: 18px; height: 0; line-height: 0; padding: 9px 0; text-align: center; background: red; color: white; font-size: 12px; font-style: normal; border-radius: 50% }



	
	.header .header__inner a.search-button {display: block; }
    .header .header__search {flex-shrink: 0; width: 100%; height: 0; z-index: 10; background: var(--feature); padding: 0; overflow: hidden; order: 100;}
	.header .header__search > div {position: absolute; left: 0; bottom: 0; width: 100%; padding: 15px; box-sizing: border-box; }
	.header .header__search input[type=text] {outline: none; border: none;}
	.header .header__search.active {height: auto; }
	.header .header__search.active > div {position: relative; }
	.header .header__search__replace {display:block; flex-grow: 1;} 
	.header .header__account > div a {padding: 20px 10px; }
	.header .settings .form {gap: 10px; }
	.header .settings .form .button-container button {padding-left: 15px; padding-right: 15px; }





	nav {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: none; pointer-events: none; transition: 0.4s; overflow: hidden; opacity: 0; }
	nav .nav-menu {position: absolute; display: block; width: 500px; max-width: calc(100% - 30px); padding: 0; height: 100%; right: -500px; background: var(--nav-mobile-bg); color: var(--nav-mobile-text); font-size: 1.1rem; transition: 0.4s; cursor: auto; transform: scale(0)}
nav .nav-menu .nav-title {color: var(--feature); font-weight: bold; margin-bottom: 10px; font-size: 1.2em }
nav .nav-menu hr.nav-break {background-color: var(--feature)}
nav .nav-menu .nav-logo { margin-bottom: 60px;}
nav .nav-menu .nav-logo img {width: 100%; height: auto; max-width: 200px;}
	nav .nav-menu .nav-menu__links {display: block; padding: 20%; height: 100%; overflow: auto; box-sizing: border-box;  }
	nav .nav-menu .nav-button {position: absolute; display: block; top: 0; right: 0; padding: 26px 30px 10px 10px; cursor: pointer }
	nav .nav-menu .nav-button b {position: relative; display: block; width: 26px; height: 26px;}
	nav .nav-menu .nav-button b i {position: absolute; display: block; width: 30px; height: 3px; background-color: #fff;}
	nav .nav-menu .nav-button b i:nth-child(1) {top: 50%; margin-top: -1px; transform: rotate(45deg);}
	nav .nav-menu .nav-button b i:nth-child(2) {top: 50%; margin-top: -1px; transform: rotate(-45deg);}	
	nav .nav-menu .nav-menu__links a {display: block; padding: 8px 0px; border: none; color: #faf9f6; transition: all ease-in-out 0.2s; transform-origin: left; } 
	nav .nav-menu .nav-menu__links a:hover{border-bottom: none; margin-right: 10px; transform: scale(1.2); margin-left: 10px; }
	


	nav.active {display: block; position: fixed; top: 0; left: 0; opacity: 1; width: 100%; height: 100%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: all; background: rgba(0,0,0,0.4); cursor: pointer;  }
	nav.active .nav-menu{right: 0; box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: scale(1)}
    nav .nav-item-mob-only {display: block; font-size: 0.9rem;}

nav.active .nav-menu .nav-menu__links a {transform: translateX(-0px;) }

@media screen and (max-width: 1400px) {
    .container-header { padding-left: 0px; padding-right: 0px; }
    a.header__logo {padding: 15px 0px!important;}
    .header__logo img {max-width: 90px;}
     .header__x img {max-width: 10px;}
    .header__accoya img {max-width: 90px;}
    .mobile-hide {display: none!important;}
    a.cta-nav {display: none!important;}
    a.cta-button {display: none!important; }
    .splash-grid .splash-logos {padding: 20px; gap:10px;}
      .splash-grid {display: grid; grid-template-columns: 1fr; color: #faf9f6}
    .splash-grid .splash-logos span.splash-logo-latham img{max-width: 150px;}
}

@media screen and (max-width: 420px) {
    .header__x {display: none}
}

@media screen and (max-width: 360px) {
    .header__accoya {display: none} 
}

.breadcrumbs {position: relative; display: block; background-color: #eee; font-size: 14px; color: #333; }
.breadcrumbs .breadcrumb {display:none; }
.breadcrumbs .breadcrumb.active {display: flex; align-items: center; justify-content: flex-start; position: relative; margin: 0 -10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.breadcrumbs .breadcrumb a {display: block; color: inherit; padding: 7px 10px; }
.breadcrumbs .breadcrumb i {display: -block; position: relative; padding: 7px 0; width: 10px; pointer-evetnts: none; }
.breadcrumbs .breadcrumb i:after {content: ""; position: absolute; box-sizing: border-box; top: 50%; left: 50%; height: 21px; width: 21px; border-bottom: 1px solid rgba(0,0,0,0.25); border-left: 1px solid rgba(0,0,0,0.25); transform: scale(60%, 100%) translate(-50%, -50%) rotate(45deg); }

.post-group {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; overflow: hidden; }
.post-group .post-group__image {position: relative; display: block; height: 0; padding-bottom: 70%; margin-bottom: 15px; background: #eee; overflow: hidden; border-radius: 10px;}
.post-group .post-group__image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.4s;}
.post-group .post-group__image i {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 50px; color: #ccc; }
.post-group .post-group__tag { position: absolute; display:flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; top: -40px; right: -40px; width: 80px; height: 80px; text-align: center; transform:rotate(45deg); padding: 2px; background: var(--feature2); color: #fff; }
.post-group:hover .post-group__image img{transform: scale(1.05);}
.post-group .post-group__text {display: block; }
.post-group .post-group__text p {margin: 0;}
.post-group .post-group__text .post-group__title {display: block; font-weight: 700; font-size: 1.15em; margin-bottom: 4px; }

.file-group {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; color: inherit; text-align: left; border: 1px solid var(--borders-light); border-radius: 10px; overflow: hidden; }
.file-group .file-group__image { position: relative; display: block; height: 0; padding-bottom: 100%; margin-bottom: 15px; background: #eee; }
.file-group .file-group__image img.image {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.4s}
.file-group .file-group__image img.icon {position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; object-fit: contain; transition: all ease-in-out 0.4s}
.file-group .file-group__image i {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 50px; color: #ccc; }
.file-group:hover .file-group__image img {transform: scale(1.05);}
.file-group .file-group__text {padding: 0 15px; }
.file-group .file-group__text .product-group__title {font-size: 1em; font-weight: 400; }
.file-group .file-group__text p {margin: 0;}
.file-group .file-group__text div {}
.file-group .file-group__price {font-size: 1.4em; font-weight: 700; padding: 0 15px; }
.file-group .cta {padding: 15px; }





.sub-page-nav {display:flex; gap: 60px; text-align: left; align-items: center; justify-content:center; width: 100%;  }


.sub-page-nav .sub-page-nav__left {width: 250px; flex-shrink: 0; flex-grow: 0; position: sticky; align-self: flex-start; top: 0; padding: 0px 0; }
.sub-page-nav__right {flex-shrink: 1; flex-grow: 1;  background-color: rgba(0, 0, 0, 0.9); border-radius: 54px; padding: 40px; min-height: 600px; }
.sub-page-nav__right .content-text {margin:0px!important}
.sub-page-nav__right .content-text h1 {margin-top:0px;}




.sub-nav {margin-top: 40px;}
.sub-nav ul {margin-left: 0px; padding-left: 0px; padding-top: 0px; margin-top:0px; font-size: clamp(0.8rem, 0.586rem + 0.571vw, 1.1rem) }
.sub-nav ul li { list-style: none; margin-bottom: 16px; }
.sub-nav ul li a {border: 1px solid var(--feature); border-radius: 10px; padding: 10px 20px; display: block; color: #faf9f6; }
.sub-nav ul li div {border: 1px solid var(--feature); background: var(--feature); border-radius: 10px; padding: 10px 20px; display: block}

@media screen and (max-width: 1300px) {
	.sub-page-nav {gap: 30px;}
}
@media screen and (max-width: 900px) {
	.sub-page-nav {display:block;  }
	.sub-page-nav .sub-page-nav__left {width: 100%; z-index: 1; padding: 0px; box-sizing: border-box; position: relative   }
	
	
}
@media screen and (max-width: 600px) {
	.sub-page-nav { }
	
}

.scroll-to-link {display: none;  margin-top: 40px; margin-bottom: 40px; align-content: center; justify-content: center}
.scroll-to-link a {width: 40px; height: 40px; border: 2px solid var(--feature); border-radius: 50px;  background-image: url(../_IMG/nav-right.svg);
           background-position: center;
          background-size: 20px 20px;
          background-repeat: no-repeat;
transform: rotate(90deg); transition: all ease-in-out 0.2s}

.scroll-to-link a:hover {transform: scale(1.07) rotate(90deg)}

.scroll-to-top {display: none;  margin-top: 40px; margin-bottom: 40px; align-content: center; justify-content: center}
.scroll-to-top a {width: 40px; height: 40px; border: 2px solid var(--feature); border-radius: 50px;  background-image: url(../_IMG/nav-right.svg);
           background-position: center;
          background-size: 20px 20px;
          background-repeat: no-repeat;
transform: rotate(-90deg); transition: all ease-in-out 0.2s}

.scroll-to-top a:hover {transform: scale(1.07) rotate(-90deg)}


@media screen and (max-height: 1000px) {
    .scroll-to-link {display: flex}
    .scroll-to-top {display: flex}
}

.main:has(.container-sub-v2) {justify-content: flex-end}

.container-sub-v2 {max-width: none!important; padding-left: calc((100vw - 1700px) / 2); box-sizing: border-box; display:flex; gap: 60px; text-align: left; align-items: center; justify-content:center; width: 100%; height: calc((100vh - 180px))}
.sub-v2__left {width: 280px; flex-shrink: 0; flex-grow: 0; position: relative; align-self: flex-start; padding: 0px 0; box-sizing: border-box; padding-left: 30px;}
.sub-v2__right {background-color: rgba(0, 0, 0, 0.9); border-top-left-radius: 54px; align-self: flex-end; width: 100%; height: 100%; overflow: hidden}
.sub-v2__right .sub-v2__right-content { position: relative; height: 100%; display: flex; box-sizing: border-box; flex-basis: 0 }
.sub-v2__right .sub-v2__right-content .sub-v2__left-inner {overflow: auto; padding: 60px 60px 100px 60px; height: 100%; box-sizing: border-box; flex-basis: 60%;
flex-grow: 0; scroll-behavior: smooth}
.sub-v2__right .sub-v2__right-content .sub-v2__right-inner {background-color: #262626; padding: 60px 60px 100px 60px; height: 100%; box-sizing: border-box; flex-basis: 40%;
flex-grow: 0; overflow: auto; scroll-behavior: smooth }
.sub-v2__right .sub-v2__right-content .sub-v2__left-inner-resources {flex-basis: 100%;}

.sub-v2__right .sub-v2__right-content .sub-v2__right-inner-depot {flex-basis: 50%;}
.sub-v2__right .sub-v2__right-content .sub-v2__left-inner-depot {flex-basis: 50%;}


.sub-v2__left .content-text {padding: 0px;}

.sub-v2__right .content-text strong {color: var(--feature); font-size: clamp(1rem, 0.866rem + 0.357vw, 1.188rem); font-weight: 600; line-height: clamp(1.125rem, 0.679rem + 1.19vw, 1.75rem)}
.sub-v2__right  .content-text {padding: 0px; margin: 0px}
.sub-v2__right  .content-text h2 {margin-top: 0px;}


@media screen and (max-width: 1300px) {
   .container-sub-v2 {max-width: none!important; padding-left: 0;  box-sizing: border-box; display:flex; gap: 60px; text-align: left; align-items: center; justify-content:center; width: 100%; height: auto} 
    .sub-v2__right .sub-v2__right-content {display: block}
    .sub-v2__right {border-top-right-radius: 54px;}
}

@media screen and (max-width: 900px) {
    .main:has(.container-sub-v2) {padding-bottom: 0px;}
    .container-sub-v2 {max-width: none!important; padding-left: 0;  padding: 30px; flex-wrap: wrap; justify-content: flex-start; gap: 0px;}
    .sub-v2__left {width: 100%; padding-left: 0px;}
    .sub-v2__right .sub-v2__right-content .sub-v2__left-inner { padding: 30px 30px 30px 30px; }
    .sub-v2__right .sub-v2__right-content .sub-v2__right-inner {padding: 30px 30px 30px 30px;  }
    #resources-nav ul{display: none}
}

/***** Slide Left *****/
.slide-left {
  animation: 0.9s slide-left;
}
@keyframes slide-left {
  from {
      opacity: 0;
      transform: translateX(100px)
    
  }
  to {
      opacity: 1;
      transform: translateX(0px)
    
  }
}



.sub-v2 {max-width: none!important; padding-left: calc((100vw - 1700px) / 2); box-sizing: border-box; display:flex; gap: 60px; text-align: left; align-items: center; justify-content:center; width: 100%; height: 100%}
.sub-v2 .sub-page-nav__left {width: 250px; flex-shrink: 0; flex-grow: 0; position: sticky; align-self: flex-start; top: 0; padding: 0px 0;}
.sub-v2 .sub-page-nav__right {padding: 0px;}

@media screen and (max-width: 1300px) {
	.sub-v2 {gap: 30px;}
}
@media screen and (max-width: 900px) {
	.sub-v2 {display:block; padding-left: 30px; }
	.sub-v2 .sub-page-nav__left {width: 100%; z-index: 1; padding: 0px; box-sizing: border-box; position: relative   }
	
	
}


/* move to main css*/

    .benefits {}
    .xxxbenefits.benefit1 {background: linear-gradient(106deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%, rgba(53, 169, 52, 0) 66%, rgba(53, 169, 52, 1) 90%);}
    .xxxbenefits.benefit2 {background: linear-gradient(106deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%, rgba(164, 54, 183, 0) 66%, rgba(164, 54, 183, 1) 90%);}
    .xxxbenefits.benefit3 {background: linear-gradient(106deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%, rgba(53, 169, 52, 0) 66%, rgba(53, 169, 52, 1) 90%);}
    

    .benefits_inner { }
    .benefits_left {display: flex; flex-direction: column;  height: 100%; gap:40px; }
    .benefits_links a {display: flex; align-items: center; gap: 8px; padding: 20px 0; font-size: 1.2em; border-bottom: 1px solid rgba(255,255,255,0.2); transition: all 0.2s;}
    .benefits_links a svg {display: block; width: 30px; height: 30px; transition: all 0.2s;  }
    .benefits_links a.benefit1_link {color: #ddd}  
    .benefits_links a.benefit1_link svg {fill: #ddd}  
    .benefits_links a.benefit2_link {color: #a436b7}
    .benefits_links a.benefit2_link svg {fill: #a436b7}
    .benefits_links a.benefit3_link {color: #35a936;}
    .benefits_links a.benefit3_link svg {fill: #35a936;}
    .benefits_links a:hover {color: #faf9f6; }
    .benefits_links a:hover svg {fill: #faf9f6;}
    .benefits_logos {display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;}
    .benefits_logos img {display: block; flex-shrink: 1; width: 100px;}
    
    .benefit_content {display: none!important;}
    
    .benefits.benefit1 .benefit1_content {display: flex!important;}
    .benefits.benefit2 .benefit2_content {display: flex!important;}
    .benefits.benefit3 .benefit3_content {display: flex!important;}
    
    .right-container-scroll {}
    .right-page-grid {display: grid; grid-template-columns: 1fr 1fr; gap:30px;}
    .right-page-vid {margin-top: 20px;}
    
    @media screen and (max-width: 900px) {
	.right-page-grid {display: grid; grid-template-columns: 1fr;}
      .benefits.benefit1 .benefit1_content {display: block!important;}
    .benefits.benefit2 .benefit2_content {display: block!important;}
    .benefits.benefit3 .benefit3_content {display: block!important;}  
	
}



.sub-page-nr {display:flex; gap: 30px; text-align: left;}
.sub-page-nr .sub-page-nr__left {flex: 75%; }
.sub-page-nr .sub-page-nr__right {flex: 25%; position: sticky; align-self: flex-start; top: 0; }
@media screen and (max-width: 900px) {
	.sub-page-nr {display:block; padding: 0; }
	.sub-page-nr .sub-page-nr__left {width: 100%; padding: 0 30px; box-sizing: border-box;}
	.sub-page-nr .sub-page-nr__right {width: 100%; position: relative; padding: 0 30px; box-sizing: border-box;}	
}
@media screen and (max-width: 600px) {
	.sub-page-nr .sub-page-nr__left {padding: 15px}
	.sub-page-nr .sub-page-nr__right {padding: 0 15px;}
}

.sub-page-6535 {display:flex; gap: 30px; text-align: left;}
.sub-page-6535 .sub-page-6535__left {flex: 65%; }
.sub-page-6535 .sub-page-6535__right {flex: 35%; position: sticky; align-self: flex-start; top: 0; }
@media screen and (max-width: 900px) {
	.sub-page-6535 {display:block; padding: 0; }
	.sub-page-6535 .sub-page-6535__left {width: 100%; padding: 0 30px; box-sizing: border-box;}
	.sub-page-6535 .sub-page-6535__right {width: 100%; position: relative; padding: 0 30px; box-sizing: border-box;}	
}
@media screen and (max-width: 600px) {
	.sub-page-6535 .sub-page-6535__left {padding: 15px}
	.sub-page-6535 .sub-page-6535__right {padding: 0 15px;}
}


/* Depot */

.depot-map {display: grid; grid-template-columns: 1fr 1fr; gap:60px; }

.depot-map div:last-child {}
.depot-map div:last-child img {max-width: 800px;}
.depot-locations {display: grid; grid-template-columns: 1fr 1fr; gap:20px;}
.depot-locations p {display: flex; gap:20px; font-size:14px!important}
.depot-locations p .depot-key {width: 40px; height: 40px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; flex:none; border-radius: 100px;}
.depot-locations p .depot-info {}
.depot-locations p .depot-info strong {display: block; font-size:16px!important}
.depot-locations p .depot-info strong a {display: block}
.depot-locations p .depot-info a {color: #faf9f6}
.depot-locations p .depot-info a:hover {text-decoration: underline}
.depot-locations p span {}
.depot-locations p span.icon-green {background-color: #009540; font-weight: bold}
.depot-locations p span.icon-purple {background-color: #821f81; font-weight: bold}
.depot-locations p span.icon-grey {background-color: #606161; font-weight: bold}
.depot-locations p span.icon-split {background: #821F81;
background: linear-gradient(270deg,rgba(130, 31, 129, 1) 50%, rgba(0, 149, 64, 1) 50%); font-weight: bold}

@media screen and (max-width: 1000px) {
   .depot-map {display: grid; grid-template-columns: 1fr ; gap:0px; } 
    .depot-map div:last-child {order: -1}
    
}

@media screen and (max-width: 800px) {
    .depot-locations {display: grid; grid-template-columns: 1fr ; gap:20px;}
}

.styled-scrollbars {
  /* Foreground, Background */
  scrollbar-color: #35A936 #333;
    scrollbar-width: thin;
    
    
     
}
.styled-scrollbars::-webkit-scrollbar {
    scrollbar-width: thin;
  width: 4px; /* Mostly for vertical scrollbars */
  height: 4px; /* Mostly for horizontal scrollbars */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* Foreground */
  background: #999;
     border-radius: 6px;
  
}
.styled-scrollbars::-webkit-scrollbar-track { /* Background */
  background: #3A3A3A;
}

.right-page-scroll { min-height: 700px;   overflow: auto; padding-right: 0px;  }
.right-page-scroll-resources { min-height: 700px; max-height: 700px; overflow: auto; padding-right: 0px; }

@media screen and (max-width: 1300px) {
    
}

.right-page-scroll-2-col {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap:30px;}
.right-page-scroll-2-col div:nth-child(2) {}

.video-grid {display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px; grid-template-rows: max-content;}

@media screen and (max-width: 1100px) {
  .video-grid { grid-template-columns: 1fr 1fr 1fr ;}  
}

@media screen and (max-width: 800px) {
  .video-grid { grid-template-columns: 1fr 1fr ;}  
}

@media screen and (max-width: 500px) {
  .video-grid { grid-template-columns: 1fr ;}  
}



.sub-v2__scroll {min-height: 700px; max-height: 700px; overflow: auto; padding: 40px; grid-column: 1 / 4; }
.sub-v2__fixed { padding: 40px; max-height: 700px; overflow: auto; background-color: #262626; grid-column: 4 / end;  }


.content-video {position: relative; cursor: pointer}
.content-video .video {position: relative; display: block; padding-bottom: 56.25%; background: rgba(0,0,0,0.1); cursor:pointer; overflow: hidden;border-radius: 24px;}
.content-video .video img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}

.video-grid .content-video .video {padding-bottom: 56.25%;}

/* Case studies */
.case-studies {display: grid; gap:40px; grid-template-columns: 1fr 1fr 1fr 1fr; max-height: 700px; overflow: auto  }

@media screen and (max-width: 800px) {
   .right-page-scroll {max-height: 700px; min-height: auto; overflow: auto  } 
    .right-page-scroll-2-col {display: grid; grid-template-columns: 1fr; gap:30px;}
}



/* Post page */
.post__images {}
.post__images .image {position: relative;  overflow: hidden; width: 100%; height: 0; padding-bottom: 50%; margin: 30px 0; cursor: pointer; }
.post__images .image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px}
.post__images .image .supersize-icon {position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; font-size: 30px; color: rgba(0,0,0,0.75); z-index: 1; }
.post__images .thumbs {flex-wrap: no-wrap; gap:40px; display: flex; flex-direction: column; position: sticky; top: 0px; }
.post__images .thumbs > div {position: relative; display: block; box-sizing: border-box; border: 0px solid #eee; cursor: pointer; height: 0; padding-bottom: 100%; border-radius: 24px; overflow: hidden; transition: border 0.1s;  }
.post__images .thumbs > div:hover {border: 1px solid #var(--feature);;}
.post__images .thumbs > div img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.post__images .thumbs > div.active {border: 1px solid #999;}

.post__text {grid-column: 2 / 5; padding-right: 50px;}
.post__text .content-text {margin-top:0px; }
.post__text h1 {margin-top:0px; margin-bottom: 40px;}

@media screen and (max-width: 1300px) {
    .post__images {order: 1}
    .post__images .thumbs {flex-wrap: no-wrap; gap:40px; }
    .case-studies { grid-template-columns: 1fr;  }
    .post__text {grid-column: 1 / 1; padding-right: 10px;}
}

/* Search page */
.search {position: relative; min-height: 300px; text-align: left;}
.search-page {position: relative; flex-grow: 1; width:300px;}
.search-page > input[type=text] {width: 100%; border-style: none; padding: 14px; background-color: #f2f2f2}
.search-page > input[type=text]::placeholder{ color:rgba(0,0,0,0.3); }
.search-page > input[type=text]:focus{background-color: transparent; color:#000;}
.search-page > button {position: absolute; top: 50%; right: 0; margin-top: -25px;  width: 50px; height: 50px; border: none; outline: none; font-size: 20px; font-weight: bold; cursor: pointer; color:var(--feature); background-color:transparent; pointer-events: painted;  }
.search-page > button:focus ~ .input-search { border-radius: 10px; background-color: transparent;}	

.filter-container {display:flex; gap: 30px;  text-align: left; }
.filter-container .filter-container__left {flex: 20%; flex-shrink: 0; width: 240px; position: sticky; align-self: flex-start; top: 0; padding: 30px 0;}
.filter-container .filter-container__left *:first-child {margin-top: 0;}
.filter-container .filter-container__left *:last-child {margin-bottom: 0;}
.filter-container .sub-sections {position: relative; margin: 10px 0 20px 0; }
.filter-container .sub-sections .title {font-weight: 700; padding-bottom: 10px;  border-bottom: 1px solid #ccc;}
.filter-container .sub-sections > a {display:block; position: relative; padding: 10px 30px 10px 0; border-bottom: 1px solid #ccc;}
.filter-container .sub-sections > a > i {position: absolute; top: 50%; right: 10px; line-height: 0;}
.filter-container .filter-container__right {flex: 80%; position: sticky; align-self: flex-start; top: 0; }
.filter-container .filter-toggle > a {display:none;}
@media screen and (max-width: 1100px) {
	.filter-container .filter-container__left {flex: 25%; }
	.filter-container .filter-container__right {flex: 75%; }
}
@media screen and (max-width: 900px) {
	.filter-container {display:block; padding: 0; }
	.filter-container .filter-container__left {width: 100%; z-index: 1; background: #fff; padding: 30px; box-sizing: border-box;}
	.filter-container .filter-container__left.unip:before {display:none;}
	.filter-container .filter-container__left.unip:after {display:none;}
	.filter-container .filter-container__left .filter-toggle {position: relative; }
	.filter-container .filter-container__left .filter-toggle > a {display:flex; gap: 10px; align-items: center;  background: var(--feature); color: #fff; padding: 10px 20px; border-radius: 4px;}
	.filter-container .filter-container__left .filter-toggle > a span {flex-grow: 1; }
	.filter-container .filter-container__left .filter-toggle > div {position: relative; height: 0; width: 100%; overflow: hidden; background: #fff; }	
	.filter-container .filter-container__left .filter-toggle > div > div {position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; background: #eee; border-top: none; overflow: auto; max-height: calc(100vh - 130px); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;  }	
	.filter-container .filter-container__left .filter-toggle > div > div:before {content: ""; display: block; padding-top: 1px; margin-bottom: 20px; }
	.filter-container .filter-container__left .filter-toggle > div > div:after {content: ""; display: block; padding-bottom: 1px; margin-top: 20px; }
	.filter-container .filter-container__left .filter-toggle.active > a {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
	.filter-container .filter-container__left .filter-toggle.active > a b {transform:rotate(180deg)}
	.filter-container .filter-container__left .filter-toggle.active > div {height: auto;}
	.filter-container .filter-container__left .filter-toggle.active > div > div {position: relative;}
	.filter-container .filter-container__left:before {content: ""; position: absolute; top: 100%; left: 0; height: 10px; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
	.filter-container .filter-container__right {position: relative; padding: 0 30px;}	
}
@media screen and (max-width: 600px) {
	.filter-container .filter-container__left {padding: 15px}
	.filter-container .filter-container__right {padding: 0 15px;}
	.filter-container .filter-container__left .filter-toggle > a {padding: 10px 15px; }
	.filter-container .filter-container__left .filter-toggle > div > div {padding: 0 15px; }	
}

.filters {}
.filters .filter  {position: relative; margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid #ccc;}
.filters .filter:last-child  {padding-bottom: 0; border-bottom: none;}
.filters .filter .title {font-weight: 700; }
.filters .options {margin: 10px 0; }
.filters .options a {position: relative; display:block; color: inherit; padding: 5px 0 5px 30px; text-decoration:none; }
.filters .options a .check {position:absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; border: 1px solid var(--borders-input); background: #fff}
.filters .options a.active .check {border: 1px solid #333;}
.filters .options a.active .check:after {content: ""; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -4px; width: 14px; height: 7px; border-bottom: 3px solid var(--feature2); border-left: 3px solid var(--feature2); box-sizing: border-box; transform: rotate(-45deg);}
.filters .options a:hover {}
.filters .slider-container {padding: 10px 0 20px 0; overflow: hidden}
.filters .slider-container .inputs {display:flex; justify-content: space-between;}
.filters .slider-container .units {display:flex; justify-content: space-between; font-size: 0.8em; border-left: 1px solid #aaa; border-right: 1px solid #aaa; color: #555; margin-top: 2px; padding: 3px 5px;  }
.filters .slider-container input[type=text] {padding: 5px; width: 70px; }
.filters .slider-container .slider {position: relative; height: 8px; margin: 20px 24px 0 24px; clear:both; }
.filters .slider-container .slider:before{content: ""; position: absolute; top: 0; left: -24px; right: -24px; height: 8px; background: #888; border-radius: 4px; }
.filters .slider-container .slider .slide-bar {position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--feature2); }	
.filters .slider-container .slider .slide-left {position: absolute; top: 50%; left: 0; width: 0; height: 0;}
.filters .slider-container .slider .slide-right {position: absolute; top: 50%; right: 0; width: 0; height: 0;}	
.filters .slider-container .slider .slide{position: absolute; top: 50%; left: 50%; width: 0; height: 0;}	
.filters .slider-container .slider .slide-left:after {content: ""; position: absolute; top: -10px; right: 0; width: 20px; height: 20px; background: var(--feature2); border: 1px solid #fff; box-sizing: border-box; cursor:pointer; border-radius: 50%;}
.filters .slider-container .slider .slide-right:after {content: ""; position: absolute; top: -10px; left: 0; width: 20px; height: 20px; background: var(--feature2); border: 1px solid #fff; box-sizing: border-box; cursor:pointer; border-radius: 50%;}
.filters .slider-container .slider .slide:after {content: ""; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; background: #888; border: 1px solid #fff; box-sizing: border-box; cursor:pointer; border-radius: 50%;}
.filters .slider-container.active .slider .slide:after {background: var(--feature2); }
.filters .slider-container.active .slider:before {background: var(--feature2); }


.post-group-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;  margin: 0px auto; grid-template-rows: max-content; }
.file-group-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 30px; margin: 0px auto; grid-template-rows: max-content; }
.sub-page-nav__right .post-group-container {grid-template-columns: 1fr 1fr; }
.sub-page-nav__right .file-group-container {grid-template-columns: 1fr 1fr 1fr 1fr ; grid-template-rows: max-content; }
.sub-page-nr__left .post-group-container {grid-template-columns: 1fr 1fr; }
.sub-page-nr__left .file-group-container {grid-template-columns: 1fr 1fr 1fr 1fr ; }
.filter-container__right .post-group-container {grid-template-columns: 1fr 1fr; }


@media screen and (max-width: 1300px) { 
	
    .file-group-container { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media screen and (max-width: 1000px) { 
	.post-group-container {gap: 15px; }
    
}
@media screen and (max-width: 800px) { 
	.file-group-container { grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 750px) { 
	.sub-page-nav__right .file-group-container {grid-template-columns: 1fr 1fr 1fr; }
	.sub-page-nr__left .file-group-container {grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 600px) { 
	.post-group-container { grid-template-columns: 1fr 1fr; }
	.file-group-container { grid-template-columns: 1fr 1fr; }
	.sub-page-nav__right .file-group-container {grid-template-columns: 1fr 1fr; }
	.sub-page-nav__right .post-group-container {grid-template-columns: 1fr; }
	.sub-page-nr__left .file-group-container {grid-template-columns: 1fr 1fr; }
	.sub-page-nr__left .post-group-container {grid-template-columns: 1fr; }
	.filter-container__right .post-group-container {grid-template-columns: 1fr; }
}
@media screen and (max-width: 500px) {
	.post-group-container { grid-template-columns: 1fr; }
    .file-group-container { grid-template-columns: 1fr ; }
}

.carousel {position: relative; display:block;}
.carousel .carousel__container {position: relative; height: 700px; height: calc(100vh - 240px); min-height: 600px; background: rgba(0,0,0,0.5); overflow: hidden; color: #fff; }
.carousel .carousel__slider {position: absolute; left: 0; top: 0; height: 100%; width: 2000%; display: flex; justify-content: flex-start; }
.carousel .carousel__slide {position: relative; display: flex; height: 100%; width: 5%;  }
.carousel .carousel__video {position: absolute; display: none;  top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.carousel .carousel__video iframe {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* width and height set JS */
.carousel .carousel__slide > picture > img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.carousel .carousel__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.carousel .carousel__content {position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1em; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 60px; }
.carousel .carousel__description p:first-child {margin-top: 0;}
.carousel .carousel__description p:last-child {margin-bottom: 0;}
.carousel .carousel__content img {display: block; height: 100px; max-width: 150px; object-fit: contain; }
.carousel .carousel__title {font-size: 2.5em; font-weight: 700;}
.carousel .carousel__content .cta {font-size: 1.1em; font-weight: 700; margin-top: 10px; }
.carousel .carousel__prev {position: absolute; left: 0; top: 50%; height: 80px; width: 60px; margin-top: -40px; }
.carousel .carousel__prev::after {content: ""; position: absolute; left: 50%; top: 50%; height: 24px; width: 24px; margin-top: -12px;  border-style: solid; border-color: #fff; border-width: 0 0 3px 3px; transform: rotate(45deg); opacity: 0.6; transition: all 0.2s; }
.carousel .carousel__prev:hover::after {opacity: 1; left: 45%;}
.carousel .carousel__next {position: absolute; right: 0; top: 50%; height: 80px; width: 60px; margin-top: -40px;}
.carousel .carousel__next::after {content: ""; position: absolute; right: 50%; top: 50%; height: 24px; width: 24px; margin-top: -12px;  border-style: solid; border-color: #fff; border-width: 3px 3px 0 0; transform: rotate(45deg); opacity: 0.6; transition: all 0.2s; }
.carousel .carousel__next:hover::after {opacity: 1; right: 45%; }
.carousel .carousel__buttons {position: absolute; z-index: 10; bottom: 20px; left: 0; width: 100%; display: flex; align-items: center; justify-content: center}
.carousel .carousel__buttons > a {display: block; padding: 10px; }
.carousel .carousel__buttons > a::after {content: ""; display: block; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%;transition: all 0.2s; }
.carousel .carousel__buttons > a.active::after {background: #fff; }
.carousel .carousel__buttons > a:hover::after {background: #fff; }
@media screen and (max-width: 600px) {
	.carousel .carousel__container {height: calc(100vh - 68px); min-height: 400px; }
	.carousel .carousel__content {padding: 0 20px;}
	.carousel .carousel__content img {height: 60px; }
	.carousel .carousel__prev {display:none;}
	.carousel .carousel__next {display:none;}
}

.inpage-grid-gallery {display: grid; margin: 30px auto; grid-template-columns: 1fr 1fr; gap: 20px;}
.inpage-grid-gallery img {aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; border-radius: 20px; cursor: pointer}

.inpage-stack-gallery {display: grid; margin: 30px auto; grid-template-columns: 1fr; gap: 20px;}
.inpage-stack-gallery img {aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; border-radius: 20px; cursor: pointer}


.cta-gallery {display: grid; margin: 30px auto; grid-template-columns: 1fr 1fr; gap: 20px;}




.cta-gallery > div {position: relative; display: flex; border-radius: 10px; background: rgba(0,0,0,0.5); overflow: hidden; color: #fff; }
.cta-gallery > div > picture > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.4s}
.cta-gallery .cta-gallery__video {position: absolute; display: "none"; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.cta-gallery .cta-gallery__video iframe {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* width and height set JS */
.cta-gallery .cta-gallery__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.cta-gallery .cta-gallery__content {position: relative; min-height: 250px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1em; margin: 0 auto; padding: 30px;  }
.cta-gallery .cta-gallery__description p:first-child {margin-top: 0;}
.cta-gallery .cta-gallery__description p:last-child {margin-bottom: 0;}
.cta-gallery .cta-gallery__content img {display: block; height: 50px; max-width: 150px; object-fit: contain; }
.cta-gallery .cta-gallery__title {font-size: 1.5em; font-weight: 700;}
.cta-gallery .cta-gallery__content .cta {font-weight: 700; margin-top: 10px; }

.sub-page-nr__right .cta-gallery {display: grid; margin: 30px auto; grid-template-columns: 1fr; gap: 20px;}

@media screen and (max-width: 1000px) {
	.cta-gallery {grid-template-columns: 1fr;}
}

.pager {display:block; margin: 20px 0; font-size: 0.9em; }
.pager a {display:inline-block; padding: 5px 0; min-width: 25px; line-height: 1.1; vertical-align: middle; text-align: center; color: #fff; text-decoration:none; background: var(--feature2); border: 1px solid var(--feature2);}
.pager a:hover {background-color: #c63473;}
.pager span {display:inline-block; padding: 5px 0; min-width: 25px; line-height: 1.1; vertical-align: middle; text-align: center; color: var(--feature2); text-decoration:none; background: #fff; border: 1px solid var(--feature2); font-style: normal; pointer-events: none;}
.pager b {display:inline-block; padding: 5px 0; min-width: 25px; line-height: 1.1; vertical-align: middle; text-align: center; color: rgba(255,255,255,0.5); text-decoration:none; background: var(--feature2); border: 1px solid var(--feature2); font-style: normal; pointer-events: none;}

/* Maps */
.map-container {position: relative; margin: 30px auto; max-width: 1300px; padding: 0 0px; box-sizing: border-box;  overflow: hidden }
.map-container .map {height: 40vh; posistion: relative; border-radius: 10px; }	
.main > .map-container {position: relative; margin: 30px auto; max-width: 1300px; padding: 0 30px; box-sizing: border-box;  overflow: hidden }
.mapmarker-group {color: var(--text); font-size: 14px; width: 200px; padding: 5px 0 5px 5px;  }
.mapmarker-group img {display: block; width: 100%; margin-bottom: 8px; }
.mapmarker-group p { margin: 0;  }
.mapmarker-group .title {margin: 8px 0; font-weight: 700; font-size: 1.1em;}
.mapmarker-group .description {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} 
.mapmarker-group .price {margin: 8px 0; font-weight: 700; font-size: 1.2em;}
.mapmarker-group a.button {display:block; margin-top: 8px; background: var(--button-bg); color: var(--button-text); padding: 6px; border-radius: 4px; text-align: center;   }
.mapmarker-group a.button .view {display:none;  }

/* FAQ */
.faqs-container {margin: 20px auto;}
.faqs-container > .faq {position: relative; margin: 10px 0;}
.faqs-container > .faq > a {display:block; position: relative; padding: 10px 40px 10px 20px; color: var(--button-text); background: var(--button-bg); border-radius:4px;}
.faqs-container > .faq > a i {position: absolute; top: 50%; right: 20px; line-height: 0; }
.faqs-container > .faq > div {position: relative; height: 0; overflow: hidden;}
.faqs-container > .faq > div > div {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }
.faqs-container > .faq > div > div:before {content: ""; display: block; padding-top: 1px; margin-bottom: 1em;}
.faqs-container > .faq > div > div:after {content: ""; display: block; padding-bottom: 1px; margin-top: 1em;}
.faqs-container > .faq.open > div {height: auto;}
.faqs-container > .faq.open > div > div {position: relative;}
@media screen and (max-width: 900px) { 
	.faqs-container > .faq > a {padding: 10px 35px 10px 15px; }
	.faqs-container > .faq > a i {right: 15px; }
	.faqs-container > .faq > div > div { padding: 0 15px; }
}

.concertina-container {margin: 20px 0; }
.concertina-container > .concertina {position: relative; margin: 10px 0;}
.concertina-container > .concertina > a {display:block; position: relative; padding: 10px 40px 10px 20px; color: #fff; background: var(--feature); border-radius:4px; }
.concertina-container > .concertina > a i {position: absolute; top: 50%; right: 20px; line-height: 0;  }
.concertina-container > .concertina > div {position: relative; height: 0; overflow: hidden;}
.concertina-container > .concertina > div > div {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }
.concertina-container > .concertina > div > div:before {content: ""; display: block; padding-top: 1px; margin-bottom: 1em;}
.concertina-container > .concertina > div > div:after {content: ""; display: block; padding-bottom: 1px; margin-top: 1em;}
.concertina-container > .concertina.open > a {border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.concertina-container > .concertina.open > div {height: auto;}
.concertina-container > .concertina.open > div > div {position: relative; }
.concertina-container > .concertina ul {padding-left: 0; margin-left: -10px; margin-right: -10px;}
.concertina-container > .concertina ul li {list-style: none; padding: 8px 10px; margin: 5px 0; border-radius:4px;}
.concertina-container > .concertina ul li:nth-child(odd) {background-color: #f5f5f7; }
.concertina-container > .concertina ul.side-navigation {padding-left: 0; margin-left: -10px; margin-right: -10px;}
.concertina-container > .concertina ul.side-navigation li {list-style: none; padding: 8px 10px; margin: 5px 0; border-radius: 4px;}
.concertina-container > .concertina ul.side-navigation li:nth-child(odd) {background-color: #F2F2F2; }

.tab-container {}
.tab-container .tabs {position: relative; display: flex; gap: 5px; }
.tab-container .tabs:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #ccc; }
.tab-container .tabs > a {position: relative; padding: 10px 20px; font-weight: 700; background: #f7f7f7; color: #333; border: 1px solid #ccc; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px;  }
.tab-container .tabs > a:hover {background: #fff;}
.tab-container .tabs > a.active {background: #fff; z-index: 1}
.tab-container .tab-content > div {display: none;}
.tab-container .tab-content > div.active {display: block;}

.socials {font-size: 18px; font-weight: 700; margin: 30px 0; text-align:center; }
.socials div {display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
.socials a {color: var(--text); font-size: 20px; padding: 22px 0; width: 44px; border: 1px solid var(--text);  border-radius: 50%; line-height: 0;  }
.socials a:hover {background: var(--text); color: #fff; border-color: var(--text); }

.cookie-container {position: fixed; z-index:10; top: 0; left: 0; width:100%; height: 100%; overflow: hidden; pointer-events: none; transition: all 300ms linear; }
.cookie-container.active { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(0,0,0,0.4); pointer-events: all;} 
.cookie-container > div {position: absolute; bottom: 0; left: 0; height: 0; width: 100%; overflow: hidden; background: var(--feature); color: #fff;}
.cookie-container a {color: inherit; text-decoration: underline;}	
.cookie-container > div >  div {position: absolute; top: 0; left: 0; width: 100%;}
.cookie-container .cookie-container__inner {display:flex; width: 100%; color: #fff; gap: 60px; align-items: center; }
.cookie-container .cookie-container__inner > div {flex-grow: 1;}
.cookie-container .cookie-container__inner > div.buttons {flex-grow: 0; text-align: right; padding: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.cookie-container .cookie-container__inner > div.buttons a {display: inline-block; width: auto; border: 1px solid #fff; color: #fff; text-decoration: none; padding: 6px 10px; transition: all 0.3s; white-space:nowrap }
.cookie-container .cookie-container__inner > div.buttons a:hover {background: #fff; color: var(--feature);}
.cookie-container > div.open {height: auto; }
.cookie-container > div.open > div {position: relative; }
@media screen and (max-width: 900px) { 
	.cookie-container .cookie-container__inner {display:block; }
	.cookie-container .cookie-container__inner > div.buttons {padding-top: 0; align-items: center; justify-content: flex-start; flex-direction: row; text-align: left; }
}
.cookie-options {max-width: 700px; margin: 20px auto; padding: 0 30px; text-align: left  }
#modal .cookie-options {margin: 0; padding: 0;  }
#modal .content-text { padding: 0;  }
.cookie-options hr {margin: 20px 0;}
.cookie-options p {margin: 0 0 1em 0;}
.cookie-options .checkbox {margin: 3px 0;}
.cookie-options .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; cursor: pointer;}
.cookie-options .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.cookie-options .checkbox label i {position: relative; display: block; margin-right: 10px; width: 26px; height: 26px; border: 1px solid var(--borders-input); outline: none }
.cookie-options .checkbox.checked label i {border-color: var(--feature); background: var(--feature);}
.cookie-options .checkbox.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg);}
.cookie-options .checkbox-always {margin: 3px 0;}
.cookie-options .checkbox-always label {display: flex; position: relative; align-items: center; justify-content: left; }
.cookie-options .checkbox-always label i {position: relative; display: block; margin-right: 10px; width: 26px; height: 26px; border: 1px solid #ccc; background: #ccc;}
.cookie-options .checkbox-always label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg);}

/* Forms */
.main > form {margin: 30px auto; max-width: 850px; padding: 0 30px; box-sizing: border-box;}
.form {margin: 30px auto; max-width: 1300px; padding: 0 0px; box-sizing: border-box;}
.form .field {position: relative; margin: 20px 0;}
.form label {display: block; margin: 5px 0; }
.form.floating-labels textarea,.form.floating-labels select, .form.floating-labels input[type='text'], .form.floating-labels input[type='password'] {padding: 12px 10px 4px 10px; }
.form.floating-labels label {position: absolute; left: 1px; top: 1px; z-index: 1; pointer-events: none; padding: 8px 0 0 10px; transition: all 0.2s; margin: 0; }
.form.floating-labels .field.fl-active label {font-size:9px; padding-top: 2px; opacity: 0.6; }
.form .error-message {color: var(--error); display:none; margin-top: 5px; }
.form .error-message.active {display:block; }
.form input[type=text], .form input[type=password], textarea, select {width: 100%; }

.form .select-container select {-webkit-appearance: none; -moz-appearance: none; }
.form .select-container select::-ms-expand { display: none; }
.form .select-container {position: relative; }
.form .select-container:after {content: ""; position: absolute; right: 10px; top: 50%; margin-top: -7px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; z-index: 1; }

.form .checkbox {margin: 3px 0;}
.form .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; cursor: pointer;}
.form .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.form .checkbox label i {position: relative; display: block; margin-right: 10px; width: 22px; height: 22px; border: 1px solid var(--borders-input); }
.form .checkbox.focused label i {outline: 4px solid rgba(0,0,0,0.08);}
.form .checkbox.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid var(--feature); border-left: 3px solid var(--feature); transform: rotate(-45deg);}

.form .radio {margin: 3px 0;}
.form .radio label {display: flex; align-items: center; justify-content: left; cursor:pointer;}
.form .radio label input[type=radio] {position: absolute; opacity: 0;  pointer-events: none;}
.form .radio label i {position: relative; display: block; margin-right: 10px; width: 20px; height: 20px; border: 1px solid #bbb;; border-radius: 50%; }
.form .radio.focused label i {outline: 4px solid rgba(0,0,0,0.08);}
.form .radio.checked label i:after {content: ""; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; background: var(--text); border-radius: 50%; }

.form .date-container {display: flex; width: 100%; margin: 0 -2px; }
.form .date-container .select-container {width: 100%; padding: 2px; }

.form .stockcontrol-container {position: relative; }
.form .stockcontrol-container select {display:none; }
.form .stockcontrol-container .options {display:none; background: #fff; z-index: 6; border:1px solid var(--borders-input);}
.form .stockcontrol-container .option {display:flex; padding: 10px; align-items: center; border-bottom: 1px solid #eee; width: 100%; box-sizing: border-box; gap: 10px;}
.form .stockcontrol-container .option .text {display:flex; position: relative; align-items: center; width: 100%; }
.form .stockcontrol-container .option .text > div {width: 33%;}
.form .stockcontrol-container .option .text .stock {text-align: center;}
.form .stockcontrol-container .option .text .price {text-align: right; font-weight: 700;}
.form .stockcontrol-container .option .image {position: relative; flex-grow: 0; flex-shrink: 0; width: 60px; height: 40px; overflow:hidden; border: 1px solid #ddd; background: #fff; }
.form .stockcontrol-container .option .image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.form .stockcontrol-container .option .color {display:flex;  flex-grow: 0; flex-shrink: 0; width: 60px; height: 40px; border: 1px solid #ddd; background: #eee;}
.form .stockcontrol-container .option .color div {flex-grow: 1; height: 40px;}
.form .stockcontrol-container .option.active  {border: 3px solid #000; padding: 7px;}
.form .stockcontrol-container .option .stock > div {display:none;}
.form .stockcontrol-container .option.stock-ok .stock .stock-ok {display:block; color:green; }
.form .stockcontrol-container .option.stock-low .stock .stock-low {display:block; color:orange; }
.form .stockcontrol-container .option.stock-zero {pointer-events:none; color:#bbb; background: #fafafa; }
.form .stockcontrol-container .option.stock-zero .stock .stock-zero{display:block; color: red;}
.form .stockcontrol-container .option.stock-zero .image img {opacity: 0.5; }
.form .stockcontrol-container.active  {z-index: 5;}
.form .stockcontrol-container.active .options {position: absolute; display:block; top: 0; left: 0; width: 100%; cursor:pointer; outline: 5px solid rgba(0,0,0,0.08); }
.form .stockcontrol-container.active:before {content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.form .stockcontrol-container.active .selected { z-index: 6;}
.form .stockcontrol-container .selected {position: relative; background: #fff; border: 1px solid #ccc;}
.form .stockcontrol-container .selected .stock {display:none;}
.form .stockcontrol-container .selected .price {display:none;}
.form .stockcontrol-container .selected:after {content: ""; position: absolute; right: 10px; top: 50%; margin-top: -7px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; }

.form .booking-calendar {}
.form .booking-calendar .selected-date_container {display:none;}
.form .booking-calendar .selected-date {display: flex; align-items: center; gap:10px;  justify-content: space-between; margin: 5px 0; padding: 10px; border: 1px solid var(--borders-input); cursor: pointer;}
.form .booking-calendar .selected-date:after {content: ""; position: relative; display: block; margin-top: -5px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; }
.form .booking-calendar .calendar_container {display:none;}

.form .searchList-container {position: relative; }
.form .searchList-container .searchList-display {position: relative; outline: none; line-height: 1.1;  }
.form .searchList-container .searchList-display > div {position: relative; box-sizing: border-box; border: 1px solid #ccc; background: #fff; color: #333; outline: none; padding: 8px 10px;; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer}
.form .searchList-container .searchList-opener {display:none;}
.form .searchList-container.active .searchList-display > div {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid #ccc;}
.form .searchList-container.active .searchList-cover {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 6; background: rgba(0,0,0,0.1); }
.form .searchList-container.active .searchList-opener {z-index: 8; border: 1px solid #ccc; border-top: none; } 
.form .searchList-container.active .searchList-opener {display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; font-size: 14px; overflow: hidden; }
.form .searchList-container.active .searchList-opener .searchList-search {padding: 10px; position: relative;  }
.form .searchList-container.active .searchList-opener .searchList-search input[type=text] { border: 1px solid #aaa; padding: 5px 10px; font-size: 15px; background: #fff;   }
.form .searchList-container.active .searchList-opener .searchList-search i {position: absolute; top: 50%; right: 20px; line-height: 0; pointer-events: none; color:#333; }
.form .searchList-container.active .searchList-opener .searchList-result {position: relative; max-height: 220px; overflow: auto; }
.form .searchList-container.active .searchList-opener .searchList-result ul { margin: 0; padding: 0; list-style: none; text-align: left; }
.form .searchList-container.active .searchList-opener .searchList-result ul li { border-top: 1px solid #ccc;}
.form .searchList-container.active .searchList-opener .searchList-result ul li a {display: block; position: relative; padding: 8px 15px 5px 15px; text-decoration: none; color: #333;  }
.form .searchList-container.active .searchList-opener .searchList-result ul li a i {position: absolute; top: 50%; right: 10px; line-height: 0; }
.form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--button-bg); color: var(--button-text);}
.form .searchList-container.active .searchList-opener .searchList-result ul li a::after {content: ""; position: absolute; box-sizing: border-box;  right: 10px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg);}
.form .searchList-container.active .searchList-opener .searchList-result ul li a:hover::after {border-color: var(--button-text);}
.form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: #1e3664; color: #fff;}
.form .searchList-container.active .searchList-opener .searchList-result ul li a b {display: block; }
.form .searchList-container.active .searchList-opener .searchList-result.waiting ul {opacity: 0.5;}
.form .searchList-container.active .searchList-opener .searchList-result.waiting:after {content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin-top: -13px; margin-left: -13px; border: 5px solid #fff; border-right: 5px solid rgba(255,255,255,0.5); border-radius: 50%; box-sizing: border-box; animation: spin 1.5s linear infinite;  }
.form .searchList-container.active .searchList-opener .searchList-result .empty {padding: 20px 0; color: #333; font-size: 0.8em; text-align: center;}

.form .qty-container {display:flex; align-items: center; justify-content:flex-start; }
.form .qty-container span {position: relative; display: block; box-sizing: border-box; width: 36px; height: 36px; background: var(--button-bg); cursor: pointer; border-radius: 4px; transition: ease-in-out all 0.2s; border: 2px solid var(--button-bg);   }
.form .qty-container span.inactive {background: #eee; pointer-events: none; border: 2px solid #ddd; }
.form .qty-container span.minus:before {content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin-top: -1px; margin-left: -8px; background: var(--button-text);}
.form .qty-container span.minus.inactive:before {background: #ccc;}
.form .qty-container span.plus:before {content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin-top: -1px; margin-left: -8px; background: var(--button-text);}
.form .qty-container span.plus:after {content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 16px; margin-top: -8px; margin-left: -1px; background: var(--button-text);}
.form .qty-container input {width: 60px; margin: 0 5px; text-align:center;}
.form .qty-container span:hover {background: #fff; }
.form .qty-container span:hover.plus:before { background: var(--feature);}
.form .qty-container span:hover.plus:after { background: var(--feature);}
.form .qty-container span:hover.minus:before { background: var(--feature);}
.form .qty-container span:hover.minus:after { background: var(--feature);}

.form .upload-container .uploader-inner { position: relative; padding: 0 0 0 111px; min-height: 101px; }
.form .upload-container .thumb {position: absolute; display: flex; overflow: hidden; align-items: center; justify-content: center; left: 0; top: 0; width: 101px; height: 101px;cursor: pointer; box-sizing: border-box; background-color: #eee; border: 1px solid #ccc; }
.form .upload-container .thumb img {max-height: 100px; max-width: 100px; }
.form .upload-container .thumb i {position: absolute; top: 50%; left: 0; width: 100%; line-height: 0; color: #ccc; text-align: center; font-size: 30px;}
.form .upload-container .thumb a {display: none;}
.form .upload-container .thumb .progress {position: absolute; z-index: 1; left: 0;bottom: 0;width: 100%; border-top: 1px solid #ccc; height: 6px; background: #fff; box-sizing: border-box;}
.form .upload-container .thumb .progress div {position: absolute; left: 0; top: 0;height: 100%; background: red;}
.form .upload-container .thumb.active i {display: none;}
.form .upload-container .thumb.active a {position: absolute; display: block; top: 0; right: 0; width: 20px; padding: 10px 0; color: #fff; background: rgba(0, 0, 0, 0.4); }
.form .upload-container .thumb.active a:after {content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
.form .upload-container .thumb.active a:before { content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
.form .upload-container .thumb.active a:hover {background: red;}
.form .upload-container .thumb:before {content: ""; position: absolute; top: 50px; left: -30px; right: -30px; height: 1px; background: #ccc; transform: rotate(45deg); }
.form .upload-container .thumb:after {content: ""; position: absolute; top: 50px; left: -30px; right: -30px; height: 1px; background: #ccc; transform: rotate(-45deg); }
.form .upload-container .thumb.active:before {display:none;}
.form .upload-container .thumb.active:after {display:none;}
.form .upload-container .details {font-size: 0.7em;} 
.form .upload-container .button {margin-bottom: 5px; }
.form .upload-container .button a {display:inline-block; padding: 10px 20px; background: var(--button-bg); color: var(--button-text); border:none; outline: none;  border-radius: 4px; }

.form .success-message {display:none;}

form.loading .form {pointer-events: none;}
form.loading .form  .field {opacity: 0.5; }
form.loading .form .button-container button {color: transparent;}
form.loading .form .button-container button {color: transparent;}
form.loading .form .button-container button:before {border-color: transparent;}
form.loading .form .button-container button:after {content: ""; position: absolute; border: 3px solid var(--button-text); border-top-color: transparent; width: 16px; height: 16px; left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; border-radius: 50%; box-sizing: border-box; animation: spin 1.5s infinite linear; }

/* Footer */
footer {position: fixed; width: 100%; background: var(--feature); text-align: center; padding: 15px; font-size: 12px; color: #faf9f6; bottom: 0px; z-index: 2 ; box-sizing: border-box}
footer .content-text  {margin: 0px auto;}
                footer .content-text a {color: #faf9f6; text-decoration: underline}
                footer .content-text p {margin: 0px;}

@media screen and (max-width: 900px) { 
    footer {position: relative; bottom: 0px; }
    .footer-remove {display: none}
}


/* Modals */

#modal { position: fixed; display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.45); z-index: 200; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);; }
#modal.hidden {display:none;}
#modal .inner {position: relative; width: 100%; max-width: 900px; max-height: 100%; cursor: default; padding: 20px; box-sizing: border-box; }
#modal .inner #content { position: relative; max-height: 95vh; max-height: calc(100vh - 60px); background: #faf9f6; padding: 0 30px; text-align: left; border-radius: 5px; overflow: auto; -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */; color:var(--text-dark)  }
#modal .inner #content::-webkit-scrollbar {display: none;}
#modal .inner #content:before { content: ""; display: block; margin-bottom: 30px; padding-top: 1px; }
#modal .inner #content:after { content: ""; display: block; margin-top: 30px; padding-bottom: 1px; }
#modal .inner #content h1, #modal .inner #content h2, #modal .inner #content h3 {margin-top: 20px; } 
#modal .inner #content a:hover {color: inherit;}
#modal.no-padding .inner #content {padding: 0;}
#modal.no-padding .inner #content:before {display: none; }
#modal.no-padding .inner #content:after {display: none; }
#modal .inner .closeButton { position: absolute; top: 5px; right: 5px;}
#modal.download .inner {width: auto;}
#modal.download .inner #content {padding: 0 20px; font-size: 0.8em; min-width: 0; text-align: center; width: auto; }
#modal.download .inner #content:before {margin-bottom: 20px;  }
#modal.download .inner #content:after {margin-top: 20px;  }
#modal.download .inner i {margin-bottom: 6px; color: var(--feature); }
#modal.download .inner .closeButton {display: none;} 

#modal.videoModal{}
#modal.videoModal .inner {max-width: 1300px; background-color: #000000; border-radius: 24px; padding: 30px;} 
#modal.videoModal .inner #content {padding-bottom: 56.2%; border-radius: 15px;} 
#modal.videoModal .inner #content iframe {position: absolute; width: 100%; height: 100%; border-radius: 15px;} 

@media screen and (max-width: 600px) { 
	#modal .inner #content { padding: 0 20px; }
	#modal .inner #content:before {margin-bottom: 20px; }
	#modal .inner #content:after {margin-top: 20px; }
}

#supersize { position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: auto; background: rgba(0, 0, 0, 0.45); z-index: 200; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#supersize .inner {position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; box-sizing: border-box; }
#supersize .inner .content {position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.99); overflow: hidden; border-radius: 24px;}
#supersize .inner .content .text {z-index: 1; position: absolute; top: 40px; left: 40px; width: 100%; color: #faf9f6; font-size: 14px; }
#supersize .inner .content .text .title{color: #faf9f6; font-size: 14px; }
#supersize .inner .closeButton { position: absolute; top: -15px; right: -15px; }	
#supersize .inner .ssprev {position: absolute; top: 50%; left: -1px; width: 30px; height: 60px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; margin-top: -30px; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; }
#supersize .inner .ssprev::after {content: ""; position: absolute; top: 50%; left: 8px; width: 12px; height: 12px; border: solid #333; border-width: 0 0 2px 2px; box-sizing: border-box; margin-top: -6px; transform: rotate(45deg);}
#supersize .inner .ssprev:hover::after {border-color: var(--button-bg);}
#supersize .inner .ssnext {position: absolute; top: 50%; right: -1px; width: 30px; height: 60px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; margin-top: -30px; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; }
#supersize .inner .ssnext::after {content: ""; position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; border: solid #333; border-width: 0 2px 2px 0; box-sizing: border-box; margin-top: -6px; transform: rotate(-45deg);}
#supersize .inner .ssnext:hover::after {border-color: var(--button-bg);}
#supersize .inner .ssbuttons {position: absolute; display: flex; justify-content: center; bottom: 20px; left: 0; width: 100%; z-index: 1; pointer-events: none; }
#supersize .inner .ssbuttons a {display: block; padding: 6px; transition: all 0.3s; pointer-events: all;}
#supersize .inner .ssbuttons a::after {content: ""; display: block; width: 8px; height: 8px; background: #333; border: 1px solid #333; border-radius: 3px; transition: all 0.3s; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); }
#supersize .inner .ssbuttons a.active {transform: scale(1.3); pointer-events: none;}
#supersize .inner .ssbuttons a:hover {transform: scale(1.3);}
#supersize .inner .ssbuttons a.active::after, #supersize .inner .ssbuttons a:hover::after {background: #fff;}

#supersize .zoom-control {position:absolute; right: 16px; bottom: 16px; border-radius: 8px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; border: 1px solid #ccc;}
#supersize .zoom-control a {position: relative; width: 30px; height: 30px; display: block; background: #fff; }
#supersize .zoom-control a:first-child {border-top-right-radius: 8px; border-top-left-radius: 8px; }
#supersize .zoom-control a:last-child {border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-top: 1px solid #ccc;;}
#supersize .zoom-control a::before {content: ""; position: absolute; width: 14px; height: 2px; left: 50%; top: 50%; margin-left: -7px; margin-top: -1px; background-color: #333}
#supersize .zoom-control a:first-child::after {content: ""; position: absolute; width: 2px; height: 14px; left: 50%; top: 50%; margin-left: -1px; margin-top: -7px; background-color: #333}
#supersize .zoom-control a:hover {background: var(--button-text);}
#supersize .zoom-control a:hover::before {background: var(--button-bg);}
#supersize .zoom-control a:hover::after {background: var(--button-bg);}
#supersize .zoom-control a.disabled {pointer-events: none;}
#supersize .zoom-control a.disabled:before {opacity: 0.25;}
#supersize .zoom-control a.disabled:after {opacity: 0.25;}
#supersize .pan-control {position:absolute; right: 70px; bottom: 16px; border-radius: 100%; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border: 1px solid #ccc; height: 70px; width: 70px; background-color: #fff; display: none; z-index: 1;}
#supersize .pan-control a {position: absolute; display: block; left: 50%; top: 50%; margin-left: -13px; margin-top: -35px; width: 26px; height: 26px; transform-origin: 13px 35px}
#supersize .pan-control a::after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -6px; margin-top: -3px; width: 12px; height: 12px; display: block; border-style: solid; border-color: #333; border-width: 2px 2px 0 0; box-sizing: border-box; transform: rotate(-45deg)}
#supersize .pan-control a:nth-child(1) {transform: rotate(0);  }
#supersize .pan-control a:nth-child(2) {transform: rotate(90deg);}
#supersize .pan-control a:nth-child(3) {transform: rotate(180deg);}
#supersize .pan-control a:nth-child(4) {transform: rotate(270deg);}
#supersize .pan-control a.disabled {pointer-events:none; opacity: 0.25;}
@media screen and (max-width: 600px) { 
	#supersize .inner {top: 20px; left: 20px; right: 20px; bottom: 20px; }
}

.closeButton {width: 30px; height: 30px; background: var(--button-bg); border-radius: 50%;  transition: all 0.2s; border: 2px solid var(--button-bg) }
.closeButton:before { content: ""; position: absolute; background: var(--button-text); width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
.closeButton:after { content: ""; position: absolute; background: var(--button-text); width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
.closeButton:hover {background-color: var(--button-text); }
.closeButton:hover:before {background: var(--button-bg);}
.closeButton:hover:after {background: var(--button-bg);}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

ul.calendar-time-list {margin: 20px 0; padding: 0; list-style: none; border-bottom: 1px solid #ccc; }
ul.calendar-time-list li {display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; font-weight: bold; padding: 5px 0;}
ul.calendar-time-list li:nth-child(odd){background: #f7f7f7;}
ul.calendar-time-list li button {padding: 3px 8px; margin: 1px; color: var(--button-text); background: var(--button-bg); border: 1px solid var(--button-bg); border-radius: 8px; cursor:pointer; transition: all ease-in 0.1s; }
ul.calendar-time-list li button:hover {color: var(--button-bg); background-color: var(--button-text); }

.calendar {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 1px; max-width: 350px; background: #ccc; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.calendar > div {display:flex; position: relative; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; padding: 2px; background: #fff; color: #333; text-align: center; font-size: 12px;}	
.calendar > div.day {font-size: 16px; font-weight: 700; min-height: 50px; padding: 5px; pointer-events: none;}	
.calendar > div.monthLabel {grid-column:1/8; font-size: 1rem; font-weight: bold; padding: 8px; }
.calendar > div.monthLabel a {position: absolute; box-sizing: border-box; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-color: #000; border-style: solid; }
.calendar > div.monthLabel a.prev {left: 10px; border-width: 0 0 2px 2px; transform:rotate(45deg);}
.calendar > div.monthLabel a.next {right: 10px; border-width: 0 2px 2px 0 ; transform:rotate(-45deg);}
.calendar .wkend {background: #eee;}
.calendar .day ul {display:none;}
.calendar .dayxxx:hover ul {position: absolute; z-index: 10; top: calc(100% + 10px); left: 0; width: 100px; font-size: 1rem; text-align: left; display:block; border: 1px solid #ccc; background: #fff; color: #333; margin: 0; padding: 5px; list-style: none; font-size: 11px; font-weight: normal; }
.calendar .dayxxxx:hover ul li {padding: 0; margin; 0; }
.calendar .day.today {background: #000; color: #fff; }
.calendar .day.available {border:3px solid var(--feature); pointer-events: all; padding: 3px; }
.calendar .day.available:hover {background: var(--feature); color: #fff; cursor:pointer; }
.calendar .day.active {background: var(--feature); color: #fff; cursor:pointer; }
.calendar .day.past {color: #ccc;}
.calendar .day.dimmed {color: #ccc;}
.calendar .day.past:before {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: #ccc; transform: rotate(45deg);}
.calendar .day.past:after {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: #ccc; transform: rotate(-45deg);}
.calendar .day.today:before {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: rgba(255,255,255,0.2); transform: rotate(45deg);}
.calendar .day.today:after {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: rgba(255,255,255,0.2); transform: rotate(-45deg);}



















/* Tax prices */
.prices-extax {display:none}
.extax div.prices-extax {display:block}
.extax span.prices-extax {display:inline-block}
.extax tr.prices-extax {display:table-row}
.extax td.prices-extax {display:table-cell}
.extax .prices-inctax {display:none}



.section-group-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin: 30px auto; }
.product-group-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px; margin: 30px auto;}
.sub-page-nav__right .product-group-container {grid-template-columns: 1fr 1fr 1fr 1fr; }
.sub-page-nr__left .product-group-container {grid-template-columns: 1fr 1fr 1fr 1fr; }
.sub-page-nr__left .post-group-container {grid-template-columns: 1fr 1fr; }
.filter-container__right .product-group-container {grid-template-columns: 1fr 1fr 1fr 1fr; }
@media screen and (max-width: 1100px) { 
	.filter-container__right .product-group-container {grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
}
@media screen and (max-width: 1000px) { 
    .section-group-container { grid-template-columns: 1fr 1fr; gap: 15px; }
	.product-group-container { grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 800px) { 
	.product-group-container { grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 750px) { 
	.sub-page-nav__right .product-group-container {grid-template-columns: 1fr 1fr 1fr; }
	.sub-page-nr__left .product-group-container {grid-template-columns: 1fr 1fr 1fr; }
    .filter-container__right .product-group-container {grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 600px) { 
    .section-group-container { grid-template-columns: 1fr; }
	.product-group-container { grid-template-columns: 1fr 1fr; }
	.sub-page-nav__right .product-group-container {grid-template-columns: 1fr 1fr; }
	.sub-page-nr__left .product-group-container {grid-template-columns: 1fr 1fr; }
    .filter-container__right .product-group-container {grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 500px) {
	.product-group-container { grid-template-columns: 1fr; }
	.sub-page-nav__right .product-group-container {grid-template-columns: 1fr; }
	.sub-page-nr__left .product-group-container {grid-template-columns: 1fr; }
    .filter-container__right .product-group-container {grid-template-columns: 1fr; }
}

.section-group {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; color: inherit; text-align: left;}
.section-group > div {position: relative; display: flex; flex-direction: column; gap: 10px;}
.section-group a.section-group__image {position: relative; display: block; height: 0; padding-bottom: 70%; background: #eee; border-radius: 10px; overflow: hidden;}
.section-group a.section-group__image img {position: absolute; left: 0 ; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: all ease-in-out 0.4s}
.section-group a.section-group__image span {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 50px; color: #ccc; }
.section-group:hover .section-group__image img{transform: scale(1.05);}
.section-group .section-group__text {}
.section-group .section-group__text .section-group__title {font-weight: 700; font-size: 1.15em; }
.section-group .section-group__text p {margin: 0;}
.section-group .section-group__text div {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.section-group .section-group__stats {position: relative; display: block; font-weight: 700;}
.section-group .section-group__links {position: relative; }
.section-group .section-group__links a {color: var(--feature); display: block; padding: 2px 0;}
.section-group .section-group__links a:hover {color:#000; }
.section-group .cta {text-align: center;}

.product-group {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; color: inherit; text-align: left; border: 1px solid var(--borders-light); border-radius: 10px; overflow: hidden; }
.product-group .product-group__image { position: relative; display: block; height: 0; padding-bottom: 70%; margin-bottom: 15px; background: #fff; }
.product-group .product-group__image img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; transition: all ease-in-out 0.4s}
.product-group .product-group__image span {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 40px; color: #ccc; }
.product-group:hover .product-group__image img {transform: scale(1.05);}
.product-group .product-group__tag { position: absolute; display:flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; top: -40px; right: -40px; width: 80px; height: 80px; text-align: center; transform:rotate(45deg); padding: 2px; background: var(--feature2); color: #fff; }
.product-group .product-group__text {padding: 0 15px; }
.product-group .product-group__text .product-group__title {font-size: 1em; font-weight: 400; }
.product-group .product-group__text p {margin: 0;}
.product-group .product-group__text div {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-group .product-group__text .colors {display: flex; gap: 3px; margin-top: 5px; }
.product-group .product-group__text .colors > div {display: flex; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;}
.product-group .product-group__text .colors > div > div {flex-grow: 1; height: 20px; }
.product-group .product-group__price {font-size: 1.4em; font-weight: 700; padding: 0 15px; }
.product-group .product-group__location {display:none; padding: 0 15px; }
.product-group .cta {padding: 15px; text-align: center; }
.product-group .cta .view {display:none;}
.product-group .stock-zero__warning {display:none;}
.product-group .stock-low__warning {display:none;}
.product-group.stock-zero .stock-zero__warning {display:block; color: red; padding: 0 15px;}
.product-group.stock-low .stock-low__warning {display:none; color: orange; padding: 0 15px;}
.product-group.stock-zero .cta a {background: #ccc; border-color: #ccc; color: #fff;}
.product-group.stock-zero .cta a:hover {background: #ccc; border-color: #ccc; color: #fff;}
.product-group.stock-zero .cta .buy {display:none;}
.product-group.stock-zero .cta .view {display:inline;}

.product-group-h {position: relative; display: flex; flex-direction: row; gap: 15px; padding-top: 15px; margin: 15px 0; border-top: 1px solid var(--borders-light); }
.product-group-h .product-group-h__image {position: relative; display: block; width: 90px; height: 90px; flex-grow: 0; flex-shrink: 0; border: 1px solid var(--borders-light); border-radius: 4px;}
.product-group-h .product-group-h__image img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; transition: all ease-in-out 0.4s; }
.product-group-h .product-group-h__image span {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 30px; color: #ddd; }
.product-group-h .product-group-h__right {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex-grow: 1;}
.product-group-h .product-group-h__right .product-group-h__text {display:block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-group-h .product-group-h__right .product-group-h__text .product-group-h__title {font-size: 1.15em; font-weight: 700; padding: 0;}
.product-group-h .product-group-h__right .product-group-h__text p {margin: 0;}
.product-group-h .product-group-h__right .product-group-h__bottom {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 5px;}
.product-group-h .product-group-h__right .product-group-h__price {font-size: 1.2em; font-weight: 700;}
.product-group-container-h .product-group-h:first-child {border-top: none; padding-top: 0;}

.product.product__grid {position: relative; display:grid; grid-row-gap: 10px; grid-column-gap: 60px; grid-template-columns: 1fr 1fr;  grid-template-rows: auto minmax(0, 1fr); text-align: left; }	
.product.product__grid .product__images {grid-column: 1 / span 1; grid-row: 1 / span 2; }
.product.product__grid .product__text {grid-column: 2 / span 1; grid-row: 1 / span 1;}
.product.product__grid .product__text:before {content: ""; position: relative; display:block; padding-top: 1px; margin-bottom: 30px; }
.product.product__grid .product__form {grid-column: 2 / span 1; grid-row: 2 / span 1;}
.product .product__images {}
.product .product__images .image {position: relative;  overflow: hidden; width: 100%; height: 0; padding-bottom: 70%; margin: 30px 0; cursor: pointer; }
.product .product__images .image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.product .product__images .image .supersize-icon {position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; font-size: 30px; color: rgba(0,0,0,0.75); z-index: 1; }
.product .product__images .thumbs {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 5px; }
.product .product__images .thumbs > div {position: relative; display: block; box-sizing: border-box; border: 1px solid #eee; cursor: pointer; height: 0; padding-bottom: 70%; border-radius: 4px; overflow: hidden; transition: border 0.1s;  }
.product .product__images .thumbs > div:hover {border: 1px solid #var(--feature);;}
.product .product__images .thumbs > div img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.product .product__images .thumbs > div.active {border: 1px solid #999;}

.product .product__tag { position: absolute; display:flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; top: -40px; right: -40px; width: 80px; height: 80px; text-align: center; transform:rotate(45deg); padding: 2px; background: var(--feature2); color: #fff; }

.product .product__form .prices .main-price { font-size: 2em; font-weight: 700;}
.product .product__form .prices .discount {display:none; margin: 20px 0; }
.product .product__form .prices .discount.active + .discount.active {margin-top: -20px; }
.product .product__form .prices .discount.active {display:block; }
.product .product__form .button-container button {display:block; text-align: center; padding: 25px 50px; font-size: 1.2em; font-weight: 400;}
.product .product__form form.disabled .button-container button {background: #ccc; pointer-events: none; border-color: #ccc;}
.product .advanced-prices {margin-top: 20px;}
.product .advanced-prices table {border: 1px solid var(--borders-light); border-collapse: collapse; width: 100%; }
.product .advanced-prices table td {border: 1px solid var(--borders-light); padding: 5px 10px;}
.product .options.error table {outline: 1px solid var(--error);}
.product .options.error .errorMessage {display:block;}
.product-add-success {display: flex; flex-direction: column; max-height: 95vh; max-height: calc(100vh - 160px); }
.product-add-success > div {flex-shrink: 0; padding: 0 30px; }
.product-add-success .product-group-container-h {flex-shrink: 1; overflow: auto; margin: 0; border-top: 1px solid var(--borders-light); border-bottom: 1px solid var(--borders-light); }
.product-add-success .buttons {background: #eee; padding-top: 30px; padding-bottom: 30px; }
.product-add-success .buttons a.button {display: block; background-color: var(--feature);padding: 15px 30px; border: 2px solid var(--feature); border-radius: 4px;color: #fff; font-weight: 400; transition: all ease-in 0.1s; text-align: center}
.product-add-success .buttons a.button:hover {background: #fff!important; color: var(--feature)!important; border: 2px solid var(--feature);}
.product-add-success .buttons a.continue-link {display: block; padding: 15px 30px 0 30px; color: var(--feature); font-weight: 400; transition: all ease-in 0.1s; text-align: center}
.product-add-success .buttons a.continue-link:hover {text-decoration: underline; color:var(--links--hover) }
@media screen and (max-width: 1200px) { 
	.product .product__images .thumbs {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
}
@media screen and (max-width: 900px) { 
	.product.product__grid {display:block; }	
	.product.product__grid .product__images {padding: 0; margin: 30px 0; }
	.product.product__grid .product__form {margin: 30px 0;}
	.product .product__images .thumbs {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}
@media screen and (max-width: 600px) { 
	.product .product__images .thumbs {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
	.product-add-success > div {padding: 0 15px; }
}
@media screen and (max-width: 500px) { 
	.product .product__images .thumbs {grid-template-columns: 1fr 1fr 1fr 1fr;}
}

.section {}
.section .map-container {height: 600px; background: #eee;}


/* cart */
.cart {position: relative; min-height: 300px; text-align: left;  }	
.cart .container {display:flex; gap: 60px; }
.cart .cart__left {flex-grow: 1;  flex-shrink: 1; }
.cart .cart__left tr.grand-total td{font-size: 1.1em; font-weight: 700;}
.cart .cart__right {position: sticky; align-self: flex-start; flex-grow: 0; flex-shrink: 0; width: 300px; top: 0; z-index: 1; padding: 30px 0; box-sizing: border-box; }
.cart .cart__right .button-container a {box-sizing: border-box; width: 100%; padding: 30px 10px; font-size: 1.1em; }
.cart .cart-product {position: relative; display:flex; flex-direction: column; padding-left: 110px; min-height: 70px; gap: 5px; }
.cart .cart-product .image {position: absolute; left: 0; top: 0; width: 100px; height: 70px; overflow: hidden; border-radius: 4px; border: 1px solid var(--borders-light); box-sizing: border-box; }
.cart .cart-product .image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;  }
.cart .cart-product .image .icon {position: absolute; top: 50%; left: 0; width: 100%; color: #ccc; font-size: 30px; line-height: 0; text-align: center; }
.cart .cart-product .name {font-weight: 700;}
.cart .cart-product .choices {font-size: 0.9em;}
.cart .cc-icons {max-width: 200px; }
.cart .qty {position: relative; width: auto;}
.cart .qty select {padding: 3px 14px 5px 5px; cursor:pointer;}
.cart .qty select {-webkit-appearance: none; -moz-appearance: none;}
.cart .qty select::-ms-expand { display: none;}
.cart .qty:after {content: ""; position: absolute; right: 8px; top: 50%; margin-top: -7px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; z-index: 1; }
.cart #shippingCalculator {display:none;}
.cart #offerCodeForm {display:none;}
.cart .cart__right .cart-total {font-size: 2.5em; font-weight: 700;}
@media screen and (max-width: 1100px) {
	.cart .container {gap: 30px;} 
	.cart .cart__right {width: 250px; }
}
@media screen and (max-width: 900px) {	
	.cart .container {flex-direction: column-reverse; gap: 0; padding: 0; }
	.cart .cart__left {box-sizing: border-box; width: 100%; padding: 0 30px;}
	.cart .cart__right {background: #fff; border-bottom: 1px solid #d7d7d7; width: 100%; padding: 15px 30px; }
	.cart .cart__right:after {content: ""; position: absolute; top: 100%; left: 0; height: 15px; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
	.cart .cart__right .cart__right__flex {display: flex; flex-direction: row; justify-content: space-between; align-items: center; line-height: 1.1; }
	.cart .cart__right .cart__right__flex > div {position: relative;}
	.cart .cart__right .cart__right__flex .button-container {margin: 0;}
	.cart .cart__right .cc-icons {display:none;}
	.cart .cart__right .button-container a {padding: 20px; font-size: 1rem;  }
	.cart .cart__right .cart-total {font-size: 1.6em;}
}
@media screen and (max-width: 600px) {
	.cart .cart__left {padding: 0 15px;}
	.cart .cart__right {padding: 15px;}
	.cart .cart-product {padding-left: 0; min-height: 0;}
	.cart .cart-product .image {display:none; position: relative; width: auto; height: 60px; }
	.cart table tr td:nth-child(2){display:none}
	.cart-total {font-size: 2em;}
}

/* Customer page */
.customer {position: relative; min-height: 300px; text-align: left; }

/* checkout */
.checkout {position: relative; min-height: 300px; text-align: left; }	
.checkout .container {display:flex; gap: 30px; padding-top: 60px; }
.checkout .container .checkout__progress {position: absolute; top: 20px; left: 0; width: 100%; }
.checkout .container .checkout__progress > div {position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; max-width: 400px; margin: 0 auto; }
.checkout .container .checkout__progress > div:before {content: ""; position: absolute; top: 50%; left: 20px; right: 20px; height: 2px; margin-top: -1px; background: #ddd; }
.checkout .container .checkout__progress > div span {position: relative; display: block; width: 40px; height: 0; line-height: 0; padding: 20px 0; border-radius: 50%; border: 2px solid #ddd; color: #ddd; background: #eee; text-align: center; font-size: 18px; font-weight: 700;}
.checkout .container .checkout__progress > div span.open {background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg);} 
.checkout .container .checkout__progress > div span.active {background: #fff; color: var(--button-bg); border-color: var(--button-bg); cursor: pointer} 
.checkout .container .checkout__progress > div span.active:hover {background: var(--button-bg); color: var(--button-text); }
.checkout .container .checkout__left {flex-grow: 1;  flex-shrink: 1; }
.checkout .container .checkout__right {flex-grow: 0; flex-shrink: 0; width: 350px; }
.checkout .container .checkout__right .choices {font-size: 0.9em; opacity: 0.9;}
.checkout .container .button-container--large button {text-align: center; padding: 25px 50px; font-size: 1.2em; font-weight: 400;}
@media screen and (max-width: 1100px) {
	.checkout .container .checkout__right {width: 250px; }
}
@media screen and (max-width: 900px) {
	.checkout .container {flex-direction: column; padding-top: 0; gap: 0;}
	.checkout .container .checkout__progress {position: relative; top: 0; padding-top: 30px; order: 2;}
	.checkout .container .checkout__progress > div {max-width: 250px; }
	.checkout .container .checkout__progress > div span {width: 34px; padding: 17px 0; font-size: 15px; }
	.checkout .container .checkout__left {box-sizing: border-box; order: 3}
	.checkout .container .checkout__right {width: 100%; padding-top: 15px; order: 1; }
	.checkout .container .checkout__right .title-xlarge{display:none;}
	.checkout .container .checkout__right table {margin: 0;}
	.checkout .container .checkout__right table thead {display:none;}
	.checkout .container .checkout__right table tbody {display:none;}	
	.checkout .container .checkout__right:after {content: ""; position: absolute; top: 100%; left: 0; height: 15px; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
	.checkout .container .button-container--large button {padding-left: 10px; padding-right: 10px;}
}
.checkout-options {margin: 20px auto;}
.checkout-options .options {position: relative; border: 1px solid var(--borders-light); border-radius: 10px; }
.checkout-options .options .option:not(:first-child) {border-top: 1px solid var(--borders-light);}	
.checkout-options .options .option > label {position: relative; display:block; cursor: pointer; padding: 15px 20px 15px 55px}
.checkout-options .options .option > label * {margin: 0;}
.checkout-options .options .option > label h1 {font-size: 1.1em; font-weight: 700;}
.checkout-options .options .option > label h2 {font-size: 1.1em; font-weight: 700;}
.checkout-options .options .option > label h3 {font-size: 1.1em; font-weight: 700;}
.checkout-options .options .option > label .logo img {height: 25px; margin-bottom: 5px; }
.checkout-options .options .option > label input[type=radio] {position: absolute; opacity: 0;  pointer-events: none;}
.checkout-options .options .option > label > i {position: absolute; top: 50%; left: 20px; margin-top: -10px; width: 20px; height: 20px; border: 1px solid var(--borders-input); border-radius: 50%; }
.checkout-options .options .option.focused > label > i {outline: 4px solid rgba(0,0,0,0.08);}
.checkout-options .options .option.checked > label > i { }
.checkout-options .options .option.checked > label > i:after {content: ""; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; background: var(--text); border-radius: 50%; }
.checkout-options .options .option > div {display:none;}
.checkout-options .options .option.checked > div {display:block; border-top: 1px solid #e7e7e7; padding: 0 20px 0 55px;}	
.checkout-options .options .option.checked > div h2 {margin: 1em 0;}	
.checkout-options .options .option.checked > div:before {content: ""; display:block; padding-top: 1px; margin-bottom: 20px; }	
.checkout-options .options .option.checked > div:after {content: ""; display:block; padding-bottom: 1px; margin-top: 20px; }
.checkout-options .error-message {display:none; margin: 10px 0; color: var(--error);}	
.checkout-options.error .options {outline: 2px solid var(--error); border-color: var(--error);}
.checkout-options.error .options {outline: 2px solid var(--error); border-color: var(--error);}
.checkout-options.error .error-message {display:block;} 
.checkout-options .option p {margin: 0;}
.checkout-options .option .title-small {margin: 0;}

/* order page */
.order {position: relative; min-height: 300px; text-align: left;}
.order .order-pending {position: relative; text-align:center; padding: 1px 0}
.order .order-pending:before {content: ""; position: relative; display:block; padding-top: 1px; margin-bottom: 50px; }
.order .order-pending:after {content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 36px; margin-left: -18px; box-sizing: border-box; border: 4px solid var(--feature); border-top-color: transparent; border-radius: 50%; animation: spin 1.5s infinite linear}

/* Deliver Timer */
.delivery-timer {position: relative; background-color: var(--feature); color: #fff; text-align: center; border-radius: 10px;  }
.delivery-timer:before {content: ""; position: absolute; top; 0; left: 0; width: 100%; height: 100%; background: linear-gradient(117deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);}

.main > .delivery-timer {border-radius: 0;}
.delivery-timer .delivery-title {display: block; font-size: 1.7em; font-weight: 700; }
.delivery-timer .delivery-title p {display: inline; margin: 0;}
.delivery-timer .container > div {margin: 5px 0;}
.delivery-timer div.time {display: flex; gap: 5px; align-items: center; justify-content: center}
.delivery-timer div.time div {display: block; text-align: center; width: 40px; padding: 5px 0; background: #fff; color: #000; border-radius: 4px; font-weight: 700; font-size: 1.2em }
.delivery-timer div.time span.text {display: block; min-width: 85px; }
.delivery-timer div.time span.text:first-child {text-align: right; }
.delivery-timer div.time span.text:last-child {text-align: left; }
.delivery-timer .when-date {display: none}
.delivery-timer .when-tomorrow {display: none}
.delivery-timer .when-tomorrow p {display: inline; margin: 0;}

/*Dealer locator*/
.dealer-locator {position: relative; margin: 30px auto; width: 100%; max-width: 1300px; text-align: left; box-sizing: border-box;}
.main > .dealer-locator {padding: 0 30px; }

.dealer-locator .dealer-map {position: relative; border-radius: 10px; border: 1px solid #ccc; overflow:hidden;}
.dealer-locator .dealer-map .map { background: #eee; height: 50vh; posistion: relative; }	
.dealer-locator .dealer-map .search-box { position: absolute; top: 20px; left: 20px; padding: 0 20px; margin: 0; background: rgba(255,255,255,0.75); border-radius: 4px;}
.dealer-locator .dealer-map .search-box:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.dealer-locator .dealer-map .search-box:after {content: ""; position: relative; display:block; margin-top: 20px; padding-bottom: 1px; }
.dealer-locator .dealer-map .search-box .field {position: relative; margin: 10px 0;}
.dealer-locator .dealer-map .search-box .field label {display: block; margin: 5px 0; font-weight: 700;}
.dealer-locator .dealer-map .search-box .field input[type=text] {display: block; margin: 5px 0; width: 300px;}
.dealer-locator .dealer-map .search-box .field .results {position: absolute; display: none; top: 100%; width: 100%; z-index: 1; background: #fff; border-color: #ccc; border-style: solid; border-width: 0 1px 1px 1px; box-sizing: border-box;}
.dealer-locator .dealer-map .search-box .field .results ul {margin: 0; padding: 0; list-style: none;}
.dealer-locator .dealer-map .search-box .field .results ul li {margin: 0; padding: 0; border-top: 1px solid #ccc;}
.dealer-locator .dealer-map .search-box .field .results ul li:first-child {border-top: none;}
.dealer-locator .dealer-map .search-box .field .results ul li:nth-child(even) {background: #f7f7f7;}
.dealer-locator .dealer-map .search-box .field .results ul li a {position: relative; display: block; margin: 0; padding: 5px 25px 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dealer-locator .dealer-map .search-box .field .results ul li a i {position: absolute; right: 10px; top: 50%; line-height: 0;}
.dealer-locator .dealer-map .search-box .field .results ul li a:hover {background: var(--button-bg); color: var(--button-text);}
.dealer-locator .dealer-map .search-box .field .results ul li a.active {background: var(--button-bg); color: var(--button-text);}
.dealer-locator .dealer-map .search-box .field .results .error {padding: 6px 10px; color: var(--error);}
.dealer-locator .dealer-map .search-box a {display:flex; align-items: center; margin: 10px 0; gap: 6px; }
.dealer-locator .dealer-map .search-box a span {flex-grow: 1;}
.dealer-locator .dealer-map .search-box a b {position: relative; flex-grow: 0; flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--feature); box-sizing: border-box;}
.dealer-locator .dealer-map .search-box a b i {position: absolute; background: var(--feature); }
.dealer-locator .dealer-map .search-box a:hover b {border-color: var(--text); }
.dealer-locator .dealer-map .search-box a:hover b i {background: var(--text); }
.dealer-locator .dealer-map .search-box a b i:nth-child(1) {width: 1px; height: 6px; top: -3px; left: 6px; }
.dealer-locator .dealer-map .search-box a b i:nth-child(2) {width: 1px; height: 6px; bottom: -3px; left: 6px; }
.dealer-locator .dealer-map .search-box a b i:nth-child(3) {width: 6px; height: 1px; top: 6px; left: -3px; }
.dealer-locator .dealer-map .search-box a b i:nth-child(4) {width: 6px; height: 1px; top: 6px; right: -3px; }
.dealer-locator .dealer-map .search-box .types {margin: 20px 0;}
.dealer-locator .dealer-map .search-box .types .type-title {font-weight: 700; margin: 5px 0;}
.dealer-locator .dealer-map .search-box .types .type {margin: 3px 0; }
.dealer-locator .dealer-map .search-box .types .type label {display: flex; position: relative; align-items: center; justify-content: left; padding: 0; cursor: pointer;}
.dealer-locator .dealer-map .search-box .types .type label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.dealer-locator .dealer-map .search-box .types .type label i {position: relative; display: block; margin-right: 10px; width: 22px; height: 22px; border: 1px solid var(--borders-input); background: #fff; }
.dealer-locator .dealer-map .search-box .types .type.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid var(--text); border-left: 3px solid var(--text); transform: rotate(-45deg);}
@media screen and (max-width: 600px) {
	.main > .dealer-locator {padding: 0 15px; }
	.dealer-locator .dealer-map .search-box { position: relative; top: 0; left: 0; border-radius: 0; }
	.dealer-locator .dealer-map .search-box .field input[type=text] {width: 100%; }
}
.dealer-group {position: relative;}
.dealer-group .dealer-group__top {display:flex; align-items: center; justify-content: flex-start; gap: 20px; margin: 20px 0;}
.dealer-group .dealer-group__top picture {position: relative; display: block;  height: 140px; }
.dealer-group .dealer-group__top picture img {position: relative; display:block; height: 100%; }
.dealer-group .dealer-group__details {display: grid; gap: 20px; grid-template-columns: 1fr 1fr;   }

/* Slide menu */




.my-carousel-progress {
  background: var(--feature);
    border-radius: 10px;
    margin-right: 10px;
}

.my-carousel-progress-bar {
  background: #80298F;
  height: 8px;
    border-radius: 10px;
  transition: width 400ms ease;
  width: 0;
}


.splide__arrows [disabled]+[disabled], .splide__arrows [disabled]:has(+[disabled]){
  display: none!important;
}


.pad-left-slide {padding-left: calc((100vw - 1700px) / 2); }
.pad-left-slide h1.slide-title {padding-left:30px; padding-right: 30px; margin-bottom: 40px;}
.splide__list {}
.splide__track {padding-bottom: 10px; padding-top: 10px;}
.splide__slide { display: flex; position: relative; flex-wrap: wrap; flex-direction: column; align-content: center; justify-content: center;  height: 55vh; border-radius: 20px; font-size: clamp(1rem, 0.643rem + 0.952vw, 1.5rem); }
.splide__slide img {width: 100%;
  height: 100%;
  object-fit: cover; border-radius: 20px;}

.splide-gallery { height: auto; border-radius: 20px; transition: all ease-in-out 0.2s; }
.splide-gallery img {width: 100%;
  height: 100%;
  object-fit: cover;
cursor: pointer; border-radius: 20px;}
.splide-gallery:hover {transform: scale(1.02)}


.splide__slide a {position: absolute; top: 0px; left: 0px; width: 100%; border-radius:20px; height: 100%;  }

.splide__slide .splide-inner-full {background-color: #cccccc;  padding: 2rem; height: 100%; width: 100%; border-radius: 0px; box-sizing: border-box; text-shadow:1px 1px 10px #000, 1px 1px 10px #000; overflow: hidden; box-shadow: 0 0px 5px rgb(0 0 0 / 0.8); transition: all ease-in-out 0.2s; border-radius: 24px;}
.splide__slide .splide-inner-full:hover {transform:scale(1.02)}

.splide__slide .splide-inner-bento {display: grid; grid-template-columns: 1fr 1fr; height: 100%; width: 100%; border-radius: 20px; box-sizing: border-box; gap:2rem; text-shadow:1px 1px 10px #000, 1px 1px 10px #000;}
.splide__slide .splide-inner-bento .bento-item {position: relative; background-color: #cccccc; padding: clamp(1rem, 0.643rem + 0.952vw, 1.5rem); box-shadow: 0 0px 5px rgb(0 0 0 / 0.8); transition: all ease-in-out 0.2s; border-radius: 24px;}
.splide__slide .splide-inner-bento .bento-item:hover {transform:scale(1.02)}
.splide__slide .splide-inner-bento .bento-item-wide {grid-column: 1 / 3;}





@media screen and (max-width: 700px) {
	

}


.splide-bg-001 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-001.jpg");
    background-size:cover;
    background-position: bottom;
}

.splide-bg-002 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-002.jpg");
    background-size:cover;
    background-position: bottom;
}

.splide-bg-003 {
background-image: 
    conic-gradient(hsl(0 0% 0% / .4) 0 0),
    url("../_IMG/accoya-background-003.jpg");
    background-size:cover;
    background-position: bottom;
}

.splide-bg-004 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-004.jpg");
    background-size:cover;
    background-position: bottom;
}

.splide-bg-005 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-005.jpg");
    background-size:cover;
    background-position: center;
	
    
}

.splide-bg-006 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-006.jpg");
    background-size:cover;
    background-position: top;
}

.splide-bg-007 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-007.jpg");
    background-size:cover;
    bacground-position: top;
}

.splide-bg-008 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-008.jpg");
    background-size:cover;
    background-position: top;
}

.splide-bg-009 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-009.jpg");
    background-size:cover;
    bacground-position: top;
}

.splide-bg-010 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-010.jpg");
    background-size:cover;
    background-position: top;
}

.splide-bg-011 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-011.jpg");
    background-size:cover;
    background-position: top;
}

.splide-bg-012 {
background-image: 
    linear-gradient(148deg,rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 61%),
    url("../_IMG/accoya-background-012.jpg");
    background-size:cover;
    background-position: top;
}


.splide__pagination {position: relative!important; bottom: 0!important}
.controls__container {display: flex; align-content: center; justify-content:center; gap:20px; margin-top: 1em;}

.controls {max-width: 400px; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center;  background-color: rgba(0, 0, 0, 0.5); border-radius: 50px; padding: 20px 60px; border: 2px solid var(--feature)}
.controls .splide__arrows {position: absolute!important; width: 100%;}

.controls__pagination {visibility: visible!important;}
.splide__pagination {
    bottom: .5em;
    left: 0;
    padding: 0 0em 0 0em!important;
    position: absolute;
    right: 0;
    z-index: 1;
}

.splide__pagination__page {
    background: var(--feature)!important;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 8px;
}

.splide__pagination__page.is-active {
    background: #faf9f6!important;
    transform: scale(1.4);
    z-index: 1;
}

.splide:not(.is-overflow) .splide__pagination {
    display: block!important;
}
.controls-modal {grid-template-columns: 1fr;  }
button.splide__toggle {background-color: #000000; border-radius: 50%; border: 0px; height: 60px; width: 60px; color: aliceblue; display: flex; justify-content: center}

.splide__arrow {background: transparent!important;}
.splide__arrow svg {
    fill: var(--feature)!important;
    height: 1.2em;
    width: 1.2em;
}

@media screen and (max-width: 700px) {
    .controls__container {display: none}  
    
}


/* House type */

.grid-type-house {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;   
	margin: 20px 0; 
}

.housetype {
    text-align: center;
    display: block;
	cursor: pointer;
}
.housetype .house-icon {
	max-width: 100px;
	margin: 0 auto 10px auto;
    position: relative;
    border-radius: 50%;
	background: #ccc center no-repeat;
	background-size: cover; 
	box-shadow: 0 0 11px 2px rgba(0,0,0,0.4);
}

@media screen and (max-width: 700px) {
	.housetype .house-icon {
		max-width: 80px;

	}
}
.housetype .house-icon:after {
	content: "";
	position: relative; 
	display:block; 
	padding-bottom: 100%; 
}
.housetype .house-icon div {
	content: "";
	position: absolute; 
	top: -6px; 
	right: -6px; 
	bottom: -6px; 
	left: -6px; 
	border: 2px solid transparent;
	border-radius: 50%; 
    transition: border .2s ease-in-out;
}
.housetype:hover .house-icon div {
    border: 2px solid #faf9f6;
}
.housetype.active .house-icon div {
	 border: 2px solid #A436B7;
}



.housetype.residential .house-icon {background-image: url("../_IMG/houses/residential.jpg");}
.housetype.commercial .house-icon {background-image: url("../_IMG/houses/commercial.jpg");}




/* Video tour - check this for dupes? */


 /* Right Sidebar */
      .fixed-right-bar {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0;
  width: 200px;
  background: rgba(0, 0, 0, .7);
  color: #faf9f6;
  z-index: 2;
  padding: 1rem;
  padding-top: 180px;
  padding-bottom: 80px;
  overflow-y: auto;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateX(100%); /* Start hidden */
  opacity: 1;
  pointer-events: none;
}

.fixed-right-bar.visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
      

      .sidebar-toggle-container {
       
      }
      .content-video-tour {
        box-sizing: border-box;
        position: absolute;
        display: none;
        width: 100%;
        height: calc(100% - 0px);
        overflow: hidden;
        color: white;
          padding-bottom: 60px;
          
      }

      video.bg-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
          
      }

      .content-inner {
        position: relative;
        box-sizing: border-box;
        z-index: 1;
       background: rgba(0, 0, 0, 0.0);
        height: 100%;
        display: flex;
padding-bottom: 60px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        transition: margin-right 0.3s ease;
      }

      .content-inner.sidebar-visible {
  margin-right: 0px; /* Sidebar width? */
  transition: margin-right 0.3s ease;
}

   

      .green-pulse {
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        animation: greenPulse 2s infinite !important;
      }

      .hotspot {
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  border: 5px solid #5cff7b;
  box-shadow: 0 0 0 rgba(92, 255, 123, 0.4);
}

.tooltip {
  display: block;
  position: absolute;
  top: -50px; /* Adjust based on desired positioning */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #faf9f6;
  padding: 5px 10px;
  font-size: clamp(1rem, 0.821rem + 0.476vw, 1.25rem);
  border-radius: 5px;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
}

.hotspot:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 800px) {
    .tooltip {display: none}
    
     .green-pulse {
        
        width: 20px;
        height: 20px;
        
      }

      .hotspot {
  
  width: 20px;
  height: 20px;
  
}
    
}
      @keyframes greenPulse {
        0% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(92, 255, 123, 0.6);
        }
        70% {
          transform: scale(1.1);
          box-shadow: 0 0 0 15px rgba(92, 255, 123, 0);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(92, 255, 123, 0);
        }
      }

      .hotspot:hover {
        background-color: rgba(255, 255, 255, 0.9);
      }

      .modal {
        display: none;
       
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
       z-index: 10;
       padding: 40px 40px 40px 40px;
        justify-content: center;
        align-items: center;
        color: white;
        box-sizing: border-box;
          background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
      }




      .modal-content {
        position: relative;
        display: flex;
        width: 100%;
          max-width: 60vw;
        
        height: auto;
          max-height: 80vh;
          z-index: 200!important;
        background-color: rgba(0, 0, 0, 0.99);
        box-sizing: border-box;
        transition: max-width 0.3s ease;
        border-radius: 20px;
  }

@media screen and (max-width: 900px) {
     .modal-content {
        
          max-width: 95vw;
         max-height: 95vh;
        
       
  }
}


.modal-content-inner { overflow: auto}
.modal-content-grid {display: grid; grid-template-columns: 1fr 1fr; gap:clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); width: 100%; padding:clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); box-sizing: border-box}

.modal-grid-text {}
.modal-grid-text .content-text {margin:0px auto; padding: 0px}
.modal-grid-text h1 {margin-top: 0px}

.modal-content-grid ul.modal-list{list-style: none; padding-left: 0px; margin-left: 0px; margin-top: 30px;}
.modal-content-grid ul.modal-list li {margin-bottom: 20px; display: flex; align-items: center }
.modal-content-grid ul.modal-list li span.tick {display: inline-block; width: 30px; margin-right: 10px; height: 30px;background-image: url("../_IMG/tick.svg"); flex: none}
.modal-content-grid ul.modal-list li span.text {display: inline-block;}
.modal-content-grid ul.modal-list li strong {display: block}

.modal-content-logos {display: grid; grid-template-columns: 1fr 1fr; max-width: 250px; gap:30px;}
.modal-content-logos img {max-width: 100%;}


      .close-modal {
        margin-top: 1rem;
        color: #aaa;
        cursor: pointer;
          position: absolute; right: 15px; top:0px;
          width: 30px; height: 30px; border-radius:50px;
          background-color: var(--feature);
          z-index: 200
      }

      .nav-links {
        display: flex !important;
        gap: 0rem;
        gap: 0rem;
        align-items: center;
        margin-bottom: 2rem;
        z-index: 3;
          background-color: rgba(0, 0, 0, 0.5);
        position: relative;
        border: 2px solid #35a936;
        padding: 0.5rem;
        border-radius: 50px;
        font-size: 18px;
      }

      .nav-links a {
        margin: 5px 1rem;
        text-decoration: underline;
        cursor: pointer;
        width: 25px;
        height: 25px;
      }

      .nav-links a.nav-left {
        background-image: url(../_IMG/nav-left.svg);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat
      }

      .nav-links a.nav-right {
        background-image: url(../_IMG/nav-right.svg);
           background-position: center;
          background-size: contain;
          background-repeat: no-repeat
      }



@media screen and (max-height: 1080px) {
    .nav-links {
        
        margin-bottom: 0rem;
        padding: 0.2rem;
        border-radius: 50px;
        font-size: 14px;
      }
    
    .tooltip {
  font-size: 12px;
}
    
    
}



@media screen and (max-width: 1400px) {
    .modal {padding: 40px 20px 40px 20px;}
    .modal-content-grid {display: grid; grid-template-columns: 1fr ; width: 100%; padding: 30px; }
    
     .nav-links {
        
        margin-bottom: 0rem;
        padding: 0.2rem;
        border-radius: 50px;
        font-size: 14px;
      }
    
    .content-inner.sidebar-visible {
  margin-right: 0px; /* Sidebar width? */
  transition: margin-right 0.3s ease;
}
    
}


      /* Optional fade-in */
      .fade-in {
        animation: fadeIn 1s ease forwards;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      .fade-out {
        animation: fadeOut 0.5s forwards;
      }





.switch-container {position: fixed; display: flex; justify-content: flex-end; top: 107px; left: 0; width: 100vw; box-sizing: border-box; pointer-events: none; z-index: 3; }
.switch-container .switch {padding: 30px 40px 10px 10px; font-size: 12px; color: #faf9f6; pointer-events: all; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 5px; transition: all 0.5s; border-bottom-left-radius: 30px; border-top-left-radius: 30px; background-color: rgba(0, 0, 0, 0.0)  }
.switch-container .switch  i {position: relative; display: block; width: 45px; height: 22px; border-radius: 11px; box-sizing: border-box; background: var(--feature); transition: all 0.1s ease; cursor:pointer; }
.switch-container .switch  i:after {content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #faf9f6; border-radius: 50%; transition: all 0.1s ease; }
.switch-container .switch  .show {display: none;}
.switch-container .switch.off {padding: 30px 40px 10px 40px; font-size: 12px; color: #faf9f6; pointer-events: all; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 5px;  border-bottom-left-radius: 20px; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); text-align: center  }
.switch-container .switch.off i {}
.switch-container .switch.off i:after {left: 26px;}	
.switch-container .switch.off .show {display: block; text-align: center}
.switch-container .switch.off .hide {display: none;}


@media screen and (max-width: 1400px) {
  .switch-container {top: 87px; }  
}






#downloadFrame {width: 1px; height: 1px; border: none;}

.downloads_grid {display: grid; grid-template-columns: 40px auto auto auto auto; gap: 10px 0; margin: 2em 0;}
.downloads_grid > div {display: grid; grid-column: 1 / span 5; align-items: center; grid-template-columns: subgrid; border: 1px solid #ccc; border-radius: 5px;  }
.downloads_grid > div > div {padding: 15px 7px; }
.downloads_grid > div > div:first-child {padding-left: 15px; }
.downloads_grid > div > div.downloads_tags {font-size: 0.85em; color: #943ea3 }
.downloads_grid > div > div.downloads_details {font-size: 0.6em; color: #888 }
.downloads_grid a {color: #e74c3c;}
.downloads .button-container {justify-content: center;}
.downloads .checkbox {position: relative; display: block; width: 16px; height: 16px; border: 1px solid #aaa; cursor: pointer; }
.downloads .checkbox.checked {background: var(--feature); border-color: var(--feature); }
.downloads .checkbox.checked:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid var(--text); border-left: 3px solid var(--text); transform: rotate(-45deg);}