/* Site colours */
:root {
    --button-bg: #0089c3;
    --button-text: #fff;
	--borders-input: #ccc;
	--borders-light: #ccc;
	--table-footer-bg: #eee;
	--text: #222;
	--feature: #0089c3;
}



html {font-family: 'Open Sans', sans-serif; font-size: 16px; color: var(--text); box-sizing: border-box; -webkit-tap-highlight-color: #fff; min-height: 100%; background-color: #fff}
button, textarea, select, input[type='text'], input[type='password'] {font-family: 'Lato', arial, verdana, sans-serif; font-size: 1em;}
textarea, select, input[type='text'], input[type='password'] {border: 1px solid #bbb; 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: #0089c3;}


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;}


a {color: #0089c3; text-decoration: none;}
a:hover {color: #0089c3; text-decoration: underline;}
table {width: 100%; margin: 20px 0; border: 1px solid #ccc; border-scollapse: collapse;}
table td {padding: 5px; border: 1px solid #ccc}
table tr:nth-child(even) td {background: rgba(0,0,0,0.01);}
.clear {clear:both; display: block}
.clearFix {clear:both; }

.main > .content-text {max-width: 900px; padding: 0 30px; margin: 30px auto; box-sizing: border-box; } 
.main > .map-container {max-width: 900px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; }
.main > .form {max-width: 900px; margin: 30px auto; padding: 20px 30px; box-sizing: border-box;}

.product hr {background: #dda71a; margin: 40px 0;}
.alignL {text-align:left;}
.alignC {text-align:center;}
.alignR {text-align:right;}

.button-container {display: flex; position: relative; margin: 20px 0; align-items: center; justify-content: space-between; gap: 20px; }
.button-container button, .button-container a {position: relative; box-sizing: border-box; display: inline-block; color: var(--button-text); background: var(--button-bg); padding: 8px 45px; border-radius: 20px; text-decoration: none; font-weight: 400; text-align: center; border: none; }
.button-container button:hover, .button-container a:hover {color: var(--button-bg); background: var(--button-text); border: 2px solid var(--button-bg); padding: 6px 43px; }
.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:#fff; background: #ccc; border-color: #ccc; }




.truncate {width: 250px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}


.title {font-family: 'Crimson Text', serif ; text-align:center; display: block; max-width: 700px; margin-left: auto; margin-right: auto; color:#0089c3; font-size: 2.2em; font-weight: 700}
.subTitle {font-family: 'Crimson Text', serif ; text-align:center; display: block; max-width: 700px; margin-left: auto; margin-right: auto; color:#fff; font-size: 1.3em; font-weight: 700}
.checkoutTitle {font-family: 'Crimson Text', serif ; text-align:left; display: block; max-width: 700px; margin-left: 0; color:#0089c3; font-size: 1.3em; font-weight: 700; margin-bottom: 1em;}

a.keysites-sticky {background-color: #0089c3; color: #fff; text-decoration: none; text-align: center; padding: 10px; display: block; position: sticky; bottom: -2px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; font-size: 16px; font-weight: bold; transition: all ease-in-out 0.2s}
a.keysites-sticky:hover {text-decoration: none}
a.full-button {position:relative; background-color: #0089c3; color: #fff; border-radius: 10px; padding: 8px 20px 3px 20px; border:0px solid #f6841f; transition:all ease 0.1s; display: inline-block; text-align: center; font-family: 'Crimson Text', serif ; font-size: 16px; font-weight: 700; margin-top: 20px;   }
a.full-button:hover {background-color: #54585a; color: #FFF; border:0px solid #FFF; text-decoration: none}

button.full-button {position:relative; background-color: #0089c3; color: #fff; border-radius: 10px; padding: 8px 20px 3px 20px; border:0px solid #f6841f; transition:all ease 0.1s; display: inline-block; text-align: center; font-family: 'Crimson Text', serif ; font-size: 16px; font-weight: 700; margin-top: 20px; cursor: pointer;   }
button.full-button:hover {background-color: #54585a; color: #FFF; border:0px solid #FFF; text-decoration: none}

.content-button {margin: 1em 0; text-align: center;}
.content-button a {position:relative; background-color: #0089c3; color: #fff; border-radius: 10px; padding: 8px 20px 3px 20px; border:0px solid #f6841f; transition:all ease 0.1s; display: inline-block; text-align: center; font-family: 'Crimson Text', serif ; font-size: 16px; font-weight: 700; margin-top: 20px; cursor: pointer;   }
.content-button a:hover {background-color: #54585a; color: #FFF; border:0px solid #FFF; text-decoration: none}

.full-button {position:relative; background-color: #0089c3; color: #fff; border-radius: 10px; padding: 8px 20px 3px 20px; border:0px solid #f6841f; transition:all ease 0.1s; display: inline-block; text-align: center; font-family: 'Crimson Text', serif ; font-size: 16px; font-weight: 700; margin-top: 20px; cursor: pointer;   }
.full-button:hover {background-color: #54585a; color: #FFF; border:0px solid #FFF; text-decoration: none}



a.buttonAlt_blogEnvironment {background-color: #35914a; color: #fff;}
a.buttonAlt_blogLocal {background-color: #f49638; color: #fff}
a.buttonAlt_blogDesign {background-color: #febf30; color: #fff}
a.buttonAlt_blogPlanning {background-color: #734f91; color: #fff}
a.buttonAlt_blogWellbeing {background-color: #d31920; color: #fff}
a.buttonAlt_blogTransport {background-color: #545759; color: #fff}
a.buttonAlt_507 {background-color: #0089c3; color: #fff}
a.buttonAlt_500 {background-color: #414042; color: #fff}
a.buttonAlt_ {background-color: #414042; color: #fff}

.titleAlt_blogEnvironment {color: #35914a; }
.titleAlt_blogLocal {color: #f49638; }
.titleAlt_blogDesign {color: #febf30; }
.titleAlt_blogPlanning {color: #734f91;}
.titleAlt_blogTransport {color: #545759;}
.titleAlt_blogWellbeing {color: #d31920;}
.titleAlt_507 {color: #0089c3;}
.titleAlt_500 {color: #414042;}



.bgWhite {background-color:#fff;}
.bgWhite a.full-button {background-color: #0089c3; color: #FFF; }
.bgWhite a.full-button:hover {background-color: #54585a; color: #FFF; }

.bgBlue {background-color:#0089c3; color: #FFF}
.bgBlue a.full-button {background-color: #fff; color: #0089c3; }
.bgBlue a.full-button {background-color: #fff; color: #0089c3; }
.bgBlue a.full-button:hover {background-color: #54585a; color: #FFF; }
.bgBlue .title { color:#fff; } 

.bgGrey {background-color:#545759; color: #FFF}
.bgGrey a.full-button {background-color: #fff; color: #0089c3; }
.bgGrey a.full-button:hover {background-color: #0089c3; color: #FFF; }

.bgLight {background-color: #e6e6e7}

.container {position:relative; width:100%; max-width: 1200px; margin: 0 auto; padding: 0px 30px; box-sizing: border-box}
.container img {max-width: 100%!important; height: auto!important}
.pb:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 50px; }
.pa:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 50px; }

.width70 {width:70%; display: block}
.width50 {width:50%; display: block}

@media screen and (max-width:900px) {
    .width50 {width:100%; display: block}
}

h1 {font-family: 'Crimson Text', serif ; font-size: 2em; font-weight: 700; line-height: 1.2em; margin-top: 0px; color: #000;}
h2 {font-family: 'Crimson Text', serif ; font-size: 1.3em; font-weight: 700; color: #000;}
h3 {font-family: 'Crimson Text', serif ; font-size: 1.3em; font-weight: 700; color: #000;}
h4 {font-family: 'Crimson Text', serif ; font-size: 1.1em; font-weight: 700}

.content-text h1 {text-align:center; color:#0089c3; font-size: 2.2em; }
.content-text h2 {text-align:center; color:#0089c3; }
.content-text h3 {text-align:center; }

.blog-post .content-text h1 {text-align:left; color: #000; }
.blog-post .content-text h2 {text-align:left; }
.blog-post .content-text h3 {text-align:left; }


@media screen and (max-width:600px) {
    .container {padding: 0px 20px;}
    .pb:before {margin-bottom: 20px; }
    .pa:after {margin-top: 20px; } 
    .main > p { padding: 0px 20px; }
}

header {position:relative;  background-color:#0089c3; border-bottom: 2px solid #FFF; transition: ease all 0.2s; flex-grow: 0; }
header .navContainer {display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;position:relative; width:100%; max-width: 1200px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; transition: ease all 0.2s;  }
header .navContainer > .* {background: rgba(0,0,0,0.1);}
header .navContainer > a {grid-column: 2; margin: 0 auto; }
header .navContainer > a img {display: block; width:120px; margin: 20px 0; }
header .navContainer > div {grid-column: 3; display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
header .navContainer > div > a {display:block; position: relative; width: 44px ; padding: 22px 0; line-height: 0; height: 0; text-align: center;  color: #fff; font-size: 22px; font-weight: 300; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; transition: all 0.3s}
header .navContainer > div > a:hover {border: 1px solid rgba(255,255,255,0.8); }
header .navContainer > div > a i {line-height: 0; }
header .navContainer > div > a b {position: absolute; top: 4px; right: 0; background: #e5006d; color: #fff; font-size: 11px; padding: 10px 0; width: 20px; line-height: 0; border-radius: 50%; text-align: center;}
@media screen and (max-width:800px) {
	header .navContainer > a img {width:90px;}
}
@media screen and (max-width:600px) {	
	header .navContainer {padding: 0 20px; }
	header .navContainer > a img {width:60px; margin: 10px 0;}
}
nav {display:none; z-index: 1000; }
nav.active {position: fixed; display: block; left: 0; top: 0; width: 100%; height: 100%; cursor:pointer; background: none; }
nav.active > a {display:block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
nav > div {position: absolute; right: 0; top: 0; width: 350px; height: 100%; background: #0089c3; background-image: url("../_IMG/gs-cropped.png"); background-position: bottom; background-repeat: no-repeat;  box-shadow: 60px 0px 40px 40px #000; z-index: 100;  box-sizing: border-box; }
nav .containerNav {position: absolute; left: 0; top: 0; width: 350px; height: 100%;  padding: 50px 0 70px 0;z-index: 101; box-sizing: border-box; overflow: auto; }

nav .containerNav form {display:block; position: relative; padding: 10px 20px; }
nav .containerNav form input[type="text"] {border: 1px solid rgba(255,255,255,0.3); width: 100%; box-sizing: border-box; border-radius: 10px; background: none; transition:all ease 0.2s; outline: none; padding: 6px 15px; color: #fff; font-size: 16px;}
nav .containerNav form input[type="text"]:focus {border: 1px solid #fff; }
nav .containerNav form input[type="text"]::placeholder {color: #fff; opacity: 0.8;}
nav .containerNav form > button {position: absolute; top: 50%; right: 30px; padding: 0; line-height: 0; background: none; border: none; pointer-events: none; outline: none; color: #fff}

nav .containerNav a.close {display:block; position: absolute; top: 5px; right: 10px; width: 44px; height: 44px;  border-radius: 50%; }
nav .containerNav a.close i {position: absolute; width: 24px; height: 4px; left: 50%; top: 50%; margin-top: -2px; border-radius: 0px; margin-left: -12px; background: #fff;}
nav .containerNav a.close i:nth-child(1){transform: rotate(45deg);}
nav .containerNav a.close i:nth-child(2){transform: rotate(-45deg);}
nav .containerNav > ul {display:block; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
nav .containerNav > ul > li {display:block; border-top: 1px solid rgba(255,255,255,0.1); }
nav .containerNav > ul > li:first-child {border-top: 0; }
nav .containerNav > ul > li > a {color: #FFF; padding: 10px 20px; font-size: 22px; display: block; font-family: 'Crimson Text', serif ; transition:ease all 0.1s  }
nav .containerNav > ul > li > a:hover {transform: translate(5px, 0); text-decoration: none;}	
nav .containerNav > ul > li > div {position: relative; width: 100%; }
nav .containerNav > ul > li > div > div {padding: 0;}
nav .containerNav > ul > li > div > div > ul { padding: 0px 10px 10px 30px ; box-sizing: border-box  }
nav .containerNav > ul > li > div > div > ul > li {list-style: none; }
nav .containerNav > ul > li > div > div > ul > li a {color: #fff; display: block;  padding-left: 0px; padding: 3px 0px 3px 10px;;  font-size: 16px; transition:ease all 0.1s }
nav .containerNav > ul > li > div > div > ul > li a:hover {transform: translate(5px, 0); text-decoration: none; }


.blogWrapper {margin: 30px 0 0px 0; width: 100%; box-sizing: border-box; height: auto; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; justify-content: space-between; align-content: center; grid-row: auto; }
.blogWrapper a.box {position:relative; background: #FFF; color: #414042; padding: 4px; border-radius: 2px; text-align: center; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);  display: block ; height: 100%; box-sizing: border-box }
.blogWrapper a.box:hover {text-decoration: none}
.blogWrapper a.box .text {position:relative;  text-align: left; box-sizing: border-box; display: block;  } 
.blogWrapper a.box .text .blogTitle {min-height: 40px; height: 100%; font-size: 15px; line-height: 17px; font-weight: 700; padding-left: 10px; padding-top: 10px; padding-bottom: 35px; display: block}
.blogWrapper a.box .text .shortLink {display: block; font-size: 14px; font-weight: 400; margin-top: 10px; position: absolute; bottom:10px; color: #414042 }
.blogWrapper a.box:hover  .text .shortLink{text-decoration: none}
.blogWrapper a.box .text .shortLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.blogWrapper a.box:hover .text .shortLink i {margin-left: 2px; }

.blogWrapper a.box .description .longLink {display: block; font-size: 16px; font-weight: 400; margin-top: 30px;  color: #414042 }
.blogWrapper a.box:hover .description .longLink {text-decoration: none}
.blogWrapper a.box .description .longLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.blogWrapper a.box:hover .description .longLink i {margin-left: 2px; }

.blogWrapper a.box .description {display: none;}
.blogWrapper a.box .image {position: relative; width: 100%; height: auto; display: block; overflow: hidden; margin-bottom: 4px; }
.blogWrapper a.box .image .imageInner{display: block; position:relative; width: 100%; padding-bottom: 57%; background-size: cover;  transition: ease-in-out all .4s;}
.blogWrapper a.box:hover .image .imageInner {margin-left: 2px; transform: scale(1.1); }
.blogWrapper a.box .image img {width:100%!important; height: auto!important; display: block; margin-bottom: 4px;}
.blogWrapper a.box:nth-child(1) .text {position:relative;  text-align: left; width: 40%; float: right; padding: 30px; box-sizing: border-box; height: 100%; } 

.blogWrapper a.box:nth-child(1) .text .blogTitle {min-height: 22px; font-size: 22px; font-weight: 700; padding-left: 10px; padding-top: 0px; line-height: 1.1em; padding-bottom: 0px;}
.blogWrapper a.box:nth-child(1) .image { width: 60%; float: left; margin-bottom: 0px;} 
.blogWrapper a.box:nth-child(1) .description {display: block; margin-top: 30px; padding-left: 0px; font-size: 16px!important; font-weight: 400!important}
.blogWrapper a.box:nth-child(1) .shortLink {display: none;}
.blogWrapper a.box:nth-child(1) {grid-column: 1 / 4;grid-row: 1 / 1; }
.blogWrapper a.box:nth-child(1) .image img {margin-bottom: 0px;}

@media screen and (max-width:1100px) {
    .blogWrapper a.box:nth-child(1) .image { width: 60%; } 
    .blogWrapper a.box:nth-child(1) .text { width: 40%; } 
}



@media screen and (max-width:900px) {
    .blogWrapper a.box:nth-child(1) .image { width: 100%; } 
    .blogWrapper a.box:nth-child(1) .text { width: 100%;   }
    .blogWrapper a.box .text .blogTitle {min-height: 40px; height: auto!important; }
   
}

@media screen and (max-width:900px) {
    .blogWrapper {grid-template-columns: 1fr 1fr; }
    .blogWrapper a.box:nth-child(1) {grid-column: 1 / 3;grid-row: 1 / 1; }
}

@media screen and (max-width:600px) {
    .blogWrapper {grid-template-columns: 1fr ; }
    .blogWrapper a.box:nth-child(1) {grid-column: auto;grid-row: auto; }
}


.blogWrapperMini {margin: 30px 0 0px 0;width: 100%; box-sizing: border-box; height: auto; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; justify-content: space-between; align-content: center; grid-row: auto; }
.blogWrapperMini a.box {position:relative; background: #FFF; color: #414042; padding: 4px; border-radius: 2px; text-align: center; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); overflow: hidden; display: block  }
.blogWrapperMini a.box:hover {text-decoration: none}
.blogWrapperMini a.box .text {position:relative;  text-align: left; box-sizing: border-box; display: block; padding: 0; } 
.blogWrapperMini a.box .text .blogTitle {min-height: 35px; font-size: 14px; line-height: 16px; font-weight: 700; padding-left: 10px; padding-top: 10px; padding-bottom: 35px; display: block}
.blogWrapperMini a.box .text .shortLink {display: block; font-size: 14px; font-weight: 400; margin-top: 10px; position: absolute; bottom:10px; color: #414042 }
.blogWrapperMini a.box:hover  .text .shortLink{text-decoration: none}
.blogWrapperMini a.box .text .shortLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.blogWrapperMini a.box:hover .text .shortLink i {margin-left: 2px; }
.blogWrapperMini a.box span {padding: 0; }
.blogWrapperMini a.box .description .longLink {display: block; font-size: 16px; font-weight: 400; margin-top: 30px;  color: #414042 }
.blogWrapperMini a.box:hover .description .longLink {text-decoration: none}
.blogWrapperMini a.box .description .longLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.blogWrapperMini a.box:hover .description .longLink i {margin-left: 2px; }
.blogWrapperMini a.box .description {display: none;}
.blogWrapperMini a.box .image {position: relative; padding: 0; margin-bottom: 4px; }
.blogWrapperMini a.box .image img {width:100%!important; height: auto!important; display: block; margin-bottom: 4px;}
.blogWrapperMini a.box .image .imageInner{display: block; position:relative; width: 100%; padding: 0 0 57% 0; background-size: cover;  transition: ease-in-out all .4s;}
@media screen and (max-width:900px) {
    .blogWrapperMini {grid-template-columns: 1fr 1fr; }   
}
@media screen and (max-width:600px) {
    .blogWrapperMini {grid-template-columns: 1fr ; }    
}


.productWrapper {margin: 30px 0 0px 0;width: 100%; box-sizing: border-box; height: auto; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; justify-content: space-between; align-content: center; grid-row: auto; }
.productWrapper a.box {position:relative; background: #FFF; color: #414042; padding: 4px; border-radius: 2px; text-align: center; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); overflow: hidden; display: block  }
.productWrapper a.box:hover {text-decoration: none}
.productWrapper a.box .text {position:relative;  text-align: left; box-sizing: border-box; display: block; padding: 0; } 
.productWrapper a.box .text .blogTitle {min-height: 35px; font-size: 14px; line-height: 16px; font-weight: 700; padding-left: 10px; padding-top: 10px; padding-bottom: 35px; display: block}
.productWrapper a.box .text .shortLink {display: block; font-size: 14px; font-weight: 400; margin-top: 10px; position: absolute; bottom:10px; color: #414042 }
.productWrapper a.box:hover  .text .shortLink{text-decoration: none}
.productWrapper a.box .text .shortLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.productWrapper a.box:hover .text .shortLink i {margin-left: 2px; }
.productWrapper a.box span {padding: 0; }
.productWrapper a.box .description .longLink {display: block; font-size: 16px; font-weight: 400; margin-top: 30px;  color: #414042 }
.productWrapper a.box:hover .description .longLink {text-decoration: none}
.productWrapper a.box .description .longLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.productWrapper a.box:hover .description .longLink i {margin-left: 2px; }
.productWrapper a.box .description {display: none;}
.productWrapper a.box .image {position: relative; padding: 0; margin-bottom: 4px; }
.productWrapper a.box .image img {width:100%!important; height: auto!important; display: block; margin-bottom: 4px;}
.productWrapper a.box .image .imageInner{display: block; position:relative; width: 100%; padding: 0 0 57% 0; background-size: cover;  transition: ease-in-out all .4s;}
@media screen and (max-width:900px) {
    .productWrapper {grid-template-columns: 1fr 1fr; }   
}
@media screen and (max-width:600px) {
    .productWrapper{grid-template-columns: 1fr ; }    
}




.categoriesBanner {position:relative; border-top:0px solid #fff;}
.categoriesBanner h1 {color: #fff;}
.categoriesBanner h2 {color: #fff;}
.categoriesBanner h3 {color: #fff;}
.categoriesBanner a {color: #fff; text-decoration: underline;}
.categoriesBanner a {color: #fff; text-decoration: none;}

.categoriesBannerBG { background-image: url("../_IMG/gs-cropped.png"); background-position: 95% 100%; background-repeat: no-repeat;  }
.blogCatIntro p {display:block; margin: 0px; margin-bottom: 14px; padding: 0px;}
.blogCatIntro .blogCatIntro50 {width: 50%; display: inline-block; margin: 0px; padding: 0px}
.tab input[type=checkbox] {position: absolute;  z-index: -1; opacity: 0;   left: -9999px; height: 0px; width: 0px; }


.tab-label {cursor: pointer;  display: inline-block; margin-top: 10px; }
.tab-label .labelShow {color: #fff; transition: all ease 0.1s}
.tab-label:hover .labelShow {color: #414042;}
.tab-label .labelHide {display: none; color: #fff; transition: all ease 0.1s; margin-top: 10px;}
.tab-label:hover .labelHide {color: #414042;}
.tab-content {max-height: 0; overflow: hidden; opacity: 0; transition: all ease 0.7s;  }
input:checked ~ .tab-label .labelShow {display: none;}
input:checked ~ .tab-label .labelHide {display: block;}
input:checked ~ .tab-content {  max-height: 100vh; padding: 0em; padding-top: 20px; opacity: 1;}

@media screen and (max-width:900px) {
    .categoriesBanner::after {display: none;}
    .blogCatIntro .blogCatIntro50 {width: 100%;}
}

.blogBanner {position:relative; height: 60vh; max-height: 500px; max-width: 1140px; background-size: cover; background-position: center top; margin: 0px auto;}
.blogOffset {position:relative; width:100%; max-width: 1000px; margin: 0px auto; margin-top: -10vh; padding: 50px 30px; box-sizing: border-box; background-color: #fff}
.blogTitle {width: 70%; padding-left: 12px; border-left: 8px solid #ccc;}
.blogOffset > span {padding-left: 20px; display: block}

.tagID_blogEnvironment {border-left: 8px solid #35914a}
.tagID_blogLocal {border-left: 8px solid #f49638}
.tagID_blogDesign {border-left: 8px solid #febf30}
.tagID_blogPlanning {border-left: 8px solid #734f91}
.tagID_blogTransport {border-left: 8px solid #545759}
.tagID_blogWellbeing {border-left: 8px solid #d31920}
.tagID_507 {border-left: 8px solid #0089c3}
.tagID_500 {border-left: 8px solid #414042}
.tagID_ {border-left: 8px solid #414042}

.tagIDBG_blogEnvironment {background-color: #35914a; color: #fff;}
.tagIDBG_blogLocal {background-color: #f49638; color: #fff}
.tagIDBG_blogDesign {background-color: #febf30; color: #fff}
.tagIDBG_blogPlanning {background-color: #734f91; color: #fff}
.tagIDBG_blogTransport {background-color: #545759; color: #fff}
.tagIDBG_blogWellbeing {background-color: #d31920; color: #fff}
.tagIDBG_blogHottopics {background-color: #0089c3; color: #fff}
.tagIDBG_500 {background-color: #414042; color: #fff}
.tagIDBG_ {background-color: #414042; color: #fff}


.offsetOverride {margin-top: 0vh!important;}

@media screen and (max-width:1076px) {
   
    .blogOffset .blogTitle {width: 100%;}
    .blogOffset { padding: 50px 0px;  margin-top: 0vh;}
    .blogOffset span {padding-left: 0px; display: block}
    .blogBanner {position:relative; height: 30vh; max-height: 500px; max-width: 1140px; background-size: cover; background-position: center top; margin: 0px auto;}
}
.inPageSocials {position:relative;  margin: 40px 0 30px 0; }
.inPageSocials span {display: block; margin-bottom: 10px; padding-left: 0px; font-weight: 700;  }
.inPageSocials ul {margin: 0; padding: 0; list-style: none;color: #6f8e40; }
.inPageSocials ul li {display: inline-block; margin-right: 5px;}
.inPageSocials ul li a {display:inline-block; width: 35px; height: 35px; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #3c3c3a; border-radius: 50%; transition: transform .2s; }
.inPageSocials ul li a:hover {transform: scale(1.1);} 
.inPageSocials ul li a.facebook {background-image: url(../_IMG/socials/social_fb.svg)}
.inPageSocials ul li a.instagram {background-image: url(../_IMG/socials/social_inst.svg)}
.inPageSocials ul li a.twitter {background-image: url(../_IMG/socials/social_tw.svg)}
.inPageSocials ul li a.youtube {background-image: url(../_IMG/socials/social_yt.svg)}
.inPageSocials ul li a.contact {background-image: url(../_IMG/socials/social_contact.svg)}

.assetWrapper {margin: 30px 0 0px 0;width: 100%; box-sizing: border-box; height: auto; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr; justify-content: space-between; align-content: center; grid-row: auto; }
.assetWrapper a.box {position:relative; background: #FFF; color: #414042; padding: 4px; border-radius: 2px; text-align: center; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); overflow: hidden; text-decoration: none  }
.assetWrapper a.box .text {position:relative;  text-align: left; box-sizing: border-box;} 
.assetWrapper a.box .text .assetTitle {min-height: 20px; font-size: 16px; font-weight: 700; padding-left: 10px; padding-top: 10px; padding-bottom: 35px; border-left:8px solid #333333}
.assetWrapper a.box .image {}
.assetWrapper a.box .image img {width:100%!important; height: auto!important; max-height: 225px; max-width: 400px;  display: block; margin-bottom: 4px;}
.assetWrapper a.box .text .shortLink {display: block; font-size: 14px; font-weight: 400; margin-top: 10px; position: absolute; bottom:10px; color: #414042 }
.assetWrapper a.box:hover .text .shortLink {text-decoration: none}
.assetWrapper a.box .text .shortLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.assetWrapper a.box:hover .text .shortLink i {margin-left: 2px; }


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

@media screen and (max-width:700px) {
    .assetWrapper {grid-template-columns: 1fr 1fr  ;  }
    .assetWrapper .box .image img {display: none;}
}

@media screen and (max-width:450px) {
    .assetWrapper {grid-template-columns: 1fr;  }
}
.imageWrapper {margin: 30px 0 0px 0;width: 100%; box-sizing: border-box; height: auto; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr; justify-content: space-between; align-content: center; grid-row: auto; }
.imageWrapper a {position:relative; display: block; background: #FFF; padding: 4px; border-radius: 2px; text-align: center; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); overflow: hidden;  }
.imageWrapper a span {position:relative; background-size: cover; background-repeat: no-repeat; background-position: center;  background-color: #ccc; box-sizing: border-box; height: 0;  padding-bottom: 75%;} 

@media screen and (max-width:1000px) {
    .imageWrapper {grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width:700px) {
    .imageWrapper {grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width:450px) {
    .imageWrapper {grid-template-columns: 1fr; }
	.imageWrapper a {pointer-events: none;}
}

.categoriesWrapper {margin: 30px 0 0px 0;width: 100%; box-sizing: border-box; height: auto; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; justify-content: space-between; align-content: center; grid-row: auto; }
.categoriesWrapper .box {position:relative; background: #FFF; color: #414042; padding: 4px; border-radius: 2px; text-align: center; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); overflow: hidden  }
.categoriesWrapper .box:hover {text-decoration: none }
.categoriesWrapper .box .text {position:relative;  text-align: left; box-sizing: border-box; display: block} 
.categoriesWrapper .box .text .catTitle {min-height: 20px; display: block; font-size: 16px; font-weight: 700; padding-left: 10px; padding-top: 10px; padding-bottom: 35px;}
.categoriesWrapper .box .image {display: block; padding-bottom: 100px; background-image: url("../_IMG/gs-logo-nt.svg"); background-size: 70px 70px; background-repeat: no-repeat; background-position: center; transition:all ease-in 0.2s; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}
.categoriesWrapper .box:hover .image { background-size: 80px 80px;}
.categoriesWrapper .box .shortLink {display: block; font-size: 14px; font-weight: 400; margin-top: 10px; position: absolute; left: 15px; text-align: left; bottom:15px; color: #414042; text-decoration: none;}
.categoriesWrapper .box  .shortLink i {margin-left: 0px; line-height: 10px; font-size: 11px; transition: ease all 0.05s}
.categoriesWrapper .box:hover .shortLink i {margin-left: 2px; }

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

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

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

/* Forms */

.choices-2-col {  -webkit-columns: 2 ;-moz-columns: 2 ;columns: 2 ;-webkit-column-gap: 4em;-moz-column-gap: 4em;column-gap: 4em;}


/* Forms */

.form {margin: 20px 0;}
.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: #b50000; 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; pointer-events: all}
.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(--text); border-left: 3px solid var(--text); 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; }



.field_1051 {margin-top: 0px!important;}
.field_1053 .label{display: none}


.field_1035 {margin: 30px 0px 0px 0!important; }

.field_1056 {display: none;}
.info_1056 {font-size: 10px; line-height: 13px; display: block; margin-top: 30px; margin-bottom: 30px;}

.field_1058 .label{display: none;}
.info_1057 {font-size: 10px; line-height: 13px; display: block; margin-top: 30px; margin-bottom: 30px;}

.field_1077 .label{display: none;}
.info_1076 {font-size: 10px; line-height: 13px; display: block; margin-top: 30px; margin-bottom: 30px;}

.cols {position:relative; margin: 0 -20px 0 -20px}
.cols .col {position:relative; float: left; width: 50%; box-sizing: border-box; padding: 0px 20px;}


form.waiting .formContainer:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.05);}

@media screen and (max-width:1000px) {
    .cols {position:relative; margin: 0 0px 0 0px}
   .cols .col { width: 100%; padding: 0px 0px;} 
}

.prevNextContainer {background: #0089c3; padding: 20px;}
.prevNext {position: relative; width: 100%; max-width: 920px; margin: 0px auto; display: flex; flex-wrap: nowrap; justify-content: space-between}
.prevNext a {color: #fff; text-decoration: none}
.prevNext a:hover { text-decoration: underline}


.map-container {position:relative; margin: 20px 0; }
.map-container > div {position:relative; height: 0; padding-bottom: 56%; border: 1px solid #ddd; }
.mapInfoBox {position:relative; display:block; border: 1px solid #fff; width: 240px; padding: 15px; color: #555; background:#fff; font-size: 14px; box-sizing: border-box; box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.3);}
.mapInfoBox .markerContent {padding: 0 15px;}
.mapInfoBox .markerContent:before {content: ""; display: block; padding-top: 1px; margin-bottom: 10px;}
.mapInfoBox .markerContent:after {content: ""; display: block; padding-bottom: 1px; margin-top: 10px;}
.mapInfoBox .markerContent .title {text-align: left; font-size: 20px; margin: 5px 0; }
.mapInfoBox .markerContent .description {margin: 5px 0; }
.mapInfoBox .markerContent .link { display: block; margin: 5px 0; }

.mapInfoBox .closeButton { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background: #0089c3; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4); }
.mapInfoBox .closeButton:before { content: ""; position: absolute; background: #fff; width: 20px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -10px; transform: rotate(45deg);  border-radius: 2px; }
.mapInfoBox .closeButton:after { content: ""; position: absolute; background: #fff; width: 20px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -10px; transform: rotate(-45deg); border-radius: 2px; }
.mapInfoBox .closeButton:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }

@media screen and (max-width:600px) {
    .map > div {position:relative; height: 0; padding-bottom: 0%; height: 80vh; margin-left: -20px; margin-right: -20px;  border: 1px solid #ddd; }
}

.carousel {position:relative; margin: 0px auto; height: 60vh; min-height: 400px; max-width: 1140px; width:100%; max-height: 550px;  background-size: cover; background-position: center; }
.carousel .slide {position: absolute; display:none;  left: 0; top: 0; width: 100%; height: 60vh; min-height: 400px; max-height: 550px; background-position: center; background-size: cover;}
.carousel .slide .content {position:relative; align-items: center; height: 60vh; min-height: 400px; max-height: 550px;  display: flex; align-items: center;justify-content: center; background-color: rgba(0,0,0,0.3) }
.carousel .slide .content .content-align {width: 100%; display: block; padding: 30px; box-sizing: border-box; text-align: center  }
.carousel .slide .content .content-align .slideTitle {position:relative; font-family: 'Crimson Text', serif ; text-align:center;  color:#fff;  font-size: 3.5em; font-weight: 700; margin: 0px; box-sizing: border-box; line-height: 1em;  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);  }
.carousel .slide .content .content-align .slideStrap {font-family: 'Crimson Text', serif ; text-align:center; color:#fff; font-size: 2.0em; font-weight: 400;  margin: 0px; padding: 0px; box-sizing: border-box ; line-height: 1em; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);   }
.carousel .slide .content .content-align .slideButton {position:relative; display: block; width: 100%; text-align: center}


.carousel .slide .contentBlog {position:relative;  height: 60vh; min-height: 400px; max-height: 550px;  display: flex; justify-content: flex-end; align-items: flex-end; background-color: rgba(0,0,0,0.05) }
.carousel .slide .contentBlog .content-align {width: 100%; display: block; padding: 30px; box-sizing: border-box; text-align: left; }
.carousel .slide .contentBlog .content-align .slideTitle {position:relative; display: block;  text-align:left;  color:#fff;  font-size: 0.8em; font-weight: 400; margin: 0px; box-sizing: border-box;   text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9); width: 45%; }

.carousel .slide .contentBlog .content-align .slideTitle_offset {margin-bottom: 100px; padding-left: 90px;}

@media screen and (max-width:1000px) {
    .carousel .slide .contentBlog .content-align .slideTitle { text-align:center;   width: 100%;  margin-bottom: 30px; }
    .carousel .slide .contentBlog .content-align .slideTitle_offset {margin-bottom: 0px; padding-left: 0px;}
}


.carousel .slide.active {display:block;}
.carousel ul.buttons {position: absolute;  width: 100%; text-align: center; bottom: 20px;  padding: 0px; list-style: none; z-index: 2;}
.carousel ul.buttons li {display: inline-block; margin-left: 2px; margin-right: 2px;}
.carousel ul.buttons li a {position: relative; box-sizing: border-box; display: inline-block; width: 13px;height: 13px; border: 2px solid #fff; border-radius: 50%; background-color: #FFF; }
.carousel ul.buttons li a:hover {background-color: #0089c3;}
.carousel ul.buttons li a.active {background-color: #0089c3; }

.carousel .slide .content .content-align a.full-button {position:relative; background-color: #FFF; color: #0089c3; border-radius: 10px; padding: 8px 20px 3px 20px; border:0px solid #f6841f; transition:all ease 0.1s; display: inline-block; text-align: center; font-family: 'Crimson Text', serif ; font-size: 16px; font-weight: 700; margin-top: 20px; margin: 0px auto;}
.carousel .slide .content .content-align a.full-button:hover {background-color: #54585a; color: #FFF; border:0px solid #FFF; text-decoration: none}	

@media screen and (max-width:1000px) {
    .carousel ul.buttons {bottom: 10px;}
    .carousel .slide .content .content-align .slideTitle { font-size: 2em;  }
	.carousel .slide .content .content-align .slideStrap { font-size: 1em;  }
}

.searchResult {position:relative;  margin-bottom: 10px;  border-bottom: 1px solid #e6e6e7; background-color: #fff;}
.searchResult .inner { padding: 10px 0px; font-size: 13px;}
.searchResult .inner a {display: inline-block; background-color: #f1f1f2; margin-right: 10px; padding: 5px 10px; font-size: 14px; border-radius: 3px;}
.searchResult:last-child {border-bottom: 0px solid #e6e6e7;}

footer {font-size: 16px;}
footer strong {font-size: 22px; font-family: 'Crimson Text', serif ; font-weight: 400 }

.newsletterFooter {position:relative; float: left; width: 40%;}
.socialFooter {position:relative; float: right; width: 43%;}
.legalFooter {text-align: center; margin-top: 30px; font-size: 11px;}
.legalFooter a{color:#fff;}


@media screen and (max-width:1000px) {
    .newsletterFooter { width: 100%; margin-bottom: 30px; text-align: center}
    .socialFooter { width: 100%; text-align: center}
}
.socialFooter ul {margin: 20px 0; padding: 0; list-style: none;}
.socialFooter ul li {display: inline-block; margin: 0 5px 0 0 ;}
.socialFooter ul li a {display:inline-block; width: 30px; height: 30px; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #fff; border-radius: 50%; transition: transform .2s; }
.socialFooter ul li a:hover {transform: scale(1.1);} 
.socialFooter ul li a.facebook {background-image: url(../_IMG/socials/social_fb_grey.svg)}
.socialFooter ul li a.instagram {background-image: url(../_IMG/socials/social_inst_grey.svg)}
.socialFooter ul li a.twitter {background-image: url(../_IMG/socials/social_tw_grey.svg)}
.socialFooter ul li a.youtube {background-image: url(../_IMG/socials/social_yt_grey.svg)}


.donateContainer {text-align: center; margin: 20px 0}
.donateContainer p {max-width: 750px; margin: 1em auto;}
.donateContainer h1 {color: #0093ca; margin-top: 40px; margin-bottom: 20px; }
.donateContainer button {font-size: 1.25em; }
.donateContainer .selectValue {display: block; background-color: #0093ca; border-radius: 20px; color: #FFF; text-decoration: none; font-family: 'Crimson Text', serif; box-sizing: border-box; transition: ease all 0.2s; }
.donateContainer .selectValue.active {background-color: #58595b}
.donateContainer .selectValue:hover {background-color: #58595b}

.donateContainer .donate {posiiton: relative; margin: 10px -10px}
.donateContainer .donate > div {position: relative; width: 25%; float: left; padding: 10px; box-sizing: border-box; }
.donateContainer .donate > div > .selectValue {min-height: 170px; }
.donateContainer .donate > div > a {font-size: 80px;font-weight: 700; line-height: 1; padding: 50px 20px 5px 20px; }
.donateContainer .donate > div > span {font-size: 25px; padding: 35px 20px 5px 20px; cursor:pointer}
.donateContainer .donate > div > span input[type=text] {display: block; width: 100%; box-sizing: border-box; color: #555; background: none; padding: 6px 6px 6px 20px; border: none; outline: none; border-radius: 10px; transition: all 0.2s ease; background-color: #FFF; box-sizing: border-box;  }
.donateContainer .donate > div > span > span {position: relative; display: block; ; }
.donateContainer .donate > div > span > span b {position: absolute; color: #555; top: 3px;; left: 5px; pointer-events: none; font-size: 25px; }
.donateContainer .donate > div > span .error {position: relative; display:block; margin-top: 10px; }
.donateContainer .donate:after {content: ""; display: block; clear: both;}

.donateContainer .giftaid {width: 50%; width: calc(50% + 10px); margin: 10px auto; }
.donateContainer .giftaid > div {position: relative; width: 50%; float: left; padding: 10px; box-sizing: border-box; }
.donateContainer .giftaid > div > a {font-size: 35px; font-weight: 700; line-height: 1; padding: 15px 20px 10px 20px; }
.donateContainer .giftaid:after {content: ""; display: block; clear: both;}

.donateContainer .error {font-size: 1rem; font-family: 'Open Sans', sans-serif; color: #f00;}
.donateContainer .donate > .error {clear: both; padding-top: 10px; float: none; width: 100% }
.donateContainer .giftaid > .error {clear: both; padding-top: 10px; float: none; width: 100% }


@media screen and (max-width:900px) {
	.donateContainer .donate {posiiton: relative; margin: 10px -10px}
	.donateContainer .donate > div {padding: 5px;}
	.donateContainer .giftaid > div {padding: 5px;}
}
@media screen and (max-width:750px) {
	.donateContainer .donate > div {width: 50%; }
	.donateContainer .giftaid {width: 100%;}
}
@media screen and (max-width:500px) {
	.donateContainer .donate > div {float: none; width: 100%; }
	.donateContainer .giftaid > div {float: none; width: 100%;}
}


.memberships {margin: 0px 0;}
.memberships .buttons {background: #0093ca; padding: 30px 0px; font-family: 'Crimson Text', serif ; font-size: 25px; font-weight: 700; }
.memberships .buttons .container > div {position: relative; margin: 0 -15px}
.memberships .buttons .container > div > div{float: left; width: 33%; text-align: center; padding: 20px; box-sizing: border-box;}
.memberships .buttons .container > div > div a {display: flex; align-content: center; align-items: center; padding: 30px; background: #fff; border-radius: 20px;min-height: 150px; text-decoration: none; color: #414042 ; transition: ease all 0.2s }
.memberships .buttons .container > div > div a:hover {color:#0089c3;  }
.memberships .buttons .container > div > div a > span {display:block; width: 100%; }
.memberships .buttons .container > div > div a > span .icon { position:relative; display: block; margin: 0px auto; padding-bottom: 50%; width: 68%;  background-size: cover;  }
.memberships .buttons .container > div > div a > span .icon-individual {background-image: url("../_IMG/membership-individual.svg"); background-size: cover; }
.memberships .buttons .container > div > div a > span .icon-family {background-image: url("../_IMG/membership-family.svg"); background-size: cover; }
.memberships .buttons .container > div > div a > span .icon-corp {background-image: url("../_IMG/membership-corp.svg"); background-size: cover;}
.memberships .loader {position: relative; height: 0; overflow: hidden;}
.memberships .loader .content {position: absolute; bottom: 0; left: 0; width: 100%;}
.memberships .loader.open {height: auto;}
.memberships .loader.open .content {position: relative;} 


@media screen and (max-width:900px) {
    .memberships .buttons {font-size: 20px; }
    .memberships .buttons .container > div > div a { padding: 20px; background: #fff; border-radius: 20px;min-height: auto; text-decoration: none; color: #414042 ; transition: ease all 0.2s }
}

@media screen and (max-width:600px) {
    .memberships .buttons .container > div > div{padding: 10px; }
}

@media screen and (max-width:450px) {
    .memberships .buttons .container > div > div{ width: 100%; }    
}

.donateCause {position: relative; height: 0; overflow:hidden;}
.donateCause .content {position: absolute; bottom: 0; left: 0; width: 100%;}
.donateCause.open {height: auto;}
.donateCause.open > .content {position: relative;}



.cartTable {width: 100%; border-collapse: collapse; border: none; }
.cartTable td {border: none;}
.cartTable thead tr td {padding: 5px 5px; vertical-align: top;}
.cartTable tbody tr td {padding: 10px 5px; vertical-align: top;}
.cartTable tfoot tr td {padding: 10px 5px; vertical-align: top;}
.cartTable tr td:first-child {padding-left: 10px;}
.cartTable tr td:last-child {padding-right: 10px;}
.cartTable thead tr td {border-bottom: 1px solid #ccc; font-weight: 700;}
.cartTable tbody tr td {background: #eee; border-bottom: 1px solid #ddd; }
.cartTable a {color: #0089c3;;}
.cartTable tbody .prodText {padding-left: 0px; min-height: 0px; position:relative;}
.cartTable tbody .prodText .image {position: absolute; left: 0; top: 0; width: 60px; height: 60px; background-size: cover; background-postiojn: center; background-color: #ddd; background-repeat: no-repeat; border: 1px solid #ccc; margin-right: 10px; ; display: none}
.cartTable tbody .prodText .image b {position: absolute; top: 50%; left: 0; width: 100%; font-size: 9px; font-weight: 400; line-height: 0; text-align:center; color: #999;}
.cartTable tbody .prodLink {display:block; font-weight: 700; }
.cartTable tbody .choices {font-size: 0.8em; margin: 5px 0;}
.cartTable tbody .remove {font-size: 0.8em; margin: 5px 0;}
.cartTable tfoot tr td {background: #ddd; font-weight: 800;  }
.cartTable .fa-trash {font-size: 1.2em;}
.cartTable .shippingCalc {font-weight: normal;}
.cartTable .shippingCalc form{margin: 10px 0;}
.cartTable .shippingCalc .title {font-weight: 700;}
.cartTable .shippingCalc .error {mrgin-top: 5px; color: #b50000}
.cartTable .shippingCalc input {padding: 5px 10px; border: 1px solid #ccc;}
.cartTable .shippingCalc button {padding: 5px 10px}
.cartTable .shippingCalc button {position: relative; background: #dca719; color: #fff; cursor:pointer; font-weight: 700; border: none; outline: none; border-radius: 5px; padding: 5px 20px; transition: all 0.2s ease; }
.cartTable .shippingCalc button:hover {background:#fff; color: #000;}

.qtyForm .selectContainer {display: none; position: relative;  }
.cartTable .qtyForm .selectContainer select {display: block; box-sizing: border-box; color: #555; background: #fff;; padding: 3px 20px 3px 8px; border: 1px solid #ddd;; outline: none; border-radius: 6px; transition: all 0.2s ease;  }
.cartTable .qtyForm .selectContainer select {-webkit-appearance: none; -moz-appearance: none;}
.cartTable .qtyForm .selectContainer select::-ms-expand { display: none;}

.cartTable .qtyForm .selectContainer {position: relative;  }
.cartTable .qtyForm .selectContainer i {position: absolute; top: 50%; right: 8px; pointer-events: none; line-height: 0; font-size: 20px; color: #0089c3; ;}

.paymentContainer {}
.paymentContainer .paymentLogo {position:relative; width: 228px; height: 47px; background-size: cover; float: left; margin-right: 20px;}
.paymentContainer .paymentContent {position:relative;  float: left; width: 67%; font-size: 13px;}
.payment_32 {background-image: url("../_IMG/cc_icons.png")}

.waitingSpinner {
	position: relative; display:block; 
	margin: 20px auto;
	border: 6px solid #0093ca;
	border-top: 6px solid #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 2s linear infinite;
	box-sizing: border-box;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


.miniCart .cartTable tbody .prodText {padding-left: 0; min-height: 0; ;}
.miniCart .cartTable tbody .prodText .image {display: none;}
.miniCart .cartTable tbody .prodText .remove {display: none;}
.miniCart .cartTable tbody .prodText .description {display:none;}
.miniCart .outLinks {display:none;}



@media screen and (max-width:550px) {
	.cartTable tbody .prodText {padding-left: 0; min-height: 0; }
	.cartTable tbody .prodText .image {display:none; }
}

.cc_icons {position: relative; height: 40px; margin: 20px 0; background: url("../_IMG/cc_icons.png") center no-repeat; background-size: contain; }


/* 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: 700px; 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: #fff; padding: 0 30px; text-align: left; border-radius: 5px; overflow: auto; -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ }
#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.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;}
@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; }
}




.imageModal {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; cursor: pointer; }
.imageModal .inner { position: absolute; display: flex; align-items: center; justify-content: center;  width: 90%; height: 90%; top: 5%; left: 5%; background: #fff;; }
.imageModal .inner img {position: relative; max-width: 100%; max-height: 100%; }
.imageModal .inner .closeButton { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background: #0089c3; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4); }
.imageModal .inner .closeButton:before { content: ""; position: absolute; background: #fff; width: 20px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -10px; transform: rotate(45deg);  border-radius: 2px; }
.imageModal .inner .closeButton:after { content: ""; position: absolute; background: #fff; width: 20px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -10px; transform: rotate(-45deg); border-radius: 2px; }
.imageModal .inner .closeButton:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }

.adminOnlyBox {position:relative;font-size: 14px; display: block; margin: 10px; box-sizing: border-box; padding: 15px; background-color: #fddddd; border: 1px solid #b50000; color: #b50000; border-radius: 3px; }

.xcheckoutBreadcrumb {margin: 0;padding: 0;font-size: 10px;list-style: none; text-align: center; margin-bottom: 30px;}
.xcheckoutBreadcrumb .breadItem {display: inline-block;position: relative;margin-top: 1em;}
.xcheckoutBreadcrumb .breadItem .label {text-align: center; width: 100%; margin-bottom: 10px;}
.xcheckoutBreadcrumb .breadItem > span {display: block;position: relative; background: #FFF; height: 30px; width: 30px; border: 2px solid #ccc; margin: 0 30px; border-radius: 50%;}
.xcheckoutBreadcrumb .breadItem > a {display: block;position: relative; background: #FFF; height: 30px; width: 30px; border: 2px solid #0089c3; margin: 0 30px; border-radius: 50%;}
.xcheckoutBreadcrumb .breadItem > a:hover {background: #0089c3;}
.xcheckoutBreadcrumb .breadItem > b {display: block;position: relative; background: #0089c3; height: 30px; width: 30px; border: 2px solid #0089c3; margin: 0 30px; border-radius: 50%;}

.xcheckoutBreadcrumb .breadItem:after {content: '';width: 100px; height: 2px;position: absolute;background: #0089c3;left: 50%; bottom: 16px; margin: 0; z-index: -1;}
.xcheckoutBreadcrumb .breadItem:last-child {}
.xcheckoutBreadcrumb .breadItem:last-child:after { background: none;}

.product__form .price {font-size: 40px; font-weight: 700; }


/* 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}

.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}

.detail-table {border-collapse: collapse; width: 100%; margin: 20px 0; border: none; }
.detail-table td {border: none;}
.detail-table thead tr td {font-size: 0.8em; opacity: 0.6; }
.detail-table tbody tr td {border-top: 1px solid var(--borders-light); border-bottom: 1px solid var(--borders-light); }
.detail-table tfoot tr td {border-top: 1px solid var(--borders-light); border-bottom: 1px solid var(--borders-light); 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;}

.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}



.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);}