/**** IMPORTANT THESE ARE NEEDED ****/
	#container {
	  float:none;
	  background: #ffffff;
	  padding: 0;
	  margin:0 auto;
	  margin-bottom:30px;
	  /* optional */
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  /* content-box is NEEDED. if border-box is enabled
	     then it when Masonry calculates the height and width
		 of the container it counts incorrectly and the result
		 images running to the edge of the container on the right
		 and bottom sides. Only apply content-box to the container. */
	  -webkit-box-sizing:content-box;
	  -moz-box-sizing:content-box;
	  box-sizing:content-box;
	}

/*	spacing between the images*/
	.box {
	  margin: 5px;
	  float: left;
	  /* optional */
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	}
	.box img, { display: block; width: 100%; }

	/* unfortunately masonry needs hard pxs for images */
	.col1 { width: 80px; }
	.col2 { width: 180px; }
	.col3 { width: 220px; }
	.col4 { height: 200px; }
	.col5 { width: 260px; }
	.col1 img { max-width: 80px; }
	.col2 img { max-width: 180px; }
	.col3 img { max-width: 220px; }
	.col4 img { max-height: 200px; }
	.col5 img { max-width: 260px; }

	/* animations for the transition/reordering */
	.transitions-enabled.masonry,
	.transitions-enabled.masonry .masonry-brick {
	  -webkit-transition-duration: 0.7s;
	  -moz-transition-duration: 0.7s;
	  -ms-transition-duration: 0.7s;
	  -o-transition-duration: 0.7s;
	  transition-duration: 0.7s;
	}
	.transitions-enabled.masonry {
	  -webkit-transition-property: height, width;
	  -moz-transition-property: height, width;
	  -ms-transition-property: height, width;
	  -o-transition-property: height, width;
	  transition-property: height, width;
	}
	.transitions-enabled.masonry  .masonry-brick {
	  -webkit-transition-property: left, right, top;
	  -moz-transition-property: left, right, top;
	  -ms-transition-property: left, right, top;
	  -o-transition-property: left, right, top;
	  transition-property: left, right, top;
	}


/**** Clearfix ****/
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }


/* phone 320px Smartphones (portrait and landscape) */	
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.col2 { width: 100%; }
}
/* iPhone5 landscape */
@media ( max-width: 640px ) and (orientation:landscape) {
	.col2 { width: 100%; }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  .col2 { width: 100%; }
  }