html, body									{ width: 100%; margin: 0; padding: 0; font-family: Arial, Tahoma, Verdana; text-align: center; }

div										{ box-sizing: border-box; overflow: hidden; }


@media screen and (min-width: 500px)
{
 #mainWrapper								{ width: 100%; padding: 20px; }
 #headerContainer		div						{ margin-top: 20px; font-size: 11px; }
 #headerContainer		h3						{ margin: 0; font-size: 30px; }
 #headerContainer		hr						{ height: 1px; margin: 10px 0px 10px 0px; border: 0; background-color: #d0d0d0; }
 #previewsContainer		div						{ float: left; width: 48%; margin: 20px 2% 0px 2%; }
 #previewsContainer		div				img		{ display: block; width: 100%; }
 #previewsContainer		div:nth-of-type(2n+1)				{ margin-left: 0px; }
 #previewsContainer		div:nth-of-type(2n+2)				{ margin-right: 0px; }
 #footerContainer		hr						{ height: 1px; margin: 30px 0px 10px 0px; border: 0; background-color: #d0d0d0; }
 #footerContainer		div						{ font-size: 11px; }
}


@media screen and (min-width: 550px)
{
 #headerContainer		h3						{ font-size: 32px; }
 #headerContainer		hr						{ margin: 10px 0px 6px 0px; }
 #previewsContainer		div						{ margin: 24px 2% 0px 2%; }
}


@media screen and (min-width: 600px)
{
 #mainWrapper								{ padding: 26px; }
 #headerContainer		h3						{ font-size: 36px; }
 #previewsContainer		div						{ margin: 26px 2% 0px 2%; }
}


@media screen and (min-width: 700px)
{
 #mainWrapper								{ padding: 30px; }
 #headerContainer		div						{ font-size: 12px; }
 #headerContainer		h3						{ font-size: 40px; }
 #headerContainer		hr						{ margin: 10px 0px 13px 0px; }
 #previewsContainer		div						{ width: 32%; margin: 15px 1% 0px 1%; }
 #previewsContainer		div:nth-of-type(2n+1)				{ margin-left: 1%; }
 #previewsContainer		div:nth-of-type(2n+2)				{ margin-right: 1%; }
 #previewsContainer		div:nth-of-type(3n+1)				{ margin-left: 0px; }
 #previewsContainer		div:nth-of-type(3n+3)				{ margin-right: 0px; }
 #footerContainer		div						{ font-size: 12px; }
}


@media screen and (min-width: 800px)
{
 #headerContainer		hr						{ margin: 10px 0px 9px 0px; }
 #previewsContainer		div						{ margin: 17px 1% 0px 1%; }
}


@media screen and (min-width: 800px)
{
 #previewsContainer		div						{ margin: 20px 1% 0px 1%; }
}


@media screen and (min-width: 960px)
{
 #mainWrapper								{ width: 920px; padding: 0px; margin: auto; }
 #previewsContainer		div						{ width: 23.5%; }
 #previewsContainer		div:nth-of-type(3n+1)				{ margin-left: 1%; }
 #previewsContainer		div:nth-of-type(3n+3)				{ margin-right: 1%; }
 #previewsContainer		div:nth-of-type(4n+1)				{ margin-left: 0px; }
 #previewsContainer		div:nth-of-type(4n+4)				{ margin-right: 0px; }
}