/* BEGIN: CONTACT /////////////////////////////////////////////////////////// */

	/* BEGIN: CONTACT FORM //////////////////////////////////////////////////// */

	#contact-form {

		display: grid;
/* 		gap: var( --gap-smaller ); */
		overflow: hidden;
		position: relative;
		width: 100%;

	}

		#contact-form > *:not(button) {
			margin-bottom: var( --gap-smaller );
		}

		#contact-form > button {
			margin-bottom: 0;
		}

		#contact-form > *:not(div) {
			border: var( --border );
			border-color: var( --clr-purple );
			border-radius: var( --border-radius );
			color: inherit;
			font: inherit;
			font-size: inherit;
			padding: var( --gap-smallest );
		}

		#contact-form > textarea {

			resize: none;

		}

		#contact-form > button {

			background-color: var( --clr-purple );
			border: 0;
			color: var( --clr-white );
			cursor: pointer;
			font-weight: var( --fw-subtitle );
			transition: background-color var( --anim-short-dur ) ease-in-out;

		}

		#contact-form > button.valid {

			background-color: var( --clr-green );
		}

		#contact-form-field.valid {

			color: var( --clr-green );
			border-color: var( --clr-green );
		}

		#contact-form-field-incorrect,
		#contact-form-acceptation-incorrect {

			color: var( --clr-purple );
			font-weight: var( --fw-subtitle );
			margin-bottom: 0 !important;
			max-height: 0;
			overflow: hidden;
			transition:

				max-height var( --anim-short-dur ) ease-in-out,
				margin-bottom var( --anim-short-dur ) ease-in-out;

		}

			#contact-form-field-incorrect.incorrect,
			#contact-form-acceptation-incorrect.incorrect {

				max-height: calc( var( --lh-px ) * 2 );
				margin-bottom: var( --gap-smaller ) !important;

			}

			#contact-form-acceptation-input {

				display: grid;
				border: 2px solid var( --clr-purple );
				border-radius: var( --border-radius );
				cursor: pointer;
				float: left;
				height: calc( var( --lh-px ) * var( --ar ) + var( --lh-gap-half ) );
				margin-right: 0.6em;
				place-content: center;
/* 				transform: translateY( 0.15em ); */
				transition: border-color var( --anim-short-dur ) ease-in-out;
				width: calc( var( --lh-px ) * var( --ar ) + var( --lh-gap-half ) );

			}

			#contact-form-acceptation-input.acceptation {

				border-color: var( --clr-green );
			}

				#contact-form-acceptation-input > span {

					background-color: var( --clr-light-gray );
					background-color: var( --clr-purple );
					border-radius: calc( var( --border-radius ) / var( --ar ) );
					height: var( --lh-px );
					transition: background-color var( --anim-short-dur ) ease-in-out;
					width: var( --lh-px );

				}

				#contact-form-acceptation-input.acceptation > span {

					background-color: var( --clr-green );

				}

					#contact-form-acceptation-text > a {

						color: var( --clr-purple );
						white-space: nowrap;

					}

						#contact-form-acceptation-text > a > span > svg {

							display: inline;
							height: var( --gap-smallest );
							width: auto;
							transform: translateY( 0.15em );
							margin: 0 0.2em;

						}

						#contact-form-acceptation-text > a > span > svg > path {

							fill: var( --clr-purple );

						}

				#contact-form-content {
/* 					border-color: var( --clr-green ) !important; */
				}

	#contact-form-cover {

		border-radius: var( --border-radius );
		align-items: center;
		align-content: center;
		background-color: var( --clr-green );
		color: var( --clr-white );
		display: grid;
/* 		font-weight: var( --fw-subtitle ); */
		gap: var( --gap-small );
		height: 100%;
		justify-items: center;
		justify-content: center;
		width: 100%;
		padding: var( --gap-big );
		position: absolute;
		transform: translateY(-100%);
		transition: transform var( --anim-short-dur ) ease-in-out;

	}

	#contact-form-cover.show {

		transform: translateY( 0 );
	}


		#contact-form-cover > button {

			background-color: var( --clr-purple );
			border: 2px solid var( --clr-white );
			border-radius: var( --border-radius );
			color: var( --clr-white );
			cursor: pointer;
			font: inherit;
			font-weight: var( --fw-subtitle );
	    padding: var( --gap-smallest );

		}


	@media ( min-width: 420px ) {

			#contact-form-acceptation-input {

				margin-right: var( --gap-smaller );

			}

			#contact-form-acceptation-text {

				overflow: auto;

			}

	}

	@media ( min-width: 960px ) {

			#contact-form-acceptation-text > span {
				display: block;
			}

	}

	@media ( min-width: 1280px ) {

			#contact-form-acceptation-text > span {
				display: inline;
			}

	}

	/* END: CONTACT FORM ////////////////////////////////////////////////////// */

	/* BEGIN: CONTACT DETAILS ///////////////////////////////////////////////// */

	#contact-details {

		align-content: start;
		row-gap: var( --gap-smaller );
		display: grid;

	}

		#contact-details .data {

			color: var( --clr-green );
			font-size: var( --fs-middle );
			font-weight: var( --fw-subtitle );

		}

			#contact-details .address > span {

				display: block;

			}

		#contact-details-mail_and_phone {

			display: grid;
			gap: var( --gap-smaller );

		}

			#contact-details-owner > div > .margin-top {

				margin-top: var( --gap-smaller );

			}

			#contact-details-owner > div > .nip > span {

				color: var( --clr-green );
				font-weight: var( --fw-subtitle );

			}

			#contact-details-account > div > span > span {
				display: block;
			}

	@media ( min-width: 480px ) {

		#contact-details-mail_and_phone {

			grid-template-columns: auto auto;
			justify-content: start;

		}

					#contact-details .address > span {
						display: inline;
					}

						#contact-details-account > div > span > span {
							display: inline;
						}

	}

	/* END: CONTACT DETAILS /////////////////////////////////////////////////// */

	/* BEGIN: CONTACT DOCS //////////////////////////////////////////////////// */

	#contact-docs {
		display: none;
	}
	#contact-docs > a {

		display: block;
		color: inherit;
		font-weight: inherit;

		transition:

			color var( --anim-short-dur ) ease-in-out,
			font-weight var( --anim-short-dur ) ease-in-out;

	}

	#contact-docs > a:hover {

		color: var( --clr-purple );
		font-weight: var( --fw-subtitle );

	}

	/* END: CONTACT DOCS ////////////////////////////////////////////////////// */

	/* BEGIN: CONTACT COPYRIGHT /////////////////////////////////////////////// */


	#contact-copyright > div:nth-of-type(2) {

		margin-top: calc( var( --lh-gap-half ) * -1 );
		align-items: center;
		display: flex;

	}

		#contact-copyright-sign {

			color: var( --clr-green );
			font-size: 1.7em;
			font-weight: var( --fw-subtitle );

		}

	/* END: CONTACT COPYRIGHT ///////////////////////////////////////////////// */

/* END: CONTACT ///////////////////////////////////////////////////////////// */