/*Sliding Text and Icon Menu Style*/

.sti-menu
{
	width:							auto;
	height:							100%;
	position:						relative;
	margin-top: 					0px;
	margin-bottom: 					0px;
	padding:						80px 0 80px 0;	
}

.sti-menu li
{
	position:						relative;
/*	float:							left; /**/
	max-width:						400px;
	width:							90%;
	height:							200px;
	margin-left:					auto;
	margin-right:					auto;
	margin-top: 					20px;
	margin-bottom: 					0px;	
}


.sti-menu li a
{
	display:						block;
	overflow:						hidden;
	background:						#fff;
	text-align:						center;
	height:							100%;
	width:							100%;
	position:						relative;
	-moz-box-shadow:				1px 1px 2px #ddd;
	-webkit-box-shadow:				1px 1px 2px #ddd;
	box-shadow:						1px 1px 2px #ddd;
}

.sti-menu li a h2
{
	font:							normal 1.2em "Elektra"; 
	text-transform:					uppercase;
	text-align:						center;
	position:						absolute;
	padding:						0px;
	width:							100%;
	top:							130px;
	left:							0px;
}

.sti-menu li a h3
{
	font:							normal 0.7em "Elektra"; 
	text-transform:					normal;
	text-align:						center;
	color: 							#111;
	position:						absolute;
	top:							160px;
	left:							0px;
	width:							100%;
	padding:						0px;
}


.sti-icon
{
	width:							100px;
	height:							100px;
	position:						absolute;
	background-position:			top left;
	background-repeat:				no-repeat;
	background-color:				transparent;
	left:							auto;
	right:							auto;
	top:							20px;
}

.sti-icon-care
{
	background-image:url(../images/care.png);
}

.sti-icon-alternative
{
	background-image:url(../images/alternative.png);
}

.sti-icon-family
{
	background-image:url(../images/family.png);
}

.sti-icon-info
{
	background-image:url(../images/info.png);
}


@media screen and (min-width: 620px) 
{
.sti-menu
{
	width:							auto;
	height:							530px;
	position:						relative;
	margin-top: 					0px;
	margin-bottom: 					0px;
	padding:						60px 0px 0px 0px;
}
	
.sti-menu li
{
	position:						relative;
	float:							left;
	width:							46%;
	max-width:						420px;	
	height:							200px;
	padding:						2%;
	margin:							0;
	margin-top: 					0px;
	margin-bottom: 					0px;	
}	

.sti-menu li a h2
{
	top:							130px;
}

.sti-menu li a h3
{
	top:							160px;
}

}

@media screen and (min-width: 920px)
{
.sti-menu
{
	width:							auto;
	height:							430px;
	position:						relative;
	margin-top: 					0px;
	margin-bottom: 					0px;
	padding:						0px 0px 0px 0px;
}
	
.sti-menu li
{
	position:						relative;
	float:							left;
	width:							21%;
	max-width:						420px;	
	height:							300px;
	padding:						2%;
	margin:							0;
	margin-top: 					40px;
	margin-bottom: 					20px;	
}	

.sti-menu li a h2
{
	top:							220px;
}

.sti-menu li a h3
{
	top:							250px;
}

}