// ---------------------------------------------------------------
/*! RESET   												    */
// ---------------------------------------------------------------	
/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/
	
	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%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	/* -------------------------------------------------------------*/
	/*! LAYOUT  												    */
	/* -------------------------------------------------------------*/


	body {
		padding: 0;
		margin: 0;
		font-family: "Quicksand";
		filter: invert(100%);
		color: #000;
		cursor: crosshair !important;
	}

	.main {
		filter: invert(100%);
	}

	.header {
		font-family: "Quicksand";
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		min-width: 100vw;
		padding: 0;
		margin: 0;
		color: #000;
	}

	.main .text {
		position: relative;
		margin-top: -10vh;
		width: 60vw;
		text-align: center;
	}


	.footer {
		font-family: "Quicksand";
		height: 22px;
		margin: 66px 22px 22px 22px;
		display: flex;
		justify-content: flex-end;
		align-content: center;
		font-size: 12px;
	}
	
	.screen{
		min-width: 100vw;
		min-height: 100vh;
		min-height: 100dvh;
	}
	
	.screen.center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* -------------------------------------------------------------*/
	/*!  TYPOGRAPHY  										    */
	/* -------------------------------------------------------------*/

	.footer a {
		display: inline-block;
		padding: 0 0 0 11px;
		color: #000;
		text-transform: uppercase;
	}

	a {
		text-decoration: none;
	}

	button {
		appearance: none;
		display: inline;
		padding: 0;
		border: 0;
		font: inherit;
		cursor: pointer;
		background: transparent;
		color: #000;
		text-transform: uppercase;
		margin-top: 33px;
		font-weight: 550;
		cursor: crosshair;

		svg {
			transition: 0.4s;
		}
	}

	button:hover svg {
		transform: translateX(0.25rem);
	}


	/* -------------------------------------------------------------*/
	/*!  ELEMENTS 										    */
	/* -------------------------------------------------------------*/
	
	
	/*! Title */
	.title {
		font-size: 4.3vw;
		color: #000;
		vertical-align: middle;
	
		.title-logo {
			position: relative;
			width: 4vw;
			top: -1.5vw;
			vertical-align: top;
	
		}
	
		.title-oakwood {
			font-weight: 620;
		}
	
		.line {
			display: inline-block !important;
		}
	}
	
	/*! Neopn */
	.neon{
	  position: relative;
	  min-width: 11.2rem;
	  width: 77vw;
	  max-width: 56rem;
	  margin: 0 auto;
	  
	}
	
	.neon-text{
	  position: absolute;
	  min-width: 11.2rem;
	  width: 77vw;
	  max-width: 56rem;
	  font-size: clamp(1.2rem, 10vw, 6rem);
	  line-height: 0.9em;
	  font-family: "Quicksand", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	  color: #000;
	  opacity: 0.2;
	  transition: opacity  0.3s ease-in-out 0s;
	}
	
	.neon-text.active{
	  color: #000;
	  opacity: 1.0;
	  transition: opacity  0.3s ease-in-out 0.2s;
	}
	
	/*! Contact Form */

	#contact {
		position: relative;
		padding: 22px;
		min-height: 360px;
		min-width: 360px;
		max-width: 800px;
		max-height: calc(100vh - 22px);
		max-height: calc(100svh - 22px);
		overflow-y: auto;
		background-color: #ffffffcc;
		backdrop-filter: blur(10px);
		border: 1px solid #000;
		border-radius: 6px;

	}

	.contact-content {
		display: flex;
		flex-direction: row;

	}

	@media screen and (max-width: 800px) {
		.contact-content {
			flex-direction: column;
		}
	}

	.contact-content>div {
		flex: 1 1 0px;
		min-width: 340px;
	}


	h2 {
		font-size: 2em;
		margin: 0 0 33px 0;
		font-weight: 550;

	}

	h3 {
		font-size: 1.17em;
		font-weight: 600;
		margin: 5.5px 0 11px 0;
	}


	.contact-card {
		text-align: center;
		padding: 11px 0 22px 0;
	}

	.contact-form {
		padding: 11px 0 22px 0;
	}


	.contact-button {
		display: block;
		margin-top: 11px;
		color: #000;

		svg {
			transition: 0.4s;
		}
	}

	.contact-button:hover svg {
		transform: translateX(0.25rem);
	}

	.input-container {
		padding: 11px 0 22px 0;
	}

	@media screen and (min-width: 801px) {
		.contact-info.first {
			margin-right: 44px;
			position: relative;
		}

		.contact-info.first:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 10%;
			right: 11px;
			width: 1px;
			background-color: #000;
		}
	}

	@media screen and (max-width: 800px) {
		form {
			text-align: center;
		}

		button {
			margin-left: auto;
			margin-right: auto;

		}
	}

	button {
		font-weight: 400;
		text-transform: none;
	}

	input,
	textarea {
		display: block;
		width: 318px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #000;
		border-radius: 0;
		background-color: transparent;
		padding: 5.5px 0;
		color: #000;
		font-weight: 400;
		font-size: 1em;
		outline: none;
		transition: 0.4s;
		box-sizing: border-box;
		font-family: 'Quicksand', sans-serif !important;
	}

	label {
		width: 318px;
		box-sizing: border-box;
		display: block;
		position: relative;
	}

	input::placeholder,
	textarea::placeholder {
		font-family: 'Quicksand', serif !important;
		color: #000;
	}



	input:focus::placeholder,
	textarea:focus::placeholder {
		opacity: 0;
	}

	input:focus::-webkit-input-placeholder,
	textarea:focus::-webkit-input-placeholder {
		opacity: 0;
	}

	.input-container {
		text-align: left;
		width: 318px;
	}

	@media screen and (max-width: 800px) {
		.input-container {
			margin: 0 auto 0 auto;
		}
	}

	.form-label {
		display: inline-block;
		position: absolute;
		margin-top: -60px;
		color: transparent;
		transition: all 0.1s ease-in-out;
		font-size: 10px;
		font-family: 'Quicksand';
	}

	.inputs {
		position: absolute;
		top: -99999px;
	}


	input:focus::placeholder,
	textarea:focus::placeholder {
		opacity: 0;
	}

	input:focus::-webkit-input-placeholder,
	textarea:focus::-webkit-input-placeholder {
		opacity: 0;
	}


	label:focus-within .form-label,
	label:has(input:not(:placeholder-shown)) .form-label,
	label:has(textarea:not(:placeholder-shown)) .form-label {
		font-size: 10px;
		background-color: transparent;
		padding: 0 0;
		color: #000;
		margin: -44px 0 0 0;
	}

	label:has(textarea:focus) .form-label,
	label:has(textarea:not(:placeholder-shown)) .form-label {
		margin-top: -160px;
	}


	select {
		appearance: none;
		background-color: transparent;
		border: none;
		border-radius: 0;
		padding: 0 1em 0 0;
		margin: 11px 0 11px 0;
		width: 318px;
		font-family: inherit;
		font-size: inherit;
		cursor: inherit;
		line-height: 1.7em;
		border-bottom: 1px solid #000;
		outline: none;
	}

	select::-ms-expand {
		display: none;
	}

	.select::after {
		content: "";
		width: 0.8em;
		height: 0.5em;
		background-color: var(--select-arrow);
		clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	}

	/* -------------------------------------------------------------*/
	/*!  THREE CONTAINER  										    */
	/* -------------------------------------------------------------*/



	.three-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
		transition: opacity 1s;
		opacity: 0;
		filter: invert(100%);
	}

	.three-container.is-ready {
		opacity: 1;
	}

	/* -------------------------------------------------------------*/
	/*!  CURSOR 										    */
	/* -------------------------------------------------------------*/

	.cursor {
		border-radius: 50%;
		width: 66px;
		height: 66px;
		background-color: #fff;
		mix-blend-mode: difference;
		position: fixed;
		top: 0;
		left: 0;
		will-change: transform;
		pointer-events: none;
		z-index: 9999999;
	}
	
	@media (hover: none) {
		.cursor {
			display: none;
		}
	}