:root {
--nav-height: 114px;
--hero-video-fade-color: #010814;
/* --modal-link-color: #ffe400; CHANGE TO WF */
--hero-modal-link-color: #ffffff; /* when hero & normal modal links have diff colors */
--modal-vid-ctrls: #f1f1f1;
--hotspot--active-outline: #ff0;
--hotspot--active-centre: #f00;
--expand-v-bg: #000000;
--footnote-bg: #ffffff;
--footnote-text: #707070;
}

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

/*------- GENERAL -------*/
section { padding-top: 120px; }
section:first-of-type { padding-top: 0; }
.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 button {
	background: transparent;
	padding: 6px;
}

.pdp button:focus { outline: 0; } */



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

.hero-video-link-contain {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
  }

/*------- VIDEO & CTRLS DISPLAY -------*/
.pdp-video-cont{
    position: relative;
    max-width: 1200px;
	margin: 0 auto;
    text-align: right;
}

.pdp-vid-ctrls { padding: 6px 12px 0 0; }


/* .pdp-vid-ctrls button,
button.js-modal-close{
	background: transparent;
	padding: 6px;
}

.pdp-vid-ctrls button:focus,
.expand-v-toggle button:focus,
button.js-modal-close:focus{
	outline: 0;	
} */





/* NEW - to add all icon buttons (modal close) */
.pdp-vid-ctrls button{
	background: transparent;
	margin: 6px;
	width: var(--icon--icon-size);
	height: var(--icon--icon-size);
	border: var(--icon--icon-svg-thickness) solid var(--text-light);
	border-radius: 50%;
}

/* .js-expand-v-toggle {
    margin: 0 auto 60px;
    width: var(--icon--icon-size);
    height: var(--icon--icon-size);
    border: var(--icon--icon-border-thickness) solid var(--expand-v-toggle-icon);
    border-radius: 50%;
    display: flex;
    transition: 0.5s all ease;
}

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

.js-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--icon-svg-thickness);
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  .js-expand-v-toggle svg {
    /* stroke: var(--accent-dark); */
	width: 100%;
	height: 100%;
	fill: none;
	stroke-width: var(--icon--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);
  }




/* NEW - */
.pdp-vid-ctrls svg{
	width: 80%;
    height: 100%;
    fill: none;
    stroke: var(--text-light);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*------- POP UP MODAL -------*/
.modal-src-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  /* margin-top: 12px; */
}

.modal-src-link-icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
	fill: none;
    stroke: var(--modal-link-color);
    stroke-width: var(--icon--icon-svg-thickness);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-video-link-contain { margin-top: 25px;}
.hero-video-link-contain .modal-src-link-icon{ stroke: var(--hero-modal-link-color); }
.hero-video-link-contain .modal-src-link-text{ color: var(--hero-modal-link-color) !important; }

/* .modal-src-link-icon {
    margin-right: 6px;
    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-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 .point-centre{
	outline: 3px solid var(--hotspot--active-outline);
	background-color: var(--hotspot--active-centre);
}

/*------- TABS DIVIDER -------*/
  .pdp .tab-menu > a:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	width: 1px;
	height: 100%;
	background-color: rgb(255 255 255 / 70%);
	/* height: 28px;
	background-color: var(--tab--menu-text); */
  }
  .pdp .tab-menu > a:last-child:after { width: 0; }

/*------- SLIDER Default -------*/
/* .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;
} */

/*------- SLIDER Guasha -------*/
.w-slider-dot {
color: #fff !important;
background: none !important;
border: 2px solid #fff !important;
}
    
.w-slider-dot.w-active {
background: #fff !important;
border: 2px solid #fff !important;
color: #d68d8f !important;
}

.section-clearer-brighter .w-slider-dot {
    color: #828282 !important;
    background: none !important;
    border: 2px solid #828282 !important;
}

.section-clearer-brighter .w-slider-dot.w-active {
    background: #828282 !important;
    border: 2px solid #828282 !important;
    color: #828282!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;
	} */
    
    .footnotes-list {
        padding-left: 16px !important;
    }

	.footnotes-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 ol[class] li, 
.pdp ul[class] li {
	font-size: 1.7rem;
}
/*------- VIDEO -------*/
.hero-video-link-contain {
    top: 5px;
}	
/*------- 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(90deg, rgb(255 255 255 / 0%) 0%, var(--tab--menu-bg) 100%);
}

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

/*------- FOOTNOTES -------*/
.section-footnotes {
    padding-left: 10%;
}


}

/* -------------------------------------------------------------------------------------------------------------- */
/*------- MOBILE PORTRAIT -------*/
/* -------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
	.hero-video:after{
		/* box-shadow: none; */
	}
}


@media screen and (min-width: 768px) {
    .section-step-up .w-slider-dot {
        font-size: 0 !important;
        }
}