p
{
	margin: 0;
}

div.hidden
{
	display: none;
}

/*** Header ***/
div.contact-container
{
	background-image: url('../img/photo/contact.jpg');
	background-attachment: fixed;
}

/*** Cards ***/
div.contact-card
{
	display: block;
	-webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
	margin: 0.5%;
	padding: 5% 0 5% 0;
	background-color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.12);?
}

a.card-button
{
	margin: 12% 0 0 0;
	padding: 4% 12% 4% 12%;
	color: #B0BEC5;
	border-color: #B0BEC5;
	border-radius: 5em;
}

a.card-button:hover
{
	color: #455A64;
	border-color: #455A64;
}

div#contact-social
{
	margin: 12% 0 0 0;
}

/* Contact Form */
p#contact-heading
{
	margin-bottom: 10%;
	padding-bottom: 10%;
	color: #FFFFFF;
	width: 70%;
}


div#form-inner
{
	width: 35%;
	margin: 0 auto;
	text-align: left;
	padding: 5% 0 5% 0;
}

form#display-form
{
	position: relative;
	width: 70%;
	left: 15%;
}

.input
{
	font-family: OpenSansLight;
	font-size: 14pt;
	width: 100%;
	padding: 3% 0 3% 0%;
	outline: none;
	border: none;
	border-bottom: 1px solid #B0BEC5;
	color: #FFFFFF;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	vertical-align: bottom;
	resize: none;
	background-color: rgba(0,0,0,0);
}

input:focus
{
	border-bottom: 1px solid #FFFFFF;
}

textarea:focus
{
	border-bottom: 1px solid #FFFFFF;
}

::-webkit-input-placeholder
{
	color: #B0BEC5;
}

:-moz-placeholder
{
	opacity: 1;
	color: #B0BEC5;
}

::-moz-placeholder
{
	opacity: 1;
	color: #B0BEC5;
}

:-ms-inputplaceholder
{
	color: #B0BEC5;
}

.center
{
	text-align: center;
}

a#send-button
{
	padding: 8% 15% 8% 15%;
	color: #B0BEC5;
	border-color: #B0BEC5;
	border-radius: 5em;
}

a#send-button:hover
{
	color: #FFFFFF;
	border-color: #FFFFFF;
}

/* Validation */
p.error
{
	margin: 5% 0 8% 0;
	font-size: 12pt;
	color: #FFAB00;
	opacity: 0;
}

.input-error
{
	border-color: #FF9100;
}

/*** Responsive ***/
@media only screen
and (max-width: 1200px)
{
	div.contact-card
	{
		padding: 10% 0 10% 0;
	}

	div#contact-social
	{
		margin: 8% 0 0 0;
	}

	div#contact-social > a.social-link
	{
		width: 10%;
		margin: 0 2% 0 2%;
	}

	a.card-button
	{
		margin: 8% 0 0 0;
	}
}

/*** Mobile Portrait ***/
@media only screen
and (max-device-width: 992px)
and (orientation: portrait)
{
	/*** Header ***/
	div.contact-container
	{
		background-image: url('../img/photo/mobile/contact.jpg');
		background-attachment: scroll;
	}

	div.contact-card
	{
		padding: 20% 0 20% 0;
	}

	a.card-button
	{
		font-size: 10pt;
		font-size: 3.7vw;
		padding: 5% 15% 5% 15%;
	}

	div#contact-social > a.social-link
	{
		width: 15%;
		margin: 0 2% 0 2%;
	}
}

/*** Mobile Landscape ***/
@media only screen
and (max-device-width: 992px)
and (orientation: landscape)
{
	/*** Header ***/
	div.contact-container
	{
		background-image: url('../img/photo/mobile/contact.jpg');
		background-attachment: scroll;
	}

	div.contact-card
	{
		padding: 10% 0 10% 0;
	}

	a.card-button
	{
		font-size: 10pt;
		font-size: 2.8vw;
		margin: 8% 0 0 0;
	}

	div#contact-social
	{
		margin: 8% 0 0 0;
	}

	div#contact-social > a.social-link
	{
		width: 10%;
		margin: 0 2% 0 2%;
	}
}