.panel img {max-width:100%; margin:1em 0;    width: 100%;}

.main-container {overflow: hidden;}

.panel-container2 .panel {width:47%; float:left;}
.panel-container2 .panel.number1 {margin-right: 6%;}

.panel-container3 .panel {width: 30%; margin-right: 5%; float:left;}
.panel-container3 .panel.number3 {margin-right:0;} 

.panel-container4 .panel {width: 21%; margin-right: 5%; float:left;}
.panel-container4 .panel.number4 {margin-right:0;} 

.panel-container5 .panel.number1 , .panel-container5 .panel.number2 , .panel-container5 .panel.number3 {width: 30%; margin-right: 5%; float:left;}
.panel-container5 .panel.number3 {margin-right:0;} 
.panel-container5 .panel.number4 , .panel-container5 .panel.number5{width:47%; float:left;}
.panel-container5 .panel.number4 {margin-right:6%; clear: both;} 


.panel-container6 .panel{width: 30%; margin-right: 5%; float:left;}
.panel-container6 .panel.number3, .panel-container6 .panel.number6 {margin-right:0;}
.panel-container6 .panel.number4{clear: both;}

.panel-container7 .panel.number1 , .panel-container7 .panel.number2 , .panel-container7 .panel.number3, .panel-container7 .panel.number4 {width: 21%; margin-right: 5%; float:left;}
.panel-container7 .panel.number4 {margin-right:0;} 
.panel-container7 .panel.number5 , .panel-container7 .panel.number6 , .panel-container7 .panel.number7 {width: 30%; margin-right: 5%; float:left;}
.panel-container7 .panel.number7 {margin-right:0;} 
.panel-container7 .panel.number5{clear:both}

.panel-container8 .panel {width: 21%; margin-right: 5%; float:left;}
.panel-container8 .panel.number4 , .panel-container8 .panel.number8 {margin-right:0;}
.panel-container8 .panel.number5 {clear:both;}


@media screen and (max-width: 980px) {
	
	/*Turn rows of 4 into rows of 2 */
	
.panel-container4 .panel {width:47%; float:left;}

  .panel-container4 .panel.number1,
  .panel-container4 .panel.number3,
  .panel-container4 .panel.number5,
  .panel-container4 .panel.number7 {margin-right: 6%;}
  
	.panel-container4 .panel.number2,
	.panel-container4 .panel.number4, 
	.panel-container4 .panel.number6, 
	.panel-container4 .panel.number8 {margin-right: 0;}
	
	.panel-container8 .panel {width:47% ; float:left;}

  .panel-container8 .panel.number1,
  .panel-container8 .panel.number3,
  .panel-container8 .panel.number5,
  .panel-container8 .panel.number7 {margin-right: 6%;}
  
	.panel-container8 .panel.number2,
	.panel-container8 .panel.number4, 
	.panel-container8 .panel.number6, 
	.panel-container8 .panel.number8 {margin-right: 0;}
	
.panel-container7 .panel.number1 , .panel-container7 .panel.number2 , .panel-container7 .panel.number3, .panel-container7 .panel.number4 {width:47%; float:left;}

.panel-container7 .panel.number1 ,
.panel-container7 .panel.number3 {margin-right: 6%;} 

.panel-container7 .panel.number2 ,
.panel-container7 .panel.number4 {margin-right: 0;} 



}

@media screen and (max-width: 650px) {
	
	/* make all panels into a single column */
	
	.panel {width:100% !important; float:left; margin-right:0!important;}
}