/*
	Module specific styles. TODO: move this to their own files later on
*/
#module-hero
{
	position:relative;
	height:500px;
	background:url(/img/content/soul-ramen-large.jpg) no-repeat 50% 50%; background-size:cover;
	text-align:center;
}
.csstransitions #module-hero
{
	top:7px;
	opacity:0;

	-webkit-transition:top 800ms, opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
	-moz-transition:top 800ms, opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
	-o-transition:top 800ms, opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
	transition:top 800ms, opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
}
.csstransitions.load #module-hero
{
	top:0;
	opacity:1;
}

#module-hero .tagline
{
	position:absolute;
	top:120px; right:20px;
	width:340px;
	padding:20px;
	background:#000; background:rgba(0,0,0,0.5);
	border-radius:5px;
	font-family:'BebasNeueRegular'; color:#FFF;
	box-shadow:1px 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3);
}
#module-hero .tagline .first
{
	font-size:40px; line-height:46px;
}
#module-hero .tagline .second
{
	font-size:86px; line-height:80px;
}
#module-hero .tagline .third
{
	font-size:70px; line-height:60px;
}
#module-hero .announcement
{
	position:absolute;
	bottom:0; left:0;
	width:100%;
	padding:5px 0;
	background:#000; background:rgba(0,0,0,0.5);
	box-shadow:1px 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3);
	color:#FFF;
}
#module-hero img
{
	margin:0 auto 20px auto;
}
@media only screen and (max-width:620px)
{
	#module-hero
	{
		padding:100px 0 30px 0;
		height:auto;
		background:none;
	}
	#module-hero .tagline
	{
		position:relative;
		top:auto; right:auto;
		margin:0 20px;
		width:auto;
		background:#333;
	}

	#module-hero .announcement
	{
		position:relative;
		top:auto; left:auto;
		margin:20px 20px 0 20px; padding:10px;
		width:auto;
		background:#333;
	}
}
@media only screen and (max-width:455px)
{
	#module-hero .tagline .first
	{
		font-size:26px; line-height:28px;
	}
	#module-hero .tagline .second
	{
		font-size:60px; line-height:58px;
	}
	#module-hero .tagline .third
	{
		font-size:46px; line-height:38px;
	}
}