﻿a {
	color: #000;
	opacity: 1;
	transition: opacity .4s cubic-bezier(.44, 0, .56, 1);
}

a:hover {
	opacity: .7;
}

a>img {
	display: block;
}

html {
	font-size: 16px;
}

body {
	margin: 0;
}

body,
button,
input,
select {
	font-family: 'Figtree', Arial, Helvetica, sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 150%;
}

button {
	background-color: #000;
	border-radius: .5rem;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.2em;
	padding: .625rem 1rem;
}

h1,
h2,
h3 {
	line-height: 1.1em;
	margin: 0;
}

h1 {
	font-size: 4rem;
	letter-spacing: -0.06em;
}

h1>span {
	font-weight: 500;
}

h1>span.Bold {
	font-weight: 800;
}

h2 {
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: -.05em;
}

h3 {
	font-size: 2rem;
	font-weight: 500;
}

input:not([type="checkbox"]),
select {
	background-color: #fff;
	border-radius: .5rem;
	border: 1px solid #000;
	padding: .25rem .5rem;
}

input:not([type="checkbox"]) {
	width: 400px;
}

select {
	height: 2.25rem;
	width: 400px
}

table td:not(:first-child) {
	padding-left: .5em;
}

/*
.App {
	background-color: #f7f7f7;
	border-radius: 2rem;
	display: flex;
	margin: 2em 0 1em 0;
	overflow: hidden;
}

.App>.Device {
	align-self: end;
	margin: 2em 2em 0 0;
	position: relative;
}

.App>.Device img {
	display: block;
	width: 275px;
}

.App>.Device>.Fader {
	background: linear-gradient(180deg, #f2efe900 50%, #f7f7f7 100%);
	bottom: 0;
	height: 210px;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 1;
}

.App>.Text {
	margin: 2em;
}

.App p {
	opacity: .7;
}

.App .Links {
	display: flex;
	flex-direction: row;
	gap: .5rem;
}

.App .Links img {
	height: auto;
	object-fit: cover;
	width: 118px;
}

.App .Links .Gap {
	display: none;
}
*/

.Badge {
	border-radius: 2rem;
	margin-bottom: 3rem;
	overflow: hidden;
}

.Badge>img {
	display: block;
	height: auto;
	width: 100%;
}

.Checkbox {
	align-items: center;
	display: flex;
	flex-flow: revert;
	gap: .33em;
}

.Checkbox input[type="checkbox"] {
	width: 1em;
	height: 1em;
}

.Content {
	align-items: center;
	display: flex;
	flex-flow: column;
	padding: 0 1.25rem 1rem 1.25rem;
}

.Content>div {
	flex: 1;
	margin-top: 140px;
	max-width: 1075px;
	width: 100%;
}

.Explanation {
	margin-bottom: 1em;
}

.Error {
	color: #e00000;
}

.Grid {
	display: grid;
}

.Grid.One {
	grid-template:
		"FirstnNameLabel FirstNameInput" 2.5rem
		"LastNameLabel LastNameInput" 2.5rem
		"CityLabel CityInput" 2.5rem
		"PhoneLabel PhoneInput" 2.5rem
		"EmailLabel EmailInput" 2.5rem / 9rem auto;
}

.Grid.Two {
	grid-template:
		"HearAboutUsLabel" 2.5rem
		"HearAboutUsInput" 2.5rem;
}

.Grid.Three {
	grid-template:
		"PromotionCodeLabel PromotionCodeInput" 2.5rem / 9rem auto;
}

.Grid>div:nth-child(odd) {
	align-content: center;
}

.Header {
	align-items: center;
	background-color: #fff;
	display: flex;
	flex-flow: column;
	height: 70px;
	left: 0;
	padding: 0 1.25rem;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 2;
}

.Header>div {
	display: flex;
	flex: 1;
	max-width: 1075px;
	width: 100%;
}

.Header .Logo {
	align-items: center;
	display: flex;
	flex: 1;
}

.Header .Logo a {
	display: inline-block;
}

.Header .Logo img {
	max-height: 54px;
}

.Header .Link {
	align-items: center;
	display: flex;
	flex: 0;
	font-size: 14px;
}

.Info {
	color: #4080e0;
}

.Link a {
	text-decoration: none;
}

.OneTwoThree {
	align-items: center;
	background-color: #000;
	border-radius: 2rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	padding: 1em;
}

.OneTwoThree img {
	max-width: 100%;
}

.OneTwoThree>h3 {
	margin-bottom: 1em;
	text-align: center;
}

.Phone {
	display: inline-block;
	position: relative;
}

.Phone>input {
	padding-left: 1.25rem;
	width: calc(400px - .75rem);
}

.Phone>plus::after {
	align-content: center;
	bottom: 0;
	content: '+';
	left: .5em;
	position: absolute;
	top: 0;
	z-index: 1;
}

.Required::after {
	color: #e00000;
	content: ' *';
}

.Success {
	color: #00e080;
}

.Title {
	display: flex;
	flex-flow: row;
	gap: 1em;
	margin-bottom: 3em;
}

.Title>div {
	display: flex;
	flex-flow: column;
	flex: 35;
	gap: 1em;
}

.Title>h1 {
	flex: 65;
}

.Title empty {
	display: block;
	flex: 1;
}

.Title .Text {
	opacity: .7;
}


@media screen and (width < 1115px) {
	/*
	.App {
		flex-flow: column;
	}

	.App>.Device {
		align-self: center;
		margin: 0;
		position: relative;
	}

	.App>.Text {
		margin: 2em;
		text-align: center;
	}

	.App .Links .Gap {
		display: block;
		flex: 1;
	}
	*/

	input:not([type="checkbox"]) {
		width: 15em;
		width: -webkit-fill-available;
		width: -moz-available;
	}

	select {
		width: 15em;
		width: -webkit-fill-available;
		width: -moz-available;
	}

	.Phone {
		display: block;
	}

	.Phone>input {
		width: 15em;
		width: -webkit-fill-available;
		width: -moz-available;
	}

	.Grid.One {
		grid-template:
			"FirstnNameLabel" min-content
			"FirstNameInput" 2.8rem
			"LastNameLabel" min-content
			"LastNameInput" 2.8rem
			"CityLabel" min-content
			"CityInput" 2.8rem
			"PhoneLabel" min-content
			"PhoneInput" 2.8rem
			"EmailLabel" min-content
			"EmailInput" 2.8rem;
	}

	.Grid.Two {
		grid-template:
			"HearAboutUsLabel" min-content
			"HearAboutUsInput" 2.8rem;
	}

	.Grid.Grid.Three {
		grid-template:
			"PromotionCodeLabel" min-content
			"PromotionCodeInput" 2.8rem;
	}

	.Title {
		flex-flow: column;
		text-align: center;
		gap: 0;
	}

	.Title>h1 {
		font-size: 2.25rem;
	}
}