@charset "utf-8";
/* CSS Document */
div.responsive{
	/*position: relative;
 border: 1px solid red;*/

}
div.gallery {
  /*border: 1px solid #ccc;*/
  /*height:100%;*/

}

div.gallery img {
  width: 100%;
  height: auto;

}

div.gallery:hover {
  border: 1px solid #777;
}


div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
}

div#Gallery.Image{
  border: 1px solid color:#12161b;
  padding: 5px;
 /*  box-shadow: 1px 1px #831F10; DARK BLOOD RED*/
  box-shadow: 5px 5px #12161b;
  background-color:#242d36;
  padding-bottom: 1rem;
  width:150px;
  height: 150px;
}

@media only screen and (max-width: 900px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
	height:100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* Container for flexboxes */
.rowGallery {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.columnGallery {
  flex: 5%;
  padding: 2.5px;
}
/*.DivImage{
	border:1px double #000;
	width:130px;
	height:85px;
}*/
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .columnGallery {
    flex: 5%;
  }

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .rowGallery {
    flex-direction: column;
  }
div#Gallery.Image{
  border: 1px solid color:#12161b;
  padding: 5px;
 /*  box-shadow: 1px 1px #831F10; DARK BLOOD RED*/
  box-shadow: 5px 5px #12161b;
  background-color:#242d36;
  padding-bottom: 1rem;
  width:200px;
  height: 250px;
}

}