/* -- Generic ---------- */

	.customChart{
		background-color:#FFFFFF;

		width:100%;
		height:auto;

		display:block;
		position:relative;

		text-align:center;

		margin:0px auto;
		padding:0px;
		/*border:1px solid #D5D5D5;*/

		overflow:hidden;
	}


		.slick-list{
			border:1px solid #D5D5D5;
		}
		

		/* Chart */
		.customChartContainer{
			width:100%;
			height:auto;

			display:block;
			position:relative;

			margin:0px auto;
			padding:15px;
			border:0px none;
		}


			/* Title */
			.customChartTitle{
				width:100%;
				height:auto;

				display:block;
				position:relative;

				margin:0px auto;
				padding:0px;
				border:0px none;
			}

				.customChartTitle span{
					width:100%;
					height:auto;

					display:block;
					position:relative;

					color:#00338D;
					font-size:15px;
					text-align:left;

					margin:0px auto;
					padding:0px;
					border:0px none;

					padding-bottom:25px;
				}
			

			/* Figure */
			.customChartFigure{
				width:100%;
				height:auto;

				display:block;
				position:relative;

				margin:0px auto;
				padding:0px;
				border:0px none;
			}

			.customChartFigure::after{
				display:block;
				clear:both;
				content:'';
			}
				
				.customChartElement{
					width:33.33%;
					height:auto;

					display:block;
					position:relative;
					float:left;

					margin:0px auto;
					padding:0px;
					border:0px none;
				}

					.customChartElement .customChartYear{
						width:100%;
						height:30px;

						display:block;
						position:absolute;
						bottom:0px;
						left:0px;
						z-index:10;

						color:#00338D;
						font-size:15px;
						line-height:20px;

						margin:0px auto;
						padding:10px 0px 0px 0px;
						border:0px none;
					}

					span i{
						width:16px;
						height:auto;

						display:inline-block;
						position:relative;

						font-size:0.75em !important;
						font-style:normal !important;
					}


		/* Source */
		.customChartSource{
			background-color:#FFFFFF;

			width:100%;
			height:auto;

			display:block;
			position:relative;

			text-align:left !important;
			
			margin:0px auto;
			padding:15px;
			border:0px none;
		}

			.customChartSource span{
				width:100%;
				height:auto;
				
				display:block;
				position:relative;

				font-size:10px;
				font-style:italic;
				line-height:13px;

				padding-top:15px;
				border-top:1px solid #D5D5D5;
			}


/* -- GDP Chart ---------- */


	/* GDP */
	.customChartGDP{
	}

		.customChartGDP .customChartElement{
			height:180px;
		}

			.customChartGDP .bar{
				background-color:#FFFFFF;
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/union-jack.png');
				background-position:center top;
				background-repeat:no-repeat;
				background-size:64px 125px;
				
				width:48px;
				height:auto;

				display:block;
				position:absolute;
				bottom:30px;
				left:50%;
				z-index:0;

				margin:0px 0px 0px -24px;
				padding:0px;
				border:0px none;

				border-top:25px solid #FFFFFF;

				-webkit-transition:all 1000ms ease;
				-moz-transition:all 1000ms ease;
				-o-transition:all 1000ms ease;
				transition:all 1000ms ease;

				height:0px;
			}

			@media screen and (min-width:360px){
				.customChartGDP .bar{
					width:64px;
					margin:0px 0px 0px -32px;
				}
			}

			.customChartGDP--01.js-bar-active .bar{
				height:125px;
			}

			.customChartGDP--02.js-bar-active .bar{
				height:115px;
			}

			.customChartGDP--03.js-bar-active .bar{
				height:135px;
			}

				.customChartGDP .bar span{
					background-color:#FFFFFF;

					width:100%;
					height:20px;

					display:block;
					position:absolute;
					top:-25px;
					left:7px;
					z-index:10;

					color:#00338D;
					font-size:20px;
					line-height:20px;
					font-weight:bold;
					text-align:center;

					margin:0px auto;
					padding:0px;
					border:0px none;

					-webkit-transition:color 1000ms ease, opacity 1000ms ease;
					   -moz-transition:color 1000ms ease, opacity 1000ms ease;
						-ms-transition:color 1000ms ease, opacity 1000ms ease;
						 -o-transition:color 1000ms ease, opacity 1000ms ease;
							transition:color 1000ms ease, opacity 1000ms ease; 

					opacity:0 !important;
				}

				.customChartGDP--01.js-span-active .bar span,
				.customChartGDP--02.js-span-active .bar span,
				.customChartGDP--03.js-span-active .bar span,
				.customChartGDP--04.js-span-active .bar span{
					opacity:1.0 !important;
				}

			.customChartGDP .customChartYear{
				padding-top:8px;
				border-top:2px solid #CCCCCC;
			}

			
			/*#customChartGDP--Deal .customChartGDP--04.js-bar-active .bar{
				height:130px;
			}*/

		#customChartGDP--NoDeal .customChartElement{
			height:220px;
			margin-top:50px;
		}

			#customChartGDP--NoDeal .customChartYear{
				bottom:50%;
				padding-top:8px;
				border-top:2px solid #CCCCCC;
			}

				#customChartGDP--NoDeal .customChartGDP--03 .customChartYear {
					bottom:auto;
					padding-top:0px;
					border-top:0px none;

				    top:50%;
				    padding-bottom:8px;
				    border-bottom: 2px solid #CCCCCC;
				    margin-top:-58px;
				}
			
			#customChartGDP--NoDeal .bar{
				bottom:calc(50% + 30px);
			}
			
				#customChartGDP--NoDeal .customChartGDP--01.js-bar-active .bar{
					height:125px;
				}

				#customChartGDP--NoDeal .customChartGDP--02.js-bar-active .bar{
					height:90px;
				}

				#customChartGDP--NoDeal .customChartGDP--03.js-bar-active .bar{
					height:135px;
					bottom:auto;
					top:calc(50% - 28px);

					border-top:0px none;
					border-bottom:25px solid #FFFFFF;
				}


					#customChartGDP--NoDeal .customChartGDP--03 .bar span{
						top:auto;
						bottom:-25px;
					}


/* -- Inflation Chart ---------- */

	.customChartInflation{
	}

		@-webkit-keyframes cloud_move {
			0%,
			100% {
				-webkit-transform-origin: 50% 500%;
						transform-origin: 50% 500%;
				-webkit-transform: translateX(0%);
						transform: translateX(0%);
			}
			50% {
				-webkit-transform: translateX(1000%);
						transform: translateX(1000%);
			}
		}
		@keyframes cloud_move {
			0%,
			100% {
				-webkit-transform-origin: 50% 500%;
						transform-origin: 50% 500%;
				-webkit-transform: translateX(0%);
						transform: translateX(0%);
			}
			50% {
				-webkit-transform: translateX(1000%);
						transform: translateX(1000%);
			}
		}

		.customChartInflation .customChartCloud{
			width:24px;
			height:auto;

			display:block;
			position:absolute;
			top:30px;
			left:20%;
			z-index:0;

			margin:0px auto;
			padding:0px;
			border:0px none;

			-webkit-animation: cloud_move 200s infinite both;
					animation: cloud_move 200s infinite both;

			-webkit-transition:opacity 1000ms ease;
			-moz-transition:opacity 1000ms ease;
			-o-transition:opacity 1000ms ease;
			transition:opacity 1000ms ease;

			opacity:0 !important;
		}

		.customChartCloud.js-active{
			opacity:1.0 !important;
		}

		.customChartInflation .customChartElement{
			height:210px;
			z-index:10;
		}

			.customChartInflation .balloon{
				background-color:transparent;
				background-position:center top;
				background-repeat:no-repeat;
				
				width:72px;
				height:auto;

				display:block;
				position:absolute;
				left:50%;
				top:0px;
				z-index:0;

				margin:0px 0px 0px -36px;
				padding:0px;
				border:0px none;

				-webkit-transition:opacity 1000ms ease;
				-moz-transition:opacity 1000ms ease;
				-o-transition:opacity 1000ms ease;
				transition:opacity 1000ms ease;

				opacity:0 !important;
			}

			.customChartInflation--01.js-active .balloon,
			.customChartInflation--02.js-active .balloon,
			.customChartInflation--03.js-active .balloon,
			.customChartInflation--04.js-active .balloon{
				opacity:1.0 !important;
			}

			@-webkit-keyframes wobble_one {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					-webkit-transform: rotate(2deg);
							transform: rotate(2deg);
				}
				50% {
					-webkit-transform: rotate(-8deg);
							transform: rotate(-8deg);
				}
			}
			@keyframes wobble_one {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					-webkit-transform: rotate(2deg);
							transform: rotate(2deg);
				}
				50% {
					-webkit-transform: rotate(-8deg);
							transform: rotate(-8deg);
				}
			}
			@-webkit-keyframes wobble_two {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					transform: rotate(-8deg);
					transform: rotate(-8deg);
				}
				50% {
					-webkit-transform: rotate(8deg);
							transform: rotate(8deg);
				}
			}
			@keyframes wobble_two {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					transform: rotate(-8deg);
					transform: rotate(-8deg);
				}
				50% {
					-webkit-transform: rotate(8deg);
							transform: rotate(8deg);
				}
			}
			@-webkit-keyframes wobble_three {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					-webkit-transform: rotate(5deg);
							transform: rotate(5deg);
				}
				50% {
					-webkit-transform: rotate(-5deg);
							transform: rotate(-5deg);
				}
			}
			@keyframes wobble_three {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					-webkit-transform: rotate(5deg);
							transform: rotate(5deg);
				}
				50% {
					-webkit-transform: rotate(-5deg);
							transform: rotate(-5deg);
				}
			}
			@-webkit-keyframes wobble_four {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					transform: rotate(-5deg);
					transform: rotate(-5deg);
				}
				50% {
					-webkit-transform: rotate(10deg);
							transform: rotate(10deg);
				}
			}
			@keyframes wobble_four {
				0%,
				100% {
					-webkit-transform-origin: 50% 100%;
							transform-origin: 50% 100%;
					transform: rotate(-5deg);
					transform: rotate(-5deg);
				}
				50% {
					-webkit-transform: rotate(10deg);
							transform: rotate(10deg);
				}
			}

			.customChartInflation--01 .balloon{
				top: 2px;
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-balloon-2017.png?v=1');
				background-size:64px auto;
				height:106px;

				-webkit-animation: wobble_two 14s infinite both;
						animation: wobble_two 14s infinite both;
			}

			.customChartInflation--02 .balloon{
				top: 22px;
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-balloon-2018.png?v=1');
				background-size:50px auto;
				height:93px;

				-webkit-animation: wobble_three 10s infinite both;
						animation: wobble_three 10s infinite both;
			}

			.customChartInflation--03 .balloon{
				top: 5px;
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-balloon-2019.png?v=1');
				background-size:52px auto;
				height:87px;

				-webkit-animation: wobble_four 10s infinite both;
						animation: wobble_four 10s infinite both;
			}
			
			.customChartInflation--04 .balloon{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-balloon-2020.png?v=1');
				background-size:52px auto;
				height:87px;

				-webkit-animation: wobble_four 10s infinite both;
						animation: wobble_four 10s infinite both;
			}

				.customChartInflation .balloon span{
					width:100%;
					height:20px;

					display:block;
					position:absolute;
					top:21%;
					left:2px;
					z-index:10;

					color:#FFFFFF;
					font-size:20px;
					line-height:20px;
					font-weight:bold;
					text-align:center;

					margin:0px auto;
					padding:0px;
					border:0px none;

					-webkit-transition:all 1000ms ease;
					-moz-transition:all 1000ms ease;
					-o-transition:all 1000ms ease;
					transition:all 1000ms ease;
				}

				.customChartInflation--01 .balloon span{
					top:25px;
				}

				.customChartInflation--02 .balloon span{
					top:15px;
				}

				.customChartInflation--03 .balloon span{
					top:17px;
				}
				
				.customChartInflation--04 .balloon span{
					top:15px;
				}

			.customChartInflation .building{
				background-color:transparent;
				background-position:center bottom;
				background-repeat:no-repeat;
				
				width:72px;
				height:auto;

				display:block;
				position:absolute;
				bottom:55px;
				left:50%;
				z-index:10;

				margin:0px 0px 0px -36px;
				padding:0px;
				border:0px none;

				-webkit-transition:opacity 1000ms ease;
				-moz-transition:opacity 1000ms ease;
				-o-transition:opacity 1000ms ease;
				transition:opacity 1000ms ease;

				opacity:0 !important;
			}

			.customChartInflation--01.js-active .building,
			.customChartInflation--02.js-active .building,
			.customChartInflation--03.js-active .building,
			.customChartInflation--04.js-active .building{
				opacity:1.0 !important;
			}

			.customChartInflation--01 .building{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-building-2017.png?v=1');
				background-size:50px auto;
				height:50px;

				-moz-transform: rotate(-5deg);
				-webkit-transform: rotate(-5deg);
				-o-transform: rotate(-5deg);
				-ms-transform: rotate(-5deg);
				transform: rotate(-5deg);
			}

			.customChartInflation--02 .building{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-building-2018.png?v=1');
				background-size:52px auto;
				height:50px;

				-moz-transform: rotate(5deg);
				-webkit-transform: rotate(5deg);
				-o-transform: rotate(5deg);
				-ms-transform: rotate(5deg);
				transform: rotate(5deg);
			}

			.customChartInflation--03 .building{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-building-2019.png?v=1');
				background-size:66px auto;
				height:64px;

				-moz-transform: rotate(-5deg);
				-webkit-transform: rotate(-5deg);
				-o-transform: rotate(-5deg);
				-ms-transform: rotate(-5deg);
				transform: rotate(-5deg);
			}
			
			.customChartInflation--04 .building{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/inflation-building-2020.png?v=1');
				background-size:72px auto;
				height:70px;

				-moz-transform: rotate(5deg);
				-webkit-transform: rotate(5deg);
				-o-transform: rotate(5deg);
				-ms-transform: rotate(5deg);
				transform: rotate(5deg);
			}

				.customChartInflation .building span{
					width:100%;
					height:20px;

					display:block;
					position:absolute;
					bottom:-25px;
					left:2px;
					z-index:10;

					color:#FFFFFF;
					font-size:15px;
					line-height:15px;
					font-weight:bold;
					text-align:center;

					margin:0px auto;
					padding:0px;
					border:0px none;

					-webkit-transition:all 1000ms ease;
					-moz-transition:all 1000ms ease;
					-o-transition:all 1000ms ease;
					transition:all 1000ms ease;
				}

				.customChartInflation--01 .building span{
					color:#005eb8;
				}

				.customChartInflation--02 .building span{
					color:#00a3a1;
				}

				.customChartInflation--03 .building span{
					color:#6d2077;
				}
				
				.customChartInflation--04 .building span{
					color:#470A68;
				}


/* -- Unemployment Chart ---------- */

	.customChartUnemployment{
	}

		.customChartUnemployment .customChartElement{
			height:125px;
		}

			.customChartUnemployment .case{
				background-color:#FFFFFF;
				background-position:center bottom;
				background-repeat:no-repeat;
				
				width:72px;
				height:auto;

				display:block;
				position:absolute;
				bottom:30px;
				left:50%;
				z-index:10;

				margin:0px 0px 0px -36px;
				padding:0px;
				border:0px none;

				-webkit-transition:opacity 750ms ease;
				-moz-transition:opacity 750ms ease;
				-o-transition:opacity 750ms ease;
				transition:opacity 750ms ease;

				opacity:0 !important;
			}

			.customChartUnemployment .percentage{
				background-color:#FFFFFF;
				background-position:center bottom;
				background-repeat:no-repeat;
				
				width:72px;
				height:auto;

				display:block;
				position:absolute;
				bottom:30px;
				left:50%;
				z-index:0;

				margin:0px 0px 0px -36px;
				padding:0px;
				border:0px none;

				-webkit-transition:opacity 1000ms ease;
				-moz-transition:opacity 1000ms ease;
				-o-transition:opacity 1000ms ease;
				transition:opacity 1000ms ease;

				opacity:0 !important;
			}

			.customChartUnemployment--01.js-image-active .case,
			.customChartUnemployment--02.js-image-active .case,
			.customChartUnemployment--03.js-image-active .case,
			.customChartUnemployment--04.js-image-active .case,
			.customChartUnemployment--01.js-image-active .percentage,
			.customChartUnemployment--02.js-image-active .percentage,
			.customChartUnemployment--03.js-image-active .percentage,
			.customChartUnemployment--04.js-image-active .percentage{
				opacity:1.0 !important;
			}

			.customChartUnemployment--01 .case,
			.customChartUnemployment--01 .percentage{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/image--unemployment-2017.png?v=1');
				background-size:50px auto;
				height:50px;
			}

			.customChartUnemployment--02 .case,
			.customChartUnemployment--02 .percentage{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/image--unemployment-2018.png?v=1');
				background-size:40px auto;
				height:40px;
			}

			.customChartUnemployment--03 .case,
			.customChartUnemployment--03 .percentage{
				background-image:url('https://assets.kpmg.com/content/dam/kpmg/uk/images/2018/08/economic-outlook/image--unemployment-2019.png?v=1');
				background-size:40px auto;
				height:40px;
			}

			#customChartUnemployment--NoDeal .customChartUnemployment--03 .case,
			#customChartUnemployment--NoDeal .customChartUnemployment--03 .percentage{
				background-size:62px auto;
				height:62px;
			}

				.customChartUnemployment .percentage span{
					width:100%;
					height:20px;

					display:block;
					position:absolute;
					top:auto;
					left:7px;
					z-index:10;

					color:#00338D;
					font-size:20px;
					line-height:20px;
					font-weight:bold;
					text-align:center;

					margin:0px auto;
					padding:0px;
					border:0px none;

					-webkit-transition:top 1000ms ease;
					-moz-transition:top 1000ms ease;
					-o-transition:top 1000ms ease;
					transition:top 1000ms ease;

					opacity:0 !important;
				}

				.customChartUnemployment--01 .percentage span{
					top:20px;
				}
				.customChartUnemployment--02 .percentage span{
					top:20px;
				}
				.customChartUnemployment--03 .percentage span{
					top:20px;
				}
				
				.customChartUnemployment--01.js-span-active .percentage span,
				.customChartUnemployment--02.js-span-active .percentage span,
				.customChartUnemployment--03.js-span-active .percentage span,
				.customChartUnemployment--04.js-span-active .percentage span{
					top:-25px;

					opacity:1.0 !important;
				}