@charset "UTF-8";
/* CSS Document */

/* ------------------------------------------------------- */
/* --------------- Quick colours ------------------------- */
/* ------------------------------------------------------- */

body {
	/* Primary colours */
	--c3-color-navy: #00358e;
	--c3-color-blue: #0086bf;
	--c3-color-pink: #d0006f;
	--c3-color-purple: #80276c;
	--c3-color-grey: #747576; /* Bear in mind that this is NOT base grey */
	/* Darker shades */
	--c3-color-navy-dark-30: #00286b;
	--c3-color-blue-dark-30: #0b79ac;
	--c3-color-pink-dark-30: #c40369;
	--c3-color-purple-dark-30: #72225f;
	--c3-color-grey-dark-30: #606162;
	--c3-color-navy-dark-60: #001b47;
	--c3-color-blue-dark-60: #13638c;
	--c3-color-pink-dark-60: #b1095f;
	--c3-color-purple-dark-60: #571848;
	--c3-color-grey-dark-60: #404040;
	/* Lighter tints */
	--c3-color-navy-light-30: #335da5;
	--c3-color-blue-light-30: #248dc4;
	--c3-color-pink-light-30: #da367e;
	--c3-color-purple-light-30: #982d79;
	--c3-color-grey-light-30: #97999b; /* This is actually base grey */
	--c3-color-navy-light-60: #859ec9;
	--c3-color-blue-light-60: #8dc8e8;
	--c3-color-pink-light-60: #df7aa7;
	--c3-color-purple-light-60: #b964a0;
	--c3-color-grey-light-60: #d4dce1;
	
}

/* ------------------------------------------------------------------------- */
/* ------------------- OVERRIDES (AND CORRECTIONS) ------------------------- */
/* ------------------------------------------------------------------------- */

*:has(.c3_style_overrides) {
	width: 100vw;
	max-width: 100vw;
	padding: 0;
	margin: 0;
}

.c3_style_overrides {
	
	h2, h3, h4 {
		color: white;
	}
	
	h2 {
		font-size: 1.5vw;
		line-height: 3vw;
		color: var(--c3-color-pink);
	}
	
	h3 {
		font-size: 4vw;
		line-height: 4vw;
		margin-bottom: 2vw !important;
	}
	
	h4, label {
		color: white;
		font-weight: 100;
		font-size: 1.5vw;
		line-height: 2.25vw;
		margin-bottom: 2vw !important;
	}
	
	.btn {
		padding: 1.3rem 3rem !important;
	}
	
	.btn:hover {
		text-decoration: none !important;
		background-color: white !important;
		color: var(--c3-color-navy) !important;
	}
	
}

/* ------------------------------------------------------- */
/* ------------------- STRUCTURAL ------------------------ */
/* ------------------------------------------------------- */

div#c3_div_data_explorer_1 {
	
	display: block;
	position: relative;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
	background-image: linear-gradient(120deg, var(--c3-color-navy-light-30), var(--c3-color-navy-dark-30));

	* {
		padding: 0;
		margin: 0;
	}
	
	article {
		display: block;
		position: relative;
		overflow: visible;
		width: 800vw;
		min-height: 33vw;
		transition: margin-left 1s ease;
	}
	
	.c3_question_container {
		display: block;
		position: relative;
		width: 67vw;
		float: left;
		padding: 4vw;
	}
	
	figure.c3_image_container {
		
		display: block;
		position: relative;
		float: left;
		width: 33vw;
		height: 33vw;;
		perspective: 500px;
		
		div.c3_image_flipper {
			display: block;
			position: relative;
			overflow: visible;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			transition: transform 1s ease;
		}
		
		div.c3_img_rotated {
			transform: rotate3d(0, 1, 0, 180deg);
		}
		
		.c3_img_front, .c3_img_back {
			position: absolute;
			width: 100%;
			height: 100%;
			-webkit-backface-visibility: hidden; /* Safari */
			backface-visibility: hidden;
		}

		.c3_img_back {
			transform: rotateY(180deg) scaleX(-1);
		}
	}
	
	img {
		display: block;
		position: absolute;
		width: 110%;
		height: 110%;
		max-width: 110%;
		left: -2vw;
		top: -2vw;
	}
	
	nav {
		display: block;
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-bottom: 2vw;
		
		ul {
			display: flex;
  			justify-content: center;
			list-style: none;
		}
		
		ul li {
			width: 5vw;
			height: 2px;
			margin-right: 10px;
		}
		
		ul li a {
			
			display: block;
			width: 100%;
			height: 0px;
			padding-top: 2px;
			overflow: hidden;
			background-color: rgba(255,255,255,0.3);
			
			&.c3_selected {
				background-color: var(--c3-color-pink);
			}
			
		}
		
	}
	
	form {
		
		text-align: left;
		margin-bottom: 6vw;
		
		label {
			display: block;
			margin-bottom: 2vw !important;
		}
		
		div.c3_div_input_container {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			padding-left: calc(7.5% - 1vw);
			padding-right: calc(7.5% - 1vw);
			margin-bottom: 3vw !important;
			z-index: 2;
		}
		
		input {
			display: block;
			width: 100%;
			background-color: var(--c3-color-grey);
			-webkit-appearance: none;
			height: 2px;
			position: relative;
		}
		
		input::-webkit-slider-thumb {
			-webkit-appearance: none;
			display: block;
			width: 2vw;
			height: 7vw;
			background-image: url("images/slider-pink.svg");
			background-size: 2vw auto;
			background-position: center 3.3vw;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		
		ul {
			
			display: flex;
  			justify-content: space-between;
			position: relative;
			height: auto;
			list-style: none;
			padding-top: 3vw;
			margin-top: -6vw;
			
			li {
				
				flex: 0 1 auto;
				font-size: 1vw;
				line-height: 1.5vw;
				width: 15%;
				text-align: center;
				color: white;
				padding-top: 3vw;
				background-image: url("images/slider-grey.svg");
				background-size: 2vw auto;
				background-position: center -0.25vw;
				background-repeat: no-repeat;
				
				a {
					display: block;
					color: white;
					text-decoration: none;
					
					&.c3_selected, &:hover {
						color: var(--c3-color-pink);
					}
				}
					
			}
			
		}
		
	}
}