:root {
--nav-height: 114px;
--hero-video-fade-color: #010814;
--modal-link-color: #60dafc;
--modal-vid-ctrls: #f1f1f1;
--icon-svg-thickness: 2px;
--expand-v-bg: #000000;
--footnote-bg: #ffffff;
--footnote-text: #707070;
}


@media screen and (max-width: 767px) {
	:root {
		 --nav-height: 107px;
	}
}

/*------- GENERAL -------*/
  .pdp-center {
	text-align: center !important;
  }
  .pdp-left {
	text-align: left !important;
  }
  .pdp-right {
	text-align: right !important;
  }
  .pdp-flex-center {
	justify-content: center;
	!important;
  }
  .pdp-flex-left {
	justify-content: left;
	!important;
  }
  .pdp-flex-right {
	justify-content: right;
	!important;
  }
  .pdp-show {
	display: block !important;
  }
  .pdp-visuallyshow {
	opacity: 1 !important;
  }
  .pdp-mobile-show {
	display: none;
  }
  .pdp-mobile-show-inline {
	display: none;
  }
  .pdp-desktop-show {
	display: block;
  }
	.pdp-sup { font-size: 75%; vertical-align: super; }

	.pdp ol[class] li, 
	.pdp ul[class] li {
		list-style: auto;
		font-size: 1.8rem;
	}

  .pdp-cols-icon {
	filter:drop-shadow(0px 1px 10px #60dafc)
  }

  .pdp-glow-accent {
	filter: drop-shadow(0px 1px 5px #60dafc);
  }

  .innovations-glow:before {
	content: '';
	display: block;
	height: 150px;
	width: 150px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #0096fc99;
	border-radius: 50%;
	filter: blur(12px);
  }
  /*------- HERO VIDEO -------*/
  .hero-video:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	box-shadow: inset -1px 1px 30px 40px var(--hero-video-fade-color);
	width: 100%;
	height: 100%;
  }
  /*------- VIDEO & CTRLS DISPLAY -------*/
  .pdp-video-cont {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	text-align: right;
  }
  .ctrl-nav {
	padding: 6px 12px 0 0;
  }
  .pdp-vid-ctrls {
	padding: 6px 12px 0 0;
  }
  .ctrl-nav button,
  .pdp-vid-ctrls button,
  button.js-modal-close {
	background: transparent;
	padding: 6px;
  }
  /* NEW - to add all icon buttons (modal close) */
  .pdp-vid-ctrls button{
	background: transparent;
	margin: 6px;
	width: var(--icon-size);
	height: var(--icon-size);
	border: var(--icon-svg-thickness) solid var(--text-light);
	border-radius: 50%;
  }

/*
  .expand-v-toggle button{
	background: transparent;
	color: var(--accent);
  }
*/

.expand-v-toggle a{
	color: var(--expand-v-toggle-icon);
}

  .expand-v-toggle.ve-active {
		transform: rotateZ(45deg);
	}


  /* NEW - */
  .pdp-vid-ctrls svg {
	width: 80%;
	height: 100%;
	fill: none;
	stroke: var(--text-light);
	stroke-width: var(--icon-svg-thickness);
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  .expand-v-toggle svg {
/*        stroke: var(--accent);*/
	width: 100%;
	height: 100%;
	fill: none;
	stroke-width: var(--icon-svg-thickness);
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  .modal-content .pdp-vid-ctrls button {
	border-color: var(--modal-vid-ctrls);
  }
  .modal-content .pdp-vid-ctrls svg {
	stroke: var(--modal-vid-ctrls);
  }
  .ctrl-nav button:focus,
  .pdp-vid-ctrls button:focus,
  .expand-v-toggle button:focus,
  button.js-modal-close:focus {
	outline: 0;
  }
  .ctrl-nav svg,
  .js-modal-close svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: #fcfbfa;
	stroke-width: 0.75;
  }
  .ctrl-nav svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: var(--text-light);
	stroke-width: 0.75;
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  /*------- POP UP MODAL -------*/
  .modal-src-link {
	display: flex;
/*        justify-content: center;*/
	align-items: center;
	margin-top: 12px;
  }
  .modal-src-link-icon {
	margin-right: 6px;
	/*    border: 1px solid #2a2a2a;*/
	border-radius: 50%;
	width: 36px;
	height: 36px;
  }
  .modal-src-link-icon svg {
	width: 80%;
	height: 100%;
	fill: none;
	stroke: var(--modal-link-color);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  .modal-src-link-text {
	color: var(--modal-link-color) !important;
	align-self: center;
	margin-bottom: 0;
	text-decoration: none;
  }
  .modal-src-link-text:hover {
	text-decoration: underline !important;
	cursor: pointer;
  }
  .js-modal-close svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: #fcfbfa;
	stroke-width: 0.75;
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  .js-modal-src {
	/*
display: flex;
text-align: left;
gap: 15px;
justify-content: center;
width: 90%;
margin: 0 auto;
*/
  }
  .js-modal-cont {
	display: none;
	position: fixed;
	top: var(--nav-height);
	left: 0;
	width: 100%;
	height: calc(100% - var(--nav-height));
	overflow: auto;
	background-color: #040f1c;
	background-color: rgba(4, 15, 28, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: 1s all ease;
	z-index: 5;
  }
  /*------- EXPAND HORIZONTAL -------*/
  .measure-expand,
  .monitor-expand,
  .manage-expand,
  .stress-reduction-expand {
	height: calc(100% - var(--nav-height));
	top: var(--nav-height);
	z-index: 20;
  }
  /*------- HOTSPOT -------*/
  .interactive-hotspot-contain {
	--coord-x: 0;
	--coord-y: 0;
	transform: translate(var(--coord-x), var(--coord-y));
	transition: 1s all ease;
  }
  .interactive-hotspot-point.w-active {
	transform: scale(1.25);
  }
  .interactive-hotspot-point.w-active .interactive-point-centre {
	outline: 3px solid #00fffc;
	background-color: #28807f;
  }
  /*
.interactive-hotspot::after {
content: '';
display: block;
position: absolute;
bottom: -1px;
right: 0;
width: 100%;
height: 15%;
background: rgb(4,15,28);
background: linear-gradient(0deg, rgb(4,15,27,0.95) 10%, rgba(4,15,28,0) 100%)
}
*/
  /*------- TABS DIVIDER -------*/
 .pdp .a-tab-menu-w25:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	width: 1px;
	height: 100%;
	background-color: #e3ebf1;
  }

	.pdp .a-tab-menu-w25:last-child:after {
		width: 0;
	}

  /*------- SLIDER -------*/
  .w-slider-dot {
	color: #D3D3D3 !important;
	background: none !important;
	border: 3px solid #D3D3D3 !important;
  }
  .w-slider-dot.w-active {
	background: #D3D3D3 !important;
	border: 3px solid #D3D3D3 !important;
  }
  /*------- EXPAND H -------*/
  .expand-h-content>div:first-child {
	margin-left: 6.25%;
  }
	/*------- EXPAND V -------*/
	.expand-v-contain{
		max-height: 0;
		background-color: var(--expand-v-bg);
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}

	/*------- FOOTNOTES -------*/
	.section-footnotes {
		background-color: #ffffff;
		background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.footnote-content {
		max-width: 980px;
		width: 90%;
		margin: 0 auto;
	}
	.list-item {
		color: var(--footnote-colour);
		padding-bottom: 10px;
		font-size: 1.4rem !important;
		font-weight: 300;
	}


      /*------- MOBILE LANDSCAPE -------*/
      @media screen and (max-width: 767px) {
        .pdp-mobile-show {
          display: block;
        }
        .pdp-mobile-show-inline {
          display: inline-block;
        }
        .pdp-desktop-show {
          display: none;
        }
		  
		  .pdp-flex-left {
			justify-content: center; !important;
		  }
		  
		.pdp ol[class] li, 
		.pdp ul[class] li {
			font-size: 1.7rem;
		}
		  
        .innovations-glow:before {
          width: 110px;
          height: 110px;
        }
        /*------- USP -------*/
        .usp-tiles-row:first-child {
          margin-top: 0px;
        }
        /*------- TABS MENU FADE OUT -------*/
        .tabs::after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 10%;
          height: 68px;
          background: linear-gradient(270deg, rgb(165 209 219) 0%, rgb(109 98 0 / 0%) 100%)
        }
        /*
.pdp-vid-ctrls svg{
    width: 36px;
    height: 36px;
}
*/
        .modal-src-link-icon {
          width: 32px;
          height: 32px;
        }
        .pdp .modal-src-link-text {
          font-size: 16px;
        }
        /*------- EXPAND -------*/
        .expand-h-content>div:first-child {
          margin-left: 7%;
        }
      }


/*------- MOBILE PORTRAIT -------*/
@media screen and (max-width: 479px) {
	.hero-video:after{
		box-shadow: none;
/*		box-shadow: inset -1px 1px 20px 10px var(--hero-video-fade-color);*/
	}
	
	.tile-img img {
/*        max-width: none;*/
    }
}