Fix gallery bugs

static/up.css

@@ -147,69 +147,61 @@
   }
 }
 
-/* ######### Animations ######### */
-
-#darkbox { width:1280px;
-           height:720px;
-           position:absolute;
-	   top:0;
-           left:0;
-           background-color:#333;
-           overflow: hidden;
-           text-align:center;
-           margin-top: 7%;
-	 }
-.darkboximg { padding:0; max-width: 1216px; max-height: 684px;}
 
 #gallery {
-  line-height:0;
-  -webkit-column-count:5;
-  -webkit-column-gap:5px;
-  -moz-column-count:5;
-  -moz-column-gap:5px;
-  column-count:5;
-  column-gap:5px;
-  margin-top:2rem;
+    margin-top: 10vw;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-#gallery img {
-  width: 100% !important;
-  height: auto !important;
-  margin-bottom:5px;
-  filter: grayscale(100%);
-  transition: filter 1s;
+.item{
+    margin-bottom: 1vw;
 }
 
-#gallery img:hover {
-  filter:none;
-  transform: scale(1.2);
+.item img{
+    width: 20vw;
+    display:flex;
+    flex-wrap:wrap;
 }
 
-@media (max-width: 1200px) {
-  #gallery {
-    -moz-column-count:    4;
-    -webkit-column-count: 4;
-    column-count:         4;
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+.control{
+    display:block;
+    position:inherit;
+  
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+  flex: 30%;
+  max-width: 30%;
+  padding: 0 4px;
+ 
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media (max-width: 850px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
   }
 }
-@media (max-width: 1000px) {
-  #gallery {
-    -moz-column-count:    3;
-    -webkit-column-count: 3;
-    column-count:         3;
-  }
-}
-@media (max-width: 800px) {
-  #gallery {
-    -moz-column-count:    2;
-    -webkit-column-count: 2;
-    column-count:         2;
-  }
-}
-@media (max-width: 400px) {
-  #gallery {
-    -moz-column-count:    1;
-    -webkit-column-count: 1;
-    column-count:         1;
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media (max-width: 600px) {
+  .column {
+    flex: 100%;
+    max-width: 100%;
   }
 }