/* 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 );


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

	--dark_gray: #444;
	--gray: gray;
	--violet-a: #5936ad;
	--violet-b: #a92fff;
	--violet-c: #d9deff;
	--violet-c: #c6d0ff;
}

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


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

*:focus {
	outline: none;
}

body {

background-color: var( --violet-a );
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");

	color: var( --dark_gray );
	color: var( --violet-c );
/* 	color: #e8bbff; */
/* 	color: white; */
	display: grid;
	grid-gap: var( --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 );

}

body > header {

	display: grid;
	grid-gap: var( --lh );
	grid-template-columns: auto 1fr;
	margin: 0 var( --is );
	margin-top: var( --gap );

}

	body > header > img {

		height: calc( var( --lh ) * 1.8 );

	}

	body > footer {

		display: grid;
		margin: 0 var( --is );
		margin-bottom: var( --gap );

	}

	body > footer > .title {

		border-bottom: 2px solid white;
		font-size: 1.375em;
		font-weight: 600;
		margin-bottom: var( --is );
		padding-bottom: var( --is );

	}

		body > footer > .title > div:last-child {

			display: none;
			text-align: right;

		}

		body > footer > .title > div:last-child > a {

			color: inherit;
			text-decoration: none;

		}

		body > footer #ids {

			margin-top: var( --is );

		}

		body > footer #ids > span > * {

			font-weight: 600;

		}

		body > footer #contact {

			margin-top: var( --is );

		}


		body > footer #contact > * {

			color: inherit;
/* 			color: white; */
			text-decoration: none;
			font-weight: 600;

		}

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

	body > footer > .title {

		display: grid;
		grid-template-columns: 1fr 1fr;

	}

	body > footer > .title > div:last-child {

		display: block;

	}

		body > footer #ids {

			margin-top: 0;

		}

				body > footer #ids > span > span {
/* 					color: white; */
				}

	body > footer #contact-tel {

		display: none;

	}

}

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

	body > footer > .title {

		display: grid;
		grid-template-columns: 1fr 1fr;

	}

	body > footer > div > * {

		display: inline-block;

	}

	body > footer #subfooter {

		display: grid;
		grid-template-columns: 1fr auto;

	}

		#addres {

			grid-column: 1 / 2;
			grid-row: 1 / 2;

		}

		#ids {

			margin-top: 0;
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}

		body > footer #contact {
			display: grid;
			margin-top: 0;
			grid-row: 1 / 3;
			text-align: right;
		}

			#contact-comma {
				display: none;
			}


}

.section {

	align-content: center;
	display: grid;
	grid-gap: var( --gap );
	margin: 0 var( --is );
/* 	min-height: 100vh; */

}

	.section > h2 {

		font-size: 1.375em;
		font-weight: 600;

	}

		.section > h2  > * {

			display: block;

		}

			.title {

				color: white;

			}

		.section > h2  > .title {

			border-bottom: 2px solid var( --violet-a );
			border-bottom: 2px solid white;
			margin-bottom: var( --is );
			padding-bottom: var( --is );

		}

		.section > h2 .subtitle {

			font-size: var( --fs );
			font-weight: 450;

		}

		.section > h2 .subtitle > span {

			color: white;
			font-weight: 650;

		}

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

		.section > h2  .subtitle {

			display: inline-block;

		}

	.section {

		grid-template-columns: 1fr 1fr;

	}

		.section > h2 {

			grid-column: 1 / 3;

		}

}

.calculator {

	background-color: white;
	box-shadow:
		var( --half_is ) var( --half_is ) var( --half_is ) 2px rgba( 0, 0, 0, 0.3 );

	border-radius: var( --half_is );
	border: 2px solid var( --violet-b );
	border: 2px solid white;
	display: grid;
	grid-gap: var( --fs );

/* 	padding: var( --is ); */
	max-width: 450px;
	overflow: hidden;
}

	.calculator > * {

	}

	.calculator > h3 {

		background-image: linear-gradient(
			to right, var( --violet-a ), var( --violet-b ) 90% );

		background-image: linear-gradient(
			100deg, var( --violet-a ), var( --violet-b ) );
		color: white;
		font-size: 1.0625em;
		font-weight: 550;
		padding: var( --is );

	}

	.calculator > h3 > span {

		display: block;

	}

		.calculator > h3 > span > img {

			height: var( --lh );
			margin-bottom: calc( var( --half_is ) * -1.3 );
			margin-left: calc( var( --half_is ) * -0.5 );
			margin-right: var( --half_is );

		}


	.radio {

		border-bottom: 2px solid var( --violet-a );
		display: grid;
		grid-template-columns: 40% 1fr;
		grid-template-columns: 1fr 1fr;
		grid-gap: var( --fs );
		margin: 0 var( --is );
		padding-bottom: var( --is );
/* 		grid-column-gap: var( --lh ); */
/* 		margin-bottom: var( --half_is ); */

	}

		.radio > .button {

			align-items: center;
			color: var( --gray );
			cursor: pointer;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: var( --is );

		}

			.radio > .button > .symbol {

				border: 4px solid var( --gray );
				border-radius: 100%;
				display: grid;
				place-items: center;
				height: calc( var( --fs ) + var( --half_is ) );
				width: calc( var( --fs ) + var( --half_is ) );

			}

				.radio > .button > .symbol > .interior {

					border-radius: 100%;
					background-color: var( --gray );
					height: var( --half_is );
					width: var( --half_is );
					height: calc( 1em - 8px );
					width: calc( 1em - 8px );

				}

		.radio > .button.checked {

			cursor: default;

		}

		.radio > .button.checked,
		.radio > .button:hover {

			color: var( --violet-a );

		}

			.radio > .button.checked > .symbol,
			.radio > .button:hover > .symbol {

				border-color: var( --violet-a );
			}


			.radio > .button.checked > .symbol .interior,
			.radio > .button:hover > .symbol .interior {

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

			}

	.price {

/* 		border-top: 2px solid var( --violet-a ); */
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: var( --is );
		margin: 0 var( --is );
/* 		padding: var( --fs ) 0; */
		padding-bottom: var( --fs );

	}

	.price > .field {

		align-items: center;
		display: grid;
		grid-gap: var( --half_is );
		grid-template-columns: auto auto;

	}

		.price > .field > .label {

			color: var( --violet-a );
			text-align: right;
			white-space: nowrap;

		}

		.price > .field > .input {

			border: 2px solid var( --violet-a );
			border-radius: var( --half_is );
			color: inherit;
			color: var( --violet-a );
		  font-family: "Chivo Mono", monospace;
		  font-optical-sizing: auto;
		  font-weight: inherit;
			font-size: calc( var( --fs ) - var( --half_is ) / 4 );
		  font-style: normal;
			padding: var( --half_is ) calc( var( --half_is ) * 1.5 );
			text-align: right;
			width: 100%;

		}

		.price > .field.sum {

 			align-content: stretch;
			display: grid;
			grid-template-columns: auto 1fr;

		}

		.price > .field.sum > .input {

			align-self: stretch;
/* 			justify-self: stretch; */
			align-items: center;
/* 			background-color: var( --violet-a ); */
			background-image: linear-gradient(
				to right, var( --violet-b ) , var( --violet-a ) );
			background-image: linear-gradient(
			100deg, var( --violet-b ), var( --violet-a ) );
			border: 2px solid var( --violet-a );
			color: white;
			pointer-events: none;
			padding-top: 0;
			padding-bottom: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

		}

		.price > .field.sum > .input > span:not(:first-child) {
			margin-left: 0.25em;
/* 			last-child */
		}

		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {

			-webkit-appearance: none;
		  margin: 0;

		}

		input[type=number] {

			-moz-appearance: textfield;

		}



.summary {

	border-top: 2px solid white;
	padding-top: var( --is );
	text-align: right;

}

	.summary > span {

		color: white;
	  font-family: "Chivo Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 650;
		margin-right: 0.25em;

	}

		.summary > span > span:not(:first-child) {
			margin-left: 0.25em;
		}

		.summary > span > span:last-child {
/* 			margin-left: 0.25em; */
/* 			color: red; */
		}

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

	.summary {

		grid-column: 1 / 3;

	}


}