/* !//////////////////////// !DISUKO v0.4! ////////////////////////! */

/* 0 - Development & Testing  */

/* 0.1 - Wrapper Testing Borders  */

.dsk1 {
	border: black solid 1px;
}

.dsk2 {
	border: red solid 1px;
}

.dsk3 {
	border: blue solid 1px;
}

.dsk4 {
	border: green solid 1px;
}

.dsk5 {
	border: yellow solid 1px;
}

/* 1 - General  */

/* 1.1 - Section Wrappers */

.section {
	container-type: inline-size;
}

/* 1.2 - Copy & Content */
.copy {
	/* General wrapper class for multiple paragrpahs */
	margin-top: 1rem;
}

/* 1.2.1 - Paragraphs */
p {
	margin-bottom: 0.8rem;
	margin-top: 0;
}

/* 1.2.2 - Headings */
/* Margin Fixes */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

/* 1.3 - Responsive Hide/Show */

/* 1.3.1 - Desktop Show/Mobile Hide */
.ds_mh {
	display: block;
}

/* 1.3.2 - Mobile Show/Desktop Hide */
.ms_dh {
	display: none;
}

/* 1.4. - Hover States  */
/*
These hover states are independant of whether the element is an anchor or not
*/

.hover {
	cursor: pointer;
	transition-duration: 0.3s;
}

/* 1.4.1 - Hover Zoom  */
.hover--zoom:hover {
	-ms-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
}

/* 1.4.2 - Hover Invert  */
.hover--invert:hover {
	-webkit-filter: invert(75%);
	-moz-filter: invert(75%);
	filter: invert(75%);
}

/* 1.4.3 - Hover Dim  */
.hover--dim:hover {
	filter: brightness(50%);
}

/* 1.4.4 - Hover Lightbox */

/* 1.5 - Animations - TODO */

/* !//////////////////////// !!! ////////////////////////! */

/* 2 - Block & Inline Layout */
.block {
	display: block;
}

.inline {
	display: inline;
}

/* 3 - Flex Layout  */

/* 3.1 - Flex Objects  */

.flex {
	/* flex is the Block level flex parent item */
	display: flex;
}

.flex__item {
	/* flex_item is the Block level flex child item */
}

/* 3.2 - Flex Direction */
.flex_row {
	display: flex;
	flex-direction: row;
}

/* Break from row to column at a smaller size than 900px */
.flex_row--med {
	display: flex;
	flex-direction: row;
}

/* Maintain row layout on mobile */
.flex_row--mob {
	display: flex;
	flex-direction: row;
}

.flex_col {
	display: flex;
	flex-direction: column;
}

.flex_wrap {
	display: flex;
	flex-wrap: wrap;
}

/* 3.3 - Flex Content Justify  */
.flex_just--center {
	justify-content: center;
}

.flex_just--start {
	justify-content: flex-start;
}

.flex_just--end {
	justify-content: flex-end;
}

.flex_just--between {
	justify-content: space-between;
}

.flex_just--around {
	justify-content: space-around;
}

.flex_just--even {
	justify-content: space-evenly;
}

/* 3.4 - Flex Align Content  */
.flex_align--cent {
	align-content: center;
}

.flex_align--start {
	align-content: flex-start;
}

.flex_align--end {
	align-content: flex-end;
}

.flex_align--stretch {
	align-content: stretch;
}

.flex_align--between {
	align-content: space-between;
}

.flex_align--around {
	align-content: space-around;
}

/* 3.5 - Flex Align Items */

/* 3.5.1 - Consistant Cross Axis */
.flex_item_align--center {
	align-items: center;
}

.flex_item_align--end {
	align-items: flex-end;
}

.flex_item_align--start {
	align-items: flex-start;
}

/* 3.5.2 - Responsive Cross Axis */
.flex_item_align--center_lrg_start_sml {
	align-items: center;
}

.flex_item_align--start_lrg_center_sml {
	align-items: flex-start;
}

.flex_item_align--center_lrg_stretch_sml {
	align-items: center;
}

/* 3.5 - Flex Item Posistioning TODO - Test */
.flex_self--start {
	align-self: flex-start;
}

.flex_item--end {
	align-self: flex-end;
}

.flex_item--cent {
	align-self: center;
}

/* 3.6 - Flex Item Size */
.flex_item100 {
	flex: 100%;
}

.flex_item90 {
	flex: 90%;
}

.flex_item80 {
	flex: 80%;
}

.flex_item70 {
	flex: 70%;
}

.flex_item60 {
	flex: 60%;
}

.flex_item50 {
	flex: 50%;
}

.flex_item40 {
	flex: 40%;
}

.flex_item30 {
	flex: 30%;
}

.flex_item25 {
	flex: 25%;
}

.flex_item20 {
	flex: 20%;
}

.flex_item10 {
	flex: 10%;
}

/* 4 - Grid Layout  */

/* !//////////////////////// !!! ////////////////////////! */

/* 5 - Typography */
.font {
	/*
    .font is the general Block level selector for font items
    Font Size, Weight, & Color are abbreviated with .fs, .fw. & .fc
    Line Height & Letter Spacing are done with .lh & .ls
    */
}

/* 5.1 - Font Family */
.font_oswald {
	font-family: "Oswald", "Lucida Grande", sans-serif;
}

.font_helvetica {
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* 5.2 - Font Style */

.font_none {
	/* Remove All Font Styling */
	text-decoration: none;
}

.font_ital {
	font-style: italic;
}

.font_under {
	text-decoration: underline;
}

.font_up {
	text-transform: uppercase;
}

.font_cap {
	text-transform: capitalize;
}

.font_cent {
	text-align: center;
}

.font_left {
	text-align: left;
}

.font_right {
	text-align: right;
}

.font_cent_desk_right_mob {
	text-align: center;
}

.font_cent_desk_left_mob {
	text-align: center;
}

.font_right_desk_cent_mob {
	text-align: right;
}

.font_left_desk_cent_mob {
	text-align: left;
}

/* 5.3 - Font Size */
.fs0_5 {
	font-size: 0.5rem;
}

.fs0_8 {
	font-size: 0.8rem;
}

.fs0_9 {
	font-size: 0.9rem;
}

.fs1 {
	font-size: 1rem;
}

.fs1_2 {
	font-size: 1.2rem;
}

.fs1_1 {
	font-size: 1.1rem;
}

.fs1_3 {
	font-size: 1.3rem;
}

.fs1_4 {
	font-size: 1.4rem;
}

.fs1_5 {
	font-size: 1.5rem;
}

.fs1_6 {
	font-size: 1.6rem;
}

.fs1_7 {
	font-size: 1.7rem;
}

.fs1_8 {
	font-size: 1.8rem;
}

.fs2 {
	font-size: 2rem;
}

.fs2_2 {
	font-size: 2.2rem;
}

.fs2_3 {
	font-size: 2.3rem;
}

.fs2_5 {
	font-size: 2.5rem;
}

.fs3 {
	font-size: 3rem;
}

.fs3_5 {
	font-size: 3.5rem;
}

.fs4 {
	font-size: 4rem;
}

.fs4_5 {
	font-size: 4.5rem;
}

.fs5 {
	font-size: 5rem;
}

/* 5.4 - Font Weight */
.fw300 {
	font-weight: 300;
}

.fw500 {
	font-weight: 500;
}

.fw600 {
	font-weight: 600;
}

.fw700 {
	font-weight: 700;
}

.fw900 {
	font-weight: 900;
}

/* 5.5 - Font Colours */
.fc_blk {
	color: #000;
}

.fc_wht {
	color: #fff;
}

.fc_gry {
	color: #333;
}

/* 5.6 - Line Height */

.lh0_7 {
	line-height: 0.7;
}

.lh0_8 {
	line-height: 0.8;
}

.lh0_9 {
	line-height: 0.9;
}

.lh1 {
	line-height: 1;
}

.lh1_1 {
	line-height: 1.1;
}

.lh1_2 {
	line-height: 1.2;
}

.lh1_3 {
	line-height: 1.3;
}

.lh1_4 {
	line-height: 1.4;
}

.lh1_5 {
	line-height: 1.5;
}

/* 5.7 - Letter Spacing */
.ls01 {
	letter-spacing: 0.01rem;
}

.ls02 {
	letter-spacing: 0.02rem;
}

.ls03 {
	letter-spacing: 0.03rem;
}

.ls04 {
	letter-spacing: 0.04rem;
}

.ls05 {
	letter-spacing: 0.05rem;
}

.ls06 {
	letter-spacing: 0.06rem;
}

.ls07 {
	letter-spacing: 0.07rem;
}

.ls08 {
	letter-spacing: 0.08rem;
}

.ls1 {
	letter-spacing: 0.1rem;
}

.ls1_5 {
	letter-spacing: 0.15rem;
}

.ls2 {
	letter-spacing: 0.2rem;
}

.ls2_5 {
	letter-spacing: 0.25rem;
}

/* !//////////////////////// !!! ////////////////////////! */

/* 6 - Object Margin  */
/* 6.1 - Margin Responsive Clear - Use these to remove excess margin on small screen */
.mh_clear {
}

.mv_clear {
}

/* 6.2 - Margin Horizontal */

/* Margin Horizontal Mobile Clear*/

.ma {
	/* Margin Auto (Left & Right)*/
	margin-left: auto;
	margin-right: auto;
}

.mh0 {
	margin-left: 0;
	margin-right: 0;
}

.mh0_5 {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.mh1 {
	margin-left: 1rem;
	margin-right: 1rem;
}

.mh1_5 {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

.mh2 {
	margin-left: 2rem;
	margin-right: 2rem;
}

.mh2_5 {
	margin-left: 2.5rem;
	margin-right: 2.5rem;
}

.mh3 {
	margin-left: 3rem;
	margin-right: 3rem;
}

.mh3_5 {
	margin-left: 3.5rem;
	margin-right: 3.5rem;
}

.mh4 {
	margin-left: 4rem;
	margin-right: 4rem;
}

.mh4_5 {
	margin-left: 4.5rem;
	margin-right: 4.5rem;
}

.mh5 {
	margin-left: 5rem;
	margin-right: 5rem;
}

/* 6.3 - Margin Vertical */

.mv0 {
	margin-top: 0;
	margin-bottom: 0;
}

.mv0_5 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.mv1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.mv1_5 {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.mv2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.mv3 {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.mv4 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.mv5 {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.mv6 {
	margin-top: 6rem;
	margin-bottom: 6rem;
}

.mv7 {
	margin-top: 7rem;
	margin-bottom: 7rem;
}

/* 6.4 - Margin Top */
.mt0 {
	margin-top: 0;
}

.mt1 {
	margin-top: 1rem;
}

.mt1_5 {
	margin-top: 1.5rem;
}

.mt2 {
	margin-top: 2rem;
}

.mt3 {
	margin-top: 3rem;
}

.mt4 {
	margin-top: 4rem;
}

.mt5 {
	margin-top: 5rem;
}

/* 6.5 - Margin Bottom */
.mb0 {
	margin-bottom: 0;
}

.mb0_5 {
	margin-bottom: 0.5rem;
}

.mb0_8 {
	margin-bottom: 0.8rem;
}

.mb1 {
	margin-bottom: 1rem;
}

.mb2 {
	margin-bottom: 2rem;
}

.mb3 {
	margin-bottom: 3rem;
}

.mb4 {
	margin-bottom: 4rem;
}

.mb5 {
	margin-bottom: 5rem;
}

/* 6.6 - Margin Left */
.ml0 {
	margin-left: 0;
}

.ml1 {
	margin-left: 1rem;
}

.ml2 {
	margin-left: 2rem;
}

.ml3 {
	margin-left: 3rem;
}

.ml4 {
	margin-left: 4rem;
}

.ml5 {
	margin-left: 5rem;
}

/* 6.7 - Margin Right */
.mr0 {
	margin-right: 0;
}

.mr1 {
	margin-right: 1rem;
}

.mr2 {
	margin-right: 2rem;
}

.mr3 {
	margin-right: 3rem;
}

.mr4 {
	margin-right: 4rem;
}

.mr5 {
	margin-right: 5rem;
}

/* 7 - Object Padding  */

/* 7.1 - Padding Responsive Clear - Use to clear excess padding on small screen*/
.ph_clear {
}

.pv_clear {
}

/* 7.2 - Padding Horizontal */

.ph0 {
	padding-left: 0;
	padding-right: 0;
}

.ph0_5 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.ph1 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.ph1_5 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.ph2 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.ph2_5 {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

.ph3 {
	padding-left: 3rem;
	padding-right: 3rem;
}

.ph3_5 {
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

.ph4 {
	padding-left: 4rem;
	padding-right: 4rem;
}

.ph4_5 {
	padding-left: 4.5rem;
	padding-right: 4.5rem;
}

.ph5 {
	padding-left: 5rem;
	padding-right: 5rem;
}

/* 7.3 - Padding Vertical */
.pv0 {
	padding-top: 0;
	padding-bottom: 0;
}

.pv1 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.pv1_5 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.pv2 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.pv3 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.pv3_5 {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.pv4 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.pv5 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* 7.4 - Padding Top */
.pt0 {
	padding-top: 0;
}

.pt0_5 {
	padding-top: 0.5rem;
}

.pt1 {
	padding-top: 1rem;
}

.pt1_5 {
	padding-top: 1.5rem;
}

.pt2 {
	padding-top: 2rem;
}

.pt3 {
	padding-top: 3rem;
}

.pt4 {
	padding-top: 4rem;
}

.pt5 {
	padding-top: 5rem;
}

/* 7.5 - Padding Bottom */
.pb0 {
	padding-bottom: 0;
}

.pb0_2 {
	padding-bottom: 0.2rem;
}

.pb0_5 {
	padding-bottom: 0.5rem;
}

.pb1 {
	padding-bottom: 1rem;
}

.pb1_5 {
	padding-bottom: 1.5rem;
}

.pb2 {
	padding-bottom: 2rem;
}

.pb3 {
	padding-bottom: 3rem;
}

.pb4 {
	padding-bottom: 4rem;
}

.pb5 {
	padding-bottom: 5rem;
}

/* 7.6 - Padding Left */
.pl0 {
	padding-left: 0;
}

.pl1 {
	padding-left: 1rem;
}

.pl1_5 {
	padding-left: 1.5rem;
}

.pl2 {
	padding-left: 2rem;
}

.pl3 {
	padding-left: 3rem;
}

.pl4 {
	padding-left: 4rem;
}

.pl5 {
	padding-left: 5rem;
}

/* 7.7 - Padding Right */
.pr0 {
	padding-right: 0;
}

.pr1 {
	padding-right: 1rem;
}

.pr2 {
	padding-right: 2rem;
}

.pr3 {
	padding-right: 3rem;
}

.pr4 {
	padding-right: 4rem;
}

.pr5 {
	padding-right: 5rem;
}

/* !//////////////////////// !!! ////////////////////////! */

/* 8 - Object Styling  */

/* 8.1 - Object Width */

/* 8.1.1 - Object Width Respnisive Clear */
.width_clear {
	width: 100%;
}

/* 8.1.2 - Object Width Percentage  */
.wp10 {
	width: 10%;
}

.wp15 {
	width: 15%;
}

.wp20 {
	width: 20%;
}

.wp25 {
	width: 25%;
}

.wp30 {
	width: 30%;
}

.wp35 {
	width: 35%;
}

.wp40 {
	width: 40%;
}

.wp45 {
	width: 45%;
}

.wp50 {
	width: 50%;
}

.wp55 {
	width: 55%;
}

.wp60 {
	width: 60%;
}

.wp65 {
	width: 65%;
}

.wp70 {
	width: 70%;
}

.wp75 {
	width: 75%;
}

.wp80 {
	width: 80%;
}

.wp85 {
	width: 85%;
}

.wp90 {
	width: 90%;
}

.wp95 {
	width: 95%;
}

.wp100 {
	width: 100%;
}

/* 8.1.3 - Object Width Relative - TODO */

/* 8.2 - Object Height */
/* 8.2.1 - Object Height Respnisive Clear */
.height_clear {
	height: 100%;
}

/* 8.2.1 - Object Height Percentage  */
.hp10 {
	height: 10%;
}

.hp15 {
	height: 15%;
}

.hp20 {
	height: 20%;
}

.hp25 {
	height: 25%;
}

.hp30 {
	height: 30%;
}

.hp35 {
	height: 35%;
}

.hp40 {
	height: 40%;
}

.hp45 {
	height: 45%;
}

.hp50 {
	height: 50%;
}

.hp55 {
	height: 55%;
}

.hp60 {
	height: 60%;
}

.hp65 {
	height: 65%;
}

.hp70 {
	height: 70%;
}

.hp75 {
	height: 75%;
}

.hp80 {
	height: 80%;
}

.hp85 {
	height: 85%;
}

.hp90 {
	height: 90%;
}

.hp95 {
	height: 95%;
}

.hp100 {
	height: 100%;
}

/* 8.2.2 - Object Height Relative - TODO */

/* 8.3 - Borders  */
.bdr {
}

/* 8.3.1 - Border Style  */
.brd__style--solid {
	border-style: solid;
}

.brd__style--dash {
	border-style: dashed;
}

.brd__style--dotted {
	border-style: dotted;
}

.brd__style--none {
	border-style: hidden;
}

/* 8.3.2 - Border Colors  */
.brd__col--black {
	border-color: #000;
}

.brd__col--white {
	border-color: #fff;
}

.brd__col--grey {
	border-color: #555;
}

.brd__col--lt_grey {
	border-color: #c0c0c0;
}

.brd__col--purple {
	border-color: #4b1e78;
}

/* 8.3.3 - Border Width (in pixels)  */
.brd__wid--1 {
	border-width: 0.1rem;
}

.brd__wid--2 {
	border-width: 0.2rem;
}

.brd__wid--3 {
	border-width: 0.3rem;
}

.brd__wid--4 {
	border-width: 0.4rem;
}

.brd__wid--5 {
	border-width: 0.5rem;
}

.brd__wid--6 {
	border-width: 0.6rem;
}

.brd__wid--7 {
	border-width: 0.7rem;
}

.brd__wid--8 {
	border-width: 0.8rem;
}

.brd__wid--9 {
	border-width: 0.9rem;
}

.brd__wid--10 {
	border-width: 1rem;
}

/* 8.3.4 - Border Side (to be set last) */
.brd__btm {
	border-top: none;
	border-left: none;
	border-right: none;
}

.brd__top {
	border-bottom: none;
	border-left: none;
	border-right: none;
}

.brd__left {
	border-top: none;
	border-bottom: none;
	border-right: none;
}

.brd__right {
	border-top: none;
	border-bottom: none;
	border-left: none;
}

.brd__top_btm {
	border-left: none;
	border-right: none;
}

.brd__left_right {
	border-top: none;
	border-bottom: none;
}

/* 8.4 - Backgrounds */
.bg {
	/* This is the top level background object */
}

/* 8.4.1 - Background Colour */
.bg_col {
}

.bg_full_white {
	background-color: #fff;
}

.bg_full_black {
	background-color: #000000;
}

.bg_light_grey {
	background-color: #ebebeb;
}

.bg_dark_grey {
	background-color: #494949;
}

/* 8.4.2 - Background Image */
.bg_img {
	position: relative;
}

.bg_img__content--centre {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 8.5 - Opacity */
/* 8.6 - Shadows & Lightboxs */
.light_box_img-gry {
	img {
		box-shadow:
			0 4px 8px 0 rgba(0, 0, 0, 0.64),
			0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

/* 8.7 - Horizontal Lines */

/* !//////////////////////// !!! ////////////////////////! */

/* 9 - Button & Links */

/* 9.1 - Buttons */
/* Top Level Button Wrapper */
/* Buttons don't need any styles on the anchor, except font size */
.but {
	a {
		/* Default Button Spacing */
		padding: 0.5rem 2rem;
		border-radius: 0.3rem;

		cursor: pointer;
		transition-duration: 0.3s;
		text-decoration: none;
		display: inline-block;
	}
}

/* 9.1.1 - Button Wrapper Posistion  */
.but_cent {
	text-align: center;
}

.but_left {
	text-align: left;
}

.but_right {
	text-align: right;
}

/* 9.1.2 - Button Internal Spacing */
.but--inner_sml {
	a {
		padding: 0.2rem 0.8rem;
	}
}

.but--inner_mid {
	a {
		padding: 1rem 4rem;
	}
}

.but--inner_wide {
	a {
		padding: 2rem 5rem;
	}
}

/* 9.1.3 - Button Width */
.but--100 {
	a {
		width: 100%;
	}
}

.but--75 {
	a {
		min-width: 75%;
	}
}

.but--50 {
	a {
		min-width: 50%;
	}
}

.but--25 {
	a {
		min-width: 25%;
	}
}

/* 9.1.4  - Button Color & Hover */
.but--blk {
	a {
		text-transform: uppercase;
		background-color: #000;
		border: 1px solid #000;
		color: #fff;

		&:hover,
		&:active {
			text-decoration: none;
			background-color: #fff;
			border: 1px solid #000;
			color: #000;
			transition-duration: 0.3s;
		}
	}
}

.but--wht {
	a {
		background-color: #fff;
		border: 1px solid #000;
		color: #000;

		&:hover,
		&:active {
			text-decoration: none;
			background-color: #000;
			border: 1px solid #fff;
			color: #fff;
			transition-duration: 0.3s;
		}
	}
}

.but--prp {
	a {
		background-color: #504ca0;
		border: 1px solid #504ca0;
		color: #fff;
		text-decoration: none;

		&:hover,
		&:active {
			text-decoration: none;
			background-color: #fff;
			border: 1px solid #504ca0;
			color: #504ca0;
			transition-duration: 0.3s;
		}
	}
}

.but--wht_border {
	a {
		background-color: transparent;
		border: 1px solid #fff;
		color: #fff;
		text-decoration: none;

		&:hover,
		&:active {
			text-decoration: none;
			background-color: #000;
			border: 1px solid #fff;
			color: #fff;
			transition-duration: 0.3s;
		}
	}
}

/* 9.1.5 - Button Shape */
.but_round {
	a {
		border-radius: 50%;
	}
}

.but_pill {
	a {
		border-radius: 2rem;
	}
}

/* 9.2 - Links */
.link {
}

/* 9.2.1 - Inline Links (spans) */
.link--inline {
	a {
		text-decoration: none;

		&:hover {
			/* text-decoration: none; */
			transition-duration: 0.3s;
			color: #4b1e78;
		}
	}
}

.link--underline {
	a {
		text-decoration: underline;

		&:hover {
			transition-duration: 0.3s;
			color: #4b1e78;
		}
	}
}

.link--default {
	a {
		text-decoration: none;

		&:hover {
			transition-duration: 0.3s;
			color: #4b1e78;
		}
	}
}

.link--bold {
	a {
		text-decoration: underline;
		font-weight: 600;

		&:hover {
			transition-duration: 0.3s;
			color: #4b1e78;
		}
	}
}

/* 9.2.2 - Content Link Wrapper */
.link--content {
	/* TODO */
}

/* 9.2.3 - Image Link Wrapper */

.link--img {
	transition-duration: 0.3s;

	&:hover {
		filter: brightness(50%);
	}
}

/* 9.2.4 - SVG/Icon Links */
.link--icon_arrow_right {
	a {
		color: #333;
		text-decoration: none;

		display: flex;
		align-items: center;
		transition-duration: 0.3s;

		&:hover {
			transition-duration: 0.3s;
			color: #4b1e78;

			svg {
				fill: #4b1e78;
			}
		}
	}

	.icon_wrap {
		display: flex;
		height: 1.1em;
		margin-left: 0.5rem;
	}

	/* a {

      &:hover {
         text-decoration: underline;
         color: #4b1e78;

         svg {
            fill: #4b1e78;
         }
      }

   } */
}

/* !//////////////////////// !!! ////////////////////////! */

/* 10 - Components  */

/* 10.1 - Banners */

.banner {
	/* position: relative; */
}

/* 10.1.1 - Banner Height */

.banner--height40 {
	height: 40vh;
}

.banner--height50 {
	height: 30vh;
}

.banner--height60 {
	height: 60vh;
}

.banner--height70 {
	height: 70vh;
}

.banner--height80 {
	height: 80vh;
}

/* 10.1.2 - Page/Content Wide Image Banner */
.banner--wide {
	img {
		width: 100%;
	}
}

/* 10.1.3 - Full Width Image Banner */

/* Banner Image - requires the following, inline, for G-Web
    #d?????? {
        background-image: url("@@tcm:138-???????");
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
*/

.banner__img {
	position: relative;
	overflow: hidden;
}

.banner__img--center_content_wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.banner__img--left_content_wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.banner__img--right_content_wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* 10.1.4 - Full Width Video Banner */

/* Banner Video - requires the following, inline, for G-Web
     #d??????? {
        padding: 0;

        .l-inner {
            max-width: 100%;
        }
    }
*/

.banner__vid {
	position: relative;
	overflow: hidden;

	video {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.banner__vid--content_center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding-left: 0;
		padding-right: 0;
	}

	.banner__vid--content_left {
		position: absolute;
		left: 5%;
		top: 50%;
		transform: translate(0, -50%);
		padding-left: 1.5rem;
	}
}

/* 10.1.5 - Parallax Banner TODO - Include Safari fix*/

/* 10.2 - Tables */
.tab {
	table {
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed;

		td,
		th {
			padding: 0.8rem;
		}
	}
}

/* 10.2.1 - Responisve Table Settings */
.tab--ds_mh {
	display: block;
}

.tab--ms_dh {
	display: none;
}

/* 10.2.2 - General Table Widths */
/* .tab--even_width,
.tab--full_width {
   table {
      width: 100%;
      table-layout: fixed;
   }
} */

.tab--2_col_50_50 {
	table {
		th:nth-child(1),
		td:nth-child(1),
		th:nth-child(2n),
		td:nth-child(2n) {
			width: 50%;
		}
	}
}

.tab--2_col_60_40 {
	table {
		th:nth-child(1),
		td:nth-child(1) {
			width: 60%;
		}

		th:nth-child(2n),
		td:nth-child(2n) {
			width: 40%;
		}
	}
}

.tab--2_col_30_70 {
	table {
		th:nth-child(1),
		td:nth-child(1) {
			width: 30%;
		}

		th:nth-child(2n),
		td:nth-child(2n) {
			width: 70%;
		}
	}
}

.tab--3_col_20_40_40 {
	table {
		th,
		td {
			width: 40%;
		}

		th:nth-child(1),
		td:nth-child(1) {
			width: 20%;
		}
	}
}

.tab--4_col_25 {
	table {
		th,
		td {
			width: 25%;
		}
	}
}

.tab--var_width {
	table {
	}
}

/* 10.2.3 - Individual Column Widths */
.col_20 {
	width: 20%;
}

.col_25 {
	width: 25%;
}

.col_30 {
	width: 30%;
}

/* 10.2.4 - Table Borders */
.tab--border_dark {
	td,
	th {
		border: 1px solid #333;
	}
}

.tab--border_grey {
	td,
	th {
		border: 1px solid #6e6e6e;
	}
}

.tab--border_grey_light {
	td,
	th {
		border: 1px solid #ccc;
	}
}

.tab--border_bottom_grey {
	td,
	th {
		border-bottom: 1px solid #6e6e6e;
	}
}

.tab--border_bottom_dark {
	td,
	th {
		border-bottom: 1px solid #333;
	}
}

.tab--border_bottom_dotted {
	tr {
		border-bottom: dotted 2px #333;
	}
}

/* 10.2.5 - Table Styles */
.tab--alt_odd--light_grey {
	table {
		tr:nth-child(odd) {
			background-color: #d6d6d6;
		}
	}
}

.tab--alt_even--light_grey {
	table {
		tr:nth-child(even) {
			background-color: #d6d6d6;
		}
	}
}

.tab--alt_odd--dark_grey {
	table {
		tr:nth-child(odd) {
			background-color: #6e6e6e;
		}
	}
}

.tab--alt_even--dark_grey {
	table {
		tr:nth-child(even) {
			background-color: #6e6e6e;
		}
	}
}

/* 10.2.6 - Table Header Cell Styles */
.tab_heading--bold {
	table {
		th {
			font-weight: 700;
		}
	}
}

.tab_heading--bg_light_grey {
	table {
		th {
			background-color: #d6d6d6;
		}
	}
}

.tab_heading--bg_dark_grey {
	table {
		th {
			background-color: #6e6e6e;
		}
	}
}

/* 10.2.7 - Individual Cell Background */
.tab_cell_bg--grey {
	background-color: #6e6e6e;
	color: #000;
	border: none;
}

.tab_cell_bg--grey_light {
	background-color: #ccc;
	color: #000;
	border: none;
}

.tab_cell_bg--black {
	background-color: #3a3a3a;
	color: #fff;
	border: none;
}

/* 10.3 - Lists */
.list {
	ol,
	ul {
		list-style: revert-layer;
	}

	li {
		margin-bottom: 0.5rem;
	}
}

.list__inner_list {
	ol,
	ul {
		list-style: revert-layer;
	}
}

/* 10.3.1 - List Marker Style */
.list--no_markers {
	ul,
	ol {
		list-style-type: none;
	}
}

.list--item_in {
	ul,
	ol {
		list-style-position: inside;
	}
}

.list--item_out {
	ul,
	ol {
		list-style-position: outside;
	}
}

/* 10.3.2 - List Posistioning */
.list--left_align {
	ul,
	ol {
		padding-left: 0;
	}
}

/* 10.3.3 - List Item Styling */
.list--li_bold {
	li::marker {
		font-weight: bold;
	}
}

.list--li_ital {
	li::marker {
		font-style: italic;
	}
}

/* 10.4 - Images  */

/* 10.4.1 - Image Posistion */
.img_left {
	text-align: left;
}

.img_right {
	text-align: right;
}

.img_cent {
	text-align: center;
}

/* 10.4.2 - Image Width - !Responsive ! */
.img_w100 {
	img {
		width: 100%;
	}
}

.img_w80 {
	img {
		width: 80%;
	}
}

.img_w75 {
	img {
		width: 75%;
	}
}

.img_w70 {
	img {
		width: 70%;
	}
}

.img_w60 {
	img {
		width: 60%;
	}
}

.img_w50 {
	img {
		width: 50%;
	}
}

.img_w40 {
	img {
		width: 40%;
	}
}

.img_w30 {
	img {
		width: 30%;
	}
}

.img_w25 {
	img {
		width: 25%;
	}
}

/* 10.4.3 - Responsive Image Height */
.img_res--30 {
	max-height: 100vh;
	object-fit: cover;
}

/* 10.5 - Videos */
.vid {
	video {
	}
}

/* 10.5.1 - Embed */

.vid--embed_full_width {
	video {
		max-width: 100%;
	}
}

/* 10.5.2 - iFrame */
.vid--iframe {
}

.vid--frame_portrait {
	position: relative;
	overflow: hidden;
	width: 50%;
	padding-top: 50%;
	margin: auto;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}

/* 10.6 - Map Embed */

/* 10.6.1 - Google Map Embed */
.gmap_embed {
	position: relative;
	overflow: hidden;
	width: 100%;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}

.gmap_embed--ratio_1_1 {
	padding-top: 100%;
}

.gmap_embed--ratio_16_9 {
	padding-top: 56.25%;
}

/* !//////////////////////// !!! ////////////////////////! */

/* @container (max-width: 999px) { */
@media only screen and (max-width: 999px) {
	/* 1 - General  */

	/* 1.1 - Section Wrappers */
	/* 1.2 - Paragraphs */
	/* 1.3 - Headings */

	/* 1.3 - Responsive Hide/Show */

	/* 1.3.1 - Desktop Show/Mobile Hide */
	.ds_mh {
		display: none;
	}

	/* 1.3.2 - Mobile Show/Desktop Hide */
	.ms_dh {
		display: block;
	}

	/* !//////////////////////// !!! ////////////////////////! */

	/* 2 - Block & Inline Layout */

	/* !//////////////////////// !!! ////////////////////////! */

	/* 3 - Flex Layout  */
	/* 3.1 - Flex Objects  */
	/* 3.2 - Flex Direction */
	.flex_row {
		flex-direction: column;
	}

	/* 3.3 - Flex Content Justify (Item's main axis posistion) */
	/* 3.4 - Flex Content Align (Item's cross axis posistion) */
	/* 3.5.1 - Consistant Cross Axis */
	/* 3.5.2 - Responsive Cross Axis */
	.flex_item_align--center_lrg_start_sml {
		align-items: flex-start;
	}

	.flex_item_align--start_lrg_center_sml {
		align-items: center;
	}

	.flex_item_align--center_lrg_stretch_sml {
		align-items: stretch;
	}

	/* 3.6 - Flex Item Size */
	.flex_item50 {
		width: 100%;
	}

	/* !//////////////////////// !!! ////////////////////////! */

	/* 5 - Typography */

	/* 5.1 - Font Family */
	/* 5.2 - Font Style */

	.font_cent_desk_right_mob {
		text-align: right;
	}

	.font_cent_desk_left_mob {
		text-align: left;
	}

	.font_right_desk_cent_mob {
		text-align: center;
	}

	.font_left_desk_cent_mob {
		text-align: center;
	}

	/* 5.3 - Font Size */
	.fs0_5 {
		font-size: 0.5rem;
	}

	.fs0_8 {
		font-size: 0.8rem;
	}

	.fs1 {
		font-size: 0.9rem;
	}

	.fs1_1 {
		font-size: 1rem;
	}

	.fs1_2 {
		font-size: 1rem;
	}

	.fs1_3 {
		font-size: 1.1rem;
	}

	.fs1_4 {
		font-size: 1.2rem;
	}

	.fs1_5 {
		font-size: 1.3rem;
	}

	.fs1_6 {
		font-size: 1.4rem;
	}

	.fs1_7 {
		font-size: 1.5rem;
	}

	.fs1_8 {
		font-size: 1.6rem;
	}

	.fs2 {
		font-size: 1.5rem;
	}

	.fs2_2 {
		font-size: 1.4rem;
	}

	.fs2_3 {
		font-size: 1.6rem;
	}

	.fs2_5 {
		font-size: 1.8rem;
	}

	.fs3 {
		font-size: 2rem;
	}

	.fs3_5 {
		font-size: 2.5rem;
	}

	.fs4 {
		font-size: 2rem;
	}

	.fs4_5 {
		font-size: 2.5rem;
	}

	.fs5 {
		font-size: 3rem;
	}

	/* 5.4 - Font Weight */
	/* 5.5 - Font Colours */
	/* 5.6 - Line Height */
	/* 5.7 - Letter Spacing */

	/* !//////////////////////// !!! ////////////////////////! */

	/* 6.1 - Margin Responsive Clear */
	.mh_clear {
		margin-left: 0;
		margin-right: 0;
	}

	.mv_clear {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* 6.2 - Margin Horizontal */
	.mh0_5 {
	}

	.mh1 {
	}

	.mh1_5 {
	}

	.mh2 {
	}

	.mh2_5 {
	}

	.mh3 {
	}

	.mh3_5 {
	}

	.mh4 {
	}

	.mh4_5 {
	}

	.mh5 {
	}

	/* 6.3 - Margin Vertical */

	.mt0 {
	}

	.mt1 {
	}

	.mt1_5 {
	}

	.mt2 {
	}

	.mt3 {
	}

	.mt4 {
	}

	.mt5 {
	}

	/* 6.4 - Margin Top */
	.mt0 {
	}

	.mt1 {
	}

	.mt1_5 {
	}

	.mt2 {
	}

	.mt3 {
	}

	.mt4 {
	}

	.mt5 {
	}

	/* 6.5 - Margin Bottom */
	.mb0 {
	}

	.mb0_5 {
	}

	.mb1 {
	}

	.mb2 {
	}

	.mb3 {
	}

	.mb4 {
	}

	.mb5 {
	}

	/* 6.6 - Margin Left */
	.ml0 {
	}

	.ml1 {
	}

	.ml2 {
	}

	.ml3 {
	}

	.ml4 {
	}

	.ml5 {
	}

	/* 6.7 - Margin Right */
	.mr0 {
	}

	.mr1 {
	}

	.mr2 {
	}

	.mr3 {
	}

	.mr4 {
	}

	.mr5 {
	}

	/* !//////////////////////// !!! ////////////////////////! */

	/* 7 - Object Padding  */

	/* 7.1 - Padding Responsive Clear */
	.ph_clear {
		padding-left: 0;
		padding-right: 0;
	}

	.pv_clear {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* 7.2 - Padding Horizontal */

	.ph0_5 {
	}

	.ph1 {
	}

	.ph1_5 {
	}

	.ph2 {
	}

	.ph2_5 {
	}

	.ph3 {
	}

	.ph3_5 {
	}

	.ph4 {
	}

	.ph4_5 {
	}

	.ph5 {
	}

	/* 7.3 - Padding Vertical */
	.pv0 {
	}

	.pv1 {
	}

	.pv1_5 {
	}

	.pv2 {
	}

	.pv3 {
	}

	.pv4 {
	}

	.pv5 {
	}

	/* 7.4 - Padding Top */
	.pt0 {
	}

	.pt1 {
	}

	.pt1_5 {
	}

	.pt2 {
	}

	.pt3 {
	}

	.pt4 {
	}

	.pt5 {
	}

	/* 7.5 - Padding Bottom */
	.pb0 {
	}

	.pb0_2 {
	}

	.pb0_5 {
	}

	.pb1 {
	}

	.pb1_5 {
	}

	.pb2 {
	}

	.pb3 {
	}

	.pb4 {
	}

	.pb5 {
	}

	/* 7.6 - Padding Left */
	.pl0 {
	}

	.pl1 {
	}

	.pl1_5 {
	}

	.pl2 {
	}

	.pl3 {
	}

	.pl4 {
	}

	.pl5 {
	}

	/* 7.7 - Padding Right */
	.pr0 {
	}

	.pr1 {
	}

	.pr2 {
	}

	.pr3 {
	}

	.pr4 {
	}

	.pr5 {
	}

	/* 8 - Object Styling  */

	/* 8.1 - Object Width */
	/* 8.1.1 - Object Width Respnisive Clear */
	.width_clear {
		width: 100%;
	}

	/* 8.1.2 - Object Width Percentage  */
	.wp10 {
	}

	.wp15 {
	}

	.wp20 {
	}

	.wp25 {
	}

	.wp30 {
      
	}

	.wp35 {
	}

	.wp40 {
	}

	.wp45 {
	}

	.wp50 {
	}

	.wp55 {
	}

	.wp60 {
	}

	.wp65 {
	}

	.wp70 {
	}

	.wp75 {
	}

	.wp80 {
	}

	.wp85 {
	}

	.wp90 {
	}

	.wp95 {
	}

	.wp100 {
	}

	/* 8.1.3 - Object Width Relative - TODO */

	/* 8.2 - Object Height */
	/* 8.2.1 - Object Height Respnisive Clear */
	.height_clear {
		height: 100%;
	}

	/* 8.2.1 - Object Height Percentage  */
	.hp10 {
	}

	.hp15 {
	}

	.hp20 {
	}

	.hp25 {
	}

	.hp30 {
	}

	.hp35 {
	}

	.hp40 {
	}

	.hp45 {
	}

	.hp50 {
	}

	.hp55 {
	}

	.hp60 {
	}

	.hp65 {
	}

	.hp70 {
	}

	.hp75 {
	}

	.hp80 {
	}

	.hp85 {
	}

	.hp90 {
	}

	.hp95 {
	}

	.hp100 {
	}

	/* 8.2.2 - Object Height Relative - TODO */

	/* 9 - Button & Links */

	/* 9.1 - Buttons */

	/* 9.1.1 - Button Layout */

	/* 9.1.2 - Button Width */
	.but--75,
	.but--50,
	.but--25 {
		a {
			width: 100%;
		}
	}

	/* 9.2 - Links */

	/* !//////////////////////// !!! ////////////////////////! */

	/* 10 - Components  */

	/* 10.1 - Banners */
	.banner {
		/* position: relative; */
	}

	/* 10.1.1 - Banner Height */
	.banner--height50 {
		height: 45vh;
	}

	.banner--height60 {
		height: 55vh;
	}

	.banner--height70 {
		height: 60vh;
	}

	.banner--height80 {
		height: 75vh;
	}

	/* 10.2 - Tables */
	.tab {
		table {
			width: 105%;
			table-layout: fixed;
			margin-left: -30px;

			td,
			th {
				padding: 0.2rem;
			}
		}
	}

	/* 10.2.1 - Responisve Table Settings */
	.tab--ds_mh {
		display: none;
	}

	.tab--ms_dh {
		display: block;

		table {
			margin: 2rem 0;
		}
	}

	/* 10.3 - Lists */
	.list {
		ul,
		ol {
			/* margin-left: 0;
			padding-left: 0; */
		}
	}

	.list__inner_list {
		ul,
		ol {
			margin-left: 1rem;
			padding-left: 1rem;
		}
	}

	/* 10.3.1 - List Marker Style */
	/* 10.3.2 - List Posistioning */

	/* 10.3.3 - List Item Styling */

	/* 10.4.1 - Image Posistion */
	.img_left,
	.img_right,
	.img_cent {
		text-align: center;
	}

	/* 10.4.2 - Image Width - !Responsive ! */

	/* 10.4.3 - Responsive Image Height - !Responsive ! */
	.img_res--30 {
		max-height: 30vh;
		object-fit: cover;
	}

	/* 10.5 - Videos */
	/* 10.5.1 - Embed */
	/* 10.5.2 - iFrame */
	.vid--iframe {
	}

	.vid--frame_portrait {
		width: 100%;
		padding-top: 100%;

		iframe {
		}
	}
}

/* @container (max-width: 599px) { */
@media only screen and (max-width: 599px) {
	/* 3 - Flex Layout  */
	/* 3.2 - Flex Direction */
	/* Break from row to column at a smaller size than 900px */
	.flex_row--med {
		flex-direction: column;
	}

	/* 10.4.1 - Image Posistion */

	/* 10.4.2 - Image Width - !Responsive ! */
	.img_w80,
	.img_w75,
	.img_w70,
	.img_w60,
	.img_w50,
	.img_w40,
	.img_w30,
	.img_w25 {
		img {
			width: 100%;
		}
	}
}

@media only screen and (max-width: 339px) {
	/* !//////////////////////// !!! ////////////////////////! */

	/* 10 - Components  */

	/* 10.1 - Banners */
	/* 10.1.1 - Banner Height */
	.banner--height50 {
		height: 20vh;
	}

	.banner--height60 {
		height: 30vh;
	}

	.banner--height70 {
		height: 35vh;
	}

	.banner--height80 {
		height: 40vh;
	}

	/* 10.1.2 - Page/Content Wide Image Banner */

	/* 10.1.3 - Full Width Image Banner */

	/* 10.1.4 - Full Width Video Banner */
	.banner__vid {
		.banner__vid--content_center {
			/* position: absolute;
            top: 50%; */
			left: 0;
			transform: translate(0%, -50%);
			padding-left: 1rem;
			padding-right: 1rem;
		}

		.banner__vid--content_left {
			/* position: absolute;
            left: 5%;
            top: 50%;
            transform: translate(0, -50%); */
			padding-left: 0;
		}
	}
}