/* Wrapper */

	#wrapper > header {
		padding: 11em 0 2.25em 0 ;
	}

		#wrapper > header .inner {
			margin: 0 auto;
			width: 55em;
		}

		#wrapper > header h2 {
			border-bottom: solid 2px rgba(255, 255, 255, 0.125);
			font-size: 2em;
			margin-bottom: 0.8em;
			padding-bottom: 0.4em;
		}

		#wrapper > header p {
			font-family: "Text1";
			font-size: 1em;
			font-weight: 200;
			letter-spacing: 0.1em;
			line-height: 2;
			text-transform: uppercase;
		}

	@media screen and (max-width: 1280px) {

		#wrapper > header {
			padding: 9em 0 6.25em 0 ;
			background-color: #2e3141;
			background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
			background-size: auto,
 cover;
			background-position: center,
 0% 30%;
			margin-bottom: -6.5em;
		}

	}

	@media screen and (max-width: 980px) {

		#wrapper > header {
			padding: 11em 3em 7.375em 3em ;
			background-size: auto,
 cover;
			background-position: center,
 0% 0%;
			margin-bottom: -4.75em;
		}

			#wrapper > header .inner {
				width: 100%;
			}

	}

	@media screen and (max-width: 736px) {

		#wrapper > header {
			padding: 6.5em 2em 3em 2em ;
			background-size: auto,
 125%;
			margin-bottom: -2.5em;
		}

			#wrapper > header h2 {
				font-size: 1.25em;
			}

			#wrapper > header p {
				font-size: 0.8em;
			}

	}

	.wrapper {
		background-color: var(--color-white); /*MAIN BACKGROUND*/
		margin: 6.5em 0;
		position: relative;
	}

		.wrapper:before, .wrapper:after {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141%3B' /%3E%3C/svg%3E");
		}

		.wrapper:before {
			box-shadow: inset 0 -1px 0 0 #2e3141, 0 1px 0 0 #2e3141;
		}

		.wrapper:after {
			box-shadow: inset 0 -1px 0 0 #2e3141, 0 1px 0 0 #2e3141;
		}

		.wrapper:before, .wrapper:after {
			background-repeat: no-repeat;
			background-size: 100% 100%;
			content: '';
			display: block;
			height: 6.5em;
			position: absolute;
			width: 100%;
		}

		.wrapper:before {
			left: 0;
			top: -6.5em;
		}

		.wrapper:after {
			-moz-transform: scaleY(-1);
			-webkit-transform: scaleY(-1);
			-ms-transform: scaleY(-1);
			transform: scaleY(-1);
			bottom: -6.5em;
			left: 0;
		}

		.wrapper.alt:before {
			-moz-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
		}

		.wrapper.alt:after {
			-moz-transform: scaleY(-1) scaleX(-1);
			-webkit-transform: scaleY(-1) scaleX(-1);
			-ms-transform: scaleY(-1) scaleX(-1);
			transform: scaleY(-1) scaleX(-1);
		}

		.wrapper .inner {
			padding: 3em 0 1em 0 ;
			margin: 0 auto;
			width: 55em;
		}

		.wrapper.style2 {
			background-color: #353849;
		}

			.wrapper.style2:before, .wrapper.style2:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E");
			}

			.wrapper.style2:before {
				box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849;
			}

			.wrapper.style2:after {
				box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849;
			}

		.wrapper.style3 {
			background-color: #3d4051;
		}

			.wrapper.style3:before, .wrapper.style3:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E");
			}

			.wrapper.style3:before {
				box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
			}

			.wrapper.style3:after {
				box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
			}

		.wrapper.style4 {
			background-color: #454858;
		}

			.wrapper.style4:before, .wrapper.style4:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E");
			}

			.wrapper.style4:before {
				box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858;
			}

			.wrapper.style4:after {
				box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858;
			}

		.wrapper.style5 {
			background-color: #4d5060;
		}

			.wrapper.style5:before, .wrapper.style5:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E");
			}

			.wrapper.style5:before {
				box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060;
			}

			.wrapper.style5:after {
				box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060;
			}

		.wrapper.style6 {
			background-color: #555867;
		}

			.wrapper.style6:before, .wrapper.style6:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E");
			}

			.wrapper.style6:before {
				box-shadow: inset 0 -1px 0 0 #555867, 0 1px 0 0 #555867;
			}

			.wrapper.style6:after {
				box-shadow: inset 0 -1px 0 0 #555867, 0 1px 0 0 #555867;
			}

/* WRAPPER COLOURS */
/* wrapper 1 - green dark */
		.wrapper.spotlight {
			background-color: var(--color-primary-green-dark);
		}

			.wrapper.spotlight:before, .wrapper.spotlight:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23688d4c%3B' /%3E%3C/svg%3E");
			}

			.wrapper.spotlight:before {
				box-shadow: inset 0 -1px 0 0 var(--color-primary-green-dark), 0 1px 0 0 var(--color-primary-green-dark);
			}

			.wrapper.spotlight:after {
				box-shadow: inset 0 -1px 0 0 var(--color-primary-green-dark), 0 1px 0 0 var(--color-primary-green-dark);
			}

/* wrapper 2 - green darker */
		.wrapper.spotlight.style2 {
			background-color: var(--color-primary-green-darker);
		}

			.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23608046%3B' /%3E%3C/svg%3E");
			}

			.wrapper.spotlight.style2:before {
				box-shadow: inset 0 -1px 0 0 var(--color-primary-green-darker), 0 1px 0 0 var(--color-primary-green-darker);
			}

			.wrapper.spotlight.style2:after {
				box-shadow: inset 0 -1px 0 0 var(--color-primary-green-darker), 0 1px 0 0 var(--color-primary-green-darker);
			}

/* wrapper 3 - green dark (same as 1) */
		.wrapper.spotlight.style3 {
			background-color: var(--color-primary-green-dark);
		}

			.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23688d4c%3B' /%3E%3C/svg%3E");
			}

			.wrapper.spotlight.style3:before {
				box-shadow: inset 0 -1px 0 0 var(--color-primary-green-dark), 0 1px 0 0 var(--color-primary-green-dark);
			}

			.wrapper.spotlight.style3:after {
				box-shadow: inset 0 -1px 0 0 var(--color-primary-green-dark), 0 1px 0 0 var(--color-primary-green-dark);
			}

/* wrapper 4 - white */
		.wrapper.spotlight.style4 {
			background-color: var(--color-white);
		}

			.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23ffffff%3B' /%3E%3C/svg%3E");
			}

			.wrapper.spotlight.style4:before {
				box-shadow: inset 0 -1px 0 0 #ffffff, 0 1px 0 0 #ffffff;
			}

			.wrapper.spotlight.style4:after {
				box-shadow: inset 0 -1px 0 0 #ffffff, 0 1px 0 0 #ffffff;
			}

		.wrapper.spotlight.style5 {
			background-color: #324072;
		}

			.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E");
			}

			.wrapper.spotlight.style5:before {
				box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072;
			}

			.wrapper.spotlight.style5:after {
				box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072;
			}

		.wrapper.spotlight.style6 {
			background-color: #2d3a69;
		}

			.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E");
			}

			.wrapper.spotlight.style6:before {
				box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
			}

			.wrapper.spotlight.style6:after {
				box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
			}

		#four:before, #four:after {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23ffffff%3B' /%3E%3C/svg%3E");
		}

		#four:before {
			box-shadow: inset 0 -1px 0 0 #ffffff, 0 1px 0 0 #ffffff;
		}

		#four:after {
			box-shadow: inset 0 -1px 0 0 #ffffff, 0 1px 0 0 #ffffff;
		}

	@media screen and (max-width: 980px) {

		.wrapper {
			margin: 4.75em 0;
		}

			.wrapper:before, .wrapper:after {
				height: 4.75em;
			}

			.wrapper:before {
				top: -4.75em;
			}

			.wrapper:after {
				bottom: -4.75em;
				left: 0;
			}

			.wrapper .inner {
				padding: 3em 3em 1em 3em ;
				width: 100%;
			}

	}

	@media screen and (max-width: 736px) {

		.wrapper {
			margin: 2.5em 0;
		}

			.wrapper:before, .wrapper:after {
				height: 2.5em;
			}

			.wrapper:before {
				top: -2.5em;
			}

			.wrapper:after {
				bottom: -2.5em;
				left: 0;
			}

			.wrapper .inner {
				padding: 2em 2em 0.1em 2em ;
			}

	}

	@media screen and (max-width: 360px) {

		.wrapper .inner {
			padding: 2em 1.5em 0.1em 1.5em ;
		}

	}