html, body {height:100%;border:0;font:inherit;font-size:100%;}
#all {
	display: block;
	height: 100%;

	padding: .5vw;
	/*overflow: auto;*/
	background-color: #FFF;
}
.wrapper {
	border: .5vw solid #222;
	margin-left: auto;
	margin-right: auto;
	padding:.5vw;
	background-color:#fff;
	display:block;
	overflow:auto;
	height:auto;
   
  
}
img {width:100%; height:auto;}

ul{position:relative;list-style:none; padding:0;margin:0; 
	display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   -webkit-align-content: flex-end;
   align-content: flex-end;}

.box2, .box5, .box8, .box1, .box4, .box7, .box3, .box6, .box9, .box10{
	display: inline-block;
	width: 50%;
	/*min-width:466px;*/
	height: auto;}
.box9 {display:block;width:100%}	
.box2, .box5, .box8, .box1, .box4, .box7, .box3, .box6, .box9, .box10  {box-sizing:border-box; border:.5em solid white; }



@media screen and (max-width: 466px) {
  #all {margin: 0; padding: 0;}
   .wrapper { margin: 0; padding: 0; border:none; }
   .box2, .box5, .box8, .box1, .box4, .box7, .box3, .box6, .box9, .box10 {width:466px; height:auto;}
   ul {display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;}
 
  
}