@font-face {
	font-family  : "Playfair Display";
	font-style   : 'normal';
	font-weight  : 400;
	src          : url('../fonts/PlayfairDisplay-Regular.ttf') format('woff2');
	font-display : swap;
}

@font-face {
	font-family  : "Playfair Display";
	font-style   : 'normal';
	font-weight  : 500;
	src          : url('../fonts/PlayfairDisplay-SemiBold.ttf') format('woff2');
	font-display : swap;
}

* {
	font-family : "Playfair Display", serif;
}

html, body {
	height : 100%;
}

h1 {
	font-weight : 400;
}

h1 strong {
	font-weight : 500;
}

h2 {
	margin-bottom : 40px;
}

h3 {
	margin-bottom: 5px;
}

div {
	box-sizing : border-box;
}

.hidden {
	opacity : 0;
}

.container {
	align-content   : center;
	align-items     : center;
	display         : flex;
	flex-direction  : column;
	flex-wrap       : nowrap;
	height          : 100%;
	justify-content : center;
	margin          : -40px auto 0;
	max-width       : 95%;
	min-height      : 470px;
	padding         : 0 20px;
	width           : 1100px;
}

.content {
	line-height : 23px;
}

.row {
	align-content   : flex-start;
	align-items     : flex-start;
	display         : flex;
	flex-direction  : row;
	flex-wrap       : nowrap;
	gap             : 50px;
	justify-content : flex-start;
}

.col {
	width : 50%;
}

.col.form {
	padding : 71px 0 0;
}

#typing-container {
	height        : 24px;
	margin-bottom : 10px;
	position      : relative;
	width         : 300px;
}

#typing-text {
	color         : #555;
	font-size     : 16px;
	height        : 100%;
	height        : 24px;
	overflow      : hidden;
	padding-right : 12px;
	position      : relative;
	white-space   : nowrap;
	width         : fit-content;
}

#typing-cursor {
	animation        : blink 0.5s infinite;
	background-color : #000;
	height           : 24px;
	margin-top       : 0px;
	position         : absolute;
	top              : 0;
	width            : 10px;
}

fieldset {
	border  : 0;
	padding : 0;
}

fieldset.busy {
	opacity        : .5;
	pointer-events : none;
}

.form-group {
	margin-bottom : 1.5rem;
	position      : relative;
}

.form-control {
	border        : 1px solid #bbb;
	border-radius : 5px;
	box-sizing    : border-box; 
	color         : #000;
	font-size     : 14px;
	padding       : 10px 15px;
	width         : 100%;
}

.form-control:focus {
	outline : 1px solid #aaa;
}

.form-control.invalid {
	border-color: #ffc2c2;
}

.form-control.invalid:focus {
	outline : 1px solid #ff9090;
}

.form-control::placeholder {
	color : transparent;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance : none;
	margin             : 0;
}

label {
	color          : #000;
	font-size      : 14px;
	left           : 10px;
	padding        : 12px 5px;
	pointer-events : none;
	position       : absolute;
	top            : 0;
	transition     : all 0.3s ease;
}

.form-control:not(:placeholder-shown) + label {
	background-color : #fff;
	color            : #000;
	font-size        : 10px;
	padding          : 0 5px;
	top              : -5px;
}

.btn {
	background-color : #222;
	border           : 0;
	border-radius    : 3px;
	color            : #fff;
	cursor           : pointer;
	outline          : 0;
	padding          : 12px 30px;
}

.btn:hover {
	background-color : #555;
}

.btn:active {
	background-color : #333;
}

.alert {
	padding : 15px 0;
	line-height: 30px;
}

@keyframes blink {
	50% {
		opacity : 0;
	}
}

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

	html, body {
		height : unset;
	}

	.container {
		justify-content : flex-start;
		min-height      : unset;
		padding         : 40px 20px;
		width           : auto;
	}

	.row {
		flex-direction : column;
		gap            : 10px;
	}

	.col {
		width : 100%;
	}

	.col.form {
		padding : 0;
	}

	.col.form .row {
		flex-direction : row;
		gap            : 20px;
	}

	.col.form .row .col {
		width : 50%;
	}
}

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

	.col.form .row {
		flex-direction : column;
		gap            : 0;
	}

	.col.form .row .col {
		width : 100%;
	}
}