/* TEMPLATE */
:root {
--nav-height: 114px;
--hero-video-fade-color: #010814;
--hero-vid-link-color: #ffffff;
--modal-link-color: #ad5857; /* CHANGE TO WF */
--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 -------*/
.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; }

/*------- 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,
.expand-v-toggle{
	background: transparent;
	margin: 6px;
	width: var(--icon--icon-size);
	height: var(--icon--icon-size);
	border: var(--icon--icon-svg-thickness) solid var(--text-dark);
	border-radius: 50%;
}

.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-dark);
	stroke-width: var(--icon--icon-svg-thickness);
	stroke-linecap: round;
	stroke-linejoin: round;
  }
  .expand-v-toggle svg {
	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);
  }


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

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

/*------- POP UP MODAL -------*/
.modal-src-link {
  display: flex;
  align-items: center;
/*  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-vid-link-color); }
.hero-video-link-contain .modal-src-link-text{ color: var(--hero-vid-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;
}

.modal-src-link-text.intertek {
    color: unset !important;
    font-size: 18px;
    text-decoration: underline;
    align-self: flex-start;
}

.modal-src-link-text.intertek:hover {
    text-decoration: none !important;
    cursor: pointer;
}

.pdp-modal-close-cont {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    text-align: right;
}

.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,
.interactive-hotspot-point-2.w-active{
	transform: scale(2);
}

.interactive-hotspot-point.w-active .point-centre,
.interactive-hotspot-point-2.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 .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: 1560px;
		padding: 20px;
		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 ol[class] li, 
.pdp ul[class] li {
	font-size: 1.7rem;
}
	
/*------- 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(208 138 119) 0%, rgb(109 98 0 / 0%) 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%;
}


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