@charset "utf-8";
/* CSS Document */

/* Colours */
:root {
--black: #000000;
--bggrey_light: #F4F4F4;
--bggrey_mid: #ECECEC;
--grey: #949698;
--altgrey: #d4d5d6;
--blue: #003671;
--blue_mid: #2E86E0;
--blue_light: #DEECFA;
--red: #DC0027;
--redhover: #be0006;
--green: #2EB700;
--green_light: #7ED47F;
--green_garden: #AECC2C;
--orange: #F7A11F;
--orange_pale: #fef0db;
--gold: #BD9D78;
--goldhover: #8c6138;
--purple: #BC7AEF;
--yellow: #FFCD00;
--yellowhover: #ffa500;
--pink_light: #fcebee;
	
--buttonprimary: #2E86E0;
--buttonprimary_border: #2E86E0;
--buttonprimary_colour: #fff;
--buttonprimaryhover: #003671;
--buttonprimaryhover_border: #003671;
--buttonprimaryhover_colour: #fff;
--buttonprimarytext: #fff;
--buttonprimaryhovertext: #fff;
--greybutton: #d4d6d8;
--greybuttonhover: #bec2c5;
	
--buttonsecondary: #F4F4F4;
--buttonsecondary_border: #333;
--buttonsecondary_colour: #333;
--buttonsecondaryhover: #ECECEC;
--buttonsecondaryhover_border: #000;
--buttonsecondaryhover_colour: #333;
--buttonsecondarytext: #000;
--buttonsecondaryhovertext: #000;

}


/* FONTS */
/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/outfit-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/outfit-v11-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/outfit-v11-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/outfit-v11-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/outfit-v11-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/outfit-v11-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* outfit-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/outfit-v11-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/outfit-v11-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}



/* REPEATABLE POSITION CLASSES - TOO MANY VARS FOR TAILWIND! */
.absolute-center-left { position: absolute; left:0; top:50%; transform: translate(0,-50%); }
.absolute-center-right { position: absolute; right:0; top:50%; transform: translate(0,-50%); }
.absolute-center-center { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
.absolute-center-top { position: absolute; left:50%; top:0%; transform: translate(-50%,0%); }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3; }
.wish-button {  }
.wish-button span { width:calc(100% - 12px); float:left; position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.wish-button span.wish-icon-active { position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width:calc(100% - 12px); opacity: 0; transition: all 200ms ease; }
.wish-button:hover span.wish-icon-active { opacity: 1; }
body .reach-sides:before { width: calc(calc(100vw - 100%) / 2) !important; left: calc(0px - calc(calc(100vw - 100%) / 2)) !important; }
body .reach-sides:after { width: calc(calc(100vw - 100%) / 2) !important; right: calc(0px - calc(calc(100vw - 100%) / 2)) !important; }

/* DEF STYLES AND BUTTONS FOR USE IN WIDGETS ETC */
body.pixiedust span.xxlarge, body.pixiedust .xxlarge { font-size: clamp(40px, 1.335rem + 5.8252vw, 100px) !important; display:block; line-height:1.1; font-weight:600; margin-bottom: clamp(10px,2vw,20px) !important; display:block;  }
body.pixiedust span.xlarge, body.pixiedust .xlarge { font-size: clamp(32px,1.301rem + 3.4951vw,68px) !important; display:block; line-height:1.1; font-weight:600; margin-bottom: clamp(10px,2vw,20px) !important;display:block;  }
body.pixiedust span.large, body.pixiedust .large { font-size:  clamp(22px, 1.0643rem + 1.5534vw, 38px) !important; display:block; line-height:1.1; font-weight:600; margin-bottom: clamp(10px,2vw,20px) !important;display:block;  }
body.pixiedust span.medium { font-size: clamp(16px, 0.8835rem + 0.5825vw, 22px) !important; line-height:1.1; margin-bottom: clamp(10px,2vw,30px) !important; display:block; font-weight:400; }
body.pixiedust span.small { font-size: clamp(12px, 0.7112rem + 0.1942vw, 14px) !important; line-height:1.4; margin-bottom: clamp(10px,2vw,30px) !important; display:block; }
body.pixiedust p { font-size: clamp(14px,1.2vw,14px) !important; margin-bottom: clamp(10px,2vw,20px) !important;  }
body.pixiedust .title { font-weight: 900 !important; }
body.pixiedust .text-shadow { text-shadow: 1px 2px 8px #00000094; }
body.pixiedust .grey { color:var(--grey) !important; }
body.pixiedust .green { color:var(--green) !important; }
body.pixiedust .yellow { color:var(--yellow) !important; }
body.pixiedust .red { color:var(--red) !important; }
body.pixiedust .blue { color:var(--blue_mid) !important; }

body.pixiedust .divider { position: relative; font-size:0; width:100%; display:flex; height: 1px; margin: 6rem 0; }
body.pixiedust .divider span { display:none; }
body.pixiedust .divider:before { content:''; position:absolute; top:0; width: 100vw !important; left: calc(0px - calc(calc(100vw - 100%) / 2)) !important; height:1px; background:var(--bggrey-light);  }
@media screen and (max-width:1270px) { body.pixiedust .divider { margin: 3rem 0; }}

/* BUTTONS */
body.pixiedust .button, body.pixiedust a.btn { display:inline-flex; align-items: center; justify-content: center; transition:all 200ms ease; background:var(--blue_mid); border:1px solid var(--blue_mid); box-sizing: border-box; padding:16px 24px; color:#fff !important; font-weight: 500; font-size:14px; line-height: 12px; text-align: center; }
body.pixiedust .button:hover { background:var(--blue); border-color:var(--blue); }
body.pixiedust .button.whitebutton {  background:transparent; border-color:#fff; color:#fff !important;  }
body.pixiedust .button.whitebutton:hover { background:var(--blue); border-color:var(--blue); }
body.pixiedust .button.yellowbutton { background:var(--yellow); border-color:var(--yellow);  color:#000 !important;  }
body.pixiedust .button.yellowbutton:hover { background:var(--yellowhover); border-color:var(--yellowhover); }
body.pixiedust .button.blackbutton {  background:#333; border-color:#333; color:#fff !important;  }
body.pixiedust .button.blackbutton:hover { background:#000; border-color:#000; }
body.pixiedust .button.greybutton { background:var(--greybutton); border-color:var(--greybutton);  color:#000 !important;  }
body.pixiedust .button.greybutton:hover { background:var(--greybuttonhover); border-color:var(--greybuttonhover); }
body.pixiedust .button.redbutton { background:var(--red); border-color:var(--red);  color:#fff !important;  }
body.pixiedust .button.redbutton:hover { background:var(--redhover); border-color:var(--redhover); }
body.pixiedust .button.bluebutton, body.pixiedust a.btn.btn-primary { background:var(--blue_mid); border-color:var(--blue_mid);  color:#fff !important;  }
body.pixiedust .button.bluebutton:hover, body.pixiedust a.btn.btn-primary:hover { background:var(--blue); border-color:var(--blue); }
body.pixiedust .button.goldbutton { background:var(--gold); border-color:var(--gold);  color:#fff !important;  }
body.pixiedust .button.goldbutton:hover { background:var(--goldhover); border-color:var(--goldhover); }
body.pixiedust .button svg, body.pixiedust .btn svg { display: inline-block; width: 25px; height: 25px; }
body.pixiedust .scrollbutton:after { background:url(../images/assets/header-menu-arrow-black.svg) no-repeat center / 17px; content:''; width: 17px; height:12px; margin:0 -5px 0 5px; transform: rotate(90deg); filter: invert(1); }
body.pixiedust .button span, body.pixiedust .btn span { font-weight: 500; line-height: 1; }

@media screen and (max-width:640px) {
	body.pixiedust .button svg, body.pixiedust .btn svg { width:20px; height:20px; }
	body.pixiedust .button span, body.pixiedust .btn span { font-size: 12px; }
}

/* MESSAGES */
body .page.messages { position: static; }
.messages .message, body .message { justify-content: left; position: relative; }
.messages .message .close, body .message .close { position: absolute; right: 20px; top: 50%; transform: translate(0,-50%); }
.messages .message .close svg, .message .close svg  { background:var(--red); border-color:var(--red); border-radius: 50%; width: 22px; height: 22px; box-sizing: border-box; padding: 2px;}
.messages .message:before, body .message:before { margin-right: 10px;  }
.message.error:before { background:var(--red) url(../images/assets/cart/cart-message-error.svg) no-repeat center / calc(100% - 8px); box-sizing: border-box; padding: 5px; width:22px; min-width:22px; height: 22px; border-radius: 50%; content:''; }
.message.info:before, .message.warning:before, .message.notice:before { background:var(--orange) url(../images/assets/cart/cart-message-alert.svg) no-repeat center / calc(100% - 8px); box-sizing: border-box; padding: 5px; min-width:22px; width:22px; height: 22px; border-radius: 50%; content:''; }
.messages .message.info .close svg, .messages .message.warning .close svg, .messages .message.notice .close svg { background:var(--orange); border-color:var(--orange); }
.message.success:before { background:var(--blue) url(../images/assets/cart/cart-message-success.svg) no-repeat center / calc(100% - 8px); box-sizing: border-box; padding: 5px; min-width:22px; width:22px; height: 22px; border-radius: 50%; content:''; }
.messages .message.success .close svg { background:var(--blue); border-color:var(--blue); }

/* FORMS */
body [type='checkbox'], body [type='radio'], body [type='checkbox']:hover, body [type='radio']:hover { color:var(--blue_light); outline-color:var(--blue_light); border:1px solid var(--blue_light); box-shadow:none !important; background-color:var(--blue_light); outline:0; cursor: pointer; }
body input[type='checkbox']:checked, body input[type='checkbox']:checked:active, body input[type='checkbox']:checked:focus, body input[type='checkbox']:checked:hover { background:var(--blue_mid) url(../images/assets/checkmark.svg) no-repeat center / 90%; border:1px solid var(--blue_mid); outline:0; }
body.pixiedust input, body.pixiedust select, body.pixiedust textarea { box-shadow:none !important; }
body.pixiedust input:focus, body.pixiedust select:focus, body.pixiedust input:active, body.pixiedust select:active { box-shadow: none !important; border-color:var(--bordergreylight); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{  -webkit-box-shadow: 0 0 0 30px white inset !important; }
body.pixiedust select { min-width: 80px; }
/* PAGINATION */
body .widget ul.splide__pagination { text-align: center; width:100%; margin: 30px 0 20px;  }
body .splide__pagination li { margin:0 5px; }
body .splide__pagination button.splide__pagination__page  { background:var(--grey) !important; border:8px solid transparent; opacity:1; transform:scale(0.6); position:relative;}
body .splide__pagination button.splide__pagination__page.is-active { background:#000 !important; outline:1px solid #000; background-clip:content-box !important; position:relative; float:left; margin-top:5px; transform:scale(1.4); }
body .splide__pagination button.splide__pagination__page.is-active:after { content:''; width:5px !important; height:5px !important; border-radius:50%; background:#000; top:50%; left:50%; transform:translate(-50%,-50%); display:block; }

/* ARROWS & SPLIDE */
body .splide--draggable>.splide__track>.splide__list>.splide__slide { vertical-align: top; }
body .splide__arrow { background:#fff; position:absolute; opacity: 1; border:0; width:40px; height:40px; box-shadow: 0 0 10px -5px #333; z-index:9; }
body .splide__arrow svg { width:55%; height:55%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); }
body .splide__arrow .cls-2 { fill:#fff; stroke:#fff; }
body .splide__arrow--prev svg { left: calc(50% - 1px); }
body .splide__arrow--next svg { left: calc(50% + 1px); }
body .splide__arrow--prev { left: -15px; }
body .splide__arrow--next { right: -15px; }
@media screen and (min-width:1390px) { body .splide__arrow--prev { left: -20px; } body .splide__arrow--next { right: -20px; } }
@media screen and (min-width:1200px) { body .splide__arrow { transition:all 200ms ease; } body .splide__arrow:hover { opacity: 1 !important; box-shadow: 0 0 10px -2px #333; } }
@media screen and (max-width: 639px) { body .splide__arrow--prev { left: -5px; } body .splide__arrow--next { right: -5px; } body .splide__arrow { width: 30px; height: 30px; } }

/* ANIMATIONS */

/* STRUCTURAL - TO DO - FIND IN CONFIG */
html { max-width: 100vw; overflow-x:hidden; }
body { overflow-x:hidden; width:100vw; overflow-y:scroll; background:var(--bggrey_light); }
.page-wrapper { position: relative; }
body .page-wrapper .columns { max-width: 1350px !important; }
.cms-index-index .columns { gap:0; }
.cms-index-index .page-main { margin:0; }
.breadcrumbs { max-width:1350px; margin:auto; }
@media screen and (max-width:1370px) {
	body .columns { max-width:100%; }
	.breadcrumbs { max-width: calc(100vw - 40px); }
}