/*
@import url("https://www.thetimes.co.uk/fonts/TimesModern-Bold.css");
@import url("https://www.thetimes.co.uk/fonts/TimesModern-Light.css");
*/

@import url(https://fonts.timesdev.tools/fonts/TimesDigital-RegularSC.css);
@import url(https://fonts.timesdev.tools/fonts/TimesDigital-Regular.css);
@import url(https://fonts.timesdev.tools/fonts/TimesDigital-Bold.css);

@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Light.css);
@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Medium.css);
@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Bold.css);

/*
@import url("https://www.thetimes.co.uk/fonts/TimesDigital-RegularSC.css");
@import url("https://www.thetimes.co.uk/fonts/TimesDigital-Regular.css");
@import url("https://www.thetimes.co.uk/fonts/TimesDigital-Bold.css");

@import url("https://www.thetimes.co.uk/fonts/GillSansW01-Light.css");
@import url("https://www.thetimes.co.uk/fonts/GillSansW01-Medium.css");
@import url("https://www.thetimes.co.uk/fonts/GillSansW01-Bold.css");
*/

/*

pink 						rgb(252,62,170);

dark pink 1				rgb(236,58,159);
dark pink 2				rgb(221,54,149);

light pink 1			rgb(253,110,191);
light pink 2			rgb(254,159,213);
light pink 3			rgb(254,207,234);

blue 						rgb(78,208,240);

dark blue 1				rgb(73,195,225);
dark blue 2				rgb(68,183,211);

light blue 1			rgb(122,220,244);
light blue 2			rgb(167,232,248);
light blue 3			rgb(211,243,251);

white 						rgb(255,255,255);

dark white 1				rgb(239,239,239);
dark white 2				rgb(224,224,224);


*/

/* ----- GENERAL LAYOUT ----- */

html {
    font-size: 62.5%;
}

body {
	width: 100%;
}

div.page {
	width: 100%;
}

div.page > div.container {
	max-width: 1200px;
	margin: 0 auto;
}

div.container > div.column {
	width: calc(100% - 20px);
	margin: 0 auto;
	padding: 0 10px;
	height: 100%;
}

div.header {
	font-family: "TimesDigital-Bold";
}

div.intro {
	font-family: "TimesDigital-Regular";
}

div.topline {
	font-family: "TimesDigital-RegularSC";
	text-transform: lowercase;
}

div.visualisation div.label, div.visualisation div.col-head, div.vis.page div.keyblock {
	font-family: "GillSansW01-Medium";
}

div.visualisation div.label div.value {
	font-family: "GillSansW01-Bold";
}

/*SMALL SCREEN*/
	
div.title.page div.headblock div.header {
	font-size: 3rem;
	line-height: 3rem;
	margin-top: 1.5rem;
}

div.title.page div.headblock div.header:not(:last-child) {
	margin-bottom: 1.5rem;
}

div.title.page div.headblock div.intro {
	font-size: 1.7rem;
	line-height: 2rem;
}	

div.title.page div.headblock div.topline {
	font-size: 1.2rem;
	line-height: 1.6rem;
}	

div.page:not(.title) div.headblock div.header {
	font-size: 2rem;
	line-height: 2.4rem;
}

div.page:not(.title) div.headblock div.header:not(:last-child) {
	margin-bottom: 1.2rem;
}	

div.page:not(.title) div.headblock div.intro, div.visualisation, div.keyblock, div.footblock {
	font-size: 1.55rem;
	line-height: 2rem;
	
}

div.page:not(.title) div.headblock div.intro, div.visualisation div.label {
	margin-bottom: 1rem;
}

/*LARGE SCREEN*/

@media (min-width: 768px) {
	
	
	div.container > div.column {
		max-width: calc((100% - 20px) * (10/12));
	}
	
	div.title.page div.headblock div.header {
		font-size: 4.5rem;
		line-height: 5rem;
	}	
	
	div.title.page div.headblock div.intro {
		font-size: 2rem;
		line-height: 2.4rem;
	}	
	
	div.title.page div.headblock div.topline {
		font-size: 1.55rem;
		line-height: 1.3rem;
		margin-bottom: 1.5rem;
	}	
	
	div.page:not(.title) div.headblock div.header {
		font-size: 2rem;
		line-height: 2.4rem;
	}
	
	div.page:not(.title) div.headblock div.header:not(:last-child) {
		margin-bottom: 1.2rem;
	}	
	
	div.page:not(.title) div.headblock div.intro, div.footblock {
		font-size: 1.8rem;
		line-height: 2rem;
	}	
	
}


/* ----- BESPOKE STYLES ----- */

#page-content {
	/* allow space for Callum's nav bar */
	margin-top: 40px;	
}

div.page.vis {
	color: rgb(29,29,27);
}

div.page.vis:nth-child(2n+1) div.headblock div.header {
	color: rgb(252,62,170);
}

div.page.vis:nth-child(2n) div.headblock div.header {
	color: rgb(78,208,240);
}

div.page.vis:nth-child(2n) div.headblock div.header:before  {
	content:' ';
	border:1px solid rgb(78,208,240);
	display:block;
}

div.page.vis div.headblock div.header:before {
	margin: 0 0 1rem;
	width: 10rem;
}


@media (min-width: 768px) {
	
	div.page.vis div.headblock div.header:before {
		margin: 0 auto 1rem;
		width: calc(100% * (1/3));
	}
}

div.page.vis:nth-child(2n+1) div.headblock div.header:before  {
	content:' ';
	border:1px solid rgb(252,62,170);
	display:block;
}

div.page.pullout, div.page.title  {
	color: #ffffff;
}

div.page.title div.container {	
	background-image: url(assets/title-background.png);
	background-size: cover;
	background-repeat: no-repeat;
}

div.page.title, div.page.pullout:nth-child(2n+1) {
	background-color: rgb(236,58,159);
}

div.page.title > div.container, div.page.pullout:nth-child(2n+1) > div.container  {
	background-color: rgb(252,62,170);
}


div.page.pullout:nth-child(2n) {
	background-color: rgb(73,195,225);
}

div.page.pullout:nth-child(2n) > div.container {
	background-color: rgb(78,208,240);
}


div.page:not(.title):not(.pullout) {
	background-color: rgb(239,239,239);
}
div.page:not(.title):not(.pullout) > div.container {
	background-color: rgb(255,255,255);
}



div.footblock {
	font-family: "GillSansW01-Medium";
}

div.vis.page {
	display: inline-block;
}

div.vis.page div.visualisation {
	width: 100%;
	display: inline-block;
}

div.vis.page div.visualisation:last-child {
	margin-bottom: 4rem;
}

div.vis.page div.visualisation:not(:last-child) {
	margin-bottom: 2rem;
}

div.headblock {
	width: 100%;
}

/*SMALL SCREEN*/

div.headblock, div.footblock {
	padding: 0 0 2rem;
}

div.title + div.vis, div.pullout + div.vis {
	margin-top: 4rem;
}

div.page:not(.vis) div.headblock {
	max-width: 30rem;
	padding: 60px;
	margin: 0 auto;
	width: calc(100% - 120px);	
	text-align: center;
}

div.barchart {
	display: inline-block;
	width: 100%;
}

div.visualisation.barchart > div.vis-col > div.vis-group:not(:last-child) {
	width: 100%;
	margin-bottom: 1rem;
}

div.visualisation.barchart > div.vis-col div.col-head {
	text-transform: uppercase;
	margin-bottom: 1rem;
}
div.visualisation.barchart > div.vis-col div.col-head:not(:first-child) {
	margin-top: 3rem;
}

div.visualisation.barchart div.label div.value {
	display: inline;
	padding-left: 0.5rem;
}

div.visualisation.barchart div.vis-table div.vis-group:not(:last-child) {
	border-bottom: 0.1rem solid;
}

div.visualisation.barchart div.vis-table div.vis-group:first-child div.label {
	margin: 0 0 0.45rem;	
}

div.visualisation.barchart div.vis-table div.value {
	//width: 20%;
	float: right;
}

div.visualisation.barchart div.vis-table div.vis-group:not(:first-child) div.label {
	margin: 0.45rem 0;	
}

div.page.vis:nth-child(2n+1) div.visualisation.barchart div.bar {
	background-color: rgba(240,240,240,1);
}

div.page.vis:nth-child(2n+1) div.visualisation.barchart div.bar div.data-bar {
	height: 100%;
	background-color: rgba(252,62,170,1);
}

div.page.vis:nth-child(2n) div.visualisation.barchart div.bar {
	background-color: rgba(240,240,240,1);
}

div.page.vis:nth-child(2n) div.visualisation.barchart div.bar div.data-bar {
	height: 100%;
	background-color: rgba(78,208,240,1);
}




/*LARGE SCREEN*/

@media (min-width: 768px) {
	
	div.title + div.vis, div.pullout + div.vis {
		margin-top: 0;
	}

	div.headblock, div.footblock {
		padding: 4rem 0 2rem;
	}

	
	
	div.headblock {
		max-width: calc(100% * (3/7));
	}
	
	div.headblock, div.footblock {
		text-align: center;
		margin: 0 auto;
	}
	
	div.title.page div.headblock, div.pullout.page div.headblock {
		position: relative;
		transform: translate(-50%,-50%);
		top: 50%;
		left: 50%;
		margin: 0;
	}
	
	div.vis.page div.visualisation {
		//display: block;
	}
	
	div.visualisation > div.vis-col {
		width: calc(100% * (3/7));
		float: left;
		height: 100%;
		//background-color: rgba(255,255,255,0.25);
	}

	div.visualisation > div.vis-col:nth-child(2n) {
		margin-left: 	calc(100% * (1/7));
	}
	

	
}

/* ----- KEYS ----- */

div.vis.page div.keyblock {
	margin: 0 0 4rem;
}

@media (min-width: 768px) {

	div.vis.page div.keyblock {
		text-align: center;
	}
	
}

div.vis.page div.keyblock div.key {
	display: inline-block;
	margin-right: 1rem;
}

div.vis.page div.keyblock div:before {
	content:' ';
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin: 0 1rem 0.1rem 0;
	border-radius: 50%;
}

div.vis.page:nth-child(2n+1) div.keyblock div.key:nth-child(1):before {
	background-color: rgba(252,62,170,1);
}

div.vis.page:nth-child(2n+1) div.keyblock div.key:nth-child(2):before {
	background-color: rgba(254,207,234,1);
}

div.vis.page:nth-child(2n+1) div.keyblock div.key:nth-child(3):before {
	background-color: rgba(78,208,240,1);
}

div.vis.page:nth-child(2n+1) div.keyblock div.key:nth-child(4):before {
	background-color: rgba(211,243,251,1);
}

div.vis.page:nth-child(2n) div.keyblock div.key:nth-child(1):before {
	background-color: rgba(78,208,240,1);
}

div.vis.page:nth-child(2n) div.keyblock div.key:nth-child(2):before {
	background-color: rgba(211,243,251,1);
}

div.vis.page:nth-child(2n) div.keyblock div.key:nth-child(3):before {
	background-color: rgba(252,62,170,1);
}

div.vis.page:nth-child(2n) div.keyblock div.key:nth-child(4):before {
	background-color: rgba(254,207,234,1);
}


/* ----- CHARTS ----- */

div.visualisation.linechart, div.visualisation.columnchart {
	padding-top: 2.5rem;	/* add padding to fit the top y axis lables in to */
	padding-bottom: 2.5rem;	/* add padding to fit x axis lables in to */
}

div.visualisation .axis {
	font-family: "GillSansW01-Medium";
}

div.visualisation.linechart .label, div.visualisation.columnchart .label {
	font-family: "GillSansW01-Bold";
	letter-spacing: -0.02em;
}

div.visualisation .axis text {
	fill: rgb(29,29,27);
}

.axis path {
  display: none;
}

.axis line {
  shape-rendering: crispEdges;
  stroke: rgb(29,29,27);
}

div.page.vis:nth-child(2n+1) path.line:nth-of-type(1), div.page.vis:nth-child(2n) path.line:nth-of-type(3) {
  stroke: rgba(252,62,170,1);
}

div.page.vis:nth-child(2n) path.line:nth-of-type(1), div.page.vis:nth-child(2n+1) path.line:nth-of-type(3) {
  stroke: rgba(78,208,240,1);
}

div.page.vis:nth-child(2n+1) circle, div.page.vis:nth-child(2n+1) div.visualisation.columnchart rect {
  fill: rgba(252,62,170,1);
}

div.page.vis:nth-child(2n+1) path.line:nth-of-type(2), div.page.vis:nth-child(2n) path.line:nth-of-type(4) {
  stroke: rgba(254,207,234,1)
}

div.page.vis:nth-child(2n) circle, div.page.vis:nth-child(2n)  div.visualisation.columnchart rect {
  fill: rgba(78,208,240,1);
}

div.page.vis:nth-child(2n) path.line:nth-of-type(2), div.page.vis:nth-child(2n+1) path.line:nth-of-type(4) {
  stroke: rgba(211,243,251,1);
}

.axis .minor line {
  stroke: rgba(29,29,27,0.25);
  stroke-dasharray: 2,2;
}