*{margin:0;padding:0;}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* { box-sizing: border-box; }

/* force scrollbar */
html { 
	overflow-y: scroll; 
	font-size: 62.5%; 	
  }

body {

}



.button-group  {
	text-align: center;
  border: solid 0px orange;
  font-size: 0;  /* ---- removes extra space btw buttokns ---- */
 	}
/* ---- grid ---- */

.grid {
  background: rgba(255, 255, 255, 0);
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
	
.grid-item {
  float: left;
      padding: .5rem;
}
.grid-item img {
  display: block;
  max-width: 100%;
}

/* Larger than mobile */
@media (min-width: 400px) {
.grid-sizer,
.grid-item {
  width: 100%;
}	
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
.grid-sizer,
.grid-item {
}	
}

/* Larger than tablet */
@media (min-width: 750px) {
.grid-sizer,
.grid-item {
/* width: 33.333%; */
  width: 50%;
}	
}

/* Larger than desktop */
@media (min-width: 1000px) {
	.grid-sizer,
	.grid-item {
	width: 33.333%;
}	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Overlay
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.image-container {
    position: relative;

}
.image-container .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
	border-radius: 0px;
	border: 0px solid #eee;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

.image-container .after .content {
  position: absolute;
	padding: 1.5em 2.5em 1.5em 1.5em;
  font-size: 1em;
  text-align: left;
	
}
.image-container .after .zoom {
  color: #000;
  font-size: 2em;
	cursor: pointer;
	bottom: 0;
	position: absolute;
	width: 100%;
  padding-bottom: .7em;
}
.more {
	float: left;
	clear: both;
	display: inline-block;
  width: 100%;
	text-align: center;
	position: relative;
	top: 30%;
	font-size: 6em;
	opacity: 0.5;
}

.more .icon-zoom-in{
  color: #999;
  font-size: 80%;
}
.preview {
	float: left;
	display: inline-block;
  width: 50%;
	text-align: center;
	position: relative;
}
.download {
	float: right;
	display: inline-block;
  width: 50%;
	text-align: center;
	position: relative;
}
.image-container a:hover {
    color: #FFF;
}
.image-container a {
    color: #EEE;
    text-decoration: none;
}
.grid img {
width:100%;
height:auto;
border-radius: 0px;
border: 0px solid #eee;
}