/* General */
/*----------------------------------------------------------------------------------------------------*/

html
{
	height: 100%;
}

body
{
	margin: 0;
	padding: 0;
	background-color: #d4edec;
	color: black;
	font-family: "Neue Helvetica W01", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: 15px;
	line-height: 1.1em;
	height: 100%;
}

/* Type */
/*----------------------------------------------------------------------------------------------------*/

h1,
h2,
h3,
h4
{
	font-family: "Neue Helvetica W01", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: #00a79d;
}

h1
{
	font-size: 3em;
	letter-spacing: -0.03em;
}

h2
{
	font-size: 2.3em;
	margin: 0 0 0.5em;
	letter-spacing: -0.03em;
}

h3
{
	font-size: 1.5em;
}

h4
{
	font-size: 1.2em;
}

a
{
	color: #00a79d;
	text-decoration: none;
}

	a:hover,
	a:focus,
	a:active
	{
		color: #60C3ad;
		text-decoration: underline;
	}

	a:visited
	{
		color: #007770;
	}

.note
{
	font-size: 0.9em;
	font-style: italic;
}

/* Forms */
/*----------------------------------------------------------------------------------------------------*/

form
{
	margin-top: 1.5em;
}

fieldset legend
{
	display: none;
}

.form-group
{
	margin-bottom: 10px;
}

.form-control
{
	color: black;
	padding: 6px 8px;
	border: 1px solid silver;
}

label
{
	font-family: "Neue Helvetica W01", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

input,
textarea
{
	-webkit-appearance: none;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

textarea
{
	-webkit-appearance: none;
	height: 150px !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus
{
	border-color: #00a79d !important;
	outline: 0;
	outline: thin dotted \9;
	-webkit-box-shadow: 0 0 8px rgba(212, 237, 236, 0.6) !important;
	box-shadow: 0 0 8px rgba(212, 237, 236, 0.6) !important;
}

button,
.btn
{
	-webkit-appearance: none;
	position: absolute;
	bottom: 15px;
	width: 150px;
	height: 44px;
	font-size: 1.3em !important;
	font-weight: 200;
}

	button:hover,
	button:focus
	{
		font-size: 1.4em !important;
	}

	button:active
	{
		-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125) !important;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125) !important;
		font-size: 1.3em !important;
	}

	button#submit
	{
		right: 15px;
		color: white;
		font-family: "Neue Helvetica W01", "HelveticaNeue-Roman", "Helvetica Neue Roman", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: normal;
		background-color: #00a79d;
	}

		button#submit:hover,
		button#submit:focus,
		button#submit:active
		{
			color: white !important;
		}

	button#cancel
	{
		left: 15px;
		color: black;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: transparent;
	}

		button#cancel:hover,
		button#cancel:focus,
		button#cancel:active
		{
			color: black !important;
		}

/* Placeholders */
/*----------------------------------------------------------------------------------------------------*/

::-webkit-input-placeholder
{
	color: #959595 !important;
}

:-moz-placeholder
{
	color: #959595 !important;
}

:-ms-input-placeholder
{
	color: #959595 !important;
}

/* Validation */
/*----------------------------------------------------------------------------------------------------*/

.field-validation-error
{
	color: #d52e30;
	font-family: "Neue Helvetica W01", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 0.8em;
}

.field-validation-valid
{
	display: none;
}

.input-validation-error
{
	border: 1px solid #d52e30;
}

input[type="checkbox"].input-validation-error
{
	border: none;
}

.validation-summary-errors
{
	color: #d52e30;
}

	.validation-summary-errors ul
	{
		margin: 0 0 1em;
		padding: 0;
		list-style: none;
	}

.validation-summary-valid
{
	display: none;
}

.error
{
	color: #d52e30;
}

/* Layout */
/*----------------------------------------------------------------------------------------------------*/

#body
{
	position: relative;
	height: 100%;
}

.content
{
	width: 60%;
	max-width: 600px;
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	margin: auto;
}

#content
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 60%;
	max-width: 400px;
	height: 620px;
	margin: auto;
	perspective: 1000px;
}

#content #card
{
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transition: 0.75s ease-in-out;
	transition: 0.75s ease-in-out;
}

#content #card #overview,
#content #card #contact-form
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#content #contact-form
{
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	margin: auto;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

	#content #contact-form p
	{
		line-height: 1.4em;
	}

#overview
{
	text-align: center;
}

	#overview img
	{
		cursor: pointer;
		margin-top: 160px;
	}

	#overview img.desktop
	{
		display: block;
	}

	#overview img.mobile
	{
		display: none;
	}

	#overview #description
	{
		color: black;
		position: relative;
		line-height: 1.4em;
		opacity: 0;
	}

		#overview #description span
		{
			cursor: pointer;
			text-decoration: underline;
		}

			#overview #description span:hover,
			#overview #description span:focus,
			#overview #description span:active
			{
				color: #00a79d;
			}

.csstransforms3d #card.flipped
{
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

/* Preload */
/*----------------------------------------------------------------------------------------------------*/

.preload *
{
	-webkit-transition: none !important;
	transition: none !important;
}

/* reCAPTCHA */
/*----------------------------------------------------------------------------------------------------*/

.grecaptcha-badge 
{
	visibility: hidden;
}

#recaptcha-notes
{
	display: none;
	position: absolute;
	bottom: 10px;
	font-size: 1.2rem;
	width: 100%;
	right: 0;
	left: 0;
	padding: 0 15px;
}

/* Tablets */
/*----------------------------------------------------------------------------------------------------*/

@media (max-width: 979px)
{
	#overview img
	{
		width: 100%;
		height: auto;
	}

	#contact-form
	{
		width: 100%;
	}
}

@media (max-width: 769px)
{
	#content
	{
		height: 640px;
	}

	button
	{
		width: 40%;
	}
}

/* Phones */
/*----------------------------------------------------------------------------------------------------*/

@media (max-width: 479px)
{
	body
	{
		padding: 10px 0;
		height: 650px;
	}

	.content,
	#content
	{
		width: 95%;
	}

	#overview img
	{
		width: 50%;
		margin: 110px auto 0;
	}

	#overview img.desktop
	{
		display: none;
	}

	#overview img.mobile
	{
		display: block;
	}
}

@media (max-width: 339px)
{
	button,
	.btn
	{
		width: 40%;
	}
}