:root {
  --main-bg-color: #ffffff;
  --font-color: #ffffff;
  --blue: #1271B9;
  --padding: 80px;
  --dark-blue: #002c77;
  --card-text-color: #ffffff;
  --card-hover-text-color: #ffffff;
}


@media screen and (max-width: 1400px) {
  :root {
    --padding: 30px;
  }
}
/*fonts*/
@font-face {
  font-family: "MMCDisplay_Bd";
  src: url('../fonts/MMCDisplay_Bd.ttf') format('truetype');
}
@font-face {
  font-family: "MMCDisplay_Rg";
  src: url('../fonts/MMCDisplay_Rg.ttf') format('truetype');
}

@font-face {
  font-family: "NotoSans-Regular";
  src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: "NotoSans-Italic";
  src: url('../fonts/NotoSans-Italic.ttf') format('truetype');
}
@font-face {
  font-family: "NotoSans-Medium";
  src: url('../fonts/NotoSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: "NotoSans-SemiBold";
  src: url('../fonts/NotoSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: "NotoSans-Bold";
  src: url('../fonts/NotoSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: "NotoSans-BoldItalic";
  src: url('../fonts/NotoSans-BoldItalic.ttf') format('truetype');
}

a.card {
  /*text-decoration: none;*/
  color: var(--card-text-color);
}

.container {
  max-width: 1400px;
  width: 100vw;
  padding: 0 64px;
  margin: auto;
}

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

	.container {
	  width: 100vw;
	}

}

.no-break {
  white-space: nowrap;
}

h2 {
  font-style: normal;
  font-weight: normal;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 40px;
}

.blueGray {background: #8096b2; transition: 0.5s;}
	.blueGray:hover {background: #627798; transition: 0.5s;}
	
.card-1, .card-1:hover {
	background-image: url('../images/sam.png');
}
.card-2, .card-2:hover {
	background-image: url('../images/anu.png');
}
.card-3, .card-3:hover {
	background-image: url('../images/charlie.png');
}

	a.card .triangle { 
		position: absolute;
		top: 100%;
		left: calc(50% - 15px);
		height: 24px;
		width: 30px;
		/*display: none;*/
		opacity: 0;
		transition: 0.1s;
		/*transform: rotate(180deg);*/
	}
	
	a.current.card .triangle {
		position: absolute;
		top: 100%;
		left: calc(50% - 15px);
		height: 24px;
		width: 30px;
		opacity: 1;
		transition: 0.1s;
	}
		a.current.card .triangle img { width: auto; height: 24px; }

/*END general*/

/*Cards*/
.card-1, .card-1:hover,
.card-2, .card-2:hover,
.card-3, .card-3:hover {
	position: relative;
	/*overflow: hidden;*/
	background-size: 320px;
	background-repeat: no-repeat;
	min-height: 300px;
}

	.card-1, .card-1:hover {
		background-size: 310px;
		background-position: bottom -55px right -85px;
	}
	.card-2, .card-2:hover {
		background-size: 330px;
		background-position: bottom 0px right -60px;
	}
	.card-3, .card-3:hover {
		background-position: bottom -100px right -80px;
	}

a.card-1, a.card-2, a.card-3 {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  gap: 10px;
  width: calc(33.333% - 16px);
}

@media screen and (max-width: 1400px) {
  a.card-1, a.card-2, a.card-3 {
    width: calc(33.3333333333% - 10px);
    min-height: 300px;
    
  }
  
}
@media screen and (max-width: 1000px) {
  a.card-1,
  a.card-2,
  a.card-3 {
    width: calc(100% - 0px);
    min-height: 300px;
  }
  .card-1, .card-1:hover,
  .card-2, .card-2:hover,
  .card-3, .card-3:hover {
  }

}
a.card h3 {
  font-family: "MMCDisplay_Bd";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1.22;
  z-index: 2;
}

a.card p.description {
  color: var(--card-text-color);
  z-index: 2;
  max-width: 250px;
}
a.card p.expand {
	font-family: "MMCDisplay_Rg" !important;
}

a.current.card {
  transition: 0.5s;
}
	/* background colours for each of 3 tiles */
	a.current.card.card-1 {
		background-color: #627798;
	}
	a.current.card.card-2 {
		background-color: #627798;
	}
	a.current.card.card-3 {
		background-color: #627798;
	}

a.card:hover p, a.current.card p, a.card:hover h3, a.current.card h3 {
  color: var(--card-hover-text-color);
}

/*END Cards*/
/*Section common*/
section {
  /*padding: 30px 0;*/
}
section#topics {
	padding-top: 1.5rem;
	padding-bottom: 3rem;
}

/*END Section common*/

/* override for 100% height flex children of slide */
.swiper-slide, swiper-slide {
	display: flex !important;
	height: auto !important;
}
.prev-slide, .next-slide {
	position: absolute !important;
	bottom: 20px !important;
	right: 10px !important;
	top: auto !important;
	padding: 30px 0 0 0 !important;
	text-align: right !important;
	height: calc(32px + 30px) !important;
	width: auto !important;
	cursor: pointer;
	display: flex;
	flex-direction: row !important;
}
.prev-slide {
	left: 10px !important;
	right: auto !important;
	text-align: left !important;
	cursor: pointer;
}
	.prev-slide span, .next-slide span {
		line-height: 32px;
	}
	.prev-slide img, .next-slide img {
		width: auto !important;
		height: 100% !important;
	}

/*topics*/
section#topics .container,
section#topicsTwo .container {
  display: flex;
  gap: 24px 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

section#topics .topic-container {
  padding: 0;
}

section#topics .topic-container a {
  color: #fff !important;
}

section#topics .container a {
  cursor: pointer;
}

section#topics .container a p.expand {
  color: var(--card-text-color);
}

section#topics .container a:hover p.expand, section#topics .container a.current p.expand {
  color: var(--main-bg-color);
}

.topic-container { display: flex; justify-content: center; align-items: flex-start; }

.topic-container div,
.topic-container div.tint { 
	margin: 0;
	padding: 20px 30px 40px;
	display: flex; 
	flex-direction: column; 
	width: 50%;
	position: relative;
}
	.topic-container div.tint { margin: 0; }

.topic-container div.full {
	padding: 20px 40px;
	width: 100%;
}

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

	.topic-container {
		flex-direction: column;
	}
	
	.topic-container div,
	.topic-container div.tint { 
		width: 100%;
	}

}

	.topic-container div.tint {
		display: flex;
		align-self: stretch;
	}

.topic-container-footer {
	margin: 0;
	padding: 10px 20px;
	width: 100%;
	display: flex;flex-direction: column;
	align-self: center;
	background: #e5e9f1;
}
	.topic-container-footer p { margin: 0 !important; color: #002c77 !important; }

.page-pension-journey-profiles section#topics .topic {
  display: none;
  /*padding: 24px 0 30px 0;*/
  padding: 0;
  /*background-color: #F2F2F2;*/
  /*background-color: var(--dark-blue);*/
  width: 100%;
  box-sizing: content-box;
}
	/* background colours for each of 3 tiles */
	.page-pension-journey-profiles section#topics .topic.topic-1 {
		background-color: #627798;
	}
		.page-pension-journey-profiles section#topics .topic.topic-1 .topic-container div.tint {
			background: #4e6287;
		}
	.page-pension-journey-profiles section#topics .topic.topic-2 {
		background-color: #627798;
	}
		.page-pension-journey-profiles section#topics .topic.topic-2 .topic-container div.tint {
			background: #4e6287;
		}
	.page-pension-journey-profiles section#topics .topic.topic-3 {
		background-color: #627798;
	}
		.page-pension-journey-profiles section#topics .topic.topic-3 .topic-container div.tint {
			background: #4e6287;
		}

.page-pension-journey-profiles section#topics .topic h3 {
  margin-top: 10px;
    font-family: "MMCDisplay_Bd";

	font-weight: normal;
	font-style: normal;
  font-size: 24px;
  line-height: 1.22;
  color: var(--card-text-color);
}
.page-pension-journey-profiles section#topics .topic h4 {
  margin-top: 15px;
  font-family: "NotoSans-Bold";
	font-weight: normal;
	font-style: normal;
  color: var(--card-text-color);
}

.page-pension-journey-profiles section#topics .topic p {
  margin: 15px 0 0;
  color: var(--card-text-color);
}

.page-pension-journey-profiles section#topics .topic p:last-of-type {
  margin-bottom: 0;
}

.page-pension-journey-profiles section#topics .topic ul {
  margin-top: 15px;
  margin-bottom: 0;
}

.page-pension-journey-profiles section#topics .topic li {
  margin: 0 0 15px -24px;
  color: var(--white);
}
	.page-pension-journey-profiles section#topics .topic li:last-of-type { margin-bottom: 0; }

.page-pension-journey-profiles section#topics .topic a {
  color: var(--blue);
  /*text-decoration: none;*/
}

.page-pension-journey-profiles section#topics .topic a:hover {
  color: var(--card-text-color);
  text-decoration: underline;
}

/*faq order*/
.page-pension-journey-profiles .card-1 {
  order: 1;
}

.page-pension-journey-profiles .card-2 {
  order: 2;
}

.page-pension-journey-profiles .card-3 {
  order: 3;
}

.page-pension-journey-profiles .topic-1 {
  order: 4;
}

.page-pension-journey-profiles .topic-2 {
  order: 5;
}

.page-pension-journey-profiles .topic-3 {
  order: 6;
}


@media screen and (max-width: 1400px) {
  .page-pension-journey-profiles .card-1 {
    order: 1;
  }
  .page-pension-journey-profiles .card-2 {
    order: 2;
  }
  .page-pension-journey-profiles .card-3 {
    order: 3;
  }
  .page-pension-journey-profiles .topic-1 {
    order: 4;
  }
  .page-pension-journey-profiles .topic-2 {
    order: 5;
  }
  .page-pension-journey-profiles .topic-3 {
    order: 6;
  }
}
@media screen and (max-width: 1000px) {
  .page-pension-journey-profiles .card-1 {
    order: 1;
  }
  .page-pension-journey-profiles .card-2 {
    order: 3;
  }
  .page-pension-journey-profiles .card-3 {
    order: 5;
  }
  .page-pension-journey-profiles .topic-1 {
    order: 2;
  }
  .page-pension-journey-profiles .topic-2 {
    order: 4;
  }
  .page-pension-journey-profiles .topic-3 {
    order: 6;
  }
}
section#topics a.card p:last-of-type{
	margin-top: auto;
}
/*END faq order*/
/*END faqs*/




		.topic-container img {
			padding: 30px 0 0;
			width: 100%;
			max-width: 600px;
		}
		
		.topic-container ul {
			margin-top: 20px !important;
		}



.accordion {
  width: 100%;
  margin: 0 auto;
}

.accordion-header {
  padding: 0;
  background: #fff;
  color: white;
  cursor: pointer;
  transition: all .3s;
  text-align: center;
}
	.accordion-header h4 {
		margin-top: 0 !important;
	}

.accordion-header:hover {
  position: relative;
  z-index: 5;
}

.accordion-body {
  display: none;
}

.accordion-body__contents {
  padding: 20px;
}


.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item .accordion-header {
  background: linear-gradient(to left, #fff 50%, #fff 50% );
}


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

	.accordion__item .accordion-header {
		background: #fff 50%;
	}
	
	.accordion-header {
    padding: 0;
  }

}

div.boxed {
	margin: 20px 0 10px;
	padding: 15px 20px 20px;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.75);
}
	div.boxed p { margin: 10px 0 !important; padding: 0 !important; }
	div.boxed p:last-of-type { margin-bottom: 10px; }

p.asterisk, span.asterisk {
	text-indent: -10px;
	margin-left: 10px !important;
}

div.button {
	margin: 0 auto;
	padding: 20px 30px;
	background: #02b0d4;
	color: #fff;
	display: inline-block;
	text-align: center;
}
div.button:hover {
	background: #02b0d4;
}
div.button h3 {
	margin-top: 5px !important;
	margin-bottom: 8px !important;
	font-family: "MMCDisplay_Rg" !important;
	font-size: 20px !important;
    line-height: 1.22;
	font-weight: normal;
	font-style: normal;
}

ul li.trend-up,
ul li.currency-pound,
ul li.monitor,
ul li.paper {
	list-style: none;
	margin: 0 0 6px -45px !important;
	padding: 15px 0 15px 50px;
}
	ul li.trend-up { background: url(images/trend-up.svg) no-repeat left center; }
	ul li.currency-pound { background: url(images/currency-pound.svg) no-repeat left center; }
	ul li.monitor { background: url(images/monitor.svg) no-repeat left center; }
	ul li.paper { background: url(images/paper.svg) no-repeat left center; }

ol {
		margin: 20px 0;
		padding: 0;
		list-style: none;
		counter-reset: item;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 50%);
		column-gap: 5px;
		row-gap: 5px; 		

 }
ol li {
		counter-increment: item;
		margin: 0px !important;
		padding: 20px 20px 20px 50px;
		position: relative;
   
		display: flex;
		/* width: 50%; */
		flex-direction: row;
    
 }
ol li:nth-child(1),
ol li:nth-child(4),
ol li:nth-child(5),
ol li:nth-child(8) {
	background: rgba(0,0,0,0.3);
}
ol li:nth-child(2),
ol li:nth-child(3),
ol li:nth-child(6),
ol li:nth-child(7) {
	background: rgba(0,0,0,0.4);
}

ol li:before {
   content: counter(item);
   color: white;
   font-size: 36px;
   line-height: 36px;
   text-align: left;
   display: inline-block;
   position: absolute;
   top: 20;
   left: 17px;
 }

/* nested lists */

ul li ul, ul li ul li {
  list-style: none;
}

ul li ul.second-level li {
	list-style: circle;
	text-indent: 0 !important;
}
	ul li ul.second-level li:before {
		content: '';
	}

ul li ul li {
  margin-left: 0;
  text-indent: -15px;
}
	ul li ul li:before {
	  content: '✓';
	}


table.contributions { margin: 30px 0 15px; padding: 0; border-collapse: collapse; }
table.contributions tr td { padding: 10px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: var(--white); width: 20%; text-align: center; }
table.contributions tr td:first-of-type {
	width: 40%;
	padding: 10px 40px 10px 0;
	text-align: left;
	font-family: "NotoSans-Bold";
}
table.contributions tr td:last-of-type {
	/*padding: 10px 0;*/
}
table.contributions tr td:nth-child(even) {
	background: rgba(255,255,255,0.25);
}

a { font-family: "NotoSans-Bold"; }
em a { font-family: "NotoSans-BoldItalic"; }


/* video popup */
.popup_background {
  opacity: 0.7 !important;
}

.popup_content {
  padding: 10px;
  width: 100%;
  max-width: 1024px;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.container-wrap {
	margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

	.container-wrap {
		margin: 0;
		width: 100%;
	}

}