@media only screen and (min-width:1px) and (max-width:480px){
.pageList li {
	width:14.1%;
}
}


@media only screen and (min-width:1px) and (max-width:320px){
.slider img {
	max-width:320px;
}
}

@media screen and (min-width: 481px) and (max-width: 820px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}
@media screen and (min-width: 821px) {
  #grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}

/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }