@media all and (max-width: 1079px)	/* down to 768px, aka 'narrow' */
{
	.narrowHidden { display:none; }
}
@media all and (max-width: 767px)	/* down to 480px, aka 'mobile' */
{
	.mobileHidden { display:none; }
	.mobileWidth5percent { width:5%;max-width:5%; }
	.mobileWidth10percent { width:10%;max-width:10%; }
	.mobileWidth15percent { width:15%;max-width:15%; }
	.mobileWidth20percent { width:20%;max-width:20%; }
	.mobileWidth25percent { width:25%;max-width:25%; }
	.mobileWidth30percent { width:30%;max-width:30%; }
	.mobileWidth35percent { width:35%;max-width:35%; }
	.mobileWidth40percent { width:40%;max-width:40%; }
	.mobileWidth45percent { width:45%;max-width:45%; }
	.mobileWidth50percent { width:50%;max-width:50%; }
	.mobileWidth55percent { width:55%;max-width:55%; }
	.mobileWidth60percent { width:60%;max-width:60%; }
	.mobileWidth65percent { width:65%;max-width:65%; }
	.mobileWidth70percent { width:70%;max-width:70%; }
	.mobileWidth75percent { width:75%;max-width:75%; }
	.mobileWidth80percent { width:80%;max-width:80%; }
	.mobileWidth85percent { width:85%;max-width:85%; }
	.mobileWidth90percent { width:90%;max-width:90%; }
	.mobileWidth95percent { width:95%;max-width:95%; }
	.mobileWidth100percent { width:100%;max-width:100%; }
}
@media all and (max-width: 479px)	/* down to 320px, aka 'phone' */
{
	.phoneHidden { display:none; }
}
@media all and (min-width: 480px)
{
	.phoneVisible { display:none; }
}
@media all and (min-width: 768px)
{
	.mobileVisible { display:none; }
}
@media all and (min-width: 1080px)
{
	.narrowVisible { display:none; }
}

/* Tom: new styles, significantly more reliable as of 2019 */

.touch_device_visible {
  display: none;
}

.touch_device_hidden {
  display: block;
}

@media (hover:none), (hover:on-demand) { 
  .touch_device_visible {
	  display: block;
  }
  
  .touch_device_hidden {
	  display: none;
  }
}