/* css for small screens*/

@media only screen and (max-width: 920px)
{
	.mainTitle { color: white; font-weight: bold; font-family: 'PT Sans'; width: 90%; text-align: center; font-size: 30px; }
	
	#textVersionDiv { text-align: right; font-size: 90%; }
	
	.contentContainer { width: 100%; margin: 30px auto; background-color: white; color: #333; }
	
	.backToTopText { font-size: 9px; font-weight: bold; }
	
	.footerDiv { text-align: center; font-size: 15px; color: black; margin: 0 auto; width: 100%; }
	
	.videoBackgroundYouTube iframe {  width: 90%; text-align: center; }
}

@media only screen and (max-width: 640px)
{
	.videoBackground iframe { width: 100%; height: 100% }
	
	.mainProductImage { max-width: 400px; float:none; }
}

@media only screen and (max-width: 400px)
{
	.videoBackground iframe { width: 100%; height: 100% }
	
	.bonusImage { max-width: 200px; float:none; margin: 5px 30px; }
	.bonusImageRight { max-width: 200px; float:none; margin: 5px 30px; }
}