/*

		Convert XD size to VW for Desktop (1920 -> 100vw)
		45px -> 2.34vw
		1:0.052

		Convert XD size to VW for Mobile (390 -> 100vw)
		32px -> 8.2vw
		1:0.2564



		Since images are positioned absoluterly we need to declare widths and heights for the containing divs based on 100vw so they can resize correctly and allow the content to be centred both horizontally and vertically.

		For some reason, vw and % are not the same value when assigned to width. vw is a little wider that % for perfer % over vw.

	*/

/*
	###################################
	GENERAL
	###################################
*/


/* 	*, ::after, ::before {
	  box-sizing: border-box;
	  outline: 1px solid limegreen !important;
	} */

	@font-face {
	  font-family: "NoeStandard";
	  src: url('../fonts/noestandard-regular-v20-woff-eot/NoeStandard-Regular.woff2') format('woff2'), url('../fonts/noestandard-regular-v20-woff-eot/NoeStandard-Regular.woff') format('woff');
	}

	@font-face {
	  font-family: "Dual300";
	  src: url('../fonts/Dual300/font.woff2') format('woff2'), url('../fonts/Dual300/font.woff') format('woff');
	}

	@font-face {
	  font-family: "Dual600";
	  src: url('../fonts/Dual600/font.woff2') format('woff2'), url('../fonts/Dual600/font.woff') format('woff');
	}

	body {
		font-family: Dual300;
	}

	h2 {
		font-size: 32px;
		line-height: 35px;
		font-size: 8.2vw;
		line-height: 8.97vw;
		margin-bottom: 6vw;
	}

	h3 {
		font-family: Dual600;
		font-size: 25px;
		line-height: 27px;
		font-size: 6.41vw;
		line-height: 6.92vw;
		margin-bottom: 30px;
		margin-bottom: 7.69vw;
	}

	p, li {
		font-family: Dual300;
		font-size: 20px;
		line-height: 22px;
		font-size: 5.13vw;
		line-height: 5.64vw;
		margin-bottom: 40px;
		margin-bottom: 5vw;
	}

	.intro p, p.intro {
		font-family: Dual600;
		font-size: 32px;
		line-height: 35px;
		font-size: 8.2vw;
		line-height: 8.97vw;
		letter-spacing: -1px;
	}

	ul {
		padding-left: 1.3rem;
		list-style-type: '– ';
	}

	ol {
		padding-left: 1.3rem;
	}

	a {
	  text-decoration: none;
	  transition: color 0.35s ease-in-out;
	}

	strong {
		font-family: Dual600;
	}

	.text-blue {
		color: #65A3B2;
	}


/* DESKTOP */

@media (min-width: 992px) {


	h2 {
		font-size: 60px;
		line-height: 60px;
		font-size: 3.12vw;
		line-height: 3.12vw;
		margin-bottom: 2vw;
	}

	h3 {
		font-family: Dual600;
		font-size: 40px;
		line-height: 45px;
		font-size: 2.08vw;
		line-height: 2.34vw;
		margin-bottom: 30px;
		margin-bottom: 1.56vw;
	}

	p, li {
		font-family: Dual300;
		font-size: 35px;
		line-height: 42px;
		font-size: 1.82vw;
		line-height: 2.184vw;
		margin-bottom: 40px;
		margin-bottom: 2.08vw;
	}

	.intro p, p.intro {
		font-family: Dual600;
		font-size: 45px;
		line-height: 48px;
		font-size: 2.35vw;
		line-height: 2.4vw;
	}

}


/*
	###################################
	NAVBAR
	###################################
*/


	.navbar {
		position: absolute;
		width: 100%;
		padding: 3vw;
		z-index: 1;
	}

	#header-logo {
		width: 32.82vw;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		font-family: Dual600;
		font-size: 29px;
		font-size: 7.44vw;
		color: #197CA8;
	}

	/* ONLY SMALLER THAN DESKTOP */
	@media (max-width: 991.98px) {

		.offcanvas-lg.offcanvas-end {
			 width: 100%;
			 padding-left: 3rem;
			 padding-top: 45vw;
			 background: #D1E5EE;
		}

		.offcanvas-lg.offcanvas-end .offcanvas-body {
			width: 100%;
			padding: 0;
		}

		.navbar-expand-lg .navbar-nav .nav-item {
			padding-top: 2.5rem;
			color: #197CA8;
			border-bottom: 2px solid;
		}

	}


	/* DESKTOP AND ABOVE */
	@media (min-width: 992px) {

		.navbar {
			position: absolute;
			width: 100%;
			padding: 3vw;
			z-index: 1;
		}

		.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
		    justify-content: flex-start;
		}

		.offcanvas-lg .offcanvas-body {
		    margin-left: 22vw;
		}

		.navbar-expand-lg .navbar-nav .nav-link {
			position: relative;
			padding: 0;
			margin: 1vw 1.5vw;
			font-size: 20px;
			font-size: 1.2vw;
			color: #197CA8;
		}

		.navbar-expand-lg .navbar-nav .nav-link::after {
		  content: '';
		  position: absolute;
		  width: 100%;
		  transform: scaleX(0);
		  height: .2vw;
		  bottom: 0;
		  left: 0;
		  background-color: #197CA8;
		  transform-origin: bottom right;
		  transition: transform 0.25s ease-out;
		}

		.navbar-expand-lg .navbar-nav .nav-link:hover::after {
		  transform: scaleX(1);
		  transform-origin: bottom left;
		}


		.dark-header .navbar-expand-lg .navbar-nav .nav-link {
			color: #fff;
		}

		.dark-header .navbar-expand-lg .navbar-nav .nav-link::after {
		  background-color: #fff;
		}

		#header-logo {
			width: 12vw;
		}

	}


	.hamburger {
		position: absolute;
		right: 40px;
		top: 40px;
	}

	.hamburger.is-active {
		right: 55px;
		top: 40px;
	}

	.hamburger-inner,
	.hamburger-inner::after,
	.hamburger-inner::before {
	    background-color: #65A3B2;
	}

	.dark-header .hamburger-inner,
	.dark-header .hamburger-inner::after,
	.dark-header .hamburger-inner::before {
	    background-color: #fff;
	}

	.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before {
	    background-color: #197CA8;
	}



/*
	###################################
	FOOTER
	###################################
*/


footer {
	position: relative;
	padding-top: 40vw;
}

footer a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding: 0;
}

footer a:hover {
	color: #87DAEF;
}

.footer-inner {
	position: relative;
	width: 100%;
	height: 127vw;
	background: #197CA8;
}

#footer-image {
	display: block;
	position: absolute;
	top: -31vw;
	width: 100%;
	height: 62vw;
	z-index: 0;
}

#footer-links {
	display: block;
	position: absolute;
	width: 45%;
	margin: 0;
	top: 82vw;
	left: 55%;
}

#footer-links li {
	font-size: 15px;
	font-size: 3.85vw;
	line-height: 20px;
	line-height: 5.13vw;
	padding: 0;
	margin: 0;
}

#footer-links li:last-child {
	margin-top: 20px;
}

#footer-contact {
	position: absolute;
	top: 40vw;
	left: 8%;
	font-size: 4.62vw;
}

#footer-contact h4 {
	font-family: Dual600;
	font-size: 32px;
	font-size: 8.2vw;
}

#logo-footer {
	position: absolute;
	top: 75vw;
	left: 8%;
	width: 38.46vw;
	height: 38.46vw;
}

@media (min-width: 992px) {

	footer {
		padding-top: 0vw;
	}

	footer a {
		padding: 0.3vw 0;
	}

	.footer-inner {
		height: 18vw;
	}

	#footer-image {
		top: -6.25vw;
		left: 4.42708333%;
		width: 20.26041667%;
		height: 12.5vw;
	}

	#footer-links {
		width: 15.625%;
		margin: 0;
		top: 9.73958333vw;
		left: 7.29166667%;
	}

	#footer-links li {
		font-size: 0.78vw;
		line-height: 0.78vw;
		padding: 0;
		margin: 0;
	}

	#footer-links li:last-child {
		margin-top: 20px;
	}

	#footer-contact {
		top: 5.98958333vw;
		left: 56.25%;
		font-size: 1.196vw;
	}

	#footer-contact h4 {
		font-size: 29px;
		font-size: 1.508vw;
	}

	#logo-footer {
		top: 4.32291667vw;
		left: 83.48958333%;
		width: 9.16666667vw;
		height: 9.16666667vw;
	}

}


/*
	###################################
	QUOTE & BACKGROUNDS
	###################################
*/

	.background {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.quote {
		border-left: 1px solid #000000;
		padding-left: 15px;
		padding-left: 3.85vw;
	}

	.quote h3,
	.quote blockquote {
		font-family: NoeStandard;
		color: #65A3B2;
		font-size: 100px;
		line-height: 100px;
		font-size: 25.64vw;
		line-height: 25.64vw;
		margin-bottom: 50px;
		margin-bottom: 12.82vw;
	}

	.quote h3 {
		margin-top: -4vw;
		margin-bottom: 20px;
		margin-bottom: 5.13vw;
	}

	.quote blockquote {
		font-size: 30px;
		line-height: 35px;
		font-size: 7.69vw;
		line-height: 8.97vw;
	}

	.content cite,
	.quote cite {
		display: block;
		font-style: normal;
		font-size: 20px;
		line-height: 25px;
		font-size: 5.13vw;
		line-height: 6.41vw;
	}


	.content cite {
		display: block;
		font-style: normal;
		font-size: 15px;
		font-size: 3.85vw;
		line-height: 20px;
		line-height: 5.13vw;
	}


/*  DESKTOP */

	@media (min-width: 992px) {

		.quote {
			padding-left: 15px;
			padding-left: 0.78vw;
		}

		.quote h3,
		.quote blockquote {
			font-family: NoeStandard;
			color: #65A3B2;
			font-size: 100px;
			line-height: 100px;
			font-size: 5.2vw;
			line-height: 5.2vw;
			margin-bottom: 50px;
			margin-bottom: 2.6vw;
		}

		.quote h3 {
			margin-top: -0.7vw;
			margin-bottom: 20px;
			margin-bottom: 1.04vw;
		}

		.quote blockquote {
			font-size: 30px;
			line-height: 35px;
			font-size: 1.56vw;
			line-height: 1.82vw;
		}

		.content cite,
		.quote cite {
			display: block;
			font-style: normal;
			font-size: 20px;
			line-height: 25px;
			font-size: 1.04vw;
			line-height: 1.3vw;
		}

	}


/*
	###################################
	ANIMATION
	###################################
*/

	.section-fade {
		 position: relative;
		 -webkit-transform: translate3d(0, 50px, 0);
		 transform: translate3d(0, 50px, 0);
		 opacity: 0;
		 will-change:opacity, transform
	}

	@media (max-width: 767px) {
		 .section-fade {
			  -webkit-transform: translate3d(0, 25px, 0);
			  transform:translate3d(0, 25px, 0)
		 }
	}

	@media (max-width: 575px) {
		 .section-fade {
			  opacity: 1 !important;
			  -webkit-transform: none !important;
			  transform: none !important;
			  will-change:auto !important
		 }
	}

	.section-fade.activated {
		 opacity: 1;
		 -webkit-transform: translate3d(0, 0, 0);
		 transform: translate3d(0, 0, 0);
		 -webkit-transition: opacity .5s ease, -webkit-transform .5s ease;
		 transition: opacity .5s ease, -webkit-transform .5s ease;
		 transition: opacity .5s ease, transform .5s ease;
		 transition: opacity .5s ease, transform .5s ease, -webkit-transform .5s ease
	}