/* ===== Mobile rules ===== */

@media only screen 
and (max-device-width : 960px),
and (max-width : 960px)
{
	/* ----- layout ----- */

	/* ----- columns (contacts) ----- */
	.col {
		float: none;
		width: 100%;
		margin: 0;
		margin-top: 1em;
		border-right: none;
	}
	/* ----- gallery and thumbs (set mobile defaults - for device-width values under this) ----- */
	.thumb {
	}
}

/* ----- gallery and thumbs: device-width levels for '.thumb' cols number (width) where height sticks to 4/3 img ratio (at highest or mid-range device-width value) ----- */

/* 960px: 4 thumb cols (width 25%), height 145px (880: 190x145) */
@media only screen 
and (max-device-width : 960px),
and (max-width : 960px) {
	.thumb { width: 23%;
			 height: 145px }
}
/* 800px: 3 thumb cols (width 33%), height 156px (720: 205x156) */
@media only screen 
and (max-device-width : 800px),
and (max-width : 800px) {
	.thumb { width: 31.3%;
			 height: 156px }
}
/* 640px: 2 thumb cols (width 50%), height 116 (560: 152x116) */
@media only screen 
and (max-device-width : 640px),
and (max-width : 640px) {
	.thumb { height: 116px }
}
/* 480px: 2 thumb cols (width 50%), height 152 (480: 200x152) */
@media only screen 
and (max-device-width : 480px),
and (max-width : 480px) {
	.thumb { width: 48%;
			 height: 152px }
}