/*	Styles for home page

	v1.01.00
	
	1.00.00	:	Initial version
	1.01.00	:	Tweaks to HS panel
	
*/


/* Styles for all screen sizes */

	#h_overview{
	}
	#h_home_tpp .h_hero, #h_home_haemostasis .h_hero{
		position: static !important;
	}
	#h_home_v8_eclass, #h_home_haemostasis, #h_home_tpp{
		height: 450px;
	}
	#h_home_v8_eclass{
	}
	#h_home_tpp{
		background: #efefef url(../../../../../h_media/960/tpp/tpp-skyline-960x640.jpg) 0 -50px no-repeat;
	}
	#h_home_haemostasis h2, #h_home_tpp h2{
		padding-top: 10px;
		font-size: 2.4em;
		line-height: 1em;
	}
	#h_home_haemostasis{
		background: black url(../../../../../h_media/960/hs/haemostasis-home-qa-960x480.jpg) top left no-repeat;
	}
	#h_home_haemostasis h2{
		font-size: 2.4em !important;
		color: white !important;
	}
	#h_home_haemostasis .h_summary li, #h_home_haemostasis .h_summary p{
		color: white;
	}
	#h_home_tpp h2{
		font-size: 2.4em !important;
		color: black !important;
	}
	#h_home_tpp h2{
		color: white !important;
	}
	#h_home_v8_eclass .h_hero{
		top: -10px;
		right: 20px;
	}
	#h_home_tpp .h_hero{
		top: -10px;
		right: 20px;
		width: 200px;
		margin-top: 10px;
		margin-right: 40px;
	}
	#v8_e_class_logo{
		margin: 20px 0 0 30px;
		width: 400px;
	}
	
	#h_home_v8_eclass .h_key_points{
		width: 400px;
		margin-left: 40px;
	}
	#h_home_haemostasis .h_key_points{
		width: 700px;
		margin-left: 40px;
	}
	#h_home_haemostasis .h_key_point{
		width: 300px;
		background-color: #cf5f5f;
		background-color: rgba(255, 63, 63, 0.75);
	}
	#h_home_tpp .h_key_point{
		width: 300px;
		background-color: #3f3f7f;
		background-color: rgba(63, 63, 191, 0.75);
	}
	#h_home_tpp .h_key_points{
		width: 600px;
		margin-left: 40px;
	}
	#h_home_tpp .h_summary{
		width: 300px;
	}
	.h_key_points .h_summary{
		margin-left: 0 !important;
	}
	#h_overview .h_summary ul{
		margin-left: 18px !important;
	}


@media screen and (min-width: 640px) and (max-width: 959px){
	/* ipad portrait, single column of 640px */

	#h_home_v8_eclass, #h_home_haemostasis, #h_home_tpp{
		height: 360px;
	}
	#h_home_v8_eclass .h_hero{
		top: -10px;
		right: 0;
		width: 300px;
	}
	#v8_e_class_logo{
		margin: 30px 0 30px 15px;
		width: 300px;
	}
	.h_key_points{
		margin-left: 20px !important;
	}
	#h_home_v8_eclass .h_summary{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	#h_home_v8_eclass .h_key_points{
		width: 340px !important;
	}
	#h_home_haemostasis{
		background-position: -100px 0;
	}
	#h_home_haemostasis .h_key_points{
		width: 450px;
	}
	#h_home_tpp{
		background-size: 720px 480px;
		background-position: 0 0;
	}
	#h_home_tpp .h_hero{
		margin-right: 20px;
	}
	#h_home_tpp .h_key_points{
		width: 400px;
	}
	#h_home_tpp .h_summary{
		width: 250px;
	}
}


@media screen and (max-width: 639px){
	/* iphone portrait */

	#h_home_v8_eclass, #h_home_haemostasis, #h_home_tpp{
		height: 340px;
	}
	#h_home_v8_eclass .h_hero{
		top: 70px;
		right: 0;
		width: 100px;
	}
	#v8_e_class_logo{
		margin: 10px 0 0 7px;
		width: 300px;
	}
	.h_key_points{
		width: 300px !important;
		margin-left: 10px !important;
	}
	.h_key_points .h_summary{
		width: 200px;
	}
	#h_home_haemostasis{
		//background-size: cover;
		background-position: -350px 0;
	}
	#h_home_haemostasis .h_summary p{
		width: 270px;
	}
	#h_home_tpp{
		background-size: 720px 480px;
		background-position: 0 0;
	}
	#h_home_tpp .h_hero{
		width: 100px;
		margin-right: 10px;
	}
	#h_home_tpp h2{
	}
	#h_home_tpp .h_summary{
		width: 260px;
	}

}