/* TEMPLATE */

: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;
--slider-dot-color: #ffffff;
--expand-v-bg: #000000;
--footnote-bg: #ffffff;
--footnote-text: #707070;
}

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

/*------- GENERAL -------*/
.pdp > section { padding-top: 120px; }
.pdp > 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-desktop-show-inline { display: inline-block; }
.pdp-sup { font-size: 75%; vertical-align: super; }

/* Lists */
.pdp ol[class], .pdp ul[class] { padding-left: 20px; }
.pdp ol[class] li, .pdp ul[class] li { list-style: auto; font-size: 1.8rem; }
.pdp-list-dot li { list-style: disc !important; }

/* .pdp .pdp-list-dot ::marker {
    content: "• ";
    color: var(--list-marker-color);
    font-variant-numeric: normal;
} */

/* .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,
.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-light);
	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-light);
	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);
  }


/* 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 -------*/
.pdp .tab-menu > a {
    text-decoration: none;
}

.pdp .tab-menu > a:hover {
    cursor: pointer;
}

.pdp .tab-content ul li {
    font-size: 1.6rem;
}

/*------- 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%);
}
    .pdp .tab-menu > a:last-child::after {
		width: 0;
	}

/*------- SLIDER -------*/
.w-slider-dot {
color: var(--slider-dot-color) !important;
background: none !important;
border: 3px solid var(--slider-dot-color) !important;
}
 
.w-slider-dot.w-active {
background: var(--slider-dot-color) !important;
border: 3px solid var(--slider-dot-color) !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;
	}
	/* .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;
	}
    */


	/*------- SLIDER SIDES -------*/
/* *{
    -webkit-font-smoothing: antialiased;
  }      */
  .slider-sides .swiper-pagination {
    bottom: -38px !important;
  }
  .slider-sides .swiper-slide > .slide-bg {
    filter: blur(5px);
    opacity: 0.3 !important;
  }
  .slider-sides .swiper-slide-active .slide-bg {
    filter: blur(0);
    opacity: 1 !important;
  }
  .slider-sides .swiper-slide-active .slide-content,
  .slider-sides .swiper-slide-active .slide-content_title-wrapper,
  .slider-sides .swiper-slide-active .slide-content_desc {
  	opacity: 1;
  }
  .slider-sides .swiper-slide-next, .slider-sides .swiper-slide-prev {
    filter: blur(0);
  }
  .slider-sides .swiper-slide-next > .slide-bg,
  .slider-sides .swiper-slide-prev > .slide-bg {
    filter: blur(0) !important;
    opacity: 0.5 !important;
    transition: 500ms cubic-bezier(.165, .84, .44, 1);
  }
  .slider-sides .swiper-pagination-bullet {
    border-radius: 4px;
    width: 8px;
    height: 8px;
    transition: width 500ms cubic-bezier(.165, .84, .44, 1);
    background: var(--slider-sides--ss-nav-bullet) !important;
    opacity: 0.5 !important;
  }
  .slider-sides .swiper-pagination-bullet-active {
    width: 32px;
    transition: width 500ms cubic-bezier(.165, .84, .44, 1);
    background: var(--slider-sides--ss-arrow-bg-hover) !important;
    opacity: 1 !important;
  }
/* , .swiper-slide-active:hover .slide-content */
  .slider-sides .swiper-slide-active:focus {
    min-height: 100%;
    transition: min-height 500ms cubic-bezier(.165, .84, .44, 1);
  }
/* , .swiper-slide-active:hover .slide-gradient */
  .slider-sides .swiper-slide-active:focus {
    background-color: var(--gold);
    background-image: none;
  }
/* , .swiper-slide-active:hover .slide-content_text-wrapper */
  .slider-sides .swiper-slide-active:focus {
    opacity: 1;
  }






/* -------------------------------------------------------------------------------------------------------------- */
/*------- 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-desktop-show-inline { 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(270deg, var(--tab--menu-bg) 0%, var(--tab--menu-bg-fade) 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;
	} */
}