:root {
	--head_and_foot: #242851;
	--grad_main_left: #37214e;
	--grad_main_right: #4e2924;
	--font_color: #DCFFF2;
	--title_color: #FFDE8A;
	--comp_color: #e97a3d;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: Medium;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.mask-container {
	container-type: inline-size;
	--mask-head-size: calc(0.1 * 100cqw);
	--mask-foot-size: calc(0.1 * 100cqw);
}

.mask-box {
	margin-block: calc(-1 * var(--mask-head-size) - 1px) calc(-1 * var(--mask-foot-size) - 1px);
	padding-block: calc(var(--mask-head-size) + 1px) calc(var(--mask-foot-size) + 1px);
	mask-image:
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="100"><g transform="scale(2,-1)" transform-origin="55% 50%"><path d="M0 100V0h1000v4L0 100z"></path><path d="M0 100V0h1000v24L0 100z" opacity=".5"></path><path d="M0 100V0h1000v44L0 100z" opacity=".4"></path><path d="M0 100V0h1000v64L0 100z" opacity=".4"></path><path d="M0 100V0h1000v84L0 100z" opacity=".2"></path></g></svg>'),
		linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px), black calc(100% - var(--mask-foot-size) + 1px), transparent calc(100% - var(--mask-foot-size) + 1px)),
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="100"><g transform="scale(-2,1)" transform-origin="51.66% 50%"><path d="M0 100V0h1000v4L0 100z"></path><path d="M0 100V0h1000v24L0 100z" opacity=".5"></path><path d="M0 100V0h1000v44L0 100z" opacity=".4"></path><path d="M0 100V0h1000v64L0 100z" opacity=".4"></path><path d="M0 100V0h1000v84L0 100z" opacity=".2"></path></g></svg>');
	mask-repeat: no-repeat;
	mask-position: top, center, bottom;
	mask-size: 100%;
	background-image: linear-gradient(90deg, var(--grad_main_left), var(--grad_main_right));
	flex-grow: 1;
	min-height: 1000px;
	align-items: stretch;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	color: var(--font_color);
	font: inherit;
	vertical-align: baseline;
	font-family: "Roboto" ;
	line-height: 1.5;
}

hr {
	border-color: var(--title_color);
	height: 2px;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	p {
		text-align: justify;
	}

	a {
		text-decoration: underline;
	}
	
	.check-list li {
		font-size: 1em;
		line-height: 2em;
		padding-left: 20px;
	}

/* Container */
	.container {
		max-width: 100%;
	}

	.inline-icon {
		padding: 15px 0px;
		width: 25px; /* Adjust size as needed */
		height: auto;
		vertical-align: middle; /* Aligns the image with the middle of the text */
		margin-right: 5px; /* Adds space between icon and text */
	}


	.title {
		padding: 15px 0px;
		color: var(--title_color);
	}
	
/* Row */
	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		text-align: justify;
	}
		
	.rounded-box {
		background-color: var(--head_and_foot); /* Adds a background color */
		border-radius: 25px; /* Defines the rounded corners */
		margin: 20px;
	}

	.two-fifth {
		width: 40%;
		min-width: 420px;
	}

	.fifth {
		width: 20%;
		min-width: 420px;
	}
	.third {
		width: 33%;
		min-width: 420px;
	}
	.two-third {
		width: 66%;
		min-width: 420px;
	}
	.half {
		width: 50%;
		min-width: 420px;
	}

	.full {
		width: 100%;
		min-width: 420px;
				
	}
	
	.padded{
		padding: 20px 50px;
	}

	.paddedtop{
		padding-top: 100px;
	}

	.wrap_reverse {
		flex-wrap: wrap-reverse;
	}
	
	#data_paths {
		width: 100%;
	}
	
	#header_row {
		justify-content: space-between;
		padding-bottom: var(--mask-head-size);
		background: var(--head_and_foot);
	}
	
	#logo {
		padding-left:40px;
	}
	
/* Header */
	#header {
		position: relative;
		background-color: var(--head_and_foot);
		padding: 20px 50px;
	}
	
	#header nav a {
		color: var(--font_color);
		text-decoration: none;
		font-size: 1.2em;
		margin-left: 20px;
		outline: 0;
	}

	#header nav a:hover {
		color: rgba(255,255,255,0.5);
	}

	.subpage #header > .container {
		height: 105px;
	}

	#footer {
		padding: 45px 50px 45px 50px;
		color: var(--font_color);
		height: 250px;
		padding-top: var(--mask-foot-size);
		display: block;
		background: var(--head_and_foot);
		text-align: center;
	}

	#content h1 {
		font-size: 1.8em;
	}
	
	#content h2 {
		font-size: 1.5em;
	}

/* Large */

	@media screen and (max-width: 1280px) {

		/* Multi-use */


		.quote-list li {
			padding: 1em 0 1em 0;
		}

		.quote-list li img {
			width: 60px;
		}

		.quote-list li p {
			margin: 0 0 0 80px;
			font-size: 1em;
			font-style: italic;
			line-height: 1.8em;
		}

		.quote-list li span {
			display: block;
			margin-left: 80px;
			font-size: 0.8em;
			font-weight: 400;
			line-height: 1.8em;
		}

		.feature-image {
			margin: 0 0 1em 0;
		}

		.button-large {
			font-size: 1.5em;
		}

	/* Banner */

		#banner p {
			font-size: 1.75em;
		}

	/* Header */

		#header h1 {
			font-size: 2.25em;
		}

		#header nav a {
			font-size: 1.1em;
		}

	/* Content */

		#content h1 {
			font-size: 1.6em;
		}

		#content h2 {
			font-size: 1.4em;
		}

		#content h3 {
			font-size: 1.1em;
		}

		#content header {
			margin: 0 0 1.25em 0;
		}

	}

/* Medium */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 980px) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}
			
		/* Header */

			#header {
				text-align: center;
			}


			#header > .container:first-child {
				display: none;
			}
				   
	 

		/* Nav */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
				padding-top: 44px;
			}

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 54px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
				color: var(--font_color);
				background-color: var(--head_and_foot);

			}

			#titleBar .title {
				display: block;
				text-align: center;
				font-size: 1.2em;
				font-weight: 400;
				line-height: 48px;
			}

			#titleBar .toggle {
				position: absolute;
				left: 0;
				top: 0;
				width: 80px;
				height: 60px;
			}

			#titleBar .toggle:after {
				content: '';
				display: block;
				position: absolute;
				top: 8px;
				left: 8px;
				background-image: url("../../images/icons/menu.png");
				box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.05), inset 0px -8px 10px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
				text-shadow: -1px -1px 1px black;
				width: 41px;
				height: 41px;
				border-radius: 8px;
			}

			#titleBar .toggle:before {
				position: absolute;
				width: 20px;
				height: 30px;
				top: 10px;
				left: 10px;
				z-index: 1;
				opacity: 0.25;
			}

			#titleBar .toggle:active:after {
				background: rgba(255, 255, 255, 0.05);
			}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
				background-color: var(--head_and_foot);

			}

				#navPanel .link {
					display: block;
					color: var(--font_color);
					text-decoration: none;
					font-size: 1.25em;
					line-height: 2em;
					padding: 0.625em 1.5em 0.325em 1.5em;
					border-top: solid 1px #373d40;
					border-bottom: solid 1px rgba(0, 0, 0, 0.4);
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link:last-child {
						border-bottom: 0;
					}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

			#content h1 {
				font-size: 1.5em;
			}


	}

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */
		
			body, input, textarea, select {
				font-size: 13pt;
				line-height: 1.4em;
			}


		/* Content */

			#content section {
				padding: 30px 20px;
			}

			#content h1 {
				font-size: 1.2em;
			}

			#content h2 {
				font-size: 1.15em;
			}

			#content h3 {
				font-size: 1em;
			}

			#content header {
				margin: 0 0 1.25em 0;
			}

		/* Copyright */

			#copyright {
				padding: 20px 30px;
			}

	}