@media only screen and (max-width: 1120px) {

h1{	font-size: 30px;}
h2{	font-size: 20px;}
h3{	font-size: 16px;}
p{ font-size: 12px;}
li{	font-size: 12px;}
li a{	font-size: 12px;}

.intro{
	margin: 0em;
  	grid-row-start: 1;
  	grid-row-end: 3;
  	grid-column-start: 1;
  	grid-column-end: 5;}

.main-supporting{
	margin: 0em;
	grid-row-start: 4;
  	grid-row-end: 5;
  	grid-column-start: 1;
  	grid-column-end: 5;}

.sidebar{
	display: grid;
	margin: 0em;
	grid-row-start: 3;
  	grid-row-end: 4;
  	grid-column-start: 1;
  	grid-column-end: 5;}

.sidebar div .design-archives{	
	grid-row-start: 2;
  	grid-row-end: 5;
  	grid-column-start: 1;
  	grid-column-end: 2;
}

.sidebar div .zen-resources{	
	grid-row-start: 2;
  	grid-row-end: 5;
  	grid-column-start: 2;
  	grid-column-end: 3;
}

/*------------------------*/

/*---Look up Spanning collumns and "When this size, do this" in CSS to move
grids around the page when in mobile.
Also media queries---*/}