/* = Main CSS file for Annual Review 2019 Survey
-----------------------------------------------

	This document is used as a reset for custom HTML pages on the KPMG site. It contains:

	 	- General styling of typography and elements
	 	- Specific styling for reuable items such as carousels and buttons
	 	- Specific styling for each of the container elements on the page
	 	- Specific styling for the custom content of the page


/* = HTML / Body / Typography / Re-used Elements
----------------------------------------------- */

	* {
		-webkit-font-smoothing:antialiased;
		text-rendering: optimizeLegibility; 
	}


	/* -- HTML / Body ---------- */

		html,
		body{
			overflow-x: hidden;
		}

			html{
			}

			body{
			}

			body.js-lockscroll{
			}


	/* -- Header ---------- */

		.CustomHTMLPage h1,
		.CustomHTMLPage h2{
			color:#00338D;
			font-family:'KPMG Light', Arial, Helvetica, sans-serif;
			font-size:36px;
			font-weight:normal !important;
			line-height:0.85em;
			margin:15px auto;
		}

		.CustomHTMLPage h1{
			font-size:54px;
		}

			@media 
			screen and (min-width:480px){
				.CustomHTMLPage h1{
					font-size:64px;
				}
				.CustomHTMLPage h2{
					font-size:48px;
				}
			}

			@media 
			screen and (min-width:768px){
				.CustomHTMLPage h1{
					font-size:72px;
				}
			}

			@media 
			screen and (min-width:1200px){
				.CustomHTMLPage h1{
					font-size:96px;
				}
			}

		.CustomHTMLPage h3,
		.CustomHTMLPage h4,
		.CustomHTMLPage h5,
		.CustomHTMLPage h6{
			color:#00338D;
			font-family:Arial, 'Helvetica', sans-serif;
			font-size:20px;
			font-weight:normal;
			line-height:1.05em;

			margin:15px auto;
		}


	/* -- Paragraph ---------- */

		.CustomHTMLPage p{
			color:#333333;
			font-family:Arial, 'Helvetica', sans-serif;
			font-size:15px;
			font-weight:normal;
			line-height:1.35em;

			margin:15px auto;
		}

		.CustomHTMLPage p.large{
			font-size:1.25em;
		}

		.CustomHTMLPage p.small{
			font-size:0.75em;
		}


	/* -- Lists ---------- */

		.CustomHTMLPage ul,
		.CustomHTMLPage ol{
			font-size:15px;
			line-height:1.35em;

			list-style:disc;

			margin:0.75em auto;
			padding:0px 0px 0px 1.5em;
			border:0px none;
		}

		.CustomHTMLPage ol{
			list-style:decimal;
		}

			.CustomHTMLPage ul li,
			.CustomHTMLPage ol li{
				color:inherit;
				font-family:inherit;
				font-size:inherit;
				font-style:normal;
				font-weight:normal;
				line-height:inherit;

				margin:0px auto;
				padding:0.25em 0px;
			}

			.CustomHTMLPage ul ul,
			.CustomHTMLPage ol ol,
			.CustomHTMLPage ul ol,
			.CustomHTMLPage ol ul{
				margin:0.75em auto;
			}


	/* -- Links / Buttons ---------- */


		/* Links */
		.CustomHTMLPage a,
		.CustomHTMLPage a:hover,
		.CustomHTMLPage button,
		.CustomHTMLPage button:hover{
			-webkit-transition:background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out;
			   -moz-transition:background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out;
				-ms-transition:background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out;
				 -o-transition:background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out;
					transition:background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out;
		}

		.CustomHTMLPage a,
		.CustomHTMLPage a:hover{
			text-decoration:none !important;
			opacity:1.0;
		}

			.CustomHTMLPage a:hover{
				opacity:0.75;
			}

		.CustomHTMLPage button,
		.CustomHTMLPage button:hover{
		}

			.CustomHTMLPage button:hover{
			}


	/* -- Tables ---------- */


/* = Custom Containers
----------------------------------------------- */

	.CustomHTMLPage{
		background-color:#FFFFFF;

		width:100%;
		min-width:320px;
		height:auto;

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

		overflow-x:hidden;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

		.CustomHTMLPage__inner{
			width:100%;
			height:auto;

			display:block;
			position:relative;

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

			.CustomHTMLPage__content{
				width:100%;
				height:auto;

				display:block;
				position:relative;
				z-index:0;

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

				.CustomHTMLPage__section{
					width:100%;
					height:auto;

					display:block;
					position:relative;
					z-index:0;

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


/* = Re-use Classes / Items
----------------------------------------------- */


	/* -- Text Colours ----------- */

		.text-KPMGBlue{
			color:#00338D !important;
		}

		.text-MediumBlue{
			color:#005EB8 !important;
		}

		.text-LightBlue{
			color:#0091DA !important;
		}

		.text-Violet{
			color:#483698 !important;
		}

		.text-Purple{
			color:#470A68 !important;
		}

		.text-LightPurple{
			color:#6D2077 !important;
		}

		.text-KPMGGreen{
			color:#00A3A1 !important;
		}

		.text-Green{
			color:#009A44 !important;
		}

		.text-LightGreen{
			color:#43B02A !important;
		}

		.text-Yellow{
			color:#EAAA00 !important;
		}

		.text-Orange{
			color:#F68D2E !important;
		}

		.text-Red{
			color:#BC204B !important;
		}

		.text-Pink{
			color:#C6007E !important;
		}

		.text-White{
			color:#FFFFFF !important;
		}

		.text-Grey{
			color:#333333 !important;
		}


	/* -- Background Colours ----------- */

		.background-KPMGBlue{
			background-color:#00338D !important;
		}

		.background-MediumBlue{
			background-color:#005EB8 !important;
		}

		.background-LightBlue{
			background-color:#0091DA !important;
		}

		.background-Violet{
			background-color:#483698 !important;
		}

		.background-Purple{
			background-color:#470A68 !important;
		}

		.background-LightPurple{
			background-color:#6D2077 !important;
		}

		.background-KPMGGreen{
			background-color:#00A3A1 !important;
		}

		.background-Green{
			background-color:#009A44 !important;
		}

		.background-LightGreen{
			background-color:#43B02A !important;
		}

		.background-Yellow{
			background-color:#EAAA00 !important;
		}

		.background-Orange{
			background-color:#F68D2E !important;
		}

		.background-Red{
			background-color:#BC204B !important;
		}

		.background-Pink{
			background-color:#C6007E !important;
		}

		.background-White{
			background-color:#FFFFFF !important;
		}

		.background-Grey{
			background-color:#333333 !important;
		}


	/* -- Anchor ----------- */

		.anchor{
			background:transparent;

			width:100%;
			height:0px;

			display:block;
			position:absolute;
			top:-114px;
			left:0px;

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


	/* -- Buttons ----------- */

		.btn{
			background-color:#CCCCCC;

			width:auto;
			height:auto;

			display:inline-block;
			position:relative;

			color:#FFFFFF !important;
			font-size:15px;
			line-height:1.35 !important;
			text-align:center;

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

		.btn:hover{
			opacity:0.75;
		}

			.btn::-moz-selection {
				background:rgba(255, 255, 255, 0);
			}
			
			.btn::selection {
				background:rgba(255, 255, 255, 0);
			}


	/* -- Modals ----------- */

		.modal__element{
			width:100%;
			min-width:320px;
			height:100%;

			display:none;
			position:fixed;
			top:0px;
			left:0px;
			z-index:100;

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

			.modal__background{
				background-color:rgba(0, 0, 0, 0.75);

				width:100%;
				height:100%;

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

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

				-webkit-transform:translateX(-50%) translateY(-50%);
				   -moz-transform:translateX(-50%) translateY(-50%);
					-ms-transform:translateX(-50%) translateY(-50%);
					 -o-transform:translateX(-50%) translateY(-50%);
						transform:translateX(-50%) translateY(-50%);
			}

			.modal__close{
				background-color:#0091DA !important;

				width:50px;
				height:50px;

				display:block;
				position:absolute;
				top:0px;
				right:0px;
				z-index:30;

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

				cursor:pointer;

				content:'';
			}

				.modal__close::before,
				.modal__close::after{
					background-color:#FFFFFF;

					width:24px;
					height:3px;

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

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

					-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);
					   -moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);
						-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);
						 -o-transform:translateX(-50%) translateY(-50%) rotate(45deg);
							transform:translateX(-50%) translateY(-50%) rotate(45deg);

					content:'';
				}

				.modal__close::after{
					width:3px;
					height:24px;
				}

			.modal__holder{
				width:100%;
				width:calc(100% - 40px);
				max-width:600px;
				height:auto;

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

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

				-webkit-transform:translateX(-50%) translateY(-50%);
				   -moz-transform:translateX(-50%) translateY(-50%);
					-ms-transform:translateX(-50%) translateY(-50%);
					 -o-transform:translateX(-50%) translateY(-50%);
						transform:translateX(-50%) translateY(-50%);
			}

			@media screen and (min-width:640px){
				.modal__holder{
					max-width:640px;
					max-width:600px;
				}
			}

			@media screen and (min-width:768px){
				.modal__holder{
					max-width:768px;
					max-width:728px;
				}
			}

			@media screen and (min-width:992px){
				.modal__holder{
					max-width:992px;
					max-width:952px;
				}
			}


			/* Videos */
			.modal__holder--video{
			}

			@media screen and (min-width:1200px){
				.modal__holder--video{
					max-width:1200px;
					max-width:1160px;
				}
			}

				.video__size{
					background-color:#0E0E0E;

					width:100%;
					height:0;

					display:block;
					position:relative;
					z-index:0;

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

				.video__player{
					width:100%;
					height:100%;

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

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

					.video__player iframe,
					.video__player object,
					.video__player video{
						width:100%;
						height:100%;

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

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

					.video__player object,
					.video__player video{
						-webkit-object-fit:cover;
						   -moz-object-fit:cover;
							-ms-object-fit:cover;
							 -o-object-fit:cover;
								object-fit:cover;
					}


			/* Text */
			.modal__holder--text{
				background-color:#FFFFFF;
				padding:20px;
			}

			@media screen and (min-width:640px){
				.modal__holder--text{
					padding:20px 50px;
				}
			}

				.modal__holder--text p,
				.modal__holder--text li{
					font-size:13px !important;
					line-height:1.35 !important;
				}


/* = Header
----------------------------------------------- */

	.AnnualReviewHeader{
		background-color:#00338D;

		width:100%;
		min-width:320px;
		height:57px;

		display:block;
		position:fixed;
		top:57px;
		left:0px;
		z-index:99;

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

		-webkit-box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.25);
		   -moz-box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.25);
				box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.25);
	}

	@media screen and (min-width:1100px){
		.AnnualReviewHeader{
			padding:0px 36px 0px 50px;
		}
	}


	/* -- Links ---------- */

		.AnnualReviewHeader__links{
			width:auto;
			height:57px;

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

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

				.AnnualReviewHeader__links::after{
					display:block;
					clear:both;
					content:'';
				}

				.AnnualReviewHeader__links a,
				.AnnualReviewHeader__links button{
					width:auto;
					height:37px;

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

					color:#FFFFFF !important;
					line-height:37px;

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

				.AnnualReviewHeader__links a:hover,
				.AnnualReviewHeader__links button:hover{
					opacity:0.75;
				}

				.AnnualReviewHeader__links button.sectionLaunchTool,
				.AnnualReviewHeader__links button.sectionBackToIntroduction{
					background-color:#0091DA;
				}

				.AnnualReviewHeader__links button.sectionBackToIntroduction{
					display:none;
				}

				.AnnualReviewHeader__links div{
					width:auto;
					height:auto;

					display:block;
					float:left;
				}

				@media screen and (max-width:639px){
					.AnnualReviewHeader__links div{
						display:none;
					}
				}

					.AnnualReviewHeader__links button.modalVideoOpen::before,
					.AnnualReviewHeader__links button.modalVideoOpen::after{
						background-color:rgba(255, 255, 255, 0.5);

						width:2px;
						height:16px;

						display:block;
						position:absolute;
						top:50%;

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

						content:'';
					}

					.AnnualReviewHeader__links button.modalVideoOpen::before{
						right:-1px;
					}

					.AnnualReviewHeader__links button.modalVideoOpen::after{
						left:-1px;
					}


	/* -- Menu Button ---------- */

		.AnnualReviewHeader__button{
			width:57px;
			height:57px;

			display:none;
			position:relative;
			float:right;
			z-index:20;

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

			.AnnualReviewHeader__button button{
				width:30px;
				height:30px;

				display:block;
				position:absolute;
				top:50%;
				left:50%;

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

				-webkit-transform:translateX(-50%) translateY(-50%);
				   -moz-transform:translateX(-50%) translateY(-50%);
					-ms-transform:translateX(-50%) translateY(-50%);
					 -o-transform:translateX(-50%) translateY(-50%);
						transform:translateX(-50%) translateY(-50%);
			}

				.AnnualReviewHeader__button button span:nth-child(1),
				.AnnualReviewHeader__button button span:nth-child(2),
				.AnnualReviewHeader__button button span:nth-child(3),
				.AnnualReviewHeader__button button.jsButtonActive span:nth-child(1),
				.AnnualReviewHeader__button button.jsButtonActive span:nth-child(2),
				.AnnualReviewHeader__button button.jsButtonActive span:nth-child(3) {
					background-color:#FFFFFF;

					width:100%;
					height:4px;

					display:block;
					position:absolute;

					-webkit-border-radius:1px;
					   -moz-border-radius:1px;
							border-radius:1px;

					opacity:1.0;

					-webkit-transition:top 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;
					   -moz-transition:top 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;
						-ms-transition:top 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;
						 -o-transition:top 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;
							transition:top 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;

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

					-webkit-transform-origin:center center;
					   -moz-transform-origin:center center;
						-ms-transform-origin:center center;
						 -o-transform-origin:center center;
							transform-origin:center center;
				}

					/* Normal State */
					.AnnualReviewHeader__button button span:nth-child(1){
						top:4px;
						left:0%;
					}

					.AnnualReviewHeader__button button span:nth-child(2){
						top:14px;
						left:50%;

						-webkit-transform:translateX(-50%);
						   -moz-transform:translateX(-50%);
							-ms-transform:translateX(-50%);
							 -o-transform:translateX(-50%);
								transform:translateX(-50%);
					}

					.AnnualReviewHeader__button button span:nth-child(3){
						top:24px;
						left:0%;
					}


					/* Active State */
					.AnnualReviewHeader__button button.jsButtonActive span:nth-child(1){
						top:14px;

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

					.AnnualReviewHeader__button button.jsButtonActive span:nth-child(2){
						width:0%;
						opacity:0;
					}

					.AnnualReviewHeader__button button.jsButtonActive span:nth-child(3){
						top:14px;

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


	/* -- Popout Menu ---------- */

		.AnnualReviewHeader__menu{
			background:#0091DA;

			width:100%;
			min-width:320px;
			height:100%;

			display:none;
			position:fixed;
			top:57px;
			left:0px;
			z-index:10;

			text-align:left;

			margin:0px auto;
			padding:34px 34px 50px 0px;
			border:0px none;
			
			overflow-y:auto;
		}

		@media screeen and (min-width:480px){
			.AnnualReviewHeader__menu{
				padding-right:0px;
			}
		}


			.AnnualReviewHeader__menu .CustomHTMLPage__container{
				padding-bottom:50px;
			}

			@media screen and (min-width:992px) and (min-height:640px){
				.AnnualReviewHeader__menu .CustomHTMLPage__container{
					position:absolute;
					top:50%;
					left:50%;

					margin-top:-70px;
					padding-bottom:0px;

					-webkit-transform:translateX(-50%) translateY(-50%);
					   -moz-transform:translateX(-50%) translateY(-50%);
						-ms-transform:translateX(-50%) translateY(-50%);
						 -o-transform:translateX(-50%) translateY(-50%);
							transform:translateX(-50%) translateY(-50%);
				}
			}


			.AnnualReviewHeader__menu h2{
				color:#FFFFFF;
			}


			/* Links */
			.AnnualReviewHeader__menu button{
				width:100%;
				height:auto;
				min-height:60px;

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

				color:#FFFFFF !important;
				/*font-size:12px;*/
				line-height:1.2;
				text-align:left;

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

			@media
			screen and (min-width:480px) and (max-width:991px){
				.AnnualReviewHeader__menu button{
					width:50%;
				}
				.AnnualReviewHeader__menu button:nth-child(2n+1){
					clear:both;
				}
			}

			@media
			screen and (min-width:992px){
				.AnnualReviewHeader__menu button{
					width:33.333333%;
				}
				.AnnualReviewHeader__menu button:nth-child(3n+1){
					clear:both;
				}
			}

			.AnnualReviewHeader__menu button:hover{
				opacity:0.75;
			}

				.AnnualReviewHeader__menu button img{
					width:60px;
					height:60px;

					display:block;
					position:absolute;
					left:20px;
					top:50%;

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

					-webkit-transform:translateY(-50%);
					   -moz-transform:translateY(-50%);
						-ms-transform:translateY(-50%);
						 -o-transform:translateY(-50%);
							transform:translateY(-50%);
				}

				.AnnualReviewHeader__menu button strong{
					display:block;
					font-size:15px;
				}

				.AnnualReviewHeader__menu button span{
					display:block;
				}


	/* -- Header Space ---------- */

		.AnnualReviewHeaderSpace{
			width:100%;
			height:55px;

			display:block;
			position:relative;

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


/* = Content
----------------------------------------------- */

	.AnnualReviewContent{
		background-color:#F0F0F0;

		width:100%;
		height:auto;

		display:block;
		position:relative;
		z-index:0;

		text-align:left;

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