/*

CONCEPTION -n
The conception of the website. Things that remain consistent throughout the system.

*/


/* ----- ROOT ----- */

	:root {

		/* TRANSITIONS */
		--trb:  0.3s all ease;

		/* SHADDOWS */
		--bsl: 0.8px 0.8px 2.2px rgba(0, 0, 0, 0.02), 2px 2px 5.3px rgba(0, 0, 0, 0.028), 3.8px 3.8px 10px rgba(0, 0, 0, 0.035), 6.7px 6.7px 17.9px rgba(0, 0, 0, 0.042), 12.5px 12.5px 33.4px rgba(0, 0, 0, 0.05), 30px 30px 80px rgba(0, 0, 0, 0.07);

		/* FONT MANAGEMENT */
		font-size: 19px;
	}


/* ----- SPACING & SETUP ----- */
	html {
		background-color: var(--cgr-edk);
	}

	body {
		font-family: 'Acme', sans-serif;
		font-size: 1rem;
		color: var(--ctx-edk);
	}

	body.navbar-is-fixed-top {
		margin-top: 0px;
		padding-top: 86px;
	}

	.navbar .container-fluid {
		padding: 0px;
	}

	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3,
	.col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
	.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,
	.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
	.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		padding-left: 0;
		padding-right: 0;
	}

	.radio, .checkbox {
		margin: 0px;
	}


/* ----- TEXT FORMATTING ----- */
	a {
		color: var(--cgr-drk);
		text-decoration: none;
		transition: all 0.3s ease;
	}

	a:hover, a:focus, a:active {
		color: var(--cgr-drk);
		text-decoration: none;
	}

	svg.phead {
		height: 80px;
		margin-bottom: 40px;
	}

	h1 {
		font-size: 5rem;
		font-weight: 900;
		margin-bottom: 40px;
	}

	.region-content p {
		margin-bottom: 25px;
	}

	.region-content p:last-of-type {
		margin-bottom: 0px;
	}

	.form-item input::-webkit-input-placeholder,
	.form-item textarea::-webkit-input-placeholder {
		color: var(--ctx-lgt);
	}

	.form-item input:-moz-placeholder,
	.form-item textarea:-moz-placeholder {
		color: var(--ctx-lgt);
	}

	.form-item input::-moz-placeholder,
	.form-item textarea::-moz-placeholder {
		color: var(--ctx-lgt);
	}

	.form-item input:-ms-input-placeholder,
	.form-item textarea:-ms-input-placeholder {
		color: var(--ctx-lgt);
	}


/* ----- BUTTONS ----- */
	.btn {
	 	padding: 15px 50px;
	 	margin: 10px;
	 	border: none;
	 	border-radius: 35px;
	 	font-size: 1rem;
	 	cursor: pointer;
	 	transition: var(--trb);
	}

	.btn-primary {
		background-color: var(--cgr-lgt);
		color: var(--cmw-100);
		transition: var(--trb);
	}

	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active {
	 	background-color: var(--cgr-drk);
		color: var(--cmw-100);
	  	outline: none;
	}

	.btn-default {
	 	background-color: var(--cgr-lgt);
	 	color: var(--cmw-100);
	 	transition: var(--trb);
	}

	.btn-default:hover,
	.btn-default:focus,
	.btn-default:active {
	 	background-color: var(--cgr-drk);
	 	color: var(--cmw-100);
	}

	.btn-danger {
	 	background-color: #840029;
	 	color: var(--cmw-100);
	 	transition: var(--trb);
	}

	.btn-danger:hover,
	.btn-danger:focus,
	.btn-danger:active {
	 	background-color: #60112E;
	 	color: var(--cmw-100);
	}

	.btn-success {
	 	background-color: #008442;
	 	color: var(--cmw-100);
	 	transition: var(--trb);
	}

	.btn-success:hover,
	.btn-success:focus,
	.btn-success:active {
	 	background-color: #16633B;
	 	color: var(--cmw-100);
	}

	.btn-warning {
	 	background-color: #BFB341;
	 	color: var(--cmw-100);
	 	transition: var(--trb);
	}

	.btn-warning:hover,
	.btn-warning:focus,
	.btn-warning:active {
	 	background-color: #897D25;
	 	color: var(--cmw-100);
	}

	.btn-info {
	 	background-color: #005587;
	 	color: var(--cmw-100);
	 	transition: var(--trb);
	}

	.btn-info:hover,
	.btn-info:focus,
	.btn-info:active {
	 	background-color: #003057;
	 	color: var(--cmw-100);
	}


/* ----- ALERTS ----- */
	.alert {
		padding: 25px;
		border: none;
		border-radius: 20px;
		box-shadow: var(--bsl);
		margin: 40px 40px 25px 40px;
	}

	.form-item--error-message.alert {
		margin: 10px 0px 15px 0px;
		padding: 10px;
		border-radius: 15px;
	}

	.alert-dismissable .close, .alert-dismissible .close {
		color: var(--cmw-100);
		top: 0px;
		right: 0px;
	}

	button.close {
		background-color: var(--crd-lgt);
		padding: 5px 9px;
		border-radius: 50%;
		transition: var(--trb);
	}

	.alert-flex {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-start;
	}

	.alert-color {
		display: block;
		width: 40px;
		height: 40px;
		margin-right: 20px;
		text-align: center;
	}

	.form-item--error-message.alert.alert-danger {
		background-color: #9d574b;
		color: var(--cmw-100);
		font-weight: 700;
	}

	.alert-warning, .alert-success, .alert-danger {
		background-color: var(--cmw-100);
		color: var(--cbt);
	}

	.alert-success > p:before {
		content: url(https://dl.altitudemedia.co.za/svg/circle-check-solid.svg);
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 25px;
	}

	.alert-warning > p:before {
		content: url(https://dl.altitudemedia.co.za/svg/circle-exclamation-solid.svg);
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 25px;
	}

	.alert-danger > p:before {
		content: url(https://dl.altitudemedia.co.za/svg/circle-xmark-solid.svg);
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 25px;
	}


/* ----- CONTAINER CUSTOMISATIONS ------ */
	/* Container Background */
		.cb_primary {
			background-color: var(--cgr-lgt);
			color: var(--cmw-100);
			overflow: hidden;
		}

		.cb_dark {
			background-color: #1d1f1d;
			color: var(--cmw-100);
			overflow: hidden;
		}

		.cb_light {
			background-color: var(--cgr-elt);
			overflow: hidden;
		}

		.cb_highlight1 {
			background-color: var(--ctx-edk);
			color: var(--cmw-100);
			overflow: hidden;
			margin-top: -89px !important;
		}

		.cb_highlight2 {
			background-color: var(--cyw-lgt);
			color: var(--cmw-100);
			overflow: hidden;
		}

		.cb_white {
			overflow: hidden;
		}


	/* Container Width */
		.cw_100 {
			width: 100%;
		}

		.cw_80 {
			width: 80%;
			margin: auto;
		}

		.cw_60 {
			width: 60%;
			margin: auto;
		}

		.cw_50 {
			width: 50%;
			margin: auto;
		}

		.cw_40 {
			width: 40%;
			margin: auto;
		}


	/* Padding Top */
		.pt_a {
			padding-top: 0px;
		}

		.pt_b {
			padding-top: 15px;
		}

		.pt_c {
			padding-top: 30px;
		}

		.pt_d {
			padding-top: 45px;
		}

		.pt_e {
			padding-top: 60px;
		}

		.pt_f {
			padding-top: 85px;
		}

		.pt_g {
			padding-top: 100px;
		}

		.pt_h {
			padding-top: 115px;
		}


	/* Padding Bottom */
		.pb_a {
			padding-bottom: 0px;
		}

		.pb_b {
			padding-bottom: 15px;
		}

		.pb_c {
			padding-bottom: 30px;
		}

		.pb_d {
			padding-bottom: 45px;
		}

		.pb_e {
			padding-bottom: 60px;
		}

		.pb_f {
			padding-bottom: 85px;
		}

		.pb_g {
			padding-bottom: 100px;
		}

		.pb_h {
			padding-bottom: 115px;
		}


	/* Margin Top */
		.mt_a {
			margin-top: 0px;
		}

		.mt_b {
			margin-top: 15px;
		}

		.mt_c {
			margin-top: 30px;
		}

		.mt_d {
			margin-top: 45px;
		}

		.mt_e {
			margin-top: 60px;
		}

		.mt_f {
			margin-top: 85px;
		}

		.mt_g {
			margin-top: 100px;
		}

		.mt_h {
			margin-top: 115px;
		}


	/* Margin Bottom */
		.mb_a {
			margin-bottom: 0px;
		}

		.mb_b {
			margin-bottom: 15px;
		}

		.mb_c {
			margin-bottom: 30px;
		}

		.mb_d {
			margin-bottom: 45px;
		}

		.mb_e {
			margin-bottom: 60px;
		}

		.mb_f {
			margin-bottom: 85px;
		}

		.mb_g {
			margin-bottom: 100px;
		}

		.mb_h {
			margin-bottom: 115px;
		}


	/* Container Layout */
		.tcl-wrap .content {
			display: flex;
			flex-flow: row wrap;
			gap: 25px;
			align-items: flex-start;
			justify-content: center;
		}

		.column1.cl_a,
		.column2.cl_e {
			width: 24%;
		}

		.column1.cl_b,
		.column2.cl_d {
			width: 39%;
		}

		.column1.cl_c,
		.column2.cl_c {
			width: 49%;
		}

		.column1.cl_d,
		.column2.cl_b {
			width: 59%;
		}

		.column1.cl_e,
		.column2.cl_a {
			width: 74%;
		}


	/* Header Height */
		.head-size {
			border-radius: 0px;
			overflow: hidden;
			margin-top: -85px;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			box-shadow: var(--bsl);
		}

		.head-size.hh_30 {
			width: 100%;
			height: 30vh;
			position: relative;
		}

		.head-size.hh_30 .head-gradient {
			height: 30vh;
			width: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.head-size.hh_45 {
			width: 100%;
			height: 45vh;
			position: relative;
		}

		.head-size.hh_45 .head-gradient {
			height: 45vh;
			width: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.head-size.hh_65 {
			width: 100%;
			height: 65vh;
			position: relative;
		}

		.head-size.hh_65 .head-gradient {
			height: 65vh;
			width: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.head-size.hh_85 {
			width: 100%;
			height: 85vh;
			position: relative;
		}

		.head-size.hh_85 .head-gradient {
			height: 85vh;
			width: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.head-size.hh_100 {
			width: 100%;
			height: 100vh;
			position: relative;
		}

		.head-size.hh_100 .head-gradient {
			height: 100vh;
			width: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
		}


/* ----- GIN STYLING ----- */
	.gin--horizontal-toolbar #toolbar-administration {
    	z-index: 99999 !important;
  	}