/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/

.alternate-color section:nth-child(2n) {
	background-color: var(--background-alternate);
}

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

section {
	background-color: var(--background);

	/*flex requirement*/
	display: -webkit-inline-flex;
	display: -moz-inline-flexbox;
	display: -ms-inline-flexbox;
	display: -o-inline-flexbox;
	display: inline-flex;

	width: 100%;

	-webkit-justify-content: space-between;
	   -moz-justify-content: space-between;
	    -ms-justify-content: space-between;
	     -o-justify-content: space-between;
	        justify-content: space-between;

	-webkit-flex-flow: row wrap;
	   -moz-flex-flow: row wrap;
	    -ms-flex-flow: row wrap;
	     -o-flex-flow: row wrap;
	        flex-flow: row wrap;
}

/* Desktop */
/* 950px width + 220px header width + 30px padding */
@media screen and (min-width: 920px) {
	section {
		width: 100%;
		padding: 15px calc(50% - 330px) !important;
	}
}

/* Mobile */
/* 950px width + 220px header width + 30px padding */
@media screen and (max-width: 920px) {
	section {
		width: 100%;
		padding: 15px;
	}
}

/*--------------------------------------------------*/
/*	WEBPAGE AND SECTION TITLE BARS
/*--------------------------------------------------*/

.webpage-intro,
.section-intro {
	width: 100%;
	padding-bottom: 15px;
}

.webpage-intro {
	border-bottom: 1px solid var(--underline);
	margin-bottom: 15px;
}

.section-intro {
	margin-top: 30px;
}

.webpage-intro > *:nth-child(1),
.section-intro > *:nth-child(1) {
	line-height: 32px;
}

.webpage-intro > *:nth-child(2),
.section-intro > *:nth-child(2) {
	line-height: 12px;
}

.webpage-intro > *:nth-child(3),
.section-intro > *:nth-child(3) {
	position: absolute;
	top: 0;
	right: 0;

	height: 44px;
}

.webpage-intro > *:nth-child(3),
.section-intro > *:nth-child(3) {
	display: flex;

	-webkit-justify-content: end;
	   -moz-justify-content: end;
	    -ms-justify-content: end;
	     -o-justify-content: end;
	        justify-content: end;
}

.webpage-intro > *:nth-child(3) > *:nth-child(n+2),
.section-intro > *:nth-child(3) > *:nth-child(n+2) {
	margin-left: 10px;
}

/* Desktop */
/* same as grid */
@media screen and (min-width: 700px) {
	.webpage-intro > *:nth-child(1),
	.section-intro > *:nth-child(1),
	.webpage-intro > *:nth-child(2),
	.section-intro > *:nth-child(2) {
		width: 75%;
	}

	.webpage-intro > *:nth-child(3),
	.section-intro > *:nth-child(3) {
		width: 25%;
	}
}

/* Mobile */
/* same as grid */
@media screen and (max-width: 700px) {
	.webpage-intro > *:nth-child(1),
	.section-intro > *:nth-child(1),
	.webpage-intro > *:nth-child(2),
	.section-intro > *:nth-child(2) {
		width: 50%;
	}

	.webpage-intro > *:nth-child(3),
	.section-intro > *:nth-child(3) {
		width: 50%;
	}
}

/*--------------------------------------------------*/
/*	SECTION BACKDROPS
/*--------------------------------------------------*/

.backdrop {
	display: none;

	width: 100%;
}

.backdrop * {
	color: #DCDCDC;
	text-align: center;
}

.backdrop img {
	width: 128px;
	margin: 10px calc(50% - 64px);
}

.empty > .backdrop {
	display: block;
}

.empty > .backdrop ~ * {
	display: none;
}

/*--------------------------------------------------*/
/*	ARTICLES
/*--------------------------------------------------*/

article {
	display: inline-block;

	padding: 15px;

	vertical-align: top;

	overflow: hidden;

	-webkit-overflow-x: hidden;
	   -moz-overflow-x: hidden;
	    -ms-overflow-x: hidden;
	     -o-overflow-x: hidden;
	        overflow-x: hidden;

	-webkit-overflow-y: hidden;
	   -moz-overflow-y: hidden;
	    -ms-overflow-y: hidden;
	     -o-overflow-y: hidden;
	        overflow-y: hidden;
}

/* -------------------------------------------------- */
/*	CATEGORIES
/* -------------------------------------------------- */

section.color:not(:first-child) {
	padding-top: 180px !important;
}

section.color:not(:last-child) {
	padding-bottom: 180px !important;
}

section.color.transparent,
section.color:first-child {
	padding-top: 75px !important;
}

section.color.transparent,
section.color:last-child {
	padding-bottom: 75px !important;
}

section.color article {
	background: #00000000;
}

section.background article {
	background: var(--background);
	border-radius: 5px;
}

section.color article p,
section.background article p {
	text-align: justify;
}

section.color .button,
section.background .button {
	margin: 18px 3px 3px 3px;
}

section.color .button:before {
	z-index: -1;
	content: " ";
	position: absolute;
	top: -3px;
	left: -3px;

	width: calc(100% + 6px);
	height: calc(100% + 6px);

	background-color: var(--background);
}

/* -------------------------------------------------- */
/*	COLOURS
/* -------------------------------------------------- */

section.color:before,
section.color:after,
section.background:before,
section.background:after {
	z-index: 1;
	content: " ";
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: #00000000;
}

section.color > *,
section.background > * {
	z-index: 2;
}

/*--- BLACK ---*/
section.color.black {
	background: var(--color-black);
	color: #FFFFFF;
}

section.color.black:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
}

section.color.black:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #00000000 120px);
}

/*--- GRAY ---*/
section.color.gray {
	background: var(--color-gray);
	color: #FFFFFF;
}

section.color.gray:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
}

section.color.gray:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #00000000 120px);
}

/*--- ORANGE ---*/
section.color.orange {
	background: var(--color-orange);
	color: #FFFFFF;
}

section.color.orange:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
}

section.color.orange:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #00000000 120px);
}

/*--- BLUE ---*/
section.color.blue {
	background: var(--color-blue);
	color: #FFFFFF;
}

section.color.blue:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
}

section.color.blue:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #00000000 120px);
}

/*--- CYAN ---*/
section.color.cyan {
	background: var(--color-cyan);
	color: #FFFFFF;
}

section.color.cyan:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
}

section.color.cyan:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #00000000 120px);
}

/*--- RED ---*/
section.color.red {
	background: var(--color-red);
	color: #FFFFFF;
}

section.color.red:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
}

section.color.red:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #00000000 120px);
}

/*--- GREEN ---*/
section.color.green {
	background: var(--color-green);
	color: #FFFFFF;
}

section.color.green:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
}

section.color.green:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #00000000 120px);
}

/*--- PURPLE ---*/
section.color.purple {
	background: var(--color-purple);
	color: #FFFFFF;
}

section.color.purple:not(:first-child):before {
	background: -webkit-linear-gradient(178deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient(178deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient(178deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:      -o-linear-gradient(178deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:         linear-gradient(178deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
}

section.color.purple:not(:last-child):after {
	background: -webkit-linear-gradient( -2deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:    -moz-linear-gradient( -2deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:     -ms-linear-gradient( -2deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:      -o-linear-gradient( -2deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
	background:         linear-gradient( -2deg, #FFFFFF 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #00000000 120px);
}

/* -------------------------------------------------- */
/*	BACKGROUNDS
/* -------------------------------------------------- */

section.background {
	padding-top: 180px !important;
	padding-bottom: 180px !important;
}

section.background:before {
	background: -webkit-linear-gradient(  2deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:    -moz-linear-gradient(  2deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:     -ms-linear-gradient(  2deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:      -o-linear-gradient(  2deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:         linear-gradient(  2deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
}

section.background:after {
	background: -webkit-linear-gradient(182deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:    -moz-linear-gradient(182deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:     -ms-linear-gradient(182deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:      -o-linear-gradient(182deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
	background:         linear-gradient(182deg, #FFFFFF 100px, #F4F4F4 101px, #FFFFFF 109px, #FFFFFF 120px, #40404020 121px, #00000000 129px);
}