/*
FONTS

  font-family: acumin-pro;
  font-family: acumin-pro-wide;

*/

:root {
  --default-font: acumin-pro;
  --default-font-size: 23px;
  --default-line-height: 1.5;

  --default-input-font: acumin-pro;
  --default-input-font-size: 18px;
  --dim-input-height: 60px;
  
  --button-input-font: acumin-pro-wide;
  --button-font-size: 22px;
  --button-height: 50px;

  --col-primary: #2B3685;
  --col-accent: #63B5CE;

  --col-burger: #2B3685;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #ececec;
  --col-input: #000;
  --col-placeholder: #BCBBBA;
  --col-input-bg: #EFEFEF;
  --col-button: #fff;
  --col-button-bg: #2B3685;
  --col-link: #000;
  --col-link-hover: #000000;

  --col-error: #ff6633;
  --col-attention: #ff6633;
  --col-warning: #f5b00e;
  --col-missing: #ff6633;

  --col-primary-rgb: 43, 54, 133;
  --col-accent-rgb: 99, 181, 206;
  --col-button-rgb: 255, 255, 255;
  --col-link-rgb: 0,0,0;
  --col-link-hover-rgb: 0, 0, 0;
  --col-error-rgb: 255, 51, 0;
  --col-attention-rgb: 255, 51, 0;
  --col-warning-rgb: 245, 176, 14;
  --col-border-rgb: 190, 190, 190;
  --col-missing-rgb: 255, 51, 0;

  --dim-site-width: 1920px;
  --dim-site-inner-width: 1440px;
  --dim-default-space: 250px;

  --vh: 1vh;
}


html { scroll-behavior: smooth; }

/* THEME */

p { font-weight: 500; }

h1 { font-family: acumin-pro-wide; font-weight: 700; font-style: Italic; font-size: 60px;  line-height: 1.1; letter-spacing: -3%;  text-transform: uppercase;  margin-bottom: 40px; color: var(--col-primary);}
h1 small { display: block; margin: 30px auto 0; font-size: 0.45em}
h2 { font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 60px;line-height: 1.1;letter-spacing: -3%;text-transform: uppercase; margin-bottom: 40px;color: var(--col-primary);}
h2  small { display: block; margin: 0px auto 30px; font-size: 26px; line-height: 1.2}
h3 { font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 40px;line-height: 1.1;letter-spacing: -3%;text-transform: uppercase; margin-bottom: 40px; color: var(--col-primary);}


/*CONTAINERS*/


/*BUTTONS*/
a.btn { border-radius: 26px; padding: 0 30px; font-style: italic; font-weight: 700; border: 2px solid var(--col-primary); transition: all .2s linear}
a.btn-white { background: #fff; color: var(--col-primary)}
a.btn:hover { border: 2px solid var(--col-accent); color: #fff; background: var(--col-accent)}
a.btn-white:hover { background: var(--col-primary); border-color: var(--col-primary)}


/*HEADER AND NAV*/
header { position: absolute; padding: 50px 20px 60px; width: 100%; z-index: 10 }
header div.burger { display: none}
header div.logo { display: block; margin: 0 auto 20px; width: 250px; max-width: 100%;}
header nav { display: flex; justify-content: center; gap: 30px; margin: 0 auto; align-items: center;}
header span.nav-links { display: flex; justify-content: space-between; gap: 30px; align-items: center;}
header span.nav-links a {font-family: acumin-pro-wide; font-weight: 700; font-style: italic;font-size: 16px;line-height: 2.2;letter-spacing: -3%;text-align: center;text-transform: uppercase; align-items: center;}
header span.nav-links a.active {color: #63B5CE;}
header span.nav-links a:hover {color: #63B5CE !important;}
header span.nav-globe { display: block; width: 18px;}
header a.btn { margin: 0}

body.fully-scrolled header { position: fixed; top: -300px; background: linear-gradient(180deg, #2B3685 0%, #030617 100%); display: flex; justify-content: space-between; align-items: center; gap: 0; width: var(--dim-site-inner-width); max-width: 90%; border-radius: 50px; padding: 20px 30px 20px 40px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all .1s linear;}
body.fully-scrolled header.visible { top: 25px; opacity: 1; transition: all .5s linear;}
body.fully-scrolled header div.logo { display: block; width: 230px; background: url(/img/logo2.svg) no-repeat left center; background-size: contain; margin: 0}
body.fully-scrolled header div.logo img { opacity: 0}
body.fully-scrolled header nav { justify-content: flex-end; margin: 0}
body.fully-scrolled header span.nav-links { justify-content: flex-end; }
body.fully-scrolled header span.nav-links a { color: #fff; font-size: 16px; }
body.fully-scrolled header a.btn { background: #fff; color:  var(--col-primary)}

footer { padding: 50px 30px;}
div.footer-inner { max-width: var(--dim-site-inner-width); display: block; margin: 0 auto;}
footer div.logo {width: 700px; max-width: 100%; margin: 0 auto 50px 0; display: block;}
footer div.logo img { display: block; width: 100%;}
div.footer-areas { display: flex; justify-content: space-between; gap: 40px;}
div.footer-areas > div:last-child { width: 540px;}
div.footer-areas > div:first-child { flex: 1}
div.footer-form { padding-bottom: 80px;}

div.footer-contact { display: flex; justify-content: flex-start; gap: 80px; align-items: flex-start}
footer strong { display: block;font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 22px;line-height: 1.25; letter-spacing: -3%;text-transform: uppercase; margin-bottom: 17px; color: #000}
div.footer-contact p, div.footer-contact a { font-size: 18px; font-weight: 400; line-height: 1.5}
div.footer-contact a { display: block;}
footer a:hover {color: var(--col-accent)}

p.patents { font-weight: 700; font-size: 16px; padding-bottom: 20px}
img.footer-logo {width: 440px; display: block; margin: 0 auto 0 0; max-width: 100%}

div.disclaimer p, div.disclaimer a {font-size: 16px; font-weight: 400}

/*ELEMENTS*/



/*GRIDS*/
div.grid-1 { display: flex; justify-content: center; gap: 100px; align-items: center;}
div.grid-1 > div:first-child { width: 450px;}
div.grid-1 > div:last-child { width: calc(100% - 550px); text-align: left; }

div.grid-2 { display: flex; justify-content: center; gap: 240px; align-items: center;}
div.grid-2 > div:first-child { width: calc(100% - 630px); text-align: left; }
div.grid-2 > div:last-child { width: 390px;}

div.grid-3 { display: flex; justify-content: center; gap:0px; align-items: center; max-width: 1080px; margin: 70px auto}
div.grid-3 > div {flex: 1; text-align: left; }

div.grid-4{ display: flex; justify-content: space-between; gap: 0; align-items: stretch; margin: 90px auto 0}
div.grid-4 > div { width: 50%}

div.grid-5 { display: flex; justify-content: space-between; gap: 50px; align-items: stretch; margin: 0px auto; align-items: center;}
div.grid-5 > div { width: 50%; flex: 1;}

div.grid-6 {display: flex; justify-content: space-between; gap: 40px;}
div.grid-6 > div:last-child {width: 67%}
div.grid-6 > div:first-child {width: 33%}

/*CONTENT*/

section.padded { padding-top: 190px; padding-bottom: 190px}
section.masthead-inner { margin-top: 100px;}

.std { max-width: 1480px; margin-left: auto; margin-right: auto}
.short { max-width: 1280px; margin-left: auto; margin-right: auto}
.shorter { max-width: 980px; margin-left: auto; margin-right: auto}
.shortest { max-width: 600px; margin-left: auto; margin-right: auto}

div.inner { max-width: 910px; margin: 0 auto; text-align: center; text-align: center;}
div.inner2 { max-width: 1240px; margin: 0 auto; text-align: center; text-align: center;}
div.intro { padding-bottom: 80px; text-align: left; margin-bottom: 80px; border-bottom: 3px solid var(--col-primary)}

div.masthead { margin-top: 80px; text-align: center;}
div.masthead img { display: block;width: 100%}


div.product-slider {max-width: 100%; padding-bottom: 70px;}

ul.slick-dots { position: absolute; left: 0; bottom: -65px; padding-left: 25px; display: flex; justify-content: start; gap: 12px; margin: 0;}
ul.slick-dots li { margin: 0; padding: 0; display: block;}
ul.slick-dots li button { margin: 0; padding: 0; display: block; width: 12px; height: 12px; background: #BCBBBA}
ul.slick-dots li.slick-active button { background: var(--col-accent)}
button.slick-arrow { position: absolute; bottom: -70px; top: auto; height: 22px; width: 8px; background-image: url(/img/svg/arrow.svg) !important; background-color: transparent  !important;}
button.slick-arrow.slick-prev { left: 0; transform: rotate(180deg);}
button.slick-arrow.slick-next { left: 174px}


div.product-feature { margin-top: 90px}
div.product-feature strong { font-family: acumin-pro-wide;font-weight: 700;font-style: italic;font-size: 22px;line-height: 28px;letter-spacing: 0%; text-transform: uppercase; display: block; margin-bottom: 15px}

div.slide-index { display: flex; justify-content: center; gap: 11px;}
div.slide-index a.btn { margin: 0}
div.slide-index a.btn:hover { background: var(--col-primary); border-color: var(--col-primary)}
div.slide-index a.btn:not(.active) { background: #fff; color: var(--col-primary); border-color: var(--col-primary)}
div.slide-index a.btn:not(.active):hover { background: var(--col-primary); color: #fff; border-color: var(--col-primary)}

div.slide-wrapper { margin: 60px auto; padding: 0 20px}

/*div.key-features { background: url(/img/home/slidebg.webp) #fff no-repeat center center; background-size: 100%; isolation: isolate;}*/
/*div.key-features * { background: transparent}*/
/*div.key-features .slick-slide img { mix-blend-mode: screen !important}*/
/*div.key-features .slick-slide img { display: block; position: relative;}*/
/*.key-features .slick-list {     mix-blend-mode: screen !important;}*/
/*.key-features .slick-list,*/
/*.key-features .slick-track {*/
/*    transform: none !important;*/
/*}*/

div.key-feature { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); z-index: 3; background: linear-gradient(180deg, rgba(43, 54, 133, 0.2) 0%, rgba(3, 6, 23, 0.2) 100%); background-blend-mode: multiply; backdrop-filter: blur(15px); box-shadow: 0px 2px 10.7px 0px #00000036; border: 4px solid #FFFFFF; border-radius: 50px; padding: 40px; text-align: center;; max-width: 600px}

div.key-feature * { color: #fff}
div.key-feature div.top { display: block; text-align: center;font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 22px;line-height: 28px;letter-spacing: 0%;text-align: center;text-transform: uppercase; margin-bottom: -15px}
div.key-feature div.stat { display: block; text-align: center;font-family: acumin-pro-wide;font-weight: 700;font-style: italic;font-size: 160px;line-height: 1;letter-spacing: -3%;text-align: center;text-transform: uppercase; margin-bottom: 10px}
div.key-feature div.bottom{ display: block; text-align: center;font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 32px;line-height: 1;letter-spacing: 0%;text-align: center;text-transform: uppercase;}

div.slider-1 { padding-bottom: 170px;}
div.slide-applications { margin: 0; justify-content: flex-start; position: absolute; bottom: 80px; left: 0} 
div.slider-1 ul.slick-dots { bottom: -165px; }
div.slider-1 button.slick-arrow { bottom: -170px; }
div.slider-1 button.slick-arrow.slick-next { left: 79px}

div.colour-specs h3 { margin-bottom: 10px}
div.colour-specs a.btn  { margin: 0 auto 0 0; }
div.colour-selection { display: flex; justify-content: start; gap: 27px; padding-bottom: 30px; border-bottom: 3px solid var(--col-border); margin-bottom: 30px}
div.colour-selection a { display: block; width: 100px; border-radius: 50px; border: 10px solid #fff;}
div.colour-selection a.active { border-color: var(--col-primary); }

div.spec-cards { display: flex; justify-content: space-between; gap: 20px; flex-direction: column; align-items: flex-start; margin: 30px auto 30px 0}
div.spec-cards div { display: block; padding-left: 38px; position: relative; font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 22px; line-height: 1.25; letter-spacing: 0%;text-transform: uppercase; color: var(--col-primary)}
div.spec-cards div:before { content:""; display: block; width: 28px; height: 28px; position: absolute; top: 0; left: 0; background: url(/img/svg/check.svg) no-repeat center center; background-size: contain;}

div.slider-3 { margin: 60px auto 0}
div.table-1 > div { display: grid; gap: 0px; grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr;}
div.table-2 > div { display: grid; gap: 0px; grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr 1fr;}
div.table-1 > div > div, div.table-2 > div > div  { padding: 25px; text-align: left; background: #FBFCFF; text-align: left; border-bottom: 1px solid var(--col-border)}
div.table-1 > div.th > div, div.table-2 > div.th > div {background: #fff;}
div.table-1 > div.th > div, div.table-2 > div.th > div, div.table-1 > div  > div:first-child, div.table-2 > div  > div:first-child  { color: var(--col-primary); font-weight: 700; }
div.table-1 > div.highlight > div, div.table-2 > div.highlight > div  { color: #fff; background-color: var(--col-primary); font-weight: 500;}

p.table-note { font-weight: 700; text-align: center; font-size: 22px; margin: 50px auto 0; max-width: 940px; text-transform: uppercase; font-style: italic;}


.benefit-card { background: #FBFCFF; border: 7px solid #f5f5f5; border-radius: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.09); padding: 44px 50px; color: var(--col-primary); position: relative; z-index: 2; }
.benefit-card div { padding: 0 0 18px 36px; margin-bottom: 16px; border-bottom: 1px solid #c8cde8; position: relative; }
.benefit-card div:before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; background: url(/img/svg/check.svg) no-repeat center center; background-size: contain; }
.benefit-card strong { display: block; font-family: acumin-pro-wide; font-style: italic; font-size: 22px; line-height: 28px; text-transform: uppercase; }
.benefit-card span { display: block; font-size: 20px; line-height: 35px; }
.benefit-card .btn { width: 100%; }
div.frame-overlay { position: absolute; top: -3.1%; width: 36.52%; left: 34.86%;}


div.slider-4 {  --coverflow-slide-width: 64%;  --coverflow-side-scale: .3;  width: 100%; height: 720px; overflow: hidden; position: relative; box-sizing: border-box;}
div.slider-4 .swiper-wrapper { position: absolute; inset: 0; }
div.slider-4 .swiper-slide { position: absolute; bottom: 0; left: 50%; width: var(--coverflow-slide-width);  height: 100%;  display: flex;  align-items: flex-end;  justify-content: center;  transform-origin: center bottom;  opacity: 0;  pointer-events: none;  transition: transform .55s ease, opacity .35s ease, left .55s ease;}
div.slider-4 .swiper-slide img {   width: 100%;  height: 100%;  object-fit: contain;  object-position: center bottom;}
div.slider-4 .swiper-slide.is-active {  z-index: 3;  opacity: 1;  pointer-events: auto;  transform: translateX(-50%) scale(1);}
div.slider-4 .swiper-slide.is-prev {  z-index: 2;  left: 15%;  bottom: 6%; opacity: 1;  pointer-events: auto;  cursor: pointer;  transform: translateX(-50%) scale(var(--coverflow-side-scale));}
div.slider-4 .swiper-slide.is-next {  z-index: 2;  left: 88%;  bottom: 6%; opacity: 1;  pointer-events: auto;  cursor: pointer;  transform: translateX(-50%) scale(var(--coverflow-side-scale));}
div.slider-4 .swiper-slide.is-hidden {  z-index: 1;  opacity: 0;  transform: translateX(-50%) scale(var(--coverflow-side-scale));}

.js-accordion { margin-top: 70px;}
acchead {font-family: acumin-pro-wide; font-weight: 700;font-style: italic;font-size: 26px; line-height: 34px;letter-spacing: 0%;text-transform: uppercase; padding: 20px 20px 20px 0; display: block; position: relative; border-bottom: 1px solid var(--col-border); color: var(--col-primary); }
acchead.ui-accordion-header-active { border-color: #fff;}
acchead span {display: block; position: absolute; right: 0; top: 0; height: 100%; width: 8px; background: url(/img/svg/arrow.svg) no-repeat center center; background-size: contain; transform: rotate(-90deg); transition: all .3s linear;}
acchead.ui-accordion-header-active span {transform: rotate(90deg)}
div.ui-accordion-content { padding: 20px 0; line-height: 1.33;}

.testing-table { border-top: 1px solid #ddd; margin-bottom: 36px; }
.test-row { display: grid; grid-template-columns: 70px 1.1fr 1.2fr 1.2fr 1.2fr 1.2fr; gap: 34px; align-items: center; border-bottom: 1px solid #ddd; padding: 22px 30px; }
.test-row strong { font-family: var(--heading-font); font-style: italic; font-size: 40px; line-height: 42px; color: var(--col-primary); text-align: center; }
.test-row span { font-size: 18px; line-height: 28px; }
.test-row b { color: var(--col-primary); font-size: 24px; }




div.faq-index { display: flex; justify-content: flex-start; gap: 30px; flex-direction: column; align-items: flex-start; margin-bottom: 30px;}
div.faq-index a { display: block;font-size: 22px; font-family: acumin-pro-wide; font-weight: 700; font-style: Italic;  line-height: 1.25; color: var(--col-border); text-transform: uppercase;}
div.faq-index a.active { color: var(--col-primary); }

div.faq-section  { margin-bottom: 110px; display: none;}
div.faq-section.active  { display: block;}

div.faq-search { position: relative; width: 100%; max-width: 350px; margin: 30px auto 0 0;}
div.faq-search input { padding-left: 80px; border-radius: 36px; line-height: 72px; background: transparent; }
div.faq-search img { display: block; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 35px; }

#faq .faq-search img { cursor: pointer; }
#faq hl { display: inline; background: rgba(99, 181, 206, .28); color: var(--col-primary); border-radius: 4px; padding: 0 .08em; }
#faq .faq-index-placeholder {			display: none;			}

div.privacy-section { border-bottom: 1px solid var(--col-border); margin-bottom: 100px; padding-bottom: 20px}
a.underline { text-decoration: underline}

div.reveal-response p { text-align: left;}

/*FORMS*/

input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { padding-left: 30px}
div.checkbox label { font-size: 13px;}
::placeholder {  font-weight: 400}
form button[type="submit"], form button[type="button"] { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border-radius: 60px; background: linear-gradient(180deg, #E6E9FF 0%, #E4F4F8 100%); position: relative; margin: 0 0 0 auto}
form button img { display: block; max-width: 100%; width: 12px; ;}
form button[type="submit"]:hover, button[type="button"]:hover { background: var(--col-border)}

/* ANIMATIONS */
section.js-animate { opacity: 0; transform: translateY(40px); transition: opacity .75s ease, transform .75s ease; }
section.js-animate.in-view, section.js-animate.in-better-view { opacity: 1; transform: translateY(0); }

@media only screen and (max-width: 1680px) {
		:root {
		  --default-font-size: 20px;
		  --default-input-font-size: 18px;
		  --dim-input-height: 60px;
		  --button-font-size: 20px;
		  --button-height: 50px;
		  --dim-default-space: 150px;

		}


		h1 { font-size: 48px;  letter-spacing: 0; margin-bottom: 30px; }
		h1 small { margin: 20px auto 0; font-size: 0.5em}
		h2 { font-size: 48px; letter-spacing: 0; margin-bottom: 30px;}
		h2  small { display: block; margin: 0px auto 20px; }
		h3 { font-size: 32px; letter-spacing: 0;margin-bottom: 30px; }

		a.btn { border-radius: 26px; padding: 0 25px; }

		header { position: absolute; padding: 30px 20px 50px; }
		header div.logo { width: 200px; }
		header nav { gap: 25px; }
		header span.nav-links { gap: 25px; }
		header span.nav-links a {letter-spacing: 0;}

		body.fully-scrolled header { padding: 20px 30px 20px 40px; }
		body.fully-scrolled header.visible { top: 25px;}
		body.fully-scrolled header div.logo { width: 230px; }
		body.fully-scrolled header span.nav-links a { font-size: 16px; }

		footer div.logo {width: 600px; margin: 0 auto 40px 0; }
		div.footer-areas { gap: 30px;}
		div.footer-areas > div:last-child { width: 480px;}
		div.footer-form { padding-bottom: 50px;}

		div.footer-contact { gap: 50px; }
		footer strong { font-size: 20px;margin-bottom: 15px; }
		div.footer-contact p, div.footer-contact a { font-size: 16px; }

		p.patents { font-size: 14px; }
		img.footer-logo {width: 360px; }
		div.disclaimer p, div.disclaimer a {font-size: 14px; }

		div.grid-1 { gap: 100px; }
		div.grid-1 > div:first-child { width: 450px;}
		div.grid-1 > div:last-child { width: calc(100% - 550px); }

		div.grid-2 { gap: 240px; }
		div.grid-2 > div:first-child { width: calc(100% - 630px); }
		div.grid-2 > div:last-child { width: 390px;}

		div.grid-3 { margin: 70px auto}

		section.padded { padding-top: 150px; padding-bottom: 150px}
		section.masthead-inner { margin-top: 100px;}

		div.intro { padding-bottom: 80px; text-align: left; margin-bottom: 80px; border-bottom: 3px solid var(--col-primary)}
		div.masthead { margin-top: 80px; text-align: center;}

		div.product-slider {padding-bottom: 70px;}

		ul.slick-dots { bottom: -65px; padding-left: 25px; gap: 12px;}
		ul.slick-dots li button { width: 12px; height: 12px; }
		button.slick-arrow { bottom: -70px;  height: 22px; width: 8px; }

		div.product-feature { margin-top: 90px}
		div.product-feature strong { font-size: 20px;line-height: 1.33; margin-bottom: 15px}

		div.slide-index { gap: 11px;}
		div.slide-index a.btn:not(.active) { background: #fff; color: var(--col-primary)}

		div.slide-features { margin: 0px auto;}

		div.key-feature { border: 4px solid #FFFFFF; border-radius: 50px; padding: 40px; max-width: 450px;}
		div.key-feature div.top { font-size: 16px;line-height: 1.2;}
		div.key-feature div.stat { font-size: 100px;}
		div.key-feature div.bottom{ font-size: 21px; line-height: 1.2}

		div.slider-1 { padding-bottom: 170px;}
		div.slide-applications { bottom: 80px;  }
		div.slider-1 ul.slick-dots { bottom: -165px; }
		div.slider-1 button.slick-arrow { bottom: -170px; }

		div.colour-specs h3 { margin-bottom: 10px}
		div.colour-selection { gap: 27px; padding-bottom: 30px; border-bottom: 3px solid var(--col-border); margin-bottom: 30px}
		div.colour-selection a { width: 100px; border-radius: 50px; border: 10px solid #fff;}

		div.spec-cards { gap: 20px; margin: 30px auto 30px 0}
		div.spec-cards div { font-size: 22px; }
		div.spec-cards div:before { width: 28px; height: 28px; }

		div.slider-3 { margin: 60px auto 0}
		div.table-1 > div { grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr;}
		div.table-2 > div { grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr 1fr;}
		div.table-1 > div > div, div.table-2 > div > div  { padding: 25px; }
		p.table-note { font-size: 18px; }

		div.grid-4{ margin: 90px auto 0}
		.benefit-card { border: 7px solid #f5f5f5; border-radius: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.09); padding: 44px 50px; }
		.benefit-card div { padding: 0 0 18px 36px; margin-bottom: 16px; }
		.benefit-card div:before { top: 4px; width: 18px; height: 18px; }
		.benefit-card strong { font-size: 20px; line-height: 1.33; }
		.benefit-card span { font-size: 18px; line-height: 1.8; }
/*		div.frame-overlay { top: -30px; width: 260px; left: 32%;}*/

		div.grid-5 { gap: 50px; }

		div.slider-4 {  --coverflow-slide-width: 64%;  --coverflow-side-scale: .3;  height: 720px; }
		div.slider-4 .swiper-slide.is-prev {  left: 15%;  bottom: 6%; }
		div.slider-4 .swiper-slide.is-next {  left: 88%;  bottom: 6%; }

		.js-accordion { margin-top: 70px;}
		acchead {font-size: 22px; line-height: 1.3; padding: 15px 20px 15px 0; }
		acchead span {width: 8px; }

		.testing-table { margin-bottom: 36px; }
		.test-row { grid-template-columns: 70px 1.1fr 1.2fr 1.2fr 1.2fr 1.2fr; gap: 34px; padding: 22px 30px; }
		.test-row strong { font-size: 32px; line-height: 1.2; }
		.test-row span { font-size: 16px; line-height: 1.4; }
		.test-row b { font-size: 20px; }

		div.grid-6 {gap: 40px;}
		div.grid-6 > div:last-child {width: 67%}
		div.grid-6 > div:first-child {width: 33%}

		div.faq-index { gap: 25px; margin-bottom: 30px;}
		div.faq-index a { font-size: 18px; }

		div.faq-section  { margin-bottom: 80px; }

		div.faq-search { max-width: 350px; margin: 30px auto 0 0;}
		div.faq-search input { padding-left: 60px; line-height: 60px; }
		div.faq-search img { left: 20px; width: 28px; }


		/*FORMS*/

		input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { padding-left: 20px}
		form button[type="submit"], form button[type="button"] { width: 42px; height: 42px; }
		form button img { width: 10px; ;}
}

@media only screen and (max-width: 1480px) {
	section:not(.full):not(.max):not(.masthead) { padding-left: 30px; padding-right: 30px;}
	section.masthead div.inner {padding-left: 30px; padding-right: 30px}
	section.full div.inner { padding-left: 30px; padding-right: 30px;}
}

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

		/*HEADER AND NAV*/

		body.fully-scrolled header { border-radius: 40px; padding: 15px 20px 15px 30px; max-width: calc(100vw - 40px)}
		body.fully-scrolled header.visible { top: 25px;}
		body.fully-scrolled header div.logo { width: 160px; }
		body.fully-scrolled header a.btn { line-height: 40px; font-size: 14px;}
		body.fully-scrolled header nav { gap: 15px;}
		body.fully-scrolled header span.nav-links { gap: 15px;}
		body.fully-scrolled header span.nav-links a { color: #fff; font-size: 14px; }

		div.grid-4 {flex-direction: column; margin: 60px auto; max-width: 660px; }
		div.grid-4 > div { width: 100%}
/*		div.frame-overlay { width: 30%}*/
}


@media only screen and (max-height: 880px) {
		div.slider-2 .slick-slide { height: 88vh}
		div.slider-2 .slick-slide  img { height: 100%; width: 100%; object-fit: contain}
}
@media only screen and (max-width: 1080px) {
		:root {
		  --default-font-size: 19px;
		  --default-input-font-size: 16px;
		  --dim-input-height: 40px;
		  --button-font-size: 16px;
		  --button-height: 40px;
		  --dim-default-space: 100px;

		}

		section.masthead-inner { margin-top: 70px;}

		header span.nav-globe { display: none;}

		footer { padding: 50px 30px 20px;}
		footer div.logo {width: 400px; max-width: 80%; margin: 0 auto 60px; }
		div.footer-areas { flex-direction: column; justify-content: center;}
		div.footer-areas > div { width: 100% !important; text-align: center;}
		div.footer-form { padding-bottom: 80px; max-width: 450px; width: 100%; margin: 40px auto 0}

		div.footer-contact { justify-content: center; gap: 40px; }
		footer strong { font-size: 18px;letter-spacing: 0; }
		div.footer-contact p, div.footer-contact a { font-size: 16px; }

		p.patents { font-size: 14px; padding-bottom: 20px; text-align: center;}
		img.footer-logo {width: 300px; margin: 0 auto}

		div.disclaimer p, div.disclaimer a {font-size: 14px; text-align: center;}

		h1 { font-size: 36px;  text-align: center;}
		h1 small { margin: 20px auto 0; font-size: 0.5em}
		h2 { font-size: 36px; text-align: center;}
		h2  small { display: block; margin: 0px auto 20px; font-size: 20px;}
		h3 { font-size: 24px; text-align: center;}

		p { text-align: center;}

		a.btn { padding: 0 20px; }

		div.grid-1 { justify-content: center; gap: 40px; }
		div.grid-1 > div:first-child { width: 300px;}
		div.grid-1 > div:last-child { width: calc(100% - 340px); }

		div.grid-2 { gap: 40px; }
		div.grid-2 > div:first-child { width: calc(100% - 340px); }
		div.grid-2 > div:last-child { width: 300px;}

		div.grid-3 {gap: 40px;}
		div.grid-3 > div:first-child {flex: initial; width: 300px;}
		div.grid-3 > div:last-child { width: calc(100% - 340px); }

/*		div.grid-4{ display: flex; justify-content: space-between; gap: 0; align-items: stretch; margin: 90px auto 0}*/
/*		div.grid-4 > div { width: 50%}*/

		div.grid-5 { flex-direction: column-reverse;}
		div.grid-5 > div { width: 100%; flex: 1;}

		div.grid-6 {flex-direction: column}
		div.grid-6 > div {width: 100% !important}
		div.grid-6 > div:first-child {display: flex; justify-content: space-between; gap: 0; flex-direction: column-reverse; gap: 30px;}
		div.faq-index { flex-direction: row; gap: 20px;}
		div.faq-index a { font-size: 16px;}

		div.spec-cards { gap: 20px; margin: 30px auto 30px 0}
		div.spec-cards div { padding-left: 24px; font-size: 18px; }
		div.spec-cards div:before { width: 16px; height: 16px; }
		div.colour-selection { gap: 20px; padding-bottom: 30px; border-bottom: 2px solid var(--col-border); margin-bottom: 30px}
		div.colour-selection a { width: 70px; border: 6px solid #fff;}
		div.colour-selection a.active { border-color: var(--col-primary); }

		div.table-1 > div, div.table-2 > div { font-size: 16px;  }
		div.table-1 > div > div, div.table-2 > div > div  { padding: 15px; }

		div.grid-5 h2 { text-align: center;}

		.js-accordion { margin-top: 30px}

		div.slider-4 { height: 36vw;}

		#faq .faq-index {			display: block;			position: relative;			max-width: 420px;			margin: 0 0 28px;			border: 2px solid var(--col-primary);			border-radius: 28px;		background: #fff;			overflow: hidden;		}
		#faq .faq-index:after {			content: "";			position: absolute;			right: 24px;			top: 25px;			width: 10px;			height: 10px;			border-right: 2px solid var(--col-primary);			border-bottom: 2px solid var(--col-primary);			transform: rotate(45deg);			pointer-events: none;		}
		#faq .faq-index a {			display: none;			padding: 16px 56px 14px 24px;			color: var(--col-primary);			font-size: 18px;			line-height: 24px;			border-top: 1px solid var(--col-border);		}
		#faq .faq-index-placeholder {			display: none;			width: 100%;			padding: 16px 56px 14px 24px;			border: 0;			background: transparent;			color: var(--col-primary);			font-family: acumin-pro-wide;			font-size: 18px;			font-style: italic;			font-weight: 700;			line-height: 24px;			text-align: left;			text-transform: uppercase;		}
		#faq .faq-index a.active, #faq .faq-index.is-open a {			display: block;		}
		#faq .faq-index.is-searching:not(.is-open) .faq-index-placeholder {			display: block;		}
		#faq .faq-index.is-searching.is-open .faq-index-placeholder {			display: none;		}
		#faq .faq-index a.active {			border-top: 0;		}
		#faq .faq-index.is-open:after {			top: 29px;			transform: rotate(225deg);		}

}

@media only screen and (max-width: 980px) {
	header span.nav-links, header nav { gap: 12px !important}
	header a.btn { background: transparent !important; color: #000 !important; margin: 0 !important; padding: 0 !important;     font-family: acumin-pro-wide; font-weight: 700; font-style: italic; font-size: 16px; line-height: 2.2; text-transform: uppercase; border: 0 !important}
	body.fully-scrolled header a.btn {color:#fff !important}
	body.fully-scrolled header div.logo { display: none}
	body.fully-scrolled header.visible { top: 10px; padding: 5px 15px; justify-content: center;}
}
@media only screen and (max-width: 760px) {

		h1 { font-size: 23px; line-height: 1.2; }
		h1 small { margin: 20px auto 0; font-size: 0.5em}
		h2 { font-size: 23px; line-height: 1.2;}
		h2  small { display: block; margin: 0px auto 20px; font-size: 16px;}
		h3 { font-size: 16px; }

		section:not(.full):not(.max):not(.masthead) { padding-left: 20px; padding-right: 20px;}
		section.full div.inner, section.masthead div.inner {padding-left: 20px; padding-right: 20px}

		div.masthead { margin-top: 50px}

		header { height: 60px; background: #fff; padding: 0; margin: 0;border-bottom: 0px solid var(--col-border); position: fixed; max-width: 100% !important; width: 100% !important}
		header div.burger { display: block; left: auto; right: 0; padding-top: 0px}
		div.burger ul { top: 28px}
		header div.logo { position: absolute; left: 0; top: 0; width: 275px !important; height: 60px; padding: 20px 0 0 20px;}
		header div.logo img { display: block; width: 100%;  margin: 0 auto 0 0;}
		header nav {top: 0; left: -200vw; width: 100vw; height: 70vh; background: var(--col-primary); justify-content: flex-end; flex-direction: column; align-items: center; opacity: 0; transition: opacity .2s linear; position: fixed; padding-bottom: 40px}
		header nav span.nav-links {justify-content: flex-end; flex-direction: column; align-items: center;  width: 100%;}
		header nav span.nav-links a { color: #fff !important; text-align: left !important; padding: 0 20px !important; display: block; width: 100%}

		header.active a.btn { background: var(--col-accent) !important; color: #fff !important; margin: 20px auto 0 20px !important; padding: 0 25px !important}
		header.active span.nav-globe { display: block; position: absolute; bottom: 40px; right: 20px}

		header.active div.burger { left: auto; right: 0; }
		header.active div.logo { z-index: 100; padding: 0px; background: url(/img/logo2.svg) no-repeat left top; background-size: contain; top: 20px; left: 20px; width: 275px; height: 42px;}
		header.active div.logo img { opacity: 0}
		header.active div.logo { }
		header.active div.burger ul li { background: #fff}
		header.active nav {left: 0; opacity: 1;} 

		header.attached.visible { background: #fff; height: 80px;}

		body.fully-scrolled header {border-radius: 0; background: #fff; top: 0; position: fixed; }
		body.fully-scrolled header div.logo { display: block; width: 100%; max-width: 100%; background: none;}
		body.fully-scrolled header div.logo img { opacity: 1}
		body.fully-scrolled header.visible { top: 0; padding: 0}

		footer div.logo { margin-bottom: 40px}
		div.footer-contact { flex-direction: column; align-items: center;; gap: 30px; padding-bottom: 50px}
		div.footer-form { margin-top: 0; padding-bottom: 0}
		footer strong { margin-bottom: 10px; font-size: 14px}
		.reverse-grid { flex-direction: column-reverse !important;}

		section.masthead, section.masthead-inner { margin-top: 50px;}

 
		div.intro { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--col-primary);    }

		div.grid-2, div.grid-3 { flex-direction: column}
		div.grid-1 { flex-direction: column-reverse}
		div.grid-1 > div, div.grid-2 > div, div.grid-3 > div { width: 100% !important;}

		div.table-1 , div.table-2, div.testing-table { width: 100%; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
		div.table-1::-webkit-scrollbar, div.table-2::-webkit-scrollbar, div.testing-table::-webkit-scrollbar { display: none; }
		div.table-1 > div, div.table-2 > div, div.testing-table > div { width: 760px;}
		div.table-1 > div > div:first-child, div.table-2 > div > div:first-child { position: sticky; left: 0; z-index: 2; /* box-shadow: 8px 0 12px rgba(255,255,255,.42); */}
		div.table-1 > div.th > div:first-child, div.table-2 > div.th > div:first-child { z-index: 3; }
		div.testing-table .test-row strong { position: sticky; left: 0; z-index: 2; align-self: stretch; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 8px 0 12px rgba(255,255,255,.42); }
		div.slider-3 div.table-1, div.slider-3 div.table-2 { -webkit-overflow-scrolling: touch; touch-action: pan-x; padding-bottom: 20px}
		.nv-mobile-scrollbar { display: none; width: 100%; height: 6px; margin: 12px 0 0; overflow: hidden; border-radius: 999px; background: rgba(43,54,133,.16); }
		.nv-mobile-scrollbar > div { height: 100%; width: 36px; border-radius: inherit; background: var(--col-primary); transition: transform .08s linear; cursor: grab; touch-action: none; }
		.nv-mobile-scrollbar.is-dragging > div { cursor: grabbing; }



		div.colour-specs h3 { text-align: center;}
		div.colour-specs a.btn { margin: 0 auto}
		div.colour-selection { justify-content: center;}

		div.slide-applications { justify-content: center; width: 100%}
		div.slider-1 * { text-align: center;}

		div.slide-wrapper {width: 100%; overflow: hidden; margin: 30px auto; position: relative;}
		div.slide-wrapper a.btn:hover {background-color: var(--col-primary); border-color: var(--col-primary)}
/*		div.slide-wrapper:after { content: ""; position: absolute; right: 0; top: 0; display: block; width: 62px; height: 52px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92) 62%); z-index: 2; }*/
/*		div.slide-wrapper:before { content: ""; position: absolute; right: 22px; top: 19px; display: block; width: 11px; height: 11px; border-right: 2px solid var(--col-primary); border-bottom: 2px solid var(--col-primary); transform: rotate(-45deg); pointer-events: none; z-index: 3; }*/
		div.slide-features {width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
		div.slide-features::-webkit-scrollbar { display: none; }
		div.slide-features > div { flex: 0 0 auto; }

		div.product-feature { margin-top: 0}
		div.product-feature strong {text-align: center; font-size: 12px; margin-top: -20px}

		div.slide-applications { bottom: 0}
		div.slider-1 { padding-bottom: 60px;}

/*		div.key-features .slick-slide { height: 56.25vw;}*/
/*		div.key-features .slick-slide img { display: block; width: 100%; height: 100%; object-fit: cover}*/
/*		div.key-feature { top: auto; right: auto; bottom: 0; transform: none;left: 0; width: 100%; max-width: 100%; border: 0; padding: 10px 5px; display: block; border-radius: 0; text-align: center;}*/
/*		div.key-feature > div { font-size: 14px !important; margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; font-weight: 700 !important; line-height: 1 !important; display: inline !important; line-height: 1.25 !important}*/

		.margin-top-150 { margin-top: 100px !important}
		div.buttons { flex-direction: column}

		div.faq-search { max-width: 100%; width: 100%}
		#faq .faq-index { max-width: 100%;}

/*		div.slide-stats { flex-direction: column; align-items: center;}*/

		span.mobile-shrink {font-size: .7em; display: block; margin-top: 10px}

		 ul.slick-dots { justify-content: center; padding-left: 0}
		 button.slick-arrow.slick-next { left: auto !important; right: 0px !important}
		 div.product-slider { padding-bottom: 30px}
		 button.slick-arrow, ul.slick-dots { bottom: -30px !important}

		 div.slide-features a.btn { font-size: 10px; padding: 0 10px; line-height: 25px; border-radius: 25px}
		 div.slide-applications a.btn { font-size: 14px; padding: 0 20px; line-height: 35px; border-radius: 35px}
		 div.slide-stats  a.btn { font-size: 12px; padding: 0 20px; line-height: 35px; border-radius: 35px}
		 div.slide-features { gap: 5px; justify-content: center;}

/*		div.key-features {background-position: center top; background-size: contain; width: 170vw; position: relative; left: -35vw;}*/
		div.key-feature { position: relative; transform: none; padding-top: 15px; background: #fff !important; mix-blend-mode: initial; top: 0; right: 0; width: 100%; max-width: 100vw; margin: 0 auto;  border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; background-blend-mode: initial; }
/*		div.key-feature > div { font-size: 14px !important; margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; font-weight: 700 !important; line-height: 1 !important; display: inline !important; line-height: 1.25 !important}*/
/*		div.key-feature { padding: 20px; border-radius: 20px; max-width: 40%; right: 10px;}*/
		div.key-feature div.top { font-size: 12px;line-height: 1.25;margin-bottom: -10px !important; color: var(--col-primary); display: block !important;}
		div.key-feature div.stat { font-size: 80px;margin-bottom: 10px !important; color: var(--col-primary); display: block !important;}
		div.key-feature div.bottom{ font-size: 18px; color: var(--col-primary); display: block !important;}

		p.table-note { font-size: 12px; margin-top: 30px}

		div.grid-5 { gap: 10px}
		div.grid-6 a img { margin: 0 auto}

		acchead {font-size: 18px; line-height: 1.3; padding: 15px 20px 15px 0; }
		acchead span {width: 8px; }
		div.ui-accordion-content, div.ui-accordion-content p { text-align: left;}

		div.benefit-card { padding: 30px 20px}
		.benefit-card strong { font-size: 18px;}
		.benefit-card span { font-size: 16px; line-height: 1.5;}
		.benefit-card .btn { text-align: center; line-height: 1.25; padding: 15px }

		div.slider-4 { height: 82vw;}
		div.slider-4 {  --coverflow-slide-width: 56%;  --coverflow-side-scale: .4;  }
/*		div.slider-4 .swiper-slide.is-prev {  z-index: 2;  left: 15%;  bottom: 6%; opacity: 1;  pointer-events: auto;  cursor: pointer;  transform: translateX(-50%) scale(var(--coverflow-side-scale));}*/
/*		div.slider-4 .swiper-slide.is-next {  z-index: 2;  left: 88%;  bottom: 6%; opacity: 1;  pointer-events: auto;  cursor: pointer;  transform: translateX(-50%) scale(var(--coverflow-side-scale));}*/
		
		div.grid-1 > div:first-child { height: 50vh}
		div.grid-1 > div:first-child img { height: 100%; width: 100%; object-fit: contain}

		div.slider-2 .slick-slide { height: 60vh}
		div.slider-2 .slick-slide  img { height: 100%; width: 100%; object-fit: contain}



}