/* editor */
.large-paragraph {
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: 1.1em;
}


.alignleft {
	float: left;
	margin: 0 1em 0 0;
}
.alignright {
	float: right;
	margin: 0 0 0 1em;
}


.highlight,
.highlight-green {
	color: #80bc00;
}
.highlight-blue {
	color: #009ade;
}
.highlight-purple {
	color: #802489;
}
.highlight-orange {
	color: #e78500;
}
.highlight a,
.highlight-green a,
.highlight-blue a,
.highlight-purple a {
	color: inherit;
	text-decoration: underline;
}


/*.download-link {
	color: inherit;
	display: block;
	font-size: 1.1em;
	margin: 1em 0;
	padding: .5em 0;
}
	.download-link:before {
		background: url('images/download-icon.svg') center/contain no-repeat transparent;
		content: '';
		display: inline-block;
		margin: 0 .5em 0 0;
		vertical-align: bottom;
		width: 1.3em; height: 1.5em;
	}*/
.download-link {
	background: #FFFFFF;
	border-radius: .3em;
	color: #1d1d1b;
	display: block;
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: 1.3rem;
	margin: .4em 0;
	padding: .5em 2em .5em .8em;
	position: relative;
	text-decoration: none;
	text-transform: none;
}
	.download-link:after {
		background: url('images/download-icon.svg') center/contain no-repeat transparent;
		content: '';
		display: inline-block;
		/*margin: 0 .5em 0 0;*/
		position: absolute; right: .3em; top: .3em;
		vertical-align: bottom;
		width: 1.3em; height: 1.5em;
	}
a.download-link:hover,
a.download-link:focus {
	background: #1d1d1b;
	color: #FFFFFF;
	text-decoration: none;
}
	a.download-link:hover:after,
	a.download-link:focus:after {
		background-image: url('images/download-icon-white.svg')
	}


blockquote {
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: .5em 3%;
	text-align: center;
}


.block-link {
	background: #555555;
	display: inline-block;
	padding: 5px;
}
input[type="submit"].green,
.block-link.green {
	background-color: #80bc00;
	/*border-color: #80bc00;*/ border: 0;
	color: #FFFFFF;
}
input[type="submit"].blue,
.block-link.blue {
	background-color: #009ade;
	/*border-color: #009ade;*/ border: 0;
	color: #FFFFFF;
}
input[type="submit"].purple,
.block-link.purple {
	background-color: #802489;
	/*border-color: #802489;*/ border: 0;
	color: #FFFFFF;
}
input[type="submit"].orange,
.block-link.orange {
	background-color: #e78500;
	/*border-color: #e78500;*/ border: 0;
	color: #FFFFFF;
}


.format-text ul.tick-list {
	list-style-type: none;
	margin: 1em 0 2em;
	padding: 0;
}
	.format-text ul.tick-list li,
	.format-text p.tick-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		min-height: 2em;
		margin: 0 0 1em;
		padding-right: 1em; padding-left: 3em;
		position: relative;
	}
		.format-text ul.tick-list li:before,
		.format-text p.tick-list:before {
			background: url('images/tick-icon-blue.svg') center/contain no-repeat transparent;
			content: '';
			display: block;
			position: absolute; left: 0; top: 0;
			width: 2em; height: 2em;
		}




/* text and element colour for dark backgrounds */
.white-text input[type="submit"],
.white-text button,
.white-text .block-link,
.blue-background input[type="submit"], 
.blue-background button,
.blue-background .block-link,
.green-background input[type="submit"], 
.green-background button,
.green-background .block-link,
.orange-background input[type="submit"], 
.orange-background button,
.orange-background .block-link,
.purple-background input[type="submit"], 
.purple-background button,
.purple-background .block-link,
.splats-background input[type="submit"], 
.splats-background button,
.splats-background .block-link,
.blue-brush-background input[type="submit"], 
.blue-brush-background button,
.blue-brush-background .block-link,
.text-hover input[type="submit"], 
.text-hover button,
.text-hover .block-link,
.team-hover input[type="submit"], 
.team-hover button,
.team-hover .block-link {
	border-color: #f2f2f2;
	color: inherit;
}
.white-text .highlight, .white-text .highlight-green, .white-text .highlight-blue, .white-text .highlight-purple, .white-text .highlight-orange,
.blue-background .highlight, .blue-background .highlight-green, .blue-background .highlight-blue, .blue-background .highlight-purple, .blue-background .highlight-orange,
.green-background .highlight, .green-background .highlight-green, .green-background .highlight-blue, .green-background .highlight-purple, .green-background .highlight-orange,
.orange-background .highlight, .orange-background .highlight-green, .orange-background .highlight-blue, .orange-background .highlight-purple, .orange-background .highlight-orange,
.purple-background .highlight, .purple-background .highlight-green, .purple-background .highlight-blue, .purple-background .highlight-purple, .purple-background .highlight-orange,
.splats-background .highlight, .splats-background .highlight-green, .splats-background .highlight-blue, .splats-background .highlight-purple, .splats-background .highlight-orange,
.blue-brush-background .highlight, .blue-brush-background .highlight-green, .blue-brush-background .highlight-blue, .blue-brush-background .highlight-purple, .blue-brush-background .highlight-orange,
.text-hover-background .highlight, .text-hover-background .highlight-green, .text-hover-background .highlight-blue, .text-hover-background .highlight-purple, .text-hover-background .highlight-orange,
.team-hover-background .highlight, .team-hover-background .highlight-green, .team-hover-background .highlight-blue, .team-hover-background .highlight-purple, .team-hover-background .highlight-orange {
	color: inherit;
	opacity: .8;
	/*text-decoration: underline;*/
}
.white-text a:not([class]),
.blue-background a:not([class]),
.green-background a:not([class]),
.orange-background a:not([class]),
.purple-background a:not([class]),
.splats-background a:not([class]),
.blue-brush-background a:not([class]),
.text-hover a:not([class]),
.team-hover a:not([class]) {
	color: inherit;
	text-decoration: underline;
}
.format-text .white-text ul.tick-list li:before,
.format-text .white-text p.tick-list:before,
.format-text .blue-background ul.tick-list li:before,
.format-text .blue-background p.tick-list:before,
.format-text .green-background ul.tick-list li:before,
.format-text .green-background p.tick-list:before,
.format-text .orange-background ul.tick-list li:before,
.format-text .orange-background p.tick-list:before,
.format-text .purple-background ul.tick-list li:before,
.format-text .purple-background p.tick-list:before,
.format-text .splats-background ul.tick-list li:before,
.format-text .splats-background p.tick-list:before,
.format-text .blue-brush-background ul.tick-list li:before,
.format-text .blue-brush-background p.tick-list:before,
.format-text .text-hover ul.tick-list li:before,
.format-text .text-hover p.tick-list:before,
.format-text .team-hover ul.tick-list li:before,
.format-text .team-hover p.tick-list:before {
	background-image: url('images/tick-icon-white.svg');
}




/* other */
.torn-image img,
img.torn-image {
	/*mask: url('images/tear_mask.png') luminance center/100% 100% no-repeat;*/ /* as of July '18, only Firefox supports this */
}

.torn-image-outer {
	position: relative;
}
.torn-image-outer:after,
.text-hover:after,
.team-hover:after {
	background: center/100% 100% no-repeat transparent;
	content: '';
	display: block;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 403;
}
.blue-background .torn-image-outer:after,
.blue-background .text-hover:after,
.blue-background .team-hover:after {
	background-image: url('images/torn-frames/blue_torn.png');
}
.green-background .torn-image-outer:after,
.green-background .text-hover:after,
.green-background .team-hover:after  {
	background-image: url('images/torn-frames/green_torn.png');
}
.orange-background .torn-image-outer:after,
.orange-background .text-hover:after,
.orange-background .team-hover:after {
	background-image: url('images/torn-frames/orange_torn.png');
}
.grey-background .torn-image-outer:after,
.grey-background .text-hover:after,
.grey-background .team-hover:after {
	background-image: url('images/torn-frames/grey_torn.png');
}
.blue-splats-background .torn-image-outer:after,
.blue-splats-background .text-hover:after,
.blue-splats-background .team-hover:after {
	background-image: url('images/torn-frames/blue_torn.png');
}
.cream-texture-background .torn-image-outer:after,
.cream-texture-background .text-hover:after,
.cream-texture-background .team-hover:after {
	background-image: url('images/torn-frames/cream_texture_torn.png');
}
.white-grain-background .torn-image-outer:after,
.white-grain-background .text-hover:after,
.white-grain-background .team-hover:after {
	background-image: url('images/torn-frames/white_grain_torn.png');
}
.blue-brush-background .torn-image-outer:after,
.blue-brush-background .text-hover:after,
.blue-brush-background .team-hover:after {
	background-image: url('images/torn-frames/blue_torn.png');
}



/*  */
.text-hover {
	display: flex;
	align-items: center;
	justify-content: center;
	
	background: rgba(0,0,0,.35);
	color: #FFFFFF;
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: .8em;
	overflow: hidden;
	padding: .5em 10%;
	pointer-events: none;
	position: absolute; top: 0; right: 0; bottom: 30px; left: 0;
	text-align: center; 
	z-index: 403;
	
	/*mask: url('images/tear_mask.png') luminance center/100% 100% no-repeat;*/ /* as of July '18, only Firefox supports this */
}
	.text-hover > div {
		
	}
		.text-hover h2 {
			font-size: 2em;
		}
		.text-hover a {
			pointer-events: initial;
		}
		.text-hover p {
			display: none;
		}
		.text-hover p:last-child {
			margin-bottom: 0;
		}
.panel-grid-cell:hover > div > .text-hover,
.panel-grid-cell:focus > div > .text-hover {
	background: rgba(0, 76, 145, .7);
}
		.panel-grid-cell:hover > div > .text-hover p,
		.panel-grid-cell:focus > div > .text-hover p {
			display: block;
		}

.panel-grid-cell:hover > div > .text-hover.orange,
.panel-grid-cell:focus > div > .text-hover.orange {
	background: rgba(208, 117, 0, .7);
}
.panel-grid-cell:hover > div > .text-hover.green,
.panel-grid-cell:focus > div > .text-hover.green {
	background: rgba(128, 188, 0, .7);
}
.panel-grid-cell:hover > div > .text-hover.purple,
.panel-grid-cell:focus > div > .text-hover.purple {
	background: rgba(105, 63, 127, .7);
}


	.text-hover .block-link:hover,
	.text-hover .block-link:focus {
		background-color: #FFFFFF;
		border-color: #FFFFFF;
		color: #009ade;
	}
	.text-hover.green .block-link:hover,
	.text-hover.green .block-link:focus {
		background-color: #FFFFFF;
		border-color: #FFFFFF;
		color: #80bc00;
	}
	.text-hover.purple .block-link:hover,
	.text-hover.purple .block-link:focus {
		background-color: #FFFFFF;
		border-color: #FFFFFF;
		color: #802489;
	}
	.text-hover.orange .block-link:hover,
	.text-hover.orange .block-link:focus {
		background-color: #FFFFFF;
		border-color: #FFFFFF;
		color: #e78500;
	}


.team-hover {
	display: flex;
	align-items: center;
	justify-content: center;
	
	background: rgba(0, 0, 0, .8);
	color: #FFFFFF;
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: .75em;
	overflow: hidden;
	padding: 1em 10%;
	pointer-events: none;
	position: absolute; right: 0; bottom: 0px; left: 0;
	text-align: center; 
	z-index: 403;
	
	/*mask: url('images/tear_mask.png') luminance center/100% 100% no-repeat;*/ /* as of July '18, only Firefox supports this */
}
	.team-hover > div {
		
	}
		.team-hover h2 {
			font-size: 1em;
			margin: 0;
		}
		.team-hover a {
			pointer-events: initial;
		}
		.team-hover p {
			display: none;
		}
		.team-hover p:last-child {
			margin-bottom: 0;
		}
.panel-grid-cell:hover > div > .team-hover,
.panel-grid-cell:focus > div > .team-hover {
	top: 0;
}
		.panel-grid-cell:hover > div > .team-hover h2,
		.panel-grid-cell:focus > div > .team-hover h2 {
			margin-bottom: .5em;
			padding-bottom: .5em;
			position: relative;
		}
			.panel-grid-cell:hover > div > .team-hover h2:after,
			.panel-grid-cell:focus > div > .team-hover h2:after {
				border-bottom: 1px solid #FFFFFF;
				content: '';
				display: block;
				position: absolute; left: 40%; bottom: 0;
				width: 20%;
			}
		.panel-grid-cell:hover > div > .team-hover p,
		.panel-grid-cell:focus > div > .team-hover p {
			display: block;
		}



/*  */
.banner-heading {
	color: #FFFFFF;
	display: table; /* display: inline-block */
	font-size: 1em;
	line-height: 1em;
	margin: 1em auto;
	padding: .7em .7em .5em;
	text-align: center;
	-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg);
	/*position: absolute; left: 50%; top: 0;
	-webkit-transform: rotate(-5deg) translateX(-50%); -moz-transform: rotate(-5deg) translateX(-50%); -o-transform: rotate(-5deg) translateX(-50%); transform: rotate(-5deg) translateX(-50%);*/
	/*white-space: nowrap;*/
	z-index: 1;
}
	.banner-heading small {
		font-size: .47em;
		white-space: initial;
	}
	.banner-heading:before,
	.banner-heading:after {
		content: '';
		display: block;
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
	}
	.banner-heading:before {
		background: url('images/banner_heading_bg_green.png') center/100% 100% no-repeat transparent;
		z-index: -1;
	}
	.banner-heading:after {
		background: #FFFFFF;
		left: 3%;
		-webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg);
		width: 94%;
		z-index: -2;
	}
	
	.banner-heading.blue:before {
		background-image: url('images/banner_heading_bg_blue.png');
	}
	.banner-heading.purple:before {
		background-image: url('images/banner_heading_bg_purple.png');
	}
	.banner-heading.orange:before {
		background-image: url('images/banner_heading_bg_orange.png');
	}
	.banner-heading.brown:before {
		background-image: url('images/banner_heading_bg_brown.png');
	}

.banner-heading + p,
.banner-heading + h2,
.banner-heading + h3,
.banner-heading + h4,
.banner-heading + h5,
.banner-heading + h6 {
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: .7rem;
	font-weight: normal;
	margin: 1em 0;
	padding: 0 2%;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg);
}







/* overlay an image banner */
.overlay-image {
	animation: arrow-down-bounce 1s; -webkit-animation: arrow-down-bounce 1s; 
	animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	
	background: url('images/hr-arrow-down-white.svg') center bottom 6%/4% auto no-repeat rgba(29,29,27,.4);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	/*pointer-events: none;*/
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	z-index: 404;
}
.soliloquy-container.arrow-down {
	
}
	.soliloquy-container.arrow-down:before {
		animation: arrow-down-bounce 1s; -webkit-animation: arrow-down-bounce 1s; 
		animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	
		background: url('images/hr-arrow-down-white.svg') center bottom 6%/4% auto no-repeat transparent;
		content: '';
		display: block;
		pointer-events: none;
		position: absolute; right: 0; bottom: 0; left: 0;
		width: 100%; height: 100%;
		z-index: 10;
	}

.overlay-top {
	padding-top: 3%;
	pointer-events: none;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	z-index: 404;
}

.green-scheme-overlay-bottom {
	padding-bottom: 3%;
	pointer-events: none;
	position: absolute; right: 0; bottom: 0; left: 0;
	width: 100%; 
	z-index: 404;
}
	.green-scheme-overlay-bottom * {
		pointer-events: initial;
	}
	.green-scheme-overlay-bottom:after {
		animation: sign-swing 2s; -webkit-animation: sign-swing 2s; 
		animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
		
		transform-origin: bottom center;
		
		background: url('images/illustrations/beware-sign.svg') center bottom/contain no-repeat transparent;
		content: '';
		display: block;
		position: absolute; right: 5%; bottom: 0;
		width: 18%; height: 18em;
	}