:root {
    --main-bg-color: #ffffff;
    --impact-dark-blue: #002c77;
    --impact-darker-blue: #001f52; /* used for text and headings */
    --impact-mid-blue: #2c6ef2; /* used for links in body text and also hover (with underline) */
    --impact-light-blue: #0f9cd8;
    --impact-grey-1: #949494;
    --impact-grey-2: #dadada;
    --header-height: 100px;
    --header-height-scrolled: 80px;
    --header-height-tablet: 90px;
    --header-height-mobile: 60px;
    --off-white: #e3edec;
    --white: #ffffff;
   
    --margin-desktop: 64px;
    --margin-tablet: 40px;
    --margin-mobile: 20px;

	--grayscale-percentage: 100%;
	--contrast-amount: 1.25;

}

@font-face {
    font-family: "MMCdisplay_Cd_Rg";
	src: url("../fonts/MMCDisplayCD_Rg.ttf") format("truetype");
	src: url("../fonts/MMCDisplayCd_W_Rg.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: "MMCdisplay_Cd_Bd";
	src: url("../fonts/MMCDisplayCd_Bd.ttf") format("truetype");
	src: url("../fonts/MMCDisplayCd_W_Bd.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: "MMCdisplay_Rg";
	src: url("../fonts/MMCDisplay_Rg.ttf") format("truetype");
	src: url("../fonts/MMCDisplay_W_Rg.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: "MMCdisplay_Bd";
	src: url("../fonts/MMCDisplay_Bd.ttf") format("truetype");
	src: url("../fonts/MMCDisplay_W_Bd.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: "NotoSans-Regular";
	src: url("../fonts/NotoSans-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: "NotoSans-Bold";
	src: url("../fonts/NotoSans-Bold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

strong, b {
	font-family: "NotoSans-Bold";
	font-weight: normal;
	font-style: normal;
}

em, italic {
	font-family: "NotoSans-Italic";
	font-weight: normal;
	font-style: normal;
}

a:hover {
  /*text-decoration: none;*/
  text-underline-offset: 0.15em;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable && both-edges?;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--impact-dark-blue);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--impact-light-blue);
}
	
h1, h2, h3, h4, h5, h6 {
    font-family: "MMCdisplay_Bd", sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1.15;
}

body {
	margin: 0;
	padding: 0;
	/*padding-top: 100px;*/
	font-family: "NotoSans-Regular";
	font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
	overflow-y: auto;
}
	body.overlay-active {
		overflow-y: hidden;
		padding-right: 10px; /* Avoid width reflow */
	}


body.light-mode {
	background: var(--white);
	color: var(--impact-darker-blue) !important;
	transition: background-color 0.3s ease-in-out;
}
	body.light-mode .siteHeader {
		background: var(--white);
		border-bottom: 1px solid #27232D;
		transition: background-color 0.3s ease-in-out;
	}
	
body.dark-mode {
	background: #27232D;
	color: var(--white) !important;
	transition: background-color 0.3s ease-in-out;
}
	body.dark-mode .siteHeader {
		background: #27232D;
		border-bottom: 1px solid var(--white);
		transition: background-color 0.3s ease-in-out;
	}

	
header {
	height: 120px;
	position: fixed;
	top: 0;
	transition: top 0.2s ease-in-out;
	width: 100%;
	z-index: 10;
}
	.siteHeader {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #fff;
		transition: all 0.3s ease-in-out;
	}

		.siteHeader .container,
		#overlay-nav .container {
			margin: 0 auto;
			padding: 15px 64px;
			display: flex;
			flex-flow: row nowrap;
			width: 100%;
			max-width: 1400px;
			height: 120px;
			justify-content: space-between;
			
			align-items: flex-end;
		}

		body.overlay-active .siteHeader .container,
		body.overlay-active #overlay-nav .container {
			max-width: 1410px;
		}
		body.overlay-active #overlay-nav .container {
			padding-top: 15px;
			justify-content: flex-end;
			
		}
		
			.logos {
				margin: 0 0 8px 0;
				padding: 5px 0 0 0;
				display: flex;
				flex-flow: row nowrap;
			}
				.logos img {
					margin: 0;					
					padding: 0;
					height: 18px;
					display: inline-flex;
				}
				.logos img.mercer-logo {
					margin-right: 50px;
				}

			.navigation {
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
			}
		body.overlay-active .navigation,
		body.overlay-active .navigationClose {
			padding-right: 10px;
		}
			
			.navigation li a { 
				margin: 0 8px;
				padding: 0;
				font-family: "NotoSans-Regular";
				font-size: 0.95rem;
				text-decoration: none;
				letter-spacing: 0.01rem; 
				color: inherit; /* javascript switches color - darkMode */
			}
			
			.navigation li a.oneview,
			.navigation li a.oneview:hover {
				margin-left: 18px;
				margin-right: 0;
				margin-bottom: -10px;
				background-color: #02b0d4;
				color: #fff !important;
				width: 90px;
				height: 90px;
				line-height: 90px;
				display: flex;
				justify-content: center;
				/*align-items: center;*/
			}
			
				.navigation li:hover a,
				.navigation li.active a,
				.navigation li a.active,
				.navigation #secondaryNav li a.active {
					color: #009DE0;
				}
			
			.navigation ul, .navigation ul li { list-style-type: none; }
			
			.navigation ul {
				margin: -20px 0 10px 0;
				padding: 0;
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-end;
				align-items: flex-end;
			}
			nav {
				display: flex;
				flex-flow: column wrap;
				justify-content: flex-end;
				align-items: flex-end;
			}

			nav.mobile-nav {
				margin: 0 0 30px 0;
				display: none;
				position: relative;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #f4f4f4;
				z-index: 300;
			}

			
			nav.mobile-nav ul,
			nav.mobile-nav ul li ul { 
				list-style: none;
				display: flex;
				flex-flow: column nowrap;
				width: 100%;
				margin: 0;
				padding: 0 30px;
			}
				nav.mobile-nav ul li ul { padding-top: 15px; }
			
				nav.mobile-nav ul li,
				nav.mobile-nav ul li ul li {
					border-bottom: 1px solid rgba(97, 100, 101, 0.37);
					padding: 15px 0;
					text-align: center;
					position: relative;
					font-family: "NotoSans-Regular";
					font-size: 1rem;
					color: #000000;
					cursor: pointer;
				}
					nav.mobile-nav ul li a:hover,
					nav.mobile-nav ul li.expanded span.nav-heading:hover,
					nav.mobile-nav ul li.active a {
						color: #009DE0;
					}
				nav.mobile-nav ul li.last { border-bottom: none; }
					nav.mobile-nav ul li ul li { padding: 0 0 15px 0; }
					
				nav.mobile-nav ul li.open {
					padding-bottom: 0;
				}
					nav.mobile-nav ul li a {
						display: block;
						font-size: inherit;
						text-decoration: none;
						color: inherit;
						font-family: "NotoSans-Regular";
					}
nav.mobile-nav ul li ul li {
	border-bottom: none;
}
nav.mobile-nav ul li ul li:before {
	content: "";
}
nav.mobile-nav ul > li.expanded.open:after {
    background-image: url("../img/nav-close.svg");
}
nav.mobile-nav ul > li.expanded:after {
    content: "";
    float: right;
    background-image: url(../img/nav-open.svg);
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 14px;
    bottom: 0;
    margin: 0 15px 0 15px;
    background-repeat: no-repeat;
    background-position: center center;
}
nav.mobile-nav ul li ul {
    display: none;
}
nav.mobile-nav ul li.open ul {
    display: block;
}


				.navigation ul#mainNav {
					order: 2;
					z-index: 2;
				}
				.navigation ul#secondaryNav {
					order: 1;
					margin-bottom: -15px;
					margin-right: 108px;
					align-items: center;
					z-index: 3;
				}
				
			.oneview-link {
				margin: 10px 0 0 20px;
				padding: 20px 12px;
				background-color: #02b0d4;
				color: #fff;
				text-decoration: none !important;
				height: 90px;
				font-size: 0.95rem;
				line-height: 50px;
			}




.nav-drop-down {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    padding-top: 109px;
    background-color: rgba(256, 256, 256, 1);
    transition: padding-top 300ms ease-out;
    transition-delay: 300ms;
    display: none;
    
    border-bottom: 1px solid var(--impact-dark-grey);
}   
.nav-drop-down:after {  
	position: absolute;
	bottom: -60px;
	content: "";
	height: 60px;
	width: 100%;   
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.15) 100%);

}

.nav-drop-down-content {
    width: 100%;
	max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 64px;
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
}
	.nav-drop-down-content div:nth-child(1) {
		margin: 2rem 2rem 2rem 4rem;
		padding: 0;
		width: calc((50%) - 4rem);
		border-right: 0.2rem solid var(--impact-dark-blue);
	}
	.nav-drop-down-content div:nth-child(2) {
		margin: 2rem 0 2rem 2rem;
    	padding: 0;
    	width: calc((50%) - 4rem);
	}
	
	.nav-drop-down-content h2 {
		margin: 0 0 1rem 0;
		padding: 0;
		font-family: "MMCdisplay_Rg";
    	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    	line-height: 1.2;
    	color: var(--impact-dark-blue);
    }
	.nav-drop-down-content h3 {
		margin: 0 0 0.25rem 0;
		padding: 0;
		font-family: "MMCdisplay_Rg";
    	font-size: clamp(1.25rem, 2vw, 2rem);
    	line-height: 1.2;
    	color: var(--impact-dark-blue);
    }
    .nav-drop-down-content h4 a {
    	font-family: "MMCdisplay_Rg";
    	font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    	line-height: 1.4;
    	color: var(--impact-light-blue);
    	text-decoration: none;
    }
    	.nav-drop-down-content h4 a:hover {
    		text-decoration: underline;
    	}
    .nav-drop-down-content a {
    	color: var(--impact-light-blue);
    }
    
    .nav-drop-down-content p {
    	margin-bottom: 1rem;
    }
    
    .nav-drop-down-content img {
    	width: 100%;
    	max-width: none;
    }
    
	
@media screen and (max-width: 1000px) {

	.nav-drop-down,
	.nav-drop-down-content {
		display: none !important;
	}
	
}

	
	
/*nav.desktop-nav li.active a,*/
nav.desktop-nav li a.current,
nav.desktop-nav li a:hover,
header #mainNav li a.active {
	padding-bottom: 20px;
    border-bottom: 7px solid #02b0d4;
}
	nav.desktop-nav #secondaryNav li a.current,
	nav.desktop-nav #secondaryNav li a:hover {
		padding-bottom: 0;
		border-bottom: none;
	}


			@media screen and (max-width: 1000px) {
				
				header {
					height: 80px;
					position: relative;
				}
				
				.siteHeader .container,
				body.overlay-active #overlay-nav .container {
					padding: 15px 30px;
					max-width: 1000px;
					height: 80px;
				}

					.navigationClose ul li:not(#nav) {
						display: flex;
						top: 10px !important;
					}
					.navigation ul li:not(#nav) {
						display: none;
					}
					.oneview-link {
						display: none;
					}
			
			}
			
			@media screen and (max-width: 1200px) {
			
			}
	
			.hamburger-icon {
				display: block;
				background-image: url("../img/menu-blue.svg");
				background-size: 100%;
				background-position: 0 0;
				background-repeat: no-repeat;
				width: 50px;
				height: 25px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.hamburger-icon.open {
				display: block;
				background-image: url("../img/menu-blue-close.svg");
				background-size: 100%;
				background-position: 0 0;
				background-repeat: no-repeat;
				width: 50px;
				height: 36px;
			}
			
			
			.menu, .menu.active {
				margin: 0 0 0 20px;
				padding: 0;
				width: 50px;
				height: 36px;
				z-index: 100001 !important;
				position: relative;
				top: 6px;
				right: 0px;
				display: inline-block;
				overflow: hidden;
				cursor: pointer;
			}
			@media screen and (max-width: 1000px) {
				.menu, .menu.active {
					top: 5px;
					display: flex !important;
					justify-co2tent: center;
					align-items: center;
				}
			}

			/* Navigation - overlay version */

			#overlay-nav {
			  margin: 0;
			  padding: 0;
			  width: 100%;
			  height: 100%;
			  position: fixed;
			  top: 0;
			  left: 0%;
			  z-index: 2 !important;
			  background: rgba(255, 255, 255, 1.0);
			  opacity: 0;
			  visibility: hidden;
			  -webkit-transition: all 0.2s ease-in;
			  transition: all 0.2s ease-in-out;
			}

			/* Open navigiation */

			#overlay-nav.active {
			  margin: 0;
			  padding: 0;
			  width: 100%;
			  height: 100%;
			  position: fixed;
			  opacity: 100;
			  visibility: visible;
			  z-index: 100 !important;
			  -webkit-transition: all 0.4s ease;
			  transition: all 0.4s ease-in-out;
			}

			#nav-content {
			  position: relative;
			  top: calc((50%) - 100px);
			  -webkit-transform: translateY(-50%);
			  transform: translateY(-50%);
			}

			#nav-content ul {
			  margin: 0 auto;
			  padding: 0;
			  list-style: none;
			  text-align: center;
			}
			
			body.overlay-active #nav-content ul {
				 padding-right: 10px;
			}

			#nav-content ul li a {
			  width: 100%;
			  padding: 0.4em 0;
			  display: block;
			  font-family: 'raleway', sans-serif;
			  font-weight: 100;
			  font-size: 1.25em;
			  letter-spacing: 0.6px;
			  text-decoration: none;
			  color: rgba(39, 35, 45, 1.0);
			}

			#nav-content ul li a:hover {
			  color: var(--impact-mid-blue);
			}

			#nav-content ul li.active a {
			  color: var(--impact-mid-blue);
			}

			#nav-content ul.secondary-links {
				margin-top: 30px;
				padding: 0;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				gap: 30px;
			}
				#nav-content ul.secondary-links li a {
					font-size: 1.15em;
				}
			
		.nav-up {
			top: -120px;
		}






section {
	margin: 0;
	padding: 3rem 0 0 0;
	width: 100%;
	display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: flex-start;
	/*min-height: 50vh;*/
}
section#headerBanner {
	padding-top: 0;
}

	section .container {
		margin: 0 auto;
		padding: 0 64px;
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
		width: 100%; 
		max-width: 1400px !important;
		height: 100%;
	}

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

	section {
		padding: 1rem 0;
	}
	section .container {
		padding: 0 30px;
		max-width: 1000px !important;
	}

}


/* hero - case studies or people or articles */

section#hero h2 {
    font-size: 5.1875rem;
    font-weight: bold;
    margin: 40px 0;
}
section#hero h4 {
	font-family: "NotoSans-Regular", sans-serif;
	font-size: 2rem;
	font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
    max-width: 1000px;
}

/* about - our people */

section#about h2 {
    font-size: 5.1875rem;
    font-weight: bold;
    margin: 40px 0;
}
section#about h4 {
	font-family: "NotoSans-Regular", sans-serif;
	font-size: 2rem;
	font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
    max-width: 1000px;
}

/* work - case studies or people or articles */
section#work h2 {
    font-size:5.1875rem;
    font-weight: bold;
    margin: 40px 0;
}
section#work h4 {
	font-family: "NotoSans-Regular", sans-serif;
	font-size: 2rem;
	font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
    max-width: 1000px;
}

/*contact*/
section#contact {
	border-top: 1px solid var(--impact-darker-blue);
}
body.dark-mode section#contact {
	border-top: 1px solid var(--white);
}

section#contact h2 {
    font-size:5.1875rem;
    font-weight: bold;
    margin: 40px 0;
}
section#contact h4 {
	font-family: "NotoSans-Regular", sans-serif;
	font-size: 2rem;
	font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
    max-width: 1000px;
}




section#filter .container {
	display: flex;
    flex-flow: column wrap;
    justify-content: center;    
    
    /*min-height: 100vh;*/
    padding-top: 100px;
}

section#filter h2 {
    font-size: 5.1875rem;
    font-weight: bold;
    margin: 40px 0;
}
section#filter h3 {
    font-size: 4.2rem;
    font-weight: bold;
    margin: 40px 0 0 0;
}
section#filter h4 {
	font-family: "NotoSans-Regular", sans-serif;
	font-size: 2rem;
	font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
    max-width: 1000px;
}
section#filter h5 {
	font-family: "NotoSans-Regular", sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0;
    max-width: 1000px;
}

h1 {

}

h2 {
	font-size: 5.1875rem;
	line-height: 1;
    max-width: 60rem;
}
h2.intro,
h2 span.intro {
    margin: 2rem 0;
    padding: 0;
    font-family: "MMCdisplay_Rg";
    font-size: 2.5625rem;
    line-height: 1.2195;
    width: 100%;
    max-width: 1400px;
}


.formContainer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: center;
}
	.formContainer div.introText {  
		width: 50%;
	}


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

	.formContainer {
		flex-flow: column wrap;
	}
	.formContainer div.introText {  
		width: 100%;
	}

}

/* arrows */

a.cmp-standalone-cta {
    display: flex;
    cursor: pointer;
}

/* end arrows */


/*footer*/
		footer {
			margin: 0;
			padding: 0;
			width: 100%;
			transition: all 0.3s ease-in-out;
			
		}
		body.dark-mode footer {
			border-top: 1px solid var(--impact-light-blue);
		}
			footer .container {
				margin: 0 auto;
				padding: 30px 64px;
				display: flex;
				justify-content: space-between;
				width: 100%;
				max-width: 1400px;
				
			}
			footer .container:first-of-type {
				padding: 30px 64px 0 64px;
			}
			footer .container:last-of-type {
				padding:0 64px 30px 64px;
			}
				footer .col {
					width: 100%;
					display: flex;
					flex-flow: column nowrap;
					justify-content: space-between;
					flex-flow: column wrap;
					order: 1;
					border-top: 1px solid var(--impact-light-blue);
				}
				
				.footer-left {
					display: flex;
					flex-flow: row wrap;
					justify-content: space-between;
					align-items: flex-end;
				}
					footer .footer-links {
						display: flex;
						flex-flow: row nowrap;
						justify-content: flex-end;
						align-items: flex-end;
					}
					
					footer .footer-links #teconsent {
						display: inline-flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						gap: 5px;
						margin: 30px 0 0 0;
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 22px;
						gap: 10px;
						color: black;
					}
					footer a {
						display: inline-block;
						font-family: "NotoSans-Regular";
						text-decoration: none;
						color: black;
					}
					footer a:hover {
						color: #009DE0;
						text-decoration: underline;
						text-underline-offset: 0.15em;
					}
					footer .copy, footer .mobile-copy {
						margin-top: 30px;
						margin-bottom: 0;
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 22px;
						color: black;
					}

		@media screen and (max-width: 1000px) {
			footer .container {
				padding: 30px !important;
				max-width: 1000px;
			}


			footer .container {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 20px 0;
			}

			footer .footer-links {
				justify-content: center;
				align-items: center;
			}
			
			footer .copy {
				text-align: left;
			}
	
			footer a {
				display: flex;
				width: 100%;
				justify-content: flex-start;
			}


		}


.cmp-standalone-cta {
    display: flex;
    cursor: pointer;
}

.cmp-standalone-cta h4 {
    margin: 20px 0;
    padding: 0 10px 0 0;
    font-size: 2rem;
    min-height: calc(1.5rem + 2px);
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.cmp-standalone-cta h4 span.arrow, 
.cmp-standalone-cta span.arrow {
    margin: 25px 0 0 0;
    padding: 0;
    display: inline-block;
    font-size: 200%;
    transform: translateX(0);
    transition: all 2s ease;
    width: 66px;
    height: 26px;
    overflow: hidden;
    z-index: -1 !important;
}

.cmp-standalone-cta h4 span.arrow::before, 
.cmp-standalone-cta span.arrow::before {
    content: "";
    width: 66px;
    position: absolute;
    left: 0;
    top: 4px;
    height: 22px;
    z-index: -1 !important;
    transition: all 2s ease;
}


.cmp-standalone-cta h4:hover span.arrow:before,
.cmp-standalone-cta:hover span.arrow:before {
    transform: translateX(50%);
	
	-webkit-animation:arrow-link-horizontal-animation .35s ease-in-out forwards;
	animation:arrow-link-horizontal-animation .5s ease-in-out forwards;
}






/* below p versions arrow to sort... */


.cmp-standalone-cta p span.arrow {
    margin: 10px 0 0 0;
    padding: 0;
    display: inline-block;
    font-size: 200%;
    transform: translateX(0);
    transition: all 2s ease;
	width: 66px;
    height: 26px;
    overflow: hidden; 
    z-index: -1 !important;   
}

.cmp-standalone-cta p span.arrow::before {
	content: "";
	width: 66px;
    position: absolute;
    left: 0;
    top: 4px;
    height: 22px;
    z-index: -1 !important;   
    transition: all 2s ease;
    
}

@media screen and (max-width: 1000px) {
	.cmp-standalone-cta p span.arrow {
		width: 50px;
    	height: 20px;
	}
	.cmp-standalone-cta p span.arrow::before {
		width: 50px;
    	height: 17px;
	}
}

.cmp-standalone-cta p:hover span.arrow::before {
    transform: translateX(50%);
	
	-webkit-animation:arrow-link-horizontal-animation .4s ease-in forwards;
	animation:arrow-link-horizontal-animation .4s ease-in forwards;
}

@-webkit-keyframes arrow-link-horizontal-animation {
	0% {
			-webkit-transform:translateX(0);
			transform:translateX(0)
		}
	50% {
			-webkit-transform:translateX(100%);transform:translateX(100%)
		}
	50.01% {
			-webkit-transform:translateX(-100%);
			transform:translateX(-100%)
		}
	to 	{
		-webkit-transform:translateX(0);
		transform:translateX(0)
	}
}

@keyframes arrow-link-horizontal-animation {
	0% {
			-webkit-transform:translateX(0);
			transform:translateX(0)
		}
	50% {
			-webkit-transform:translateX(100%);transform:translateX(100%)
		}
	50.01% {
			-webkit-transform:translateX(-100%);
			transform:translateX(-100%)
		}
	to 	{
		-webkit-transform:translateX(0);
		transform:translateX(0)
	}
}







/* Switch styles */
.switch-container {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

@media screen and (max-width: 1000px) {
	.switch-container {
		margin: 30px 0 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: auto%;
	}
}

.close-btn, .submit-btn, .paging-button-submit {
    background: var(--impact-mid-blue) !important;
    color: #fff;
    border: 0 !important;
    border-radius: 0.3125rem;
    font-size: 1.125rem !important;
    line-height: 1 !important;
    padding: 0.75rem 1.5rem !important;
    cursor: pointer;
}

/** new styles for main layout **/

.menu, .menu.active {
	display: none;
}

section.full-width {
	margin: 120px 0 0 0;
	/*padding: 0;*/
}

	section.full-width .container {
		margin: 0 auto;
		padding: 0 64px;
		width: 100%;
		max-width: 1920px;
		height: fit-content;
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		/*background-color: #6d83c0;*/
	}
		section.full-width .container .headerText {
            display: flex;
            flex-flow: column nowrap;
            color: white;
            width: 100%;
            padding: 0 64px;
            order: 1;
            background-color: #6d83c0;
            justify-content: center;
		}
			section.full-width .container .headerText h1 {
				margin: 0;
				margin-bottom: 1rem;
				padding: 0;
				font-family: "MMCdisplay_Cd_Bd";
				font-size: clamp(1.75rem, 4.5vw, 4rem);
				line-height: 1.2;
				color: var(--white);
			}
			section.full-width .container .headerText h4 {
				margin: 0;
				padding: 0;
				font-family: "NotoSans-Regular";
				font-size: clamp(1rem, 1.25vw, 1.25rem);
				line-height: 1.5;
				letter-spacing: 0.01em;
				color: var(--white);
			}
				section.full-width .container .headerText h4 a {
					font-family: "NotoSans-Bold";
					color: #fff;
					text-decoration: none;
					text-underline-offset: 0.15em;
				}
					section.full-width .container .headerText h4 a:hover {
						text-decoration: underline !important;
						text-underline-offset: 0.15em;
						cursor: pointer;
					}
		
		section.full-width .container img {
        	display: flex;
        	align-self: flex-end;
        	width: 50%;
			order: 2;
		}
				
@media screen and (max-width: 1000px) {

	.menu, .menu.active {
		display: block;
	}

	section.full-width {
		margin: 0;
	}
		section.full-width .container {
			flex-flow: column wrap;
			overflow-x: hidden;
			padding: 0 30px;
		}		
			section.full-width .container .headerText {
				padding: 3rem 10%;
				width: 100%;
				max-width: 100%;
				order: 2;
				align-self: center;
			}
				section.full-width .container .headerText h1,
				section.full-width .container .headerText h4 {
					text-align: center;
				}
								
			section.full-width .container img {
            	width: 120%;
        		order: 1;
        		margin-left: -300px;
        		object-fit: cover;
        		height: 400px;
			}
	
}

			
		
		
		section .container .introText {
			margin: 0 0 3rem 0;
			padding: 0 64px;
			width: 100%;
			max-width: 1400px;
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
			align-items: center;
		}
		@media screen and (max-width: 1000px) {
			section .container .introText {
				padding: 0 30px;
			}
		}
		
			section .container .introText h2.intro {
				margin: 1rem auto;
				padding: 0;
				font-family: "MMCdisplay_Rg";
				font-size: clamp(1.5rem, 2.5vw, 2.5rem);
				line-height: 1.2;
				width: 100%;
				text-align: center;
			}
			section .container .introText h3.intro {
				margin: 1rem auto;
				padding: 0;
				font-family: "NotoSans-Regular";
				/*font-size: 1.25rem;*/
				font-size: clamp(1.25rem, 1.5vw, 1.75rem);
				line-height: 1.5;
				width: 100%;
				max-width: 1400px;
				text-align: center;
			}
			
			.introText .intro.blue {
				color: var(--impact-dark-blue);
			}
			
			.introText .intro.yellow {
				color: #ffbe00;
			}
			.introText .intro.yellow a {
				color: #ffbe00;
				text-decoration: none;
			}
				.introText .intro.yellow a:hover {
					color: #ffbe00;
					text-decoration: underline;
					text-underline-offset: 0.15em;
				}
			.introText .intro.green {
				color: #00ac41;
			}
			.introText .intro.green a {
				color: #00ac41;
				text-decoration: none;
			}
				.introText .intro.green a:hover {
					color: #00ac41;
					text-decoration: underline;
					text-underline-offset: 0.15em;
				}
			.introText .intro.darkred {
				color: #ae1f1f;
			}
			.introText .intro.orange {
				color: #e07932;
			}
			.introText .intro.pink {
				color: #de2f64;
			}
			

/* article list & member updates */

section#articles,
section#member-update-panels { 
	padding: 1.5rem 0 0; 
	min-height: auto;
}

section#articles .container,
section#member-update-panels .container {
    margin: 0 auto;
    padding: 0 64px;
     max-width: 1920px;
    width: 100%;
}
	
	@media screen and (max-width: 1000px) {
	
		section#articles .container,
		section#member-update-panels .container {
			margin: 0 auto;
			padding: 0 30px;
			max-width: 1000px;
		}
	
	}

.article-image,
.article-image:hover { display: flex;  overflow: hidden; }

/*.article-image:hover img { transform: scale(1.05); }*/


.article-title,
.article-column:hover .article-title,
.panel-text,
.panel:hover .panel-text { 
	display: flex; 
	flex-flow: column nowrap;
	position: absolute; 

	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    width: 80%;
    justify-content: center;
    align-items: center;
}
	.article-title h3,
	.panel-text h3 {
		padding-bottom: 1rem;
		font-family: "MMCdisplay_Rg";
	}
	.article-title h4,
	.panel-text h4 {
		font-family: "NotoSans-Regular";
	}

section#articles .article-wrap,
section#member-update-panels .article-wrap {
    margin: 0 -0.75rem;
    padding: 0;
    width: calc((100%) + 1.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.article-column,
.panel {
    margin: 0;
    padding: 0 0.75rem;
    width: calc((100% / 3));
    margin-bottom: 1.5rem;
    display: flex;
    flex-flow: column nowrap;
    
    position: relative;
    
    outline: none;
}

	@media screen and (max-width: 1000px) {
	
		.article-column,
		.panel {
			width: calc((100% / 2));
		}
		.panel {
			width: 100%;
		}
	
	}

	@media screen and (max-width: 500px) {
	
		.article-column,
		.panel {
			width: 100%;
		}
	
	}

.article-image img {
    width: 100%;
    height: auto;
    transition: all 0.5s ease;
}


.article-column h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    line-height: 1.17;
    margin: 0;
    display: flex;
    align-items: flex-end;
	position:relative;    
}
.panel h3 {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1.17;
    margin: 0;
    display: flex;
    align-items: flex-end;
	position:relative;    
}
.panel h4 {
    font-family: "NotoSans-Regular";
    line-height: 1.15;
    margin: 0;
    display: flex;
    align-items: flex-end;
	position:relative;    
}
@media screen and (max-width: 1000px) {
	.article-column h3 {
		font-size: 1.4375rem;
    	line-height: 1.3;
	}
	.panel h3 {
		font-size: 1.4375rem;
    	line-height: 1.3;
	}
	.panel h3 {
		font-size: 1.4375rem;
    	line-height: 1.3;
	}
}





section#member-update-panels .mobile-reveal {
    flex-basis: 100%;
    display: none;
}
@media screen and (max-width: 1000px) {

    section#member-update-panels .mobile-reveal {
		margin: 0 auto;
		padding: 0 0.75rem;
        display: block;
    }
    section#member-update-panels .desktop-reveal {
        display: none !important;
    }
    
}

section#member-update-panels .mobile-reveal > div, section#member-update-panels .desktop-reveal > div {
    margin: 0;
    padding: 1rem 0;
    display: none;
}
	body .desktop-reveal > div { display: none; }
	
	
	body.change-of-administration .desktop-reveal > div.change-of-administration,
	body.responsible-investment .desktop-reveal > div.responsible-investment,
	body.smartpath .desktop-reveal > div.smartpath,
	body.april-changes .desktop-reveal > div.april-changes,
	body.death-in-service .desktop-reveal > div.death-in-service,
	body.pensions-tax .desktop-reveal > div.pensions-tax,
	body.sufficient-income .desktop-reveal > div.sufficient-income,
	body.minimum-pension-age .desktop-reveal > div.minimum-pension-age,
	body.pension-scams .desktop-reveal > div.pension-scams.  { 
		display: block !important; 
	}
	
section#member-update-panels .desktop-reveal {
    flex-basis: 100%;
	margin: 0 auto;
	padding: 0 0.75rem;
    display: block;
}

section#member-update-panels .mobile-reveal h3,
section#member-update-panels .desktop-reveal h3 {
	margin-top: 1rem;
}

section#member-update-panels .mobile-reveal h2,
section#member-update-panels .desktop-reveal h2 {
	margin-bottom: 2rem;
	color: var(--impact-darker-blue);
	font-family: "MMCdisplay_Rg";
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    line-height: 1.4;
    max-width: none;
}

section#member-update-panels .mobile-reveal p, section#member-update-panels .desktop-reveal p {
    margin: 0 0 1rem 0;
}

section#member-update-panels .mobile-reveal li, section#member-update-panels .desktop-reveal li {
    font-size: clamp(1rem, 1.25vw, 1rem);
    margin-bottom: 0.5rem;
}


section#member-update-panels .mu-heading-01,
section#member-update-panels .mu-01 a {
    color: #de2f64; /* pink */
}
section#member-update-panels .mu-heading-02,
section#member-update-panels .mu-02 a {
    color: #ae1f1f; /* dark red */
}
section#member-update-panels .mu-heading-03,
section#member-update-panels .mu-03 a {
    color: #e07932; /* orange */
}
section#member-update-panels .mu-heading-04,
section#member-update-panels .mu-04 a {
    color: #fcc644; /* yellow */
}
section#member-update-panels .mu-heading-05,
section#member-update-panels .mu-05 a {
    color: #69ae3e; /* bright green */
}
section#member-update-panels .mu-heading-06,
section#member-update-panels .mu-06 a {
    color: #0eab8b; /* mint green */
}
section#member-update-panels .mu-heading-07,
section#member-update-panels .mu-07 a {
    color: #00608b; /* dark blue */
}
section#member-update-panels .mu-heading-08,
section#member-update-panels .mu-08 a {
    color: #595997; /* purple */
}
section#member-update-panels .mu-heading-09,
section#member-update-panels .mu-09 a {
    color: #a9194f; /* dark pink */
}
section#member-update-panels .mu-heading-10,
section#member-update-panels .mu-10 a {
    color: #2c6ef2; /* MMC highlight blue */
}


/* document colors? */



/* end article list */

.what-is-one-view-icons {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}
	.what-is-one-view-icon {
		margin: 0;
		padding: 0 0.75rem;
		width: calc((100% / 3));
		max-width: 300px;
		margin-bottom: 1.5rem;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		
		position: relative;
	}
		.what-is-one-view-icon p {
			text-align: center;
		}
		
		.what-is-one-view-icon img {
			margin: 0 auto;
			padding: 20px;
			width: 100%;
			max-width: 170px;
		}

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

	.what-is-one-view-icon {
		width: 100%;
		max-width: 300px;
		margin-bottom: 1.5rem;
		display: flex;
		flex-flow: column nowrap;
		
		position: relative;
	}

		.what-is-one-view-icon img {
			margin: 0 auto;
			padding: 20px;
			width: 100%;
			max-width: 150px;
		}

}


.document-downloads {
    margin: 1rem -0.75rem 2rem;
    padding: 0;
    width: calc((100%) + 1.5rem);
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
    align-items: flex-start;
    
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
	.document-download {
		margin: 0 0.75rem;
		padding: 0;
		/*width: calc((100% / 3) - 1.5rem);*/
		margin-bottom: 1.5rem;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		align-self: stretch;
		color: #fff;
		position: relative;
		text-decoration: none;
	}
	
		.document-downloads.green .document-download {
			background-color: #00ac41;
		}
		.document-downloads.darkred .document-download {
			background-color: #ae1f1f;
		}
		.document-downloads.orange .document-download {
			background-color: #e07932;
		}
		.document-downloads.pink .document-download {
			background-color: #de2f64;
		}
		
		
	.document-download:hover {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
		.document-download::before {
			margin: 0;
			padding: 0;
			content: "";
			background: url("../img/download.svg") 50% 50% no-repeat;
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			position: absolute;
			left: 20px;
		}
		.document-download p {
			margin-left: 55px; 
			padding: 25px 20px;
			display: flex;
			
		}
			.document-downloads .introText {
				align-items: center !important;
			}
				.document-downloads .introText p {
					text-align: center !important;
				}
			
		.document-download p span .download-icon {
			padding: 20px;
			width: 40px;
			height: 40px;
			display: inline-flex;
		}

	@media screen and (max-width: 1000px) {
	
		.document-downloads {
			grid-template-columns: 1fr 1fr;
		}
		.document-download {
			/*width: calc((100% / 2) - 1.5rem);*/
		}
	
	}

	@media screen and (max-width: 500px) {
	
		.document-downloads {
			grid-template-columns: 1fr;
		}
		.document-download {
			/*width: 100%;*/
		}
	
	}
	


/** fullwidth article banner */
.articleBanner {
	margin: 3rem 0 1.5rem;
	padding: 0;
	display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 300px;
}
.articleBanner .banner-image {
	display: flex;
	/*background-color: rgb(91, 110, 175);*/
	min-height: 300px;
}
.articleBanner .banner-image img {
	/*mix-blend-mode: multiply;
	filter: grayscale(95%);*/
	object-fit: cover;
}
.articleBanner .article-banner-title {
	display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    justify-content: center;
    align-items: center;
    mix-blend-mode: normal;
    z-index:3;
}
.articleBanner .article-banner-title h3 {
    font-family: "MMCdisplay_Rg";
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    line-height: 1.17;
    margin: 0;
    padding-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    position: relative;
    color: #ffffff;
    opacity: 1;
}
	.articleBanner .article-banner-title h3.strong {
		padding-bottom: 1rem;
		font-family: "MMCdisplay_Bd";
	}
	
.articleBanner .article-banner-title h4 {
	font-family: "NotoSans-Regular";
		font-size: clamp(1.2rem, 1.1vw, 1.2rem);
		line-height: 1.17;
		margin: 0;
		display: flex;
		align-items: flex-end;
		position: relative;
		color: #ffffff;
		opacity: 1;
}
	
/* not used */
.switch {
  position: relative;
  right: 0;
  display: flex;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#backgroundGradient {
	margin: 0;
	padding: 0;

	background: linear-gradient(45deg, #8246af, #002c77, #00968f) no-repeat;
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.container p {
	font-size: clamp(1rem, 1.25vw, 1rem);
}

.nav-drop-down-content p {
	font-size: clamp(1rem, 1.1vw, 1rem);
}

#oneview-content p {
	margin: 0 auto 1rem;
	text-align: center;
}

footer .container p {
	font-size: 1rem !important;
}

/*** 22.07.2024 - table cell vertical alignment ***/

.text-container table {
	margin-bottom: 20px;
	border-spacing: 0 10px;
}

.text-container table tr td {
	vertical-align: top;
}

.table-wrap table {
	margin-bottom: 20px;
	border-spacing: 0 10px;
}
.table-wrap table tr td {
	padding-left: 0;
	padding-right: 10px;
}


#contribution-rates ::-webkit-scrollbar-thumb {
    background: rgba(232, 49, 105, 0.5);
}