@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
/*@import url("https://use.typekit.net/eey0gsc.css");*/
:root {
	--white: #FFFFFF;
	--pale-green: #f8faf0;
	--light-green: #F4F9E1;
	--mid-green:#E4F0B5;
	--bright-green:#8BC113;
	--dark-green:#597B0C;
	--black: #273605;
	--grey: #878787;
	--very-light-grey: #e5e5e5;
	--light-grey: #d5d5d5;
	--red: #aa3333;
	--pink: #ffeeee;
}

.cf:before,.cf:after, .strip:before, .strip:after{content:" ";display:table;}
.cf:after, .strip:after{clear:both;}
.cf,.cf{*zoom:1;}

* {-webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;outline:none;background-position:center center;background-repeat:no-repeat}
body {margin:0 0;font-family:"Open Sans";font-size:15px;line-height:150%;color:var(--black);background-color:var(--white);font-weight:400;}
a {color:var(--bright-green);text-decoration:none;}

.mid {max-width:1200px;margin:0 auto;padding:12px 20px;position:relative;}
.copy .mid {margin:10px auto;}
.mid.narrow {max-width:600px;margin:20px auto;}





input, select, textarea {font-size:15px;font-family:Open Sans;color:var(--black);background-color:var(--light-green);border:1px solid var(--bright-green)}
img {  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */}
  
strong, h1, h2, h3, h4 {font-weight:600;line-height:120%}
h1:first-child, h2:first-child, h3:first-child {margin-top:0;}

.welcome {margin:-18px 0 10px;padding-top:5px;background-color:var(--pale-green);}
.welcome .mid>* {max-width:500px}

.masthead {background-color:var(--mid-green);font-size:17px;font-weight:600;}
.masthead .mid {display:grid;}
.masthead .mid>* {grid-row:1;text-align:center;}
.masthead .mid>*:first-child {text-align:left;}
.masthead .mid>*:last-child {text-align:right;}
.masthead a {color:var(--black);}

.header .mid {text-align:center;}
.header .logo {background-image: url(/res/icon.png?3);background-size:auto 85px;background-position:top center;width: auto;display:inline-block;height: 130px;padding:100px 0 0;/*font-family: apparat, sans-serif;*/font-weight: 300;font-style: normal;font-size:24px}
.header .mid>*:first-child {text-align:right;}
.header .mid>*:last-child {text-align:left;}
.header a {color:var(--black);padding:0 10px}

.attn {display:block;color:#ffffff;background-color:var(--dark-green);padding:10px;text-align:center;}

#consent {position:fixed;bottom:0;left:0;right:0;background-color:var(--mid-green);z-index:999999}
#consent strong {display:block;}
#consent-button {display:block;width:100px;text-align:center;clear:both;cursor:pointer;margin:10px 0;background-color:var(--bright-green);color:#ffffff;font-size:17px;font-weight:bold;padding:5px 15px;}

#bsk a {padding-right:30px;background-image:url('/res/bag.png');background-repeat:no-repeat;background-position:center right;background-size:25px;}

.submenu {background-color:var(--light-green);text-align:center;margin-bottom:20px;position:relative;z-index:1}
.submenu .mid {position:relative;padding: 0}
.submenu a {color:var(--bright-green);padding:10px;font-size:18px;}
.submenu>.mid>div {display:block;position:relative;padding:12px 0}
.submenu>.mid>div>div {position:absolute;top:100%;left:0%;transform:translateX(-50%);width:auto;background-color:var(--light-green);display:none;opacity:0.8;font-size:16px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.submenu>.mid>div>div a {display:block;white-space:nowrap;text-decoration:none;}

.submenu ul {list-style-type: none;margin: 0;padding: 0;display: block;}
.submenu li {display:inline-block;position:relative;}
.submenu ul a {display:block;padding:10px;white-space:nowrap;}
.submenu ul ul {position:absolute;top:100%;left:0;background-color:var(--light-green);text-align:left;z-index:100;}
.submenu li li {display:block;border-bottom:1px solid var(--mid-green);padding:0;}
.submenu li li a {display:block;padding:5px 10px;font-size:16px;}


.multi {    background-color: #f4f9e1;color: var(--dark-green); font-size: 14px;margin: -5px 0; display: inline; padding: 4px 8px; border-radius: 5px;}

.filters {padding: 10px 20px;font-weight:bold;margin:15px -20px;overflow-x:auto;white-space:nowrap;}
.filters div {display: inline-block;margin: -5px 0 -5px 5px;padding: 10px;background-color: var(--mid-green); border-radius: 10px; line-height: 100%;font-weight:normal;cursor:pointer;}
.filters div.selected {background-color:var(--bright-green);color:#ffffff;}

.image-full {width:100%;max-width:1200px;margin:0 auto;height:auto;background-color:var(--black);color:var(--dark-green);background-color:var(--black);padding:20px;display:block;box-shadow:2px 2px 6px var(--light-grey)}
.image-full>div {height:100%;}
.image-full .mid {height:100%;padding:50px}
.image-full .message {max-width:500px;width:100%;font-size:22px;line-height:120%;}
.image-full h1 {font-size:30px;margin:0 0 10px}
.image-full h1 + h2 {font-size:25px;margin:0 0;color:var(--bright-green);}
.image-full .button {background:var(--white);color:var(--bright-green);font-weight:700;padding:10px 20px;border-radius:10px;display:inline-block;margin:20px 0 0;font-size:20px;text-shadow:none;}
.image-full ul {margin:15px 0;list-style-type:none;padding:0;}
.image-full li {background-image: url(/res/tick.png);background-size: 25px;background-position: left center;padding-left: 35px;margin: 5px 0;}
a.image-full img {max-width:33%;bottom: -40px;right: 5%;}

.image-full-wc {width:100%;max-width:1200px;margin:0 auto;height:auto;color:#006198;padding:20px;display:block;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.image-full-wc>div {height:100%;}
.image-full-wc .mid {height:100%;padding:150px 50px 10px}
.image-full-wc .message {max-width:500px;width:100%;font-size:22px;line-height:120%;}
.image-full-wc h1 {font-size:30px;margin:0 0 10px}
.image-full-wc h1 + h2 {font-size:25px;margin:0 0;color:#58a1ca;}
.image-full-wc .button {background:var(--white);color:#58a1ca;font-weight:700;padding:10px 20px;border-radius:10px;display:inline-block;margin:20px 0 0;font-size:20px;text-shadow:none;}
.image-full-wc ul {margin:15px 0;list-style-type:none;padding:0;}
.image-full-wc li {background-image: url(/res/tick-bl.png);background-size: 25px;background-position: left center;padding-left: 35px;margin: 5px 0;}
a.image-full-wc img {max-width:33%;bottom: -40px;right: 5%;}


.copy {}
.copy h2, .copy h1 {font-size:25px;color:var(--bright-green);line-height:125%;}

h1:first-of-type {margin-top:0}

.simplepage .mid {max-width:750px}

.checkout {display:grid;grid-template-columns:1fr 250px;grid-column-gap:20px;}
.checkout>:first-child {order:2}

.dyes .mid {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-column-gap:25px;align-items:stretch;}
.dyes .mid>* {background-color:var(--light-green);font-size:22px;font-weight:700;color:var(--bright-green);padding-top:60px;position:relative;}
.dyes .mid a {position:relative;bottom:15px;left:15px;display:block;width:calc(100% - 30px)}

.footer  {background-image: url('/res/footer-transfer.png'); background-position: top center; background-size: contain; padding: 80px 0 40px; margin: 20px 0 0; background-color: var(--mid-green);line-heigth:150%;}
.footer a {color:var(--black);}
.footer .groups>div {float:left;width:33%;max-width:250px;}
.footer .groups>div>* {display:block;}

.legals {margin-top: 50px;padding: 15px 0 3px;border-top: 1px dotted var(--black);font-size:13px}
.legals a {margin-right:15px}

.c50 {width:50%}

.two-col {display:grid;grid-template-columns:1fr 1fr;grid-column-gap:25px;}


.add {background: var(--mid-green);padding: 5px 15px;display: inline-block;border-radius: 5px;font-weight: 600;margin: 4px 0 0;border: 1px solid var(--mid-green);cursor:pointer;white-space:nowrap}
.products .add {position:absolute;bottom:0;left:50%;transform:translateX(-50%);}


.colour-help {color: var(--black);padding: 15px;border-radius: 5px;background-color:var(--pale-green);margin:20px 10px 10px;overflow:hidden;}
.colour-help img {margin:-15px -15px 15px;width:calc(100% + 30px);aspect-ratio:1.25;object-fit:cover;}

.products {display: grid;grid-template-columns: repeat( auto-fill, minmax(225px, 1fr ));margin:0 -10px 55px;grid-column-gap:10px;grid-row-gap:10px}
.products .product {position:relative;text-align:center;padding:0 0 50px;min-width:140px}
.products .product>a:first-child {width: 100%;display:block;position: relative; width:100%;padding:0 0 100%}
.products .product>a:first-child img {position:absolute;top:15px;left:15px;right:15px;bottom:15px;overflow:hidden;border-radius:50%;width:calc(100% - 30px);height:calc(100% - 30px);object-fit:cover;}
.products .product>a:first-child img.contain {object-fit:contain;border-radius:0%;}
.products .product-title {font-size:15px;}
.products .price {font-size:14px;font-weight:400;text-transform:uppercase;margin:5px 0;}
.products .shade {font-size:14px;font-weight:600;color:var(--grey);text-transform:uppercase;margin:5px 0;}
.products .shade + .price {margin:-5px 0 5px;}
.products .product a {display:block;padding:0 10px 10px;}
.products .popbask, .products .discontinued {    margin: 0 auto;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;}
.products select {    border: none;border-radius:5px; padding: 5px; margin: 0 0 10px; background-color: var(--mid-green);}

.colour-chart.products .product img {object-fit:cover;width:100%;height:100%;}

.popbask {margin:10px 0 5px}
.qty + input[type=submit], .vsmall + input[type=submit], input[type=submit].survey_button {position:relative;bottom:auto;left:auto;transform:none;display:inline-block;margin:5px 0 0;background:var(--mid-green);color:var(--black);font-weight:600;padding:6px 12px;border-radius:5px;cursor:pointer;font-size:15px}
.qty {background-color: var(--light-green);border-color: var(--bright-green);width: 45px;padding: 5px;border-radius:5px;margin-right:5px;text-align:center;border:none;}
select.qty {padding:5px 0;}

.survey {overflow:hidden;position:relative;margin:10px;border-radius:10px;order:1}
.products .product:nth-child(n+5) {order:2}
.survey>img {position:absolute;top:0;left:0;right:0;bottom:0;opacity:1;object-fit:cover;width:100%;height:100%}
.survey .product-title {font-size:17px;font-weight:bold;padding-bottom:5px}
.survey>div {color:#ffffff;font-weight:600;position:absolute;bottom:0;left:0;right:0;padding:120px 10px 10px;background: linear-gradient(0, black, transparent);font-size:15px;line-height:130%;}
.survey .button {margin:15px 0 0;background:#f4f9e1;color:#000000;transition: all 0.25s ease-in-out}
.survey:hover .button {background:#ffffff;}

.product-view {display:grid;grid-template-columns:1fr 1fr;grid-column-gap:30px;margin:15px 0;}
.product-image {text-align:center;width:100%;position:relative;overflow:hidden;}
.product-image > img {border-radius:10px;max-width:100%;max-height:60vh;}
.prod-summary {margin:20px 0;font-size:18px;}
.product-options label {margin:5px 0;}

.showcase {position:relative;width:100%;height:0;padding-bottom:100%;}
.showcase>div {position:absolute;top:0;right:0;bottom:0;left:0;background-color:#ffffff;z-index:5;}
.showcase>div.current {z-index:10;}
.showcase>div.fadeIn {z-index:15;}
.showcase img {width:100%;height:100%;object-fit:contain;}

.order-details {grid-row-start:1;grid-row-end:3}
.pending .order-details {grid-row-start:2}
.order-details>div {display: grid;grid-template-columns: 80px 1fr 80px;grid-template-rows:1fr auto;grid-row-gap:15px;grid-column-gap:15px}
.order-details input {max-width:100%;}
.order-details img {width:80px;height:80px;border-radius:10px;object-fit:contain}
.order-details img.swatch {border-radius:50%;object-fit:cover}
.order-details .row {border-bottom:2px solid var(--light-green);padding:15px 0;}
.order-details .row:first-of-type {border-top:2px solid var(--light-green)}
.order-details .row>div {padding:0px;}
.order-details .row>div:first-child {grid-row-end:3;grid-row-start:1}
.order-details .row>div:nth-child(3) {text-align:right}
.order-details .row>div:nth-child(4) {align-self:baseline}
.order-details select + a {color:var(--light-grey);font-size:13px;text-transform:uppercase;font-weight:600;margin-left:10px}
.order-details select {border-color:var(--mid-green);padding:5px;color:var(--black);font-size:15px;background-color:var(--white);border-radius:5px}

.order-details>div.subtotal {grid-template-columns: 1fr 1fr;font-weight:600;grid-row-gap:0;}
.order-details>div.subtotal>:last-child {text-align:right;}
.order-details>div.subtotal>:first-child {grid-row-end:2;}

.order-details>div.voucher {grid-template-columns:1fr 1fr;text-align:right;font-weight:400;border-bottom:none;}
.order-details>div.voucher :first-child {text-align:left;}
.order-details>div.voucher>:first-child span {display:inline-block; background-color: var(--mid-green);padding: 5px 10px;border-radius: 5px;color: var(--dark-green);font-weight:bold;}
.order-details>div.voucher a {clear:both}
#vouch_save {color:var(--black);cursor:default;padding-right:0;}

.order-details>div span#vouch_save {display:inline}

.order-details>div.delivery {grid-template-columns: 1fr 100px;grid-row-gap:0;display:none;}
.order-details>div span {display:block;font-size:14px}
.order-details>div.delivery.selected, .order-details>div.delivery.choosing {display:grid;}
.order-details>div.delivery a {cursor:pointer;padding-left:10px;}
.order-details>div.delivery.choosing a, .order-details>div.delivery input {display:none}
.order-details>div.delivery.choosing input {display:block;float:left;margin:5px 10px 5px 0}
.order-details>div.delivery>:last-child {text-align:right;}

.alert_message {border:3px solid var(--mid-green);border-radius:10px;padding:15px;display:block;overflow:hidden;margin:0 0 15px;}
.alert_message strong {display:block;margin:0 0 10px;color:var(--bright-green);font-size:20px}


.order-summary {background-color:var(--light-green);padding:15px;border-radius:10px}
.order-summary .grid {display:grid;grid-template-columns:1fr 80px;}
.order-summary .grid>* {border-bottom:2px solid var(--white);padding:10px 0;}
.no {text-align:right}
.order-summary .grid>div:nth-last-child(-n+3) {font-weight:600;}
.order-summary input {margin:2px 5px 2px 0}
.order-summary .grid label {grid-column-start:1;grid-column-end:3}
.order-summary .app_vouch {grid-column:1 / span 2;font-weight:400 !important;border-bottom:none;color:var(--bright-green);text-align:right;}
.app_vouch span {display:inline-block;font-weight:bold;background-color:#ffffff;border-radius:5px;padding:5px 10px;cursor:pointer;}

.mixer, .nomixer {display:none;}
.swap {grid-column-start:1;grid-column-end:3;background-color:var(--light-green);margin-top:-10px;font-size:13px;margin-top:-15px;}

#card-element {max-width: 400px;margin: 20px 0;padding: 15px;background-color: var(--white);border-radius: 10px;border: 3px solid var(--mid-green);position:relative;z-index:2;}
#card-element.StripeElement--invalid {border-color: #fdd8d3;}
#card-errors {margin: 10px 0;font-weight:600;color:var(--red); z-index: 1; position: relative;}
.StripeElement--invalid + #card-errors {display:block}

.order-review {display:grid;grid-template-columns:1fr 320px;grid-row-gap:10px;grid-column-gap:50px;margin:30px auto;max-width:900px}

#payment-request-button {margin:10px 0}
#checkout-button, input[type=submit], .button, #login-button, .pay_with_paypal {background: linear-gradient(180deg, var(--bright-green), var(--dark-green)); padding: 10px; font-size: 18px; font-weight: 600; color: var(--white); text-align: center; border-radius: 5px; margin: 10px 0; cursor: pointer;border:none;display:block;border:none;}

.swal2-html-container {font-size:17px;}
.swal2-actions .swal2-styled.swal2-confirm, .swal2-actions .swal2-styled.swal2-cancel  {padding: 10px 15px; font-size: 20px; color: var(--white); text-align: center; border-radius: 5px; margin: 10px 10px; cursor: pointer;border:none;display:block;border:none;font-weight:500}
.swal2-actions .swal2-styled.swal2-confirm {background-color:var(--bright-green);order:1}
.swal2-actions .swal2-styled.swal2-cancel {background-color:var(--light-grey);color:var(--black)}
a.button {display:inline-block}
.pay_with_paypal {float:left;width:auto;padding:10px 25px}
input[type=submit] {margin-top:25px}
.button.pale {background:linear-gradient(180deg, var(--mid-green), var(--light-green));color:var(--grey);}
.button.grey {background:var(--very-light-grey);color:grey;}
.button.small {padding:5px 10px;font-size:14px;}
h1 .button {margin-left:10px;}

.form-group {margin:10px 0;max-width:400px}
.form-group label {padding-top:3px;}
label.checkbox {padding-left:35px;position:relative;display:block}
.form-group + .form-group {margin:25px 0 0}
.form-group>strong:first-child {font-size:20px;display:block;margin:0 0 15px;font-weight:600;color:var(--bright-green);border-bottom:2px solid var(--light-green);padding:0 0 10px}
.form-group>div {display:grid;grid-template-columns:100px 1fr;grid-column-gap:10px;}
/*.form-group>div>:nth-child(n+2) {grid-column-start:2}*/
.form-group>div>* {width:100%;}
.form-group>div + div input, .form-group>div + div select {border-top:none}

.form-group input, .form-group select {border:none;border-bottom:2px solid var(--mid-green);padding:5px;font-size:15px;background-color:#F4F9E199;margin-bottom:4px;transition: background-color 0.25s linear, border-color 0.25s linear}
.form-group input:focus, .form-group select:focus {background-color:var(--white);border-bottom-color:var(--bright-green);}

.toggler {margin-bottom:10px;display:block;}

.form-group .group div input {border-radius:0px}
.form-group .group div:first-of-type input {border-top-left-radius:5px;border-top-right-radius:5px;}
.form-group .group div:last-of-type input {border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

label.error {grid-column-end: -1;font-size: 14px;color: var(--red);font-weight: 600;padding:0;margin: -5px 0 5px;}
input.error {border-color:var(--red);background-color:var(--pink);}


.colour_guide {max-width:500px}
.sample {width:calc(100% + 50px);margin:-25px -25px 25px;height:100px;}
.sample img {width:100%;height:100%;object-fit:cover;}
.colour_guide table {width:100%}
.colour_guide td {padding:4px 0;border-bottom:1px solid var(--light-green)}
.colour_guide thead td {border-bottom:2px solid var(--light-green);font-weight:bold;color:var(--dark-green)}

.alert {margin: 15px 0 30px;padding: 10px;border-radius: 10px;overflow:hidden;display:block;}
.alert strong {font-weight:600;display:block;margin:-10px -10px 10px;color:var(--white);padding:10px;}
.alert a  {color:inherit;text-decoration:underline}
a.alert {color:var(--black);text-decoration:none}

.alert.error {background-color:var(--pink);color:var(--black)}
.alert.error strong {color:var(--red);}

.alert.success {background-color:var(--light-green);color:var(--black);}
.alert.success strong {color:var(--bright-green);}


.ui-tabs-nav {list-style-type: none;padding: 0;margin: 10px 0;border-bottom:1px solid var(--mid-green)}
.ui-tabs-nav li {display:inline-block;background-color:var(--light-green);border-top-left-radius:10px;border-top-right-radius:10px;text-align:center;border:1px solid var(--light-green);margin-bottom:-1px;border-bottom-color:var(--mid-green)}
.ui-tabs-nav a {width:150px;padding:10px;line-height:20px;font-size:16px;display:inline-block;}
.ui-tabs-nav i {display: block;font-size: 40px;color: var(--bright-green);padding:5px;}
.ui-tabs-nav .ui-state-active {background-color:#ffffff;border-color:var(--mid-green);border-bottom:1px solid #ffffff;}

.ui-tabs-panel {padding:10px 0 20px;}


.features {margin-top:50px}
.features .mid {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;text-align: center;grid-column-gap: 15px;max-width:900px}
.features .mid>div {padding:15px;}
.features .mid i {font-size:64px;color:var(--bright-green);display:block;line-height:100%;margin-bottom:15px}


.disptable thead td {background-color:var(--light-green);font-weight:600;}
.disptable td {border-bottom:1px solid var(--light-green);}



.halves {display:grid;grid-template-columns:50% 50%;grid-column-gap:20px;margin:0 0 15px}
.halves strong:first-child {display:block;margin-bottom:10px}


.featherlight-inner h1 .button {display: inline-block;padding: 5px 15px;margin-left: 20px;float: right;}


.hide {display:none;}


.inline select, .colour-list select, .inline input {border:none;padding:5px;margin:-5px 5px;border-radius:25px;background-color:var(--mid-green);}


.colour-list  {display:grid;grid-template-columns:60px 60px 1fr;grid-column-gap:20px;align-items:center;max-width:400px;margin:0;grid-row-gap:10px}
.colour-list img {width: 100%;height: 100%; border-radius: 50%; object-fit: cover;}
.colour-list span {display:block;text-transform:uppercase;font-size:14px;font-weight:600;color:var(--grey)}

.ticks {list-style-type:none;padding:0;margin:10px 0;}
.ticks li {background: url('/res/tick.png') no-repeat left top;min-height:25px;background-size:25px;padding:0 0 0 35px;margin:10px 0;}
.ticks strong {display:block;margin-bottom:3px;}

.card_grid {padding:10px 0;display: grid;grid-template-columns: repeat( auto-fit, minmax(20px, 320px) );grid-column-gap: 20px;grid-row-gap: 20px;}
.card_grid>* {background-color:var(--pale-green);border-radius:5px;padding:10px;display:grid;grid-template-columns:50px 1fr;grid-column-gap:15px}
.card_grid img {max-width:100%}
.card_grid span {font-size:14px;display:block;padding:2px 0}
.card_grid strong {color:var(--black);font-weight:600;}


.subscription {margin: 0;padding:20px 0;display:grid;grid-template-columns: 250px repeat(auto-fill, 100px) ;grid-column-gap:20px;border-bottom:3px solid var(--light-green);align-items:start;grid-row-gap:15px}
.subscription img {max-width:100%;}
.subscription span {font-size:14px;text-align:center;display:block;padding:5px 0;}
.subscription strong {font-size:20px;color:var(--bright-green);display:block;padding-bottom:5px}

.subscription a {display:block;}

.sub_item>div {border-radius:50%;overflow:hidden;width:100px;height:100px;}


.cal {width: calc(100% + 20px);margin: 0;text-align: center;font-size: 25px; line-height: 140%;box-shadow:1px 1px 3px var(--light-grey);transform: translateX(-20px);background-color:var(--white)}
.cal div {background-color: var(--mid-green);font-size: 16px;text-transform: uppercase;font-weight: 500; padding: 5px; margin-top: 5px; line-height: 100%;}

.option_grid {margin:25px 0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-column-gap:20px;text-align:center;}
.option_grid a {color:var(--black);font-size:14px;background-color:var(--pale-green);padding:10px 5px;border-radius:5px;cursor:pointer;}
.option_grid i {display:block;font-size:50px;padding:0px 0;color:var(--bright-green);}
.option_grid strong {display:block;color:var(--bright-green);font-size:17px;margin:0 0 5px}

.brands {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 25px;margin:25px 0;}
.brands a {color:var(--black);box-shadow:0 0 3px var(--mid-green);padding:20px;border-radius:10px}
.brands img {max-height:250px;margin:0 auto 20px;display:block;}
.brands strong {font-size:20px;color:var(--bright-green);}
.brands span:last-child {text-decoration:underline;color:var(--bright-green);font-weight:500}

.cards {margin:10px 0 20px}
.cards label {display:grid;grid-template-columns:30px 1fr;grid-column-gap:10px;margin:10px 0;align-items:center}
.cards input {position:inherit !important}
input[type="radio"], input[type="checkbox"] {appearance: none;-webkit-appearance : none;border: 1px solid var(--bright-green);width: 25px;height: 25px;content: none;outline: none;border-radius:5px;margin: 0 10px 0 0;}
input[type="radio"]:checked, input[type="checkbox"]:checked {appearance: none;outline: none;padding: 0;content: none}
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before{position: absolute;color: var(--black); !important;content: "\00A0\2713\00A0" !important;font-weight: 700;font-size: 17px;padding:0 0 0 1px}
#new_card {display:none;}


label input[type="checkbox"], label input[type="radio"] {position:absolute;top:0;left:0;}

.eco_options, .create_account, .leave_review, .tell_friend {background-image: url(/res/planet-earth.png);background-size: 60px; background-repeat: no-repeat; background-position: left 30px; padding-left: 80px; padding-top:30px; margin: 30px 0;border-top:3px solid var(--mid-green);}
.form-group.eco_options, .form-group.create_account {background-image:none;padding-left:0;margin:0;}
.eco_options>div, .create_account>div {display: grid; grid-template-columns: 35px 1fr; grid-row-gap: 15px; align-items: start;font-size:15px;}
.eco_options strong, .create_account strong {display:block;font-size:17px;padding:0 0 5px;line-height:100%}

.tell_friend {background-image:url(/res/tell.png?f);}
.create_account {background-image:url(/res/key-chain.png);}
.leave_review {background-image:url(/res/stars.png);}
.create_account form .grid {display:grid;grid-template-columns:150px 1fr;grid-row-gap:10px;grid-column-gap:10px;}

.to_acc {border-top: 3px solid var(--light-green);padding-top: 15px;}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--bright-green);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--bright-green) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cover {background-color:rgba(0,0,0,0.33);position:fixed;top:0;left:0;right:0;bottom:0;z-index:900;text-align:center;}
.cover>div {position:absolute;top:50%;left:50%;width:300px;max-width:calc(80%);transform:translate(-50%,-50%);background-color:#ffffff;padding:20px;border-radius:10px;max-height:80%;overflow:scroll;}
.cover strong {display:block;font-size:18px;padding:10px 0;}
.cover>div::-webkit-scrollbar {
  display: none;
}

.faq, .faq ul {list-style:none;margin:0;padding:0;max-width:1fr}
.faq li {list-style:none;margin:0;padding:0;}
.faq>li {margin: 0 0 15px;font-weight:600/*border:1px solid var(--light-green);background-color:var(--light-green)*/}
.faq>li>a {background-color:var(--light-green);border-radius:5px}
.faq a {padding:2px 0px;display:block;}
.faq ul a {background-color:var(--white);font-weight:400;}
.faq li li {/*border-top:1px solid var(--light-green)*/;margin:0 0px;}
.faq>li>a {font-weight:500}
.faq h3 {display:none;}

.support {display:grid;grid-template-columns:225px 1fr;grid-column-gap:20px;grid-row-gap:15px;}
.support.support_home {grid-template-columns:1fr;max-width:750px;margin:0 auto;}
.support>div:last-child {grid-column-start:2;}
.support.support_home>div:first-child {grid-row-start:2}
.support.support_home>div:last-child {grid-column-start:1;}

.multi-col {display:grid;grid-template-columns:1fr 350px;grid-column-gap:20px}
/*.multi-col>:nth-child(2) {background:linear-gradient(180deg, #ffffff, var(--mid-green), #ffffff)}*/
.multi-col ul {list-style-type:none;padding:0;margin:15px 0;}
.multi-col li {background-image: url(/res/checked.png); background-position: top left;background-repeat: no-repeat; padding: 5px 0 5px 40px;min-height:32px;}
.multi-col>:first-child>img:first-child {max-width:33%;margin:0 0 15px 15px;float:right}

.block-links a {display:inline-block;padding:5px 10px;background-color:var(--light-green);margin-right:5px;border-radius:5px}
.colour_note {padding: 10px 10px 10px 50px;margin: 20px 0 10px; background-color: var(--light-green);border-radius: 5px;background-image: url(/res/information.png);background-position: 10px 10px; background-size: 32px;}
.colour_note p:first-child {margin-top:0;}
.colour_note p:last-child {margin-bottom:0;}

.question {display:block;margin:0 0 5px;}
.question>div:first-child {display:block;padding:10px;background-color:var(--light-green);border-radius:5px;font-weight:600;cursor:pointer}
.question>div:last-child {display:none;padding:0 10px}





.faqlist a {display: block;padding: 5px; background-color: var(--pale-green); margin: 5px 0; border-radius: 5px;}


.menu_toggle {display:none !important;}


#testers {margin: 10px 0;}
#testers label {    display: block; position: relative; padding: 3px 0 3px 32px;}
#testers label input {width:22px;height:22px}

.hamburger {
  padding: 15px 8px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  menu_open .hamburger:hover {
    opacity: 0.7; }
  menu_open .hamburger .hamburger-inner,
  menu_open .hamburger .hamburger-inner::before,
  menu_open .hamburger .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 34px;
    height: 3px;
    background-color: var(--bright-green);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }
	
	.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.menu_open .hamburger--spin .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
 .menu_open  .hamburger--spin .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
 .menu_open  .hamburger--spin .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
	
.featherlight.side {text-align:right}
.featherlight.side .featherlight-content {margin:0;padding:0;border:none;height:100%;max-height:100%;}
.featherlight.side iframe {height:100%;}
.featherlight.side .order-review {margin:0;grid-template-columns:1fr}
.featherlight.side .order-payment, .featherlight.side .order-summary {display:none}
.featherlight.side .order-details .row.ship {display:none;}
.featherlight.side .order-options {displaY:none;}

.opt-buttons a {display: block;padding: 5px 10px;float: left;background-color: var(--light-green);text-transform: capitalize;font-weight: 600;}
.opt-buttons a:last-child {float:right}


.note {grid-template-columns:1fr !important;padding: 10px;background-color: var(--light-green);margin: 5px 0 10px;border-radius: 5px;}
.note strong {display:block;}

.mixer_info {position: fixed; background-color: rgba(0,0,0,0.5);top: 0;left: 0;right: 0;bottom: 0;z-index: 100;}
.mixer_info>div {position: absolute; top: 50%; left: 50%; width: 90%; max-height:90%; max-width: 550px; background-color: #ffffff; padding: 15px; border-radius: 10px;    transform: translate(-50%, -50%);overflow-y:scroll;  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */}
.mixer_info>div::-webkit-scrollbar {
  display: none;
}
.mixer_info img {float:right;width:75px;max-width:15%;}
.mixer_info label {margin:10px 0;}


.share_link a {margin:0 -15px;padding:0 15px;max-width:calc(100% + 30px);overflow-x:auto;}
#sharer {font-weight: bold;display:block;font-size:18px;}
.share_options {clear:both;padding-top:15px}
.share_options a {display: inline-block;margin: 10px 10px 0 0 ;background-repeat: no-repeat;background-position: 10px center;background-size: 26px;padding: 10px 10px 10px 47px;background-color: var(--mid-green);font-size: 16px;border-radius: 5px;color: var(--dark-green);}
.share_options #em {background-image:url('/res/small_mail.png');}
.share_options #copy {background-image:url('/res/small_copy.png');}
.share_options #fb {background-image:url('/res/small_share.png');}



#paypal-button-container {background-color:#ffc439;display:block;border-radius:5px;padding:8px 0;text-align:center;height:40px;}
.button.pp_complete {background:none;background-color:#ffc439;}


.TabbedPanels img {max-width:100%}

.locale {position:absolute;right:20px}
.locale img {width:20px;opacity:0.25;cursor:pointer;}
.locale img:hover, .locale img.current {opacity:1}

.submenu>.mid>div.locale {display:none}

.review {grid-template-columns: 1fr;grid-gap: 10px; margin: 15px 0 5px; padding:15px 0 0;border-top:3px solid var(--light-green)}
.review>:first-child {margin-bottom:10px}
.review .content {grid-column: 1 / span 2}
.review .content strong {display:block;margin-bottom:5px;font-size:16px}
.review .date {font-size:14px;opacity:0.66;line-height:14px;margin-top:10px;}
.review img {width:18px;margin-right:2px;}
.review .resp {margin: 15px;padding: 15px;background-color: var(--pale-green); border-radius: 5px;}

.review-2col {display:grid;grid-template-columns:330px 1fr;grid-gap:20px;}
.review-2col>:last-child {order:-1}
.review-2col>:last-child>div {position:sticky;top:60px}

.sticky-nav {position:sticky;top:0;width: 100%;background-color: #ffffff;border-radius: 5px; margin: 15px 0 0;z-index: 20;}
.sticky-nav .mid {margin:0 auto;padding:5px 20px}
.sticky-nav a {display:inline-block;background-color:var(--light-green);padding:5px 10px;border-radius:5px;margin-right:5px;}
.sticky-nav.stuck {box-shadow:0 0  4px var(--light-grey);border-radius:0;}


.base_shades {display: grid;grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));grid-gap: 10px;padding:3px;}
.base_shades h3 {grid-column-start: 1;grid-column-end: -1;margin: 15px 0 5px;}
.base_shades>div {position:relative;text-align:center;font-size:14px;}
.base_shades>div>div {position:relative;width:100%;padding-bottom:100%;}
.base_shades .swatch {position:absolute;top:0;left:0;width:100%;height:100%;border:5px solid #ffffff;box-shadow: 0 0 2px #888;margin-bottom:5px;border-radius:50%}


.hub-preview>div {display:grid;grid-template-columns: 1fr 1fr 1fr; grid-gap:20px;margin:20px 0 40px;}
.hub-preview>div>a:not(.last) {position:relative;border-radius:5px;overflow:hidden;color:#ffffff;font-weight:500;font-size:16px;aspect-ratio:1.5}
.hub-preview>div>h3, .hub-preview>div>.last {grid-column:1 / -1;margin:15px 0 0;}
.hub-preview>div>.last {text-decoration:underline;font-weight:500;}
.hub-preview img {object-fit:cover;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.hub-preview a div {position:absolute;bottom:0;left:0;right:0;padding:20px 10px 10px;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,0.66),calc(100% - 30px),rgba(0,0,0,0));}


.article {padding-right:275px;}
.article .images {float:right;margin:0 -250px 25px 25px;overflow:hidden;width:500px;}
.article .images img {max-width:100%;border-radius:5px;border:1px solid #ccc;margin-bottom:20px}

.outofstock {padding:5px 10px;font-size:16px;background-color:var(--pale-green)}
.outofstock div {margin:5px 0;}

.love_bar {max-width:100%;overflow-x:auto;background-image:url(/res/watersplash.jpg?f);background-position:0px top;border-radius:10px;}
.love_bar>div {display:grid;grid-auto-flow: column dense;grid-auto-columns: minmax(200px, 1fr);grid-gap:10px; margin: 0; padding: 0 10px;border-radius:5px;}
.love_bar>div>div {border-radius:5px;padding: 110px 10px 50px;position:relative; }
.love_bar strong {display:block;color:#006198;font-size:17px;font-weight:500;}
.love_bar a:last-child, .water_colour_gel .buttons a, .pop_up a {display: block;background-color: #58a1ca;padding: 5px 15px;border-radius: 5px;color: #ffffff;font-weight:500;position:absolute;bottom:20px}
.love_bar a:last-child:hover, .water_colour_gel .buttons a:hover {background-color:#006198;}

.water_colour_gel {display:grid;grid-template-columns:4fr 2fr 3fr;grid-gap:30px;margin:0 0 20px}
.water_colour_gel>div:first-child {grid-column:2}
.water_colour_gel>div:nth-child(2) {grid-column:1;grid-row:1}
.water_colour_gel>div:nth-child(2) p {font-size:17px;max-width:500px;margin:20px 0;line-height:150%;}
.water_colour_gel>div>img {max-width:100%;max-height:300px}
.water_colour_gel .buttons a, .pop_up a {position:relative;float:left;display:inline-block;bottom:initial}

.water_colour_gel .quote {background-color: #e2f3fa;padding: 15px;border-radius: 10px;margin: 20px;position:relative;}
.water_colour_gel .quote:before, .water_colour_gel .quote:after {content:"“";font-size:40px;position:absolute;top:0;right:calc(100% + 10px);color:#58a1ca;}
.water_colour_gel .quote:after {content:"”";top:initial;right:initial;bottom:0;left:calc(100% + 10px);}

.pop_up {display:none;overflow:hidden;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.4);z-index: 100;}
.pop_up>* {background-color: #ffffff; width:calc(100% - 40px);max-height:calc(100% - 40px);max-width: 750px; position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr;overflow:hidden;}
.pop_up>*>img {width:100%;height:100%;object-fit:cover;}
.pop_up>*>div {padding:20px;overflow-y:auto;}
.pop_up .x {position: absolute;top: 0;right: 0;font-size: 20px;line-height: 20px; font-weight: bold;background-color: #ffffff;border-bottom-left-radius: 10px;  padding: 10px;cursor:pointer}


.retiring {margin:-15px 0 25px;background-color:#e0f3f8;}
.retiring h2, .retiring h1, .retiring h3 {color:#58a1ca;}
.retiring p a {display:inline-block;padding:5px 10px;border-radius:5px;margin:10px 0;background-color:#58a1ca;color:#ffffff;text-decoration:none;font-weight:bold}
.retiring .mid  {display:grid;grid-template-columns:1fr 200px;grid-gap:10px;}
.retiring .mid>* {margin:20px 0 0;}

.retiring .tabbed {margin-bottom:35px;}
.retiring .tabs {display:flex;max-width:100%;}
.retiring .tabs>div {cursor:pointer; background-color: #58a1ca5e;width: 40%;max-width:225px;border-top-right-radius:5px;border-top-left-radius:5px;padding: 15px;  margin-right: 10px;font-size:13px;line-height:16px}
.retiring .tabs>div.selected {background-color:#ffffff;color:#000000;}
.retiring .tabs strong {font-weight:bold;font-size:16px;line-height:20px;padding-bottom:5px;display:block;}
.retiring .tab {display:none;padding:25px 15px 15px;border-radius:5px;border-top-left-radius:0px;background-color:#ffffff;margin: 0 0 15px;}
.retiring .tab a {color:#58a1ca;display:inline;background-color:transparent;margin:0;padding:0;text-decoration:underline;}

.shade_swap {display:grid;grid-template-columns: 1fr 1fr;width:100%;max-width:650px}
.shade_swap>:nth-child(1) {font-weight:bold;background-color:#e0f3f8}
.shade_swap>:nth-child(2) {font-weight:bold;background-color:#e0f3f8}
.shade_swap>div {padding:3px 5px;border-bottom:1px solid #e0f3f8}
.shade_swap>:nth-child(n+3) {display:grid;grid-template-columns:75px 1fr;grid-gap:0;}

.retiring table td {border-bottom:1px solid #e0f3f8;padding:3px 10px}
.retiring table td:first-child {padding-left:0;}
.retiring table td:last-child {padding-right:0;}
.retiring thead td {font-weight:bold;border-bottom:2px solid #58a1ca}

.blends {display: grid;grid-template-columns: 110px 1fr;grid-gap:20px;margin:15px 0}
.blends div div {position:relative}
.blends div {padding:10px 0}
.blends img {width: 60px;height: 60px;object-fit: cover;border-radius: 50%;position: absolute;top: 0;left: 0;border:2px solid #ffffff;box-shadow:0 0 5px #ccc}
.blends img:last-child {left:auto;right:0;}
.blends strong {font-size:18px;color:#58a1ca}
.blends span {display:none;position:absolute;z-index:1;top:20px;left:50%;background-color:#58a1ca;color:#ffffff;text-align:center;width:20px;height:20px;font-weight:bold;font-size:20px;line-height:100%;border-radius:50%;transform:translateX(-50%)}




@media only screen and (max-width: 1089px) {
	
	.love_bar {margin:0 -20px;max-width:calc(100% + 40px);border-radius:0;}	
	.water_colour_gel {display:block;}
	.water_colour_gel>div:first-child {float:right;margin:0 0 10px 10px;width:250px;max-width:35%}
	.water_colour_gel>div:nth-child(2) {max-width:initial;padding-bottom:50px}
	.water_colour_gel>div:nth-child(3) {display:none;}
	.water_colour_gel>div:nth-child(2) p {font-size:15px;max-width:initial}
}

@media only screen and (min-width: 768px) {


.review-2col .review:first-child {border-top:none;margin-top:0;padding-top:0;}
	
	.submenu li {transition:1s background, 1s max-height}
	.submenu ul ul {transition:1s background, 1s max-height;max-height:0;overflow:hidden;min-width:100%;}
	.submenu li li {transition:1s}
	.submenu ul li:hover ul {max-height:300px;background-color:var(--mid-green);z-index:101}
	.submenu ul li:hover {background-color:var(--mid-green);}
	.submenu ul ul li:hover {background-color:var(--light-green);}
	
	.mobile {display:none !important}

}



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

	.header .locale {display:none}
	.submenu>.mid>div.locale  {display:block;right:0;}

	.mixer_info h2 {font-size:18px}

	.masthead>.mid>* {display:none;}
	.masthead>.mid>:first-child {display:block;}
	
	.submenu {position: fixed;top: 70px;left: 100%;width:100%; bottom:0;background-color: var(--pale-green);z-index: 1000;border-top: 3px solid #ffffff;padding: 15px;font-size: 18px;transition: all ease-in-out 0.5s;z-index:1000;text-align:left;margin-bottom:0;}
	.submenu .mid {padding:0px}
	.submenu li {display:block;padding:0;}
	.submenu>div>ul {display:grid;}
	.submenu>div>ul>li {border-bottom:2px solid var(--mid-green);}
	.submenu ul a {padding:10px 0;}
	.submenu ul ul {display:block;position:relative;top:auto;left:auto;right:auto;bottom:auto;opacity:1;background-color:inherit;margin-bottom:10px}
	.submenu ul ul li {border-bottom:none;font-size:15px;}
	.submenu a {font-size:17px;color:var(--dark-green);display:block;}
	#bsk {grid-row-start:1;}
	#bsk a {background-image:none; }
	.menu_open .submenu {left:0;overflow:auto;padding-bottom:60px;}
	
	.header .mid {text-align:left;background-color:var(--pale-green);padding:10px 15px;}
	.header .logo {    padding: 18px 0 0 50px;background-size: contain;background-position: center left;height: 50px;font-size: 20px;color:var(--dark-green)}
	
	#mbsk {width: 50px;height: 50px;display: block;position: absolute;top: 10px;right: 55px;background-image: url(/res/bag.png);background-size: 30px;}
	
	.copy h1, .copy h2 {font-size:20px}
	.brands {grid-template-columns:1fr;grid-row-gap:20px}
	.brands a {box-shadow:none;padding:0;border-radius:0;padding-top:20px;border-top:3px solid var(--mid-green)}
	.brands img {float:right;margin:0 0 20px 20px;max-width:25%}
	
	.products {grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );}
	.two-col {grid-template-columns:1fr;grid-row-gap:25px}
	
	.multi-col, .order-review, .product-view, .support {grid-template-columns:1fr;grid-row-gap:25px}
	.product-view .TabbedPanels {margin:20px -15px 0;width:calc(100% + 30px);position:relative;}
	.product-view .TabbedPanelsTabGroup {position:absolute;top:0;left:0;width:100%;padding:5px;height:50px;display:flex;border-radius:0;white-space:nowrap;overflow-x:auto}
	.product-view .TabbedPanelsContentGroup {padding:50px 15px 0}
	
	.support {grid-row-gap:15px;grid-template-columns:1fr;}
	.support>:first-child {grid-row-start:3}
	.support_home.support>:first-child {grid-row-start:2}
	.support>div:last-child {grid-column-start:auto}
	.faq h3 {display:block}
	
	
	.order-details>div.delivery a {display:block;padding-left:0}
	
	.order-summary {display:none;}
	.form-group>strong:first-child {font-size:17px;padding:0 0 5px;}
	
	.pending .order-options {grid-row-start:2;grid-column-start:1;margin-top:-15px}
	#pay {width:100%;margin:10px 0 0 !important}
	.pending .order-details {grid-row-start:3;grid-row-end:4}
	
	.ui-tabs-nav {white-space:nowrap;overflow-x:scroll;overflow-y:hidden;margin:10px -15px;padding:0 15px}
	
	.desktop {display:none}
	.features .mid {grid-template-columns:1fr 1fr 1fr;grid-row-gap:15px;}
	.features .mid i {font-size:50px;}
	
	.footer {padding:30px 10px 0;}
	.footer .groups>div {width:100%;float:none;max-width:auto; margin:0 0 15px;}
	
	.legals {margin-top:20px;}
	.legals span {display:block}
	
	.sub_data {grid-column-start:1;grid-column-end:-1;}
	.subscription {grid-template-columns: repeat(auto-fill, 100px)}
	.option_grid {grid-row-gap:20px;grid-template-columns:1fr 1fr}
	
	.header {position:fixed;top:0;left:0;right:0;z-index:100}
	/*.masthead {font-size:15px;display:block;}
	.masthead .mid {padding:10px 15px;}
	.masthead .mid>*:first-child {display:none;}
	*/
	body {padding-top:65px;}
	.menu_toggle {display:block !important;position: absolute;top: 10px; right: 10px; height: 50px; width: 50px;}
	
	
	.colour_note {margin:20px -15px 10px;padding:10px 10px 10px 50px;background-position:15px 10px;border-radius:0;background-size:25px;}
	
	.mid {padding:15px;}
	.copy {font-size:15px;}
	
	.checkout {display:grid;grid-template-columns:1fr;grid-column-gap:20px;}
	.checkout>:first-child {order:0}
	
	.sticky-nav {top:70px}
	.review-2col {grid-template-columns:1fr}
	
	.pop_up {min-height:100%;overflow-y:scroll}
	.pop_up>* {width:100%;height:100%;border-radius:0;overflow-y:scroll;display:block;max-height:initial;height:initial;top:0;left:0;transform:none;}
	.pop_up>*>img {aspect-ratio:1;width:calc(100% - 40px);object-fit:cover;margin:20px 20px 0;border-radius: 10px;}
	.pop_up .x {position:fixed;top:0px;padding-top:20px;right:20px}
	
	.image-full-wc {border-radius:0 !important;padding:0;background-position:top right !important;}
	.image-full-wc .mid {padding:130px 20px 50px;}
	.image-full-wc h1 {font-size:26px;}
	.image-full-wc h1 + h2 {font-size:22px;}
	a.image-full-wc img {max-width:40% !important;bottom:-20px ;right:10px;}
	.image-full-wc li {background-size:20px;font-size:17px;}
	
	
	
	.shade_swap {grid-template-columns:1fr 1fr}
	.shade_swap>:nth-child(n+3) {display:inline;}
	.shade_swap>div>div {display:inline;}
	.shade_swap>:nth-child(even) {text-align:right}
	

	
}

.qty + input[type=submit].vsmall {display:none;}

@media only screen and (max-width: 550px) {
	.retiring .mid {grid-template-columns:1fr}
	/* .retiring .mid {grid-template-columns:1fr 125px} */
	.retiring .mid>img {width:50% !important;grid-row:1;margin:0 auto}
}
	
	
@media only screen and (max-width: 400px) {
	.products {grid-template-columns: 1fr 1fr;margin:0 -10px 50px}
	.legals a {display:block}
	.qty + input[type=submit].vsmall {display:inline-block}
	.vsmall + input {display:none !important}
	.hub-preview div {grid-template-columns:1fr;}
}

@media only screen and (max-width: 1200px) {
	.submenu  + .image-full {margin-top:-20px;box-shadow:none;}
	.image-full .mid {padding:20px 0}
	
	.article {padding-right:200px}
	.article .images {margin:0 -200px 25px 25px;width:400px}
}


@media only screen and (max-width: 800px) {
	a.image-full {background-position:left center !important}
	.image-full .mid {max-width:400px;margin: 20px 0;}
	a.image-full .message {font-size:20px}
	a.image-full img {bottom:-10px;right:5px;max-width:40%;}
	
	.article {padding-right:0;}
	.article .images {display:block;float:none;width:calc(100% + 30px);margin: -20px -15px 0;}
	.article .images img {max-height:500px;object-fit:cover;border:none;border-radius:0}
	
	.hub-preview div {grid-template-columns:1fr 1fr;}
	
}