h1
{
	color:					#7080a0;

	font-family:			serif;
	font-size:				32px;
}

h2
{
	color:					#00152e;

	font-family:			serif;
	font-weight:			normal;
	font-size:				32px;

	margin-top:				10px;
}

p
{
	font-family:			sans;
	font-size:				16px;
	
	margin:					0px;
}

body
{

	background-color:		#cbdcff;
}

#title_img
{
	position:				absolute;
	
	left:					20%;
	right:					20%;
	bottom:					0%;
	
	background-image:		url("../img/sidestream_press.png");
	background-size:		100% auto;
	background-repeat:		no-repeat;
	background-position:	center top;

	overflow:				hidden;
	
	z-index:				10;
}
.title_high
{
	top:					50px;
 	transition:				top 2s ease;
	transition-delay:		0.5s;
}
.title_middle
{
	top:					20%;
 	transition:				top 0.7s ease;
}

#header_contact
{
	position:				absolute;
	text-align:				center;
	
	left:					0;
	right:					0;

	margin-left:			auto;
	margin-right:			auto;

	height:					50px;

	z-index:				19;
}
.header_contact_disabled
{
	bottom:					270px;
 	transition:				bottom 1.3s ease;
}
.header_contact_enabled
{
	bottom:					480px;
	transition:				bottom 1.1s ease;
}

#contact_form
{
	position:				absolute;

	z-index:				20;
}
#contact_instructions
{
	font-weight:			bold;
	text-align:				left;

	z-index:				21;
}
.contact_form_disabled
{
	background-image:		url("../img/envelope.png");
	background-size:		contain;
	background-position:	center center;
	background-repeat:		no-repeat;

	color:					rgba(0, 0, 0, 0);

	width:					56px;
	height:					40px;
	bottom:					220px;

	left:					0;
	right:					0;

	margin-left:			auto;
	margin-right:			auto;

	overflow:				hidden;

	transition:				width 1s ease, height 1s ease, bottom 1s linear;
}
.contact_form_enabled
{
	padding:				10px;
	background-color:		#99a5bf;
	color:					#00152e;

	left:					0;
	right:					0;

	margin-left:			auto;
	margin-right:			auto;

	overflow:				auto;

	width:					60%;
	height:					425px;
	bottom:					24px;

	transition:				color 2s linear, width 1s linear, height 1s linear, bottom 0.6s ease;
}
.contact_label
{
	height:					32px;
	width:					30%;
	float:					left;
	clear:					both;
	text-align:				left;
	z-index:				21;
}
.contact_input
{
	width:					65%;
	float:					left;
	background-color:		rgba(0, 0, 0, 0);
	z-index:				21;
}
.contact_button
{
	float:					left;
	clear:					both;
	z-index:				21;

	background-color:		#ffe5ff
}
#contact_title
{
}
#contact_email
{
}
#contact_message
{
}
#contact_send
{
	margin-top:				32px;
	margin-left:			10%;
	width:					80%;
}


#snackbar
{
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	color: #00152e;
	text-align: center;
	font-family: sans;
	font-weight: bold;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 100;
	left: 50%;
	top: 30px;
}
.snack_good
{
	background-color: #e5ffe5;
}
.snack_bad
{
	background-color: #ffe5ff;
}
#snackbar.show
{
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
	However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.6s;
	animation: fadein 0.5s, fadeout 0.5s 2.6s;
}
@-webkit-keyframes fadein
{
	from {top: 0; opacity: 0;}
	to {top: 30px; opacity: 1;}
}
@keyframes fadein
{
	from {top: 0; opacity: 0;}
	to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout
{
	from {top: 30px; opacity: 1;}
	to {top: 0; opacity: 0;}
}
@keyframes fadeout
{
	from {top: 30px; opacity: 1;}
	to {top: 0; opacity: 0;}
}