/* BEGIN: VARIABLES \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

:root {

	/* VIEWPORT RANGE //////////////////////////////////////////////////////// */

	--from_vw: 320;
	--to_vw: 1920;

	/* ASPECT RATIO RANGE //////////////////////////////////////////////////// */

	--from_ar: 1.7;
	--to_ar: 1.9;

	/* FONT SIZE ///////////////////////////////////////////////////////////// */

	--from_fs: calc( var( --from_ar ) * 10 );
	--to_fs: calc( var( --to_ar ) * 10 );

	--fs: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_fs ) - var( --from_fs ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_fs ) * 1px );

	/* LINE HEIGHT /////////////////////////////////////////////////////////// */

	--from_lh: calc( var( --from_fs ) * var( --from_ar ) );
	--to_lh: calc( var( --to_fs ) * var( --to_ar ) );

	--lh: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_lh ) - var( --from_lh ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_lh ) * 1px );

	/* INTERLINE SPACING ///////////////////////////////////////////////////// */

	--from_is: calc( var( --from_lh ) - var( --from_fs ) );
	--to_is:  calc( var( --to_lh ) - var( --to_fs ) );

	--is: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_is ) - var( --from_is ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_is ) * 1px );

	--half_is: calc( var( --is ) / 2 );



	/* SECTION WIDTH ///////////////////////////////////////////////////////// */

/*	--from_gap: var( --from_is );
	--to_gap: calc( var(--from_lh ) * var( --to_ar ) );

	--gap: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_gap ) - var( --from_gap ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_gap ) * 1px );*/

	--from_container_margin: var( --from_lh );
	--to_container_margin: calc( var( --to_lh ) * var( --to_ar )  * var( --to_ar ) * var( --to_ar ) );

	--container_margin: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_container_margin ) - var( --from_container_margin ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_container_margin ) * 1px );

	--from_column_gap: var( --from_lh );
	--to_column_gap: calc( var( --to_lh ) * var( --to_ar ) );

	--column_gap: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_column_gap ) - var( --from_column_gap ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_column_gap ) * 1px );

	--from_row_gap: var( --from_lh );
	--to_row_gap: calc( var( --to_lh ) );

	--row_gap: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_row_gap ) - var( --from_row_gap ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_row_gap ) * 1px );

	--from_body_gap: var( --from_lh );
	--to_body_gap: calc( var( --to_lh ) * var( --to_ar )  * var( --to_ar ) );

	--body_gap: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_body_gap ) - var( --from_body_gap ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_body_gap ) * 1px );


	--from_logo_wrapper_width: 320;
	--to_logo_wrapper_width: 480;

	--logo_wrapper_width: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_logo_wrapper_width ) - var( --from_logo_wrapper_width ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_logo_wrapper_width ) * 1px );

	--from_logo_wrapper_border: 7;
	--to_logo_wrapper_border: 8.5;

	--logo_wrapper_border: calc( ( 100vw - var( --from_vw ) * 1px )
		* ( var( --to_logo_wrapper_border ) - var( --from_logo_wrapper_border ) )
		/ ( var( --to_vw ) - var( --from_vw ) )
		+ var( --from_logo_wrapper_border ) * 1px );

	/* COLORS //////////////////////////////////////////////////////////////// */

	--dark_gray: #444;
	--gray: gray;
	--violet: #5936ad;
	--green: #34d2bd;

}

/* END: VARIABLES \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-size-adjust: none;
}

*:focus {
	outline: none;
}

body {

	color: var( --dark_gray );
	color: var( --violet );
	display: grid;
/* 	grid-gap: var( --body_gap ); */
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
	font-size: var( --fs );
	font-style: normal;
	font-weight: 450;
	justify-content: center;
	line-height: var( --lh );
/* 	overflow: hidden; */

}

a {

	color: inherit;
	text-decoration: none;
}

ul {
	list-style-position: inside;
}

ul.gap {

	display: grid;
	grid-gap: var( --row_gap );
}

.section {

	align-content: center;
	display: grid;
	padding: var( --container_margin ) 0;

}

.section h2 {

	color: var( --green );
}

	.section > .container {

		display: grid;
		grid-column-gap: var( --column_gap );
		grid-row-gap: var( --row_gap );
		margin: 0 var( --container_margin );

	}

		.section > .container > .side {

			align-content: center;
			display: grid;
			grid-gap: var( --row_gap );

		}

		.section > .container > .side > img {

			border: 6px solid var( --violet );
			width: 100%;

		}

	.section.violet {

		background-color: var( --violet );
		color: white;

	}

		.section.violet > .container > .side > img {

			border: 6px solid white;
			width: 100%;

		}


header.section {

  background-image: url('images/header.jpg');
  background-size: cover;
/* 	background-repeat:no-repeat; */
	background-position: center center;
	margin: 0;
	padding: 0;
	min-height: 100vh;

}

	header.section > .container {

		background-color: rgba(0,0,0,0.1);
/* 		border: 1px solid red; */
		color: white;
		margin: 0;
		min-height: 100vh;
		place-items: center;

	}

	#header-wrapper {

		display: grid;
		text-align: right;

	}

	#header-wrapper > h1 {

/* 		background-color: white; */
/* 		color: var( --violet ); */
/* 		color: black; */
		justify-self: end;
		font-size: 1.75em;
		font-weight: 650;
		margin-top: var( --is );
/* 		padding: var( --is ); */

	}

	#header-logo-wrapper {
		background-color: rgba(0,0,0,0.2);
		border: var( --logo_wrapper_border ) solid white;
		padding: var( --fs );
		width: var( --logo_wrapper_width );
	}

	#header-logo {

		width: 100%;

	}

	footer > .container > .right.side {

		text-align: right;

	}

@media screen and ( min-width: 1120px ) {

	.section > .container {

		grid-template-columns: 1fr 1fr;

	}

		.section > .container > h2 {

			grid-column: 1 / 3;

		}

	header.section > .container {

		grid-template-columns: 1fr;

	}

	#s8 > .container,
	#s9 > .container {

		grid-template-columns: 1fr;
/* 		color: red; */
	}

}

table {
  border-collapse: collapse;
}

th, td {
	border: 1px solid white;
/* 	padding: var( --is ); */
}

th {
	text-align: left;
}

td {
	text-align: right;
}

@media screen and ( min-width: 480px ) {

	th, td {

		padding: var( --is );
	}

}