primo commit

media/com_phocagallery/css/misc/phocagallery-masonry.css

@@ -0,0 +1,66 @@
+/* Masonry Gallery */
+.pg-masonry {
+    -webkit-column-count: 3;
+	-moz-column-count:3;
+	column-count: 3;
+	-webkit-column-gap: 1em;
+	-moz-column-gap: 1em;
+	column-gap: 1em;
+	margin: 1.5em;
+    padding: 0;
+    -moz-column-gap: 1.5em;
+    -webkit-column-gap: 1.5em;
+    column-gap: 1.5em;
+    font-size: .85em;
+}
+
+.pg-masonry figure {
+	margin: 0;
+	padding: 0;
+	line-height: 1;
+}
+
+.pg-masonry-item {
+    display: inline-block;
+    background: #fff;
+    padding: 0;
+    margin: 0 0 1.5em;
+    width: 100%;
+	-webkit-transition:1s ease all;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+.pg-masonry-item img{max-width:100%;}
+
+
+
+@media only screen and (max-width: 320px) {
+    .pg-masonry {
+        -moz-column-count: 1;
+        -webkit-column-count: 1;
+        column-count: 1;
+	}
+}
+@media only screen and (min-width: 321px) and (max-width: 768px){
+    .pg-masonry {
+        -moz-column-count: 2;
+        -webkit-column-count: 2;
+        column-count: 2;
+	}
+}
+@media only screen and (min-width: 769px) and (max-width: 1200px){
+    .pg-masonry {
+        -moz-column-count: 2;
+        -webkit-column-count: 2;
+        column-count: 2;
+	}
+}
+@media only screen and (min-width: 1201px) {
+    .pg-masonry {
+        -moz-column-count: 3;
+        -webkit-column-count: 3;
+        column-count: 3;
+	}
+}