/*****************************
* Contents
* 1. Browser Reset and Fonts
* 2. Background and Containers
* 3. Grid System
* 4. Formating Classes
* 5. Styling
* 6. Form
* 7. Components
* 8. Theme
*****************************/
:root {
	--background-margin: 20px;
	--gutter-width: 10px;
	--spacer-1: 6px;
	--spacer-2: 10px;
	--spacer-3: 20px;
	--spacer-4: 36px;
	--font-size: 16px;
	--font-size--h1: 32px;
	--font-size--h2: 28px;
	--font-size--h3: 24px;
	--font-size--h4: 21px;
	--font-size--h5: 18px;
	--font-size--h6: 16px;
	--font-size--btn: 16px;
	--font-size--intro: 18px;
	--text-margin: 12px;
	--sticky-height: 80px;
	--sticky-scrolling-height: 60px;
	--primary-font-family: futura-pt, sans-serif;
	--primary-font-weight: 400;
	--secondary-font-family: futura-pt, sans-serif;
	--secondary-font-weight: 500;
	--primary-font-color: #557483;
	--secondary-font-color: #1b2842;
	--placeholder-font-color: #91b1c1;
	--navy: #0f1a2e;
	--sky: #e8f1f5;
	--grey: #f4f4f4;
	--sand: #f2f1e9;
	--white: #ffffff;
	--green: #acc85a;
}
@media screen and (min-width: 576px) {
	/* sm */
	
}
@media screen and (min-width: 768px) {
	/* md */
	:root {
		--background-margin: 30px;
		--gutter-width: 16px;
		--spacer-1: 8px;
		--spacer-2: 16px;
		--spacer-3: 30px;
		--spacer-4: 48px;
		--font-size: 16px;
		--font-size--h1: 40px;
		--font-size--h2: 34px;
		--font-size--h3: 28px;
		--font-size--h4: 24px;
		--font-size--h5: 20px;
		--font-size--h6: 16px;
		--font-size--btn: 20px;
		--font-size--intro: 18px;
		--text-margin: 16px;
	}
}
@media screen and (min-width: 992px) {
	/* lg */
	:root {
		--sticky-height: 120px;
		--sticky-scrolling-height: 80px;
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
	:root {
		--background-margin: 40px;
		--gutter-width: 20px;
		--spacer-1: 10px;
		--spacer-2: 20px;
		--spacer-3: 40px;
		--spacer-4: 72px;
		--font-size: 18px;
		--font-size--h1: 46px;
		--font-size--h2: 40px;
		--font-size--h3: 32px;
		--font-size--h4: 26px;
		--font-size--h5: 22px;
		--font-size--h6: 18px;
		--font-size--btn: 20px;
		--font-size--intro: 18px;
		--text-margin: 16px;
	}

}

/**** 1. Browser Reset ****/
* {
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	white-space: normal;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
}
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body {
    min-height: 100vh;
	overflow-x: hidden;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
img {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}
pre {
	white-space: break-spaces;
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/**** 2. Background and Containers ****/
.container {
	max-width: 1400px;
	margin: 0 auto;
	display: -ms-flexbox;
	display: flex;
	position: relative;
}
.container-narrow {
	max-width: 1000px;
	margin: 0 auto;
	display: -ms-flexbox;
	display: flex;
	position: relative;
}
.container-fluid {
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	display: -ms-flexbox;
	display: flex;
	position: relative;
}
.wrapper {
	min-height: 100%;
	flex: 0 0 100%;
}
.background {
	padding: 0 var(--background-margin);
	position: relative;
}
.background-image {
	height: auto;
	min-height: calc(100vw * 0.44);
}
.background-image--med {
	height: auto;
	min-height: calc(100vw * 0.44);
}
.background-image--large {
	height: auto;
	min-height: calc(100vw * 0.44);
}
.background-image > .container, .background-image > .container-fluid {
	min-height: 100%;
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
	.background-image {
		height: calc(100vw * 0.22);
		max-height: 400px !important;
		min-height: auto;
	}
	.background-image--med {
		height: calc(100vw * 0.44);
		max-height: 600px !important;
	}
	.background-image--large {
		height: calc(100vw * 0.44);
		max-height: 800px !important;
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/**** 3. Grid System ****/
.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: calc(var(--gutter-width) * -1);
	margin-left: calc(var(--gutter-width) * -1);
	margin-bottom: calc(var(--gutter-width) * -2);
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
	margin-bottom: 0;
}

.wide-gutters {
	margin-right: calc(var(--gutter-width) * -2);
	margin-left: calc(var(--gutter-width) * -2);
	margin-bottom: calc(var(--gutter-width) * -4);
}
.wide-gutters > .col,
.wide-gutters > [class*="col-"] {
	padding-right: calc(var(--gutter-width) * 2);
	padding-left: calc(var(--gutter-width) * 2);
	margin-bottom: calc(var(--gutter-width) * 4);
}

.narrow-gutters {
	margin-right: calc((var(--gutter-width) / 2) * -1);
	margin-left: calc((var(--gutter-width) / 2) * -1);
	margin-bottom: calc(var(--gutter-width) * -1);
}
.narrow-gutters > .col,
.narrow-gutters > [class*="col-"] {
	padding-right: calc(var(--gutter-width) / 2);
	padding-left: calc(var(--gutter-width) / 2);
	margin-bottom: calc(var(--gutter-width));
}

[class*="col-"] {
	position: relative;
	width: 100%;
	padding-right: var(--gutter-width);
	padding-left: var(--gutter-width);
	margin-bottom: calc(var(--gutter-width) * 2);
}
.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.col-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
.col-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}
.col-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}
.col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
.col-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}
.col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}
.col-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
@media screen and (min-width: 576px) {
	/* sm */
	.col-sm-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}
	.col-sm-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-sm-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-sm-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-sm-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-sm-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-sm-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-sm-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-sm-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-sm-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-sm-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-sm-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-sm-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	
}
@media screen and (min-width: 768px) {
	/* md */
	.col-md-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}
	.col-md-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-md-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-md-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-md-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-md-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-md-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-md-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-md-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-md-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-md-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-md-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media screen and (min-width: 992px) {
	/* lg */
	.col-lg-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}
	.col-lg-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-lg-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-lg-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-lg-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-lg-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-lg-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-lg-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-lg-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-lg-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-lg-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-lg-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-lg-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
	.col-xl-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}
	.col-xl-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-xl-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-xl-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-xl-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-xl-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-xl-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-xl-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-xl-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-xl-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-xl-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-xl-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-xl-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/**** 4. Formating Classes ****/
.d-none {
	display: none;
}
.d-block {
	display: block;
}
.d-inline {
	display: inline;
}
.d-inline-block {
	display: inline-block;
}
.d-flex {
	display: flex;
}
.d-inline-flex {
	display: inline-flex;
}
.d-block {
	display: block;
}
.p-0 {
	padding: 0 0 0 0;
}
.p-1 {
	padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
}
.p-2 {
	padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
}
.p-3 {
	padding: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
}
.p-4 {
	padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
}
.px-0 {
	padding-left: 0;
	padding-right: 0;
}
.px-1 {
	padding-left: var(--spacer-1);
	padding-right: var(--spacer-1);
}
.px-2 {
	padding-left: var(--spacer-2);
	padding-right: var(--spacer-2);
}
.px-3 {
	padding-left: var(--spacer-3);
	padding-right: var(--spacer-3);
}
.px-4 {
	padding-left: var(--spacer-4);
	padding-right: var(--spacer-4);
}
.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}
.py-1 {
	padding-top: var(--spacer-1);
	padding-bottom: var(--spacer-1);
}
.py-2 {
	padding-top: var(--spacer-2);
	padding-bottom: var(--spacer-2);
}
.py-3 {
	padding-top: var(--spacer-3);
	padding-bottom: var(--spacer-3);
}
.py-4 {
	padding-top: var(--spacer-4);
	padding-bottom: var(--spacer-4);
}
.pt-0 {
	padding-top: 0;
}
.pt-1 {
	padding-top: var(--spacer-1);
}
.pt-2 {
	padding-top: var(--spacer-2);
}
.pt-3 {
	padding-top: var(--spacer-3);
}
.pt-4 {
	padding-top: var(--spacer-4);
}
.pb-0 {
	padding-bottom: 0;
}
.pb-1 {
	padding-bottom: var(--spacer-1);
}
.pb-2 {
	padding-bottom: var(--spacer-2);
}
.pb-3 {
	padding-bottom: var(--spacer-3);
}
.pb-4 {
	padding-bottom: var(--spacer-4);
}
.pl-0 {
	padding-left: 0;
}
.pl-1 {
	padding-left: var(--spacer-1);
}
.pl-2 {
	padding-left: var(--spacer-2);
}
.pl-3 {
	padding-left: var(--spacer-3);
}
.pl-4 {
	padding-left: var(--spacer-4);
}
.pr-0 {
	padding-right: 0;
}
.pr-1 {
	padding-right: var(--spacer-1);
}
.pr-2 {
	padding-right: var(--spacer-2);
}
.pr-3 {
	padding-right: var(--spacer-3);
}
.pr-4 {
	padding-right: var(--spacer-4);
}
.m-0 {
	margin: 0 0 0 0;
}
.m-1 {
	margin: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
}
.m-2 {
	margin: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
}
.m-3 {
	margin: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
}
.m-4 {
	margin: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
}
.mx-0 {
	margin-left: 0;
	margin-right: 0;
}
.mx-1 {
	margin-left: var(--spacer-1);
	margin-right: var(--spacer-1);
}
.mx-2 {
	margin-left: var(--spacer-2);
	margin-right: var(--spacer-2);
}
.mx-3 {
	margin-left: var(--spacer-3);
	margin-right: var(--spacer-3);
}
.mx-4 {
	margin-left: var(--spacer-4);
	margin-right: var(--spacer-4);
}
.my-0 {
	margin-top: 0;
	margin-bottom: 0;
}
.my-1 {
	margin-top: var(--spacer-1);
	margin-bottom: var(--spacer-1);
}
.my-2 {
	margin-top: var(--spacer-2);
	margin-bottom: var(--spacer-2);
}
.my-3 {
	margin-top: var(--spacer-3);
	margin-bottom: var(--spacer-3);
}
.my-4 {
	margin-top: var(--spacer-4);
	margin-bottom: var(--spacer-4);
}
.mt-0 {
	margin-top: 0;
}
.mt-1 {
	margin-top: var(--spacer-1);
}
.mt-2 {
	margin-top: var(--spacer-2);
}
.mt-3 {
	margin-top: var(--spacer-3);
}
.mt-4 {
	margin-top: var(--spacer-4);
}
.mb-0 {
	margin-bottom: 0;
}
.mb-1 {
	margin-bottom: var(--spacer-1);
}
.mb-2 {
	margin-bottom: var(--spacer-2);
}
.mb-3 {
	margin-bottom: var(--spacer-3);
}
.mb-4 {
	margin-bottom: var(--spacer-4);
}
.ml-0 {
	margin-left: 0;
}
.ml-1 {
	margin-left: var(--spacer-1);
}
.ml-2 {
	margin-left: var(--spacer-2);
}
.ml-3 {
	margin-left: var(--spacer-3);
}
.ml-4 {
	margin-left: var(--spacer-4);
}
.mr-0 {
	margin-right: 0;
}
.mr-1 {
	margin-right: var(--spacer-1);
}
.mr-2 {
	margin-right: var(--spacer-2);
}
.mr-3 {
	margin-right: var(--spacer-3);
}
.mr-4 {
	margin-right: var(--spacer-4);
}

.spacer-1 {
	height: var(--spacer-1);
}
.spacer-2 {
	height: var(--spacer-2);
}
.spacer-3 {
	height: var(--spacer-3);
}
.spacer-4 {
	height: var(--spacer-4);
}
.clear {
	height: 0;
	display: block;
	clear: both;
}

.vertical-top {
	display: -ms-flexbox;
	display: flex;
	align-items: flex-start;
}
.vertical-center {
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.vertical-bottom {
	display: -ms-flexbox;
	display: flex;
	align-items: flex-end;
}
.horizontal-left {
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-start;
}
.horizontal-center {
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
}
.horizontal-right {
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-end;
}
.flex {
	flex: 1 1 100%;
}

.text-align-left {
	text-align: left;
}
.text-align-center {
	text-align: center;
}
.text-align-right {
	text-align: right;
}
.text-align-justify {
	text-align: justify;
}

@media screen and (min-width: 576px) {
	/* sm */
	.d-sm-none {
		display: none;
	}
	.d-sm-block {
		display: block;
	}
	.d-sm-inline {
		display: inline;
	}
	.d-sm-inline-block {
		display: inline-block;
	}
	.d-sm-flex {
		display: flex;
	}
	.d-sm-inline-flex {
		display: inline-flex;
	}
	.p-sm-0 {
		padding: 0 0 0 0;
	}
	.p-sm-1 {
		padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.p-sm-2 {
		padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.p-sm-3 {
		padding: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.p-sm-4 {
		padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.px-sm-0 {
		padding-left: 0;
		padding-right: 0;
	}
	.px-sm-1 {
		padding-left: var(--spacer-1);
		padding-right: var(--spacer-1);
	}
	.px-sm-2 {
		padding-left: var(--spacer-2);
		padding-right: var(--spacer-2);
	}
	.px-sm-3 {
		padding-left: var(--spacer-3);
		padding-right: var(--spacer-3);
	}
	.px-sm-4 {
		padding-left: var(--spacer-4);
		padding-right: var(--spacer-4);
	}
	.py-sm-0 {
		padding-top: 0;
		padding-bottom: 0;
	}
	.py-sm-1 {
		padding-top: var(--spacer-1);
		padding-bottom: var(--spacer-1);
	}
	.py-sm-2 {
		padding-top: var(--spacer-2);
		padding-bottom: var(--spacer-2);
	}
	.py-sm-3 {
		padding-top: var(--spacer-3);
		padding-bottom: var(--spacer-3);
	}
	.py-sm-4 {
		padding-top: var(--spacer-4);
		padding-bottom: var(--spacer-4);
	}
	.pt-sm-0 {
		padding-top: 0;
	}
	.pt-sm-1 {
		padding-top: var(--spacer-1);
	}
	.pt-sm-2 {
		padding-top: var(--spacer-2);
	}
	.pt-sm-3 {
		padding-top: var(--spacer-3);
	}
	.pt-sm-4 {
		padding-top: var(--spacer-4);
	}
	.pb-sm-0 {
		padding-bottom: 0;
	}
	.pb-sm-1 {
		padding-bottom: var(--spacer-1);
	}
	.pb-sm-2 {
		padding-bottom: var(--spacer-2);
	}
	.pb-sm-3 {
		padding-bottom: var(--spacer-3);
	}
	.pb-sm-4 {
		padding-bottom: var(--spacer-4);
	}
	.pl-sm-0 {
		padding-left: 0;
	}
	.pl-sm-1 {
		padding-left: var(--spacer-1);
	}
	.pl-sm-2 {
		padding-left: var(--spacer-2);
	}
	.pl-sm-3 {
		padding-left: var(--spacer-3);
	}
	.pl-sm-4 {
		padding-left: var(--spacer-4);
	}
	.pr-sm-0 {
		padding-right: 0;
	}
	.pr-sm-1 {
		padding-right: var(--spacer-1);
	}
	.pr-sm-2 {
		padding-right: var(--spacer-2);
	}
	.pr-sm-3 {
		padding-right: var(--spacer-3);
	}
	.pr-sm-4 {
		padding-right: var(--spacer-4);
	}
	.m-sm-0 {
		margin: 0 0 0 0;
	}
	.m-sm-1 {
		margin: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.m-sm-2 {
		margin: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.m-sm-3 {
		margin: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.m-sm-4 {
		margin: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.mx-sm-0 {
		margin-left: 0;
		margin-right: 0;
	}
	.mx-sm-1 {
		margin-left: var(--spacer-1);
		margin-right: var(--spacer-1);
	}
	.mx-sm-2 {
		margin-left: var(--spacer-2);
		margin-right: var(--spacer-2);
	}
	.mx-sm-3 {
		margin-left: var(--spacer-3);
		margin-right: var(--spacer-3);
	}
	.mx-sm-4 {
		margin-left: var(--spacer-4);
		margin-right: var(--spacer-4);
	}
	.my-sm-0 {
		margin-top: 0;
		margin-bottom: 0;
	}
	.my-sm-1 {
		margin-top: var(--spacer-1);
		margin-bottom: var(--spacer-1);
	}
	.my-sm-2 {
		margin-top: var(--spacer-2);
		margin-bottom: var(--spacer-2);
	}
	.my-sm-3 {
		margin-top: var(--spacer-3);
		margin-bottom: var(--spacer-3);
	}
	.my-sm-4 {
		margin-top: var(--spacer-4);
		margin-bottom: var(--spacer-4);
	}
	.mt-sm-0 {
		margin-top: 0;
	}
	.mt-sm-1 {
		margin-top: var(--spacer-1);
	}
	.mt-sm-2 {
		margin-top: var(--spacer-2);
	}
	.mt-sm-3 {
		margin-top: var(--spacer-3);
	}
	.mt-sm-4 {
		margin-top: var(--spacer-4);
	}
	.mb-sm-0 {
		margin-bottom: 0;
	}
	.mb-sm-1 {
		margin-bottom: var(--spacer-1);
	}
	.mb-sm-2 {
		margin-bottom: var(--spacer-2);
	}
	.mb-sm-3 {
		margin-bottom: var(--spacer-3);
	}
	.mb-sm-4 {
		margin-bottom: var(--spacer-4);
	}
	.ml-sm-0 {
		margin-left: 0;
	}
	.ml-sm-1 {
		margin-left: var(--spacer-1);
	}
	.ml-sm-2 {
		margin-left: var(--spacer-2);
	}
	.ml-sm-3 {
		margin-left: var(--spacer-3);
	}
	.ml-sm-4 {
		margin-left: var(--spacer-4);
	}
	.mr-sm-0 {
		margin-right: 0;
	}
	.mr-sm-1 {
		margin-right: var(--spacer-1);
	}
	.mr-sm-2 {
		margin-right: var(--spacer-2);
	}
	.mr-sm-3 {
		margin-right: var(--spacer-3);
	}
	.mr-sm-4 {
		margin-right: var(--spacer-4);
	}
	.spacer-sm-1 {
		height: var(--spacer-1);
	}
	.spacer-sm-2 {
		height: var(--spacer-2);
	}
	.spacer-sm-3 {
		height: var(--spacer-3);
	}
	.spacer-sm-4 {
		height: var(--spacer-4);
	}
	.vertical-sm-top {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-start;
	}
	.vertical-sm-center {
		display: -ms-flexbox;
		display: flex;
		align-items: center;
	}
	.vertical-sm-bottom {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-end;
	}
	.horizontal-sm-left {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-start;
	}
	.horizontal-sm-center {
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
	}
	.horizontal-sm-right {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-end;
	}

	.text-align-sm-left {
		text-align: left;
	}
	.text-align-sm-center {
		text-align: center;
	}
	.text-align-sm-right {
		text-align: right;
	}
	.text-align-sm-justify {
		text-align: justify;
	}
}
@media screen and (min-width: 768px) {
	/* md */
	.d-md-none {
		display: none;
	}
	.d-md-block {
		display: block;
	}
	.d-md-inline {
		display: inline;
	}
	.d-md-inline-block {
		display: inline-block;
	}
	.d-md-flex {
		display: flex;
	}
	.d-md-inline-flex {
		display: inline-flex;
	}
	.p-md-0 {
		padding: 0 0 0 0;
	}
	.p-md-1 {
		padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.p-md-2 {
		padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.p-md-3 {
		padding: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.p-md-4 {
		padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.px-md-0 {
		padding-left: 0;
		padding-right: 0;
	}
	.px-md-1 {
		padding-left: var(--spacer-1);
		padding-right: var(--spacer-1);
	}
	.px-md-2 {
		padding-left: var(--spacer-2);
		padding-right: var(--spacer-2);
	}
	.px-md-3 {
		padding-left: var(--spacer-3);
		padding-right: var(--spacer-3);
	}
	.px-md-4 {
		padding-left: var(--spacer-4);
		padding-right: var(--spacer-4);
	}
	.py-md-0 {
		padding-top: 0;
		padding-bottom: 0;
	}
	.py-md-1 {
		padding-top: var(--spacer-1);
		padding-bottom: var(--spacer-1);
	}
	.py-md-2 {
		padding-top: var(--spacer-2);
		padding-bottom: var(--spacer-2);
	}
	.py-md-3 {
		padding-top: var(--spacer-3);
		padding-bottom: var(--spacer-3);
	}
	.py-md-4 {
		padding-top: var(--spacer-4);
		padding-bottom: var(--spacer-4);
	}
	.pt-md-0 {
		padding-top: 0;
	}
	.pt-md-1 {
		padding-top: var(--spacer-1);
	}
	.pt-md-2 {
		padding-top: var(--spacer-2);
	}
	.pt-md-3 {
		padding-top: var(--spacer-3);
	}
	.pt-md-4 {
		padding-top: var(--spacer-4);
	}
	.pb-md-0 {
		padding-bottom: 0;
	}
	.pb-md-1 {
		padding-bottom: var(--spacer-1);
	}
	.pb-md-2 {
		padding-bottom: var(--spacer-2);
	}
	.pb-md-3 {
		padding-bottom: var(--spacer-3);
	}
	.pb-md-4 {
		padding-bottom: var(--spacer-4);
	}
	.pl-md-0 {
		padding-left: 0;
	}
	.pl-md-1 {
		padding-left: var(--spacer-1);
	}
	.pl-md-2 {
		padding-left: var(--spacer-2);
	}
	.pl-md-3 {
		padding-left: var(--spacer-3);
	}
	.pl-md-4 {
		padding-left: var(--spacer-4);
	}
	.pr-md-0 {
		padding-right: 0;
	}
	.pr-md-1 {
		padding-right: var(--spacer-1);
	}
	.pr-md-2 {
		padding-right: var(--spacer-2);
	}
	.pr-md-3 {
		padding-right: var(--spacer-3);
	}
	.pr-md-4 {
		padding-right: var(--spacer-4);
	}
	.m-md-0 {
		margin: 0 0 0 0;
	}
	.m-md-1 {
		margin: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.m-md-2 {
		margin: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.m-md-3 {
		margin: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.m-md-4 {
		margin: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.mx-md-0 {
		margin-left: 0;
		margin-right: 0;
	}
	.mx-md-1 {
		margin-left: var(--spacer-1);
		margin-right: var(--spacer-1);
	}
	.mx-md-2 {
		margin-left: var(--spacer-2);
		margin-right: var(--spacer-2);
	}
	.mx-md-3 {
		margin-left: var(--spacer-3);
		margin-right: var(--spacer-3);
	}
	.mx-md-4 {
		margin-left: var(--spacer-4);
		margin-right: var(--spacer-4);
	}
	.my-md-0 {
		margin-top: 0;
		margin-bottom: 0;
	}
	.my-md-1 {
		margin-top: var(--spacer-1);
		margin-bottom: var(--spacer-1);
	}
	.my-md-2 {
		margin-top: var(--spacer-2);
		margin-bottom: var(--spacer-2);
	}
	.my-md-3 {
		margin-top: var(--spacer-3);
		margin-bottom: var(--spacer-3);
	}
	.my-md-4 {
		margin-top: var(--spacer-4);
		margin-bottom: var(--spacer-4);
	}
	.mt-md-0 {
		margin-top: 0;
	}
	.mt-md-1 {
		margin-top: var(--spacer-1);
	}
	.mt-md-2 {
		margin-top: var(--spacer-2);
	}
	.mt-md-3 {
		margin-top: var(--spacer-3);
	}
	.mt-md-4 {
		margin-top: var(--spacer-4);
	}
	.mb-md-0 {
		margin-bottom: 0;
	}
	.mb-md-1 {
		margin-bottom: var(--spacer-1);
	}
	.mb-md-2 {
		margin-bottom: var(--spacer-2);
	}
	.mb-md-3 {
		margin-bottom: var(--spacer-3);
	}
	.mb-md-4 {
		margin-bottom: var(--spacer-4);
	}
	.ml-md-0 {
		margin-left: 0;
	}
	.ml-md-1 {
		margin-left: var(--spacer-1);
	}
	.ml-md-2 {
		margin-left: var(--spacer-2);
	}
	.ml-md-3 {
		margin-left: var(--spacer-3);
	}
	.ml-md-4 {
		margin-left: var(--spacer-4);
	}
	.mr-md-0 {
		margin-right: 0;
	}
	.mr-md-1 {
		margin-right: var(--spacer-1);
	}
	.mr-md-2 {
		margin-right: var(--spacer-2);
	}
	.mr-md-3 {
		margin-right: var(--spacer-3);
	}
	.mr-md-4 {
		margin-right: var(--spacer-4);
	}
	.spacer-md-1 {
		height: var(--spacer-1);
	}
	.spacer-md-2 {
		height: var(--spacer-2);
	}
	.spacer-md-3 {
		height: var(--spacer-3);
	}
	.spacer-md-4 {
		height: var(--spacer-4);
	}
	.vertical-md-top {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-start;
	}
	.vertical-md-center {
		display: -ms-flexbox;
		display: flex;
		align-items: center;
	}
	.vertical-md-bottom {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-end;
	}
	.horizontal-md-left {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-start;
	}
	.horizontal-md-center {
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
	}
	.horizontal-md-right {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-end;
	}
	.text-align-md-left {
		text-align: left;
	}
	.text-align-md-center {
		text-align: center;
	}
	.text-align-md-right {
		text-align: right;
	}
	.text-align-md-justify {
		text-align: justify;
	}
}
@media screen and (min-width: 992px) {
	/* lg */
	.d-lg-none {
		display: none;
	}
	.d-lg-block {
		display: block;
	}
	.d-lg-inline {
		display: inline;
	}
	.d-lg-inline-block {
		display: inline-block;
	}
	.d-lg-flex {
		display: flex;
	}
	.d-lg-inline-flex {
		display: inline-flex;
	}
	.p-lg-0 {
		padding: 0 0 0 0;
	}
	.p-lg-1 {
		padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.p-lg-2 {
		padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.p-lg-3 {
		padding: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.p-lg-4 {
		padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.px-lg-0 {
		padding-left: 0;
		padding-right: 0;
	}
	.px-lg-1 {
		padding-left: var(--spacer-1);
		padding-right: var(--spacer-1);
	}
	.px-lg-2 {
		padding-left: var(--spacer-2);
		padding-right: var(--spacer-2);
	}
	.px-lg-3 {
		padding-left: var(--spacer-3);
		padding-right: var(--spacer-3);
	}
	.px-lg-4 {
		padding-left: var(--spacer-4);
		padding-right: var(--spacer-4);
	}
	.py-lg-0 {
		padding-top: 0;
		padding-bottom: 0;
	}
	.py-lg-1 {
		padding-top: var(--spacer-1);
		padding-bottom: var(--spacer-1);
	}
	.py-lg-2 {
		padding-top: var(--spacer-2);
		padding-bottom: var(--spacer-2);
	}
	.py-lg-3 {
		padding-top: var(--spacer-3);
		padding-bottom: var(--spacer-3);
	}
	.py-lg-4 {
		padding-top: var(--spacer-4);
		padding-bottom: var(--spacer-4);
	}
	.pt-lg-0 {
		padding-top: 0;
	}
	.pt-lg-1 {
		padding-top: var(--spacer-1);
	}
	.pt-lg-2 {
		padding-top: var(--spacer-2);
	}
	.pt-lg-3 {
		padding-top: var(--spacer-3);
	}
	.pt-lg-4 {
		padding-top: var(--spacer-4);
	}
	.pb-lg-0 {
		padding-bottom: 0;
	}
	.pb-lg-1 {
		padding-bottom: var(--spacer-1);
	}
	.pb-lg-2 {
		padding-bottom: var(--spacer-2);
	}
	.pb-lg-3 {
		padding-bottom: var(--spacer-3);
	}
	.pb-lg-4 {
		padding-bottom: var(--spacer-4);
	}
	.pl-lg-0 {
		padding-left: 0;
	}
	.pl-lg-1 {
		padding-left: var(--spacer-1);
	}
	.pl-lg-2 {
		padding-left: var(--spacer-2);
	}
	.pl-lg-3 {
		padding-left: var(--spacer-3);
	}
	.pl-lg-4 {
		padding-left: var(--spacer-4);
	}
	.pr-lg-0 {
		padding-right: 0;
	}
	.pr-lg-1 {
		padding-right: var(--spacer-1);
	}
	.pr-lg-2 {
		padding-right: var(--spacer-2);
	}
	.pr-lg-3 {
		padding-right: var(--spacer-3);
	}
	.pr-lg-4 {
		padding-right: var(--spacer-4);
	}
	.m-lg-0 {
		margin: 0 0 0 0;
	}
	.m-lg-1 {
		margin: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.m-lg-2 {
		margin: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.m-lg-3 {
		margin: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.m-lg-4 {
		margin: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.mx-lg-0 {
		margin-left: 0;
		margin-right: 0;
	}
	.mx-lg-1 {
		margin-left: var(--spacer-1);
		margin-right: var(--spacer-1);
	}
	.mx-lg-2 {
		margin-left: var(--spacer-2);
		margin-right: var(--spacer-2);
	}
	.mx-lg-3 {
		margin-left: var(--spacer-3);
		margin-right: var(--spacer-3);
	}
	.mx-lg-4 {
		margin-left: var(--spacer-4);
		margin-right: var(--spacer-4);
	}
	.my-lg-0 {
		margin-top: 0;
		margin-bottom: 0;
	}
	.my-lg-1 {
		margin-top: var(--spacer-1);
		margin-bottom: var(--spacer-1);
	}
	.my-lg-2 {
		margin-top: var(--spacer-2);
		margin-bottom: var(--spacer-2);
	}
	.my-lg-3 {
		margin-top: var(--spacer-3);
		margin-bottom: var(--spacer-3);
	}
	.my-lg-4 {
		margin-top: var(--spacer-4);
		margin-bottom: var(--spacer-4);
	}
	.mt-lg-0 {
		margin-top: 0;
	}
	.mt-lg-1 {
		margin-top: var(--spacer-1);
	}
	.mt-lg-2 {
		margin-top: var(--spacer-2);
	}
	.mt-lg-3 {
		margin-top: var(--spacer-3);
	}
	.mt-lg-4 {
		margin-top: var(--spacer-4);
	}
	.mb-lg-0 {
		margin-bottom: 0;
	}
	.mb-lg-1 {
		margin-bottom: var(--spacer-1);
	}
	.mb-lg-2 {
		margin-bottom: var(--spacer-2);
	}
	.mb-lg-3 {
		margin-bottom: var(--spacer-3);
	}
	.mb-lg-4 {
		margin-bottom: var(--spacer-4);
	}
	.ml-lg-0 {
		margin-left: 0;
	}
	.ml-lg-1 {
		margin-left: var(--spacer-1);
	}
	.ml-lg-2 {
		margin-left: var(--spacer-2);
	}
	.ml-lg-3 {
		margin-left: var(--spacer-3);
	}
	.ml-lg-4 {
		margin-left: var(--spacer-4);
	}
	.mr-lg-0 {
		margin-right: 0;
	}
	.mr-lg-1 {
		margin-right: var(--spacer-1);
	}
	.mr-lg-2 {
		margin-right: var(--spacer-2);
	}
	.mr-lg-3 {
		margin-right: var(--spacer-3);
	}
	.mr-lg-4 {
		margin-right: var(--spacer-4);
	}
	.spacer-lg-1 {
		height: var(--spacer-1);
	}
	.spacer-lg-2 {
		height: var(--spacer-2);
	}
	.spacer-lg-3 {
		height: var(--spacer-3);
	}
	.spacer-lg-4 {
		height: var(--spacer-4);
	}
	.vertical-lg-top {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-start;
	}
	.vertical-lg-center {
		display: -ms-flexbox;
		display: flex;
		align-items: center;
	}
	.vertical-lg-bottom {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-end;
	}
	.horizontal-lg-left {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-start;
	}
	.horizontal-lg-center {
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
	}
	.horizontal-lg-right {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-end;
	}
	.text-align-lg-left {
		text-align: left;
	}
	.text-align-lg-center {
		text-align: center;
	}
	.text-align-lg-right {
		text-align: right;
	}
	.text-align-lg-justify {
		text-align: justify;
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
	.d-xl-none {
		display: none;
	}
	.d-xl-block {
		display: block;
	}
	.d-xl-inline {
		display: inline;
	}
	.d-xl-inline-block {
		display: inline-block;
	}
	.d-xl-flex {
		display: flex;
	}
	.d-xl-inline-flex {
		display: inline-flex;
	}
	.p-xl-0 {
		padding: 0 0 0 0;
	}
	.p-xl-1 {
		padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.p-xl-2 {
		padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.p-xl-3 {
		padding: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.p-xl-4 {
		padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.px-xl-0 {
		padding-left: 0;
		padding-right: 0;
	}
	.px-xl-1 {
		padding-left: var(--spacer-1);
		padding-right: var(--spacer-1);
	}
	.px-xl-2 {
		padding-left: var(--spacer-2);
		padding-right: var(--spacer-2);
	}
	.px-xl-3 {
		padding-left: var(--spacer-3);
		padding-right: var(--spacer-3);
	}
	.px-xl-4 {
		padding-left: var(--spacer-4);
		padding-right: var(--spacer-4);
	}
	.py-xl-0 {
		padding-top: 0;
		padding-bottom: 0;
	}
	.py-xl-1 {
		padding-top: var(--spacer-1);
		padding-bottom: var(--spacer-1);
	}
	.py-xl-2 {
		padding-top: var(--spacer-2);
		padding-bottom: var(--spacer-2);
	}
	.py-xl-3 {
		padding-top: var(--spacer-3);
		padding-bottom: var(--spacer-3);
	}
	.py-xl-4 {
		padding-top: var(--spacer-4);
		padding-bottom: var(--spacer-4);
	}
	.pt-xl-0 {
		padding-top: 0;
	}
	.pt-xl-1 {
		padding-top: var(--spacer-1);
	}
	.pt-xl-2 {
		padding-top: var(--spacer-2);
	}
	.pt-xl-3 {
		padding-top: var(--spacer-3);
	}
	.pt-xl-4 {
		padding-top: var(--spacer-4);
	}
	.pb-xl-0 {
		padding-bottom: 0;
	}
	.pb-xl-1 {
		padding-bottom: var(--spacer-1);
	}
	.pb-xl-2 {
		padding-bottom: var(--spacer-2);
	}
	.pb-xl-3 {
		padding-bottom: var(--spacer-3);
	}
	.pb-xl-4 {
		padding-bottom: var(--spacer-4);
	}
	.pl-xl-0 {
		padding-left: 0;
	}
	.pl-xl-1 {
		padding-left: var(--spacer-1);
	}
	.pl-xl-2 {
		padding-left: var(--spacer-2);
	}
	.pl-xl-3 {
		padding-left: var(--spacer-3);
	}
	.pl-xl-4 {
		padding-left: var(--spacer-4);
	}
	.pr-xl-0 {
		padding-right: 0;
	}
	.pr-xl-1 {
		padding-right: var(--spacer-1);
	}
	.pr-xl-2 {
		padding-right: var(--spacer-2);
	}
	.pr-xl-3 {
		padding-right: var(--spacer-3);
	}
	.pr-xl-4 {
		padding-right: var(--spacer-4);
	}
	.m-xl-0 {
		margin: 0 0 0 0;
	}
	.m-xl-1 {
		margin: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-1);
	}
	.m-xl-2 {
		margin: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
	}
	.m-xl-3 {
		margin: var(--spacer-3) var(--spacer-3) var(--spacer-3) var(--spacer-3);
	}
	.m-xl-4 {
		margin: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-4);
	}
	.mx-xl-0 {
		margin-left: 0;
		margin-right: 0;
	}
	.mx-xl-1 {
		margin-left: var(--spacer-1);
		margin-right: var(--spacer-1);
	}
	.mx-xl-2 {
		margin-left: var(--spacer-2);
		margin-right: var(--spacer-2);
	}
	.mx-xl-3 {
		margin-left: var(--spacer-3);
		margin-right: var(--spacer-3);
	}
	.mx-xl-4 {
		margin-left: var(--spacer-4);
		margin-right: var(--spacer-4);
	}
	.my-xl-0 {
		margin-top: 0;
		margin-bottom: 0;
	}
	.my-xl-1 {
		margin-top: var(--spacer-1);
		margin-bottom: var(--spacer-1);
	}
	.my-xl-2 {
		margin-top: var(--spacer-2);
		margin-bottom: var(--spacer-2);
	}
	.my-xl-3 {
		margin-top: var(--spacer-3);
		margin-bottom: var(--spacer-3);
	}
	.my-xl-4 {
		margin-top: var(--spacer-4);
		margin-bottom: var(--spacer-4);
	}
	.mt-xl-0 {
		margin-top: 0;
	}
	.mt-xl-1 {
		margin-top: var(--spacer-1);
	}
	.mt-xl-2 {
		margin-top: var(--spacer-2);
	}
	.mt-xl-3 {
		margin-top: var(--spacer-3);
	}
	.mt-xl-4 {
		margin-top: var(--spacer-4);
	}
	.mb-xl-0 {
		margin-bottom: 0;
	}
	.mb-xl-1 {
		margin-bottom: var(--spacer-1);
	}
	.mb-xl-2 {
		margin-bottom: var(--spacer-2);
	}
	.mb-xl-3 {
		margin-bottom: var(--spacer-3);
	}
	.mb-xl-4 {
		margin-bottom: var(--spacer-4);
	}
	.ml-xl-0 {
		margin-left: 0;
	}
	.ml-xl-1 {
		margin-left: var(--spacer-1);
	}
	.ml-xl-2 {
		margin-left: var(--spacer-2);
	}
	.ml-xl-3 {
		margin-left: var(--spacer-3);
	}
	.ml-xl-4 {
		margin-left: var(--spacer-4);
	}
	.mr-xl-0 {
		margin-right: 0;
	}
	.mr-xl-1 {
		margin-right: var(--spacer-1);
	}
	.mr-xl-2 {
		margin-right: var(--spacer-2);
	}
	.mr-xl-3 {
		margin-right: var(--spacer-3);
	}
	.mr-xl-4 {
		margin-right: var(--spacer-4);
	}
	.spacer-xl-1 {
		height: var(--spacer-1);
	}
	.spacer-xl-2 {
		height: var(--spacer-2);
	}
	.spacer-xl-3 {
		height: var(--spacer-3);
	}
	.spacer-xl-4 {
		height: var(--spacer-4);
	}
	.vertical-xl-top {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-start;
	}
	.vertical-xl-center {
		display: -ms-flexbox;
		display: flex;
		align-items: center;
	}
	.vertical-xl-bottom {
		display: -ms-flexbox;
		display: flex;
		align-items: flex-end;
	}
	.horizontal-xl-left {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-start;
	}
	.horizontal-xl-center {
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
	}
	.horizontal-xl-right {
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-end;
	}
	.text-align-xl-left {
		text-align: left;
	}
	.text-align-xl-center {
		text-align: center;
	}
	.text-align-xl-right {
		text-align: right;
	}
	.text-align-xl-justify {
		text-align: justify;
	}
}


/**** 5. Styling ****/
body {
	font-family: var(--primary-font-family);
	font-weight: var(--primary-font-weight);
	font-size: var(--font-size);
	color: var(--primary-font-color);
	background-color: var(--navy);
	-moz-osx-font-smoothing: grayscale;
	-ms-font-feature-settings: "liga" 1;
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
#main {
	background-color: var(--white);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--secondary-font-family);
	font-weight: var(--secondary-font-weight);
	color: var(--secondary-font-color);
}
h1, .h1 {
	margin-top: calc(var(--text-margin) + 8px);
	margin-bottom: calc(var(--text-margin) + 8px);
	font-size: var(--font-size--h1);
	line-height: calc(var(--font-size--h1) + (var(--font-size--h1) / 6));
}
h2, .h2 {
	margin-top: calc(var(--text-margin) + 6px);
	margin-bottom: calc(var(--text-margin) + 4px);
	font-size: var(--font-size--h2);
	line-height: calc(var(--font-size--h2) + (var(--font-size--h2) / 6));
}
h3, .h3 {
	margin-top: calc(var(--text-margin) + 6px);
	margin-bottom: calc(var(--text-margin) + 4px);
	font-size: var(--font-size--h3);
	line-height: calc(var(--font-size--h3) + (var(--font-size--h3) / 6));
}
h4, .h4 {
	margin-top: calc(var(--text-margin) + 6px);
	margin-bottom: calc(var(--text-margin) - 4px);
	font-size: var(--font-size--h4);
	line-height: calc(var(--font-size--h4) + (var(--font-size--h4) / 6));
}
h5, .h5 {
	margin-top: var(--text-margin);
	margin-bottom: var(--text-margin);
	font-size: var(--font-size--h5);
	line-height: calc(var(--font-size--h5) + (var(--font-size--h5) / 6));
}
h6, .h6 {
	margin-top: var(--text-margin);
	margin-bottom: var(--text-margin);
	font-size: var(--font-size--h6);
	line-height: calc(var(--font-size--h6) + (var(--font-size--h6) / 6));
}
p {
	margin-top: var(--text-margin);
	margin-bottom: var(--text-margin);
}
ol, ul {
	margin-top: var(--text-margin);
	margin-bottom: var(--text-margin);
	margin-left: 20px;
}
p, li {
	line-height: calc(var(--font-size) + (var(--font-size) / 6));
}
li {
	margin-top: calc(var(--text-margin) / 2);
	margin-bottom: calc(var(--text-margin) / 2);
}
nav ul {
	list-style: none;
	margin-left: 0;
}
nav li {
	margin-top: 0;
	margin-bottom: 0;
}
p:first-child, ul:first-child, ol:first-child, li:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	margin-top: 0;
}
p:last-child, ul:last-child, ol:last-child, li:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
	margin-bottom: 0;
}
a {
	color: var(--secondary-font-color);
	font-family: var(--secondary-font-family);
	font-weight: var(--secondary-font-weight);
	text-decoration: none;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}
sub {
	font-size: 60%;
}
sup {
	font-size: 60%;
	vertical-align: text-top;
}
.intro {
	color: var(--secondary-font-color);
	font-family: var(--secondary-font-family);
	font-weight: var(--secondary-font-weight);
	font-size: var(--font-size--intro);
	line-height: calc(var(--font-size--intro) + (var(--font-size--intro) / 6));
}
.btn {
	background-color: var(--secondary-font-color);
	color: var(--white);
	padding: 16px 32px;
	display: inline-block;
	border-radius: 32px;
	font-family: var(--secondary-font-family);
	font-weight: var(--secondary-font-weight);
	font-size: var(--font-size--btn);
	cursor: pointer;
	transform: scale(1);
	transition: all 0.3s 0s;
}
.btn:hover {
	transform: scale(1.1);
}
.btn-sm {
	padding: 8px 16px;
	font-size: calc((var(--font-size--btn) / 10) * 8);
}
.alert {
	padding: var(--spacer-2);
	border: solid 1px;
}
.alert--error {
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
}
.alert--info {
	color: #084298;
	background-color: #cfe2ff;
	border-color: #b6d4fe;
}
.alert--success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
}
.alert--warning {
	color: #664d03;
	background-color: #fff3cd;
	border-color: #ffecb5;
}

.ico {
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
	width: 16px;
	height: 16px;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
.ico-left {
	margin-right: 10px;
}
.ico-right {
	margin-left: 10px;
}
.ico-24 {
	width: 24px;
	height: 24px;
	background-size: 24px;
}
.ico-36 {
	width: 36px;
	height: 36px;
	background-size: 36px;
}
.ico-48 {
	width: 48px;
	height: 48px;
	background-size: 48px;
}
.ico-60 {
	width: 60px;
	height: 60px;
	background-size: 60px;
}
.ico-record {
	background-image: url("../icons/record-icon.png");
}
.ico-plan {
	background-image: url("../icons/plan-icon.png");
}
.ico-compare {
	background-image: url("../icons/compare-icon.png");
}
.ico-comply {
	background-image: url("../icons/comply-icon.png");
}
.ico-plus {
	background-image: url("../icons/read-more-icon.png");
}
.ico-minus {
	background-image: url("../icons/read-less-icon.png");
}
.ico-compliance {
	background-image: url("../icons/green-compliance.png");
}
.ico-fertiliser {
	background-image: url("../icons/green-fertiliser.png");
}
.ico-emissions {
	background-image: url("../icons/green-emissions.png");
}
.ico-licenses {
	background-image: url("../icons/green-licences.png");
}
.ico-login {
	background-image: url("../icons/login-icon.png");
}
.ico-register {
	background-image: url("../icons/register-icon.png");
}
.ico-facebook {
	background-image: url("../icons/facebook-white.svg");
}
.ico-twitter {
	background-image: url("../icons/twitter-white.svg");
}
.ico-linkedin {
	background-image: url("../icons/linkedin-white.svg");
}
.ico-instagram {
	background-image: url("../icons/instagram-icon.png");
}
.ico-hamburger {
	background-image: url("../icons/hamburger-icon.svg");
}
.ico-cross {
	background-image: url("../icons/cross.svg");
}
.navigation-trigger > .ico-cross {
	display: none;
	background-size: 24px;
}
.main-navigation--open .navigation-trigger > .ico-cross {
	display: inline-block;
}
.main-navigation--open .navigation-trigger > .ico-hamburger {
	display: none;
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/**** 7. Form ****/
.field {
	margin-bottom: 16px;
}
.field:last-child {
	margin-bottom: 0;
}
.field.error {
	color: #990000;
}
.field-message {
	display: block;
	font-size: 16px;
	margin-top: -12px;
}
.field--text label, .field--select label, .field--textarea label {
	display: block;
	margin-bottom: 8px;
	font-weight: 300;
	font-size: 14px;
}
.field--button div {
	display: inline-block;
}
.field--button button {
	margin-left: 8px;
	margin-right: 8px;
}
.field--button button:first-of-type {
	margin-left: 0;
}
.field--button button:last-of-type {
	margin-right: 0;
}
textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], .dropdown select {
	background-color: var(--white);
	width: 100%;
	border: none;
	border-radius: 12px;
	padding: 12px 20px;
	font-family: var(--primary-font-family);
	font-weight: 500;
	font-size: 20px;
	color: var(--primary-font-color);
}
.field.error textarea, .field.error input[type="text"], .field.error input[type="email"], .field.error input[type="tel"], .field.error input[type="password"], .field.error .dropdown select {
	background-color: #f8d7da;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], .dropdown select {
	height: 50px;
}
textarea {
	height: auto;
	overflow: auto;
	line-height: normal;
	white-space: pre-wrap;
}
textarea.height--3 {
	height: 182px;
}
label + textarea.height--3 {
	height: 174px;
}
textarea.height--4 {
	height: 248px;
}
label + textarea.height--4 {
	height: 240px;
}
.dropdown {
	position: relative;
	display: block;
}
.dropdown::after {
	display: block;
	content: ' ';
	height: 10px;
	width: 10px;
	border-right: solid 2px var(--primary-font-color);
	border-bottom: solid 2px var(--primary-font-color);
	transform: rotate(45deg);
	position: absolute;
	right: 16px;
	top: calc(50% - 5px);
}
.dropdown select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	margin: 0;
	cursor: pointer;
}
option {
	color: var(--primary-font-color);
}
select:invalid, option:disabled {
	color: var(--placeholder-font-color);
}
::placeholder {
	color: var(--placeholder-font-color);
	opacity: 1;
}
::-ms-input-placeholder {
	color: var(--placeholder-font-color);
}
button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.grecaptcha-badge {
	z-index: 1;
}
.edit-disabled textarea, .edit-disabled input, .edit-disabled select {
	background-color: transparent !important;
	padding: 0 !important;
	height: auto !important;
}
.edit-disabled label {
	margin-bottom: 0!important;
}
.edit-disabled .dropdown::after {
	display: none;
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/**** 7. Components ****/

/* Navigation */
.navigation {
	height: var(--sticky-height);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	transition: height 0.3s ease-in-out 0s;
}
.sticky .navigation {
	height: var(--sticky-scrolling-height);
}
.navigation-trigger {
	cursor: pointer;
	float: right;
	width: 48px;
	height: 48px;
	line-height: 48px;
}
.navigation-trigger span {
	display: inline-block;
	text-indent: -9999em;
}
.li-btn {
	display: inline-block;
	margin-left: 20px;
	margin-top: 10px;
}
.li-btn + .li-btn {
	margin-left: 10px;
}
#main-navigation {
	position: fixed;
	right: -250px;
	top: 0;
	height: 100%;
	background-color: var(--navy);
	z-index: 99;
	width: 250px;
	/*margin-right: -250px;*/
	transition: all 0.5s 0s;
}
/*.status--loaded #main-navigation {
	transition: all 0.5s 0s;
}*/
#main-navigation.navigation-panel--open {
	/*margin-right: 0;*/
	right: 0;
}
#container {
	width: 100%;
	margin-left: 0;
	transition: all 0.5s 0s;
}
.main-navigation--open > #container, .main-navigation--open #sticky-header {
	margin-left: -250px;
}
#main-navigation li {
}
#main-navigation a:not(.btn) {
	display: block;
	padding: 12px 20px;
	background-color: rgba(255, 255, 255, 0);
	border-top: solid 1px rgba(255,255,255,0.2);
	transition: all 0.3s 0s;
}
#main-navigation li:first-child a:not(.btn) {
	border-top: none;
}
#main-navigation a:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
#main-navigation .sub-menu {
	margin-top: 0;
	border-top: solid 1px rgba(255,255,255,0.2);
}

@media screen and (min-width: 576px) {
	/* sm */
	#main-navigation {
		width: 300px;
		/*margin-right: -300px;*/
		right: -300px;
	}
	.main-navigation--open > #container, .main-navigation--open #sticky-header {
		margin-left: -300px;
	}
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
	
}
@media screen and (min-width: 1440px) {
	/* xxl */
	.main-navigation--open > #container, .main-navigation--open #sticky-header {
		margin-left: 0;
	}
	.navigation-trigger {
		display: none;
	}
	#main-navigation {
		position: static;
		width: auto;
		margin-right: 0;
		background-color: transparent;
		height: auto;
	}
	#main-navigation li {
		display: inline-block;
		margin-top: 0;
		margin-left: 30px;
		position: relative;
	}
	#main-navigation a:not(.btn) {
		display: inline-flex;
		border-top: none;
		background-color: transparent;
		padding: 0;
		transform: scale(1);
		border-bottom: solid 3px transparent;
		transition: all 0.5s 0s;
		height: var(--sticky-height);
		vertical-align: middle;
		align-items: center;
	}
	.sticky #main-navigation a:not(.btn) {
		height: var(--sticky-scrolling-height);
	}
	#main-navigation li:hover > a:not(.btn) {
		transform: scale(1.1);
		/*border-bottom: solid 3px var(--green);*/
	}
	#main-navigation .li-btn + .li-btn {
		margin-left: 10px;
	}
	#main-navigation .sub-menu {
		position: absolute;
		background-color: var(--navy);
		min-width: 200px;
		text-align: left !important;
		z-index: 1;
		margin-top: 0;
		margin-left: -30px;
		border-bottom: solid 2px var(--green);
		border-top: none;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		transition: all 0.3s ease-in-out 0s;
	}
	#main-navigation li:hover .sub-menu {
		opacity: 1;
		max-height: 300px;
	}
	#main-navigation .sub-menu a:not(.btn) {
		height: auto !important;
		padding: 16px 0;
	}
}

/* Cover Image */
.cover-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}
.cover-image img {
	object-fit: cover;
	object-position: center center;
	height: 100%;
	width: 100%;
}
.cover-image-text {
	margin-top: calc(100vh / 2);
	margin-left: calc(var(--background-margin) * -1);
	margin-right: calc(var(--background-margin) * -1);
}
.cover-image .overlay-text {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--white);
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cover-image .overlay-text h1, .cover-image .overlay-text h2, .cover-image .overlay-text h3{
	color: var(--white);
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
	.cover-image-text {
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
	.cover-image-text {
		max-width: 50%;
	}
}

/* Box */
.box {
	min-height: 100%;
}
@media screen and (min-width: 576px) {
	/* sm */
	.intrude-sm--left {
		margin-left: calc((100% / 4) * -1);
	}
	.intrude-sm--right {
		margin-right: calc((100% / 4) * -1);
	}
}
@media screen and (min-width: 768px) {
	/* md */
	.intrude-md--left {
		margin-left: calc((100% / 4) * -1);
	}
	.intrude-md--right {
		margin-right: calc((100% / 4) * -1);
	}
}
@media screen and (min-width: 992px) {
	/* lg */
	.intrude-lg--left {
		margin-left: calc((100% / 4) * -1);
	}
	.intrude-lg--right {
		margin-right: calc((100% / 4) * -1);
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
	.intrude-xl--left {
		margin-left: calc((100% / 4) * -1);
	}
	.intrude-xl--right {
		margin-right: calc((100% / 4) * -1);
	}
}

/* Icon Text */
.icon-text {
	position: relative;
	padding-left: 72px;
	min-height: 60px;
	display: flex;
	align-items: center;
}
.icon-text .ico {
	position: absolute;
	left: 0;
	top: 0;
}

/* Diagonal Images */
.diagonal {
	position: relative;
	height: calc((100vw - (var(--background-margin) * 2)));
	max-height: 550px;
}
.diagonal img {
	position: absolute;
	max-width: 60%;
}
.diagonal--down img:first-child {
	left: 0;
	top: 0;
}
.diagonal--down img:last-child {
	right: 0;
	bottom: 0;
}
.diagonal--up img:first-child {
	left: 0;
	bottom: 0;
}
.diagonal--up img:last-child {
	right: 0;
	top: 0;
}
@media screen and (min-width: 576px) {
	/* sm */
	.diagonal {
		height: calc((100vw - 20px - (var(--background-margin) * 2) - (var(--gutter-width) * 2)) / 2);
	}
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/* Social Media Links */
.social-media li {
	display: inline-block;
	margin: 0 8px;
}
.social-media li:first-child {
	margin-left: 0;
}
.social-media li:last-child {
	margin-right: 0;
}
.social-media span {
	text-indent: -9999em;
	display: inline-block;
	visibility: hidden;
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/* Toggle Visibility */
.toggle-visibility {
	max-height: 400px;
	overflow: hidden;
	opacity: 1;
	transition: all 0.5s 0s;
}
.toggle-visibility--200 {
	max-height: 200px;
}
.toggle-visibility--800 {
	max-height: 800px;
}
.toggle-visibility--1200 {
	max-height: 1200px;
}
.toggle-visibility--1600 {
	max-height: 1600px;
}
.toggle-visibility--hide {
	max-height: 0;
	opacity: 0;
}
.toggle-visibility--hide + * {
	margin-top: 0;
	transition: margin-top 0.5s 0s;
}

/**** 8. Theme ****/

/* Sticky Menu */
#sticky-header {
	height: var(--sticky-height);
	transition: all 0.5s 0s;
}
#sticky-header::after {
	/* fixes iphone animation bug */
	content: ' ';
	background-color: var(--navy);
	position: absolute;
	display: block;
	height: 100%;
	width: 100px;
	right: -100px;
}
.sticky #sticky-header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 2;
	height: var(--sticky-scrolling-height);
}
body.sticky {
	margin-top: var(--sticky-scrolling-height);
}
.sticky a:not([href]) {
	display: block;
	position: relative;
	top: calc(var(--sticky-scrolling-height) * -1);
	visibility: hidden;
}
.logo {
	max-width: 180px;
	transition: max-width 0.5s 0s;
}
.sticky .logo {
	max-width: 160px;
}
#checkout table {
	width: 100%;
	text-align: left;
}
#checkout td, #checkout th {
	padding: 12px 16px;
	vertical-align: middle;
}
#checkout .table--heading {
	background-color: var(--navy);
	color: var(--white);
}
#checkout .table--product td {
	padding: 24px 16px;
}
#checkout .table--start-totals td {
	border-top: solid 3px var(--sky);
}
#checkout .table--end-totals {
	font-weight: 600;
}
#checkout .table--end-totals td {
	border-bottom: solid 3px var(--sky);
}

/* Case Studies */
.case-study {
	margin-bottom: var(--spacer-3);
}
.case-study .image {
	position: relative;
}
.case-study .hover-image {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s ease-in-out 0s;
}
.case-study .image:hover .hover-image {
	opacity: 1;
}
.case-study .link p {
	text-align: center;
	margin-top: var(--spacer-2);
	font-size: 20px;
	line-height: 24px;
}

@media screen and (min-width: 576px) {
	/* sm */
}
@media screen and (min-width: 768px) {
	/* md */
	.case-study {
		margin-bottom: 0;
	}
}
@media screen and (min-width: 992px) {
	/* lg */
}
@media screen and (min-width: 1200px) {
	/* xl */
}

/* Always put colours last for smooth inheritance */
.background--navy {
	background-color: var(--navy);
	color: var(--white);
}
.background--navy h1, .background--navy h2, .background--navy h3, .background--navy h4, .background--navy h5, .background--navy h6, .background--navy .h1, .background--navy .h2, .background--navy .h3, .background--navy .h4, .background--navy .h5, .background--navy .h6, .background--navy a {
	color: var(--white);
}
.background--sky {
	background-color: var(--sky);
}
.background--grey {
	background-color: var(--grey);
}
.background--sand {
	background-color: var(--sand);
}
.background--white {
	background-color: var(--white);
}
.background--trans-black {
	background-color: rgba(0,0,0,0.64);
	color: var(--white);
}
.background--trans-black h1, .background--trans-black h2, .background--trans-black h3, .background--trans-black h4, .background--trans-black h5, .background--trans-black h6, .background--trans-black .h1, .background--trans-black .h2, .background--trans-black .h3, .background--trans-black .h4, .background--trans-black .h5, .background--trans-black .h6, .background--trans-black a {
	color: var(--white);
}
.colour--default {
	color: var(--primary-font-color);
}
.colour--green {
	color: var(--green);
}
.btn--green {
	background-color: var(--green);
}

.contact-details {
	color: var(--primary-font-color);
	font-size: 30px;
}

#cookie-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}
#cookie-close {
	position: absolute;
	top: var(--spacer-3);
	right: var(--spacer-4);
	cursor: pointer;
}

@media screen and (min-width: 576px) {
	/* sm */
	.logo {
		max-width: 200px;
	}
	.sticky .logo {
		max-width: 175px;
	}
}
@media screen and (min-width: 768px) {
	/* md */
}
@media screen and (min-width: 992px) {
	/* lg */
	.logo {
		max-width: 250px;
	}
	.sticky .logo {
		max-width: 200px;
	}
}
@media screen and (min-width: 1200px) {
	/* xl */
}