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

.grid{padding-top: 90px; margin-left: 20px;}
.grid-sizer, .item { width: calc(25% - 10px); margin-bottom: 10px;}


.item.percent50 {
  /*width: 49.5%;*/
} 

.item img {
  display: block;
  max-width: 100%;
}

.item img {
  transition: filter .2s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

.item:hover img {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

@media screen and (max-width: 1224px) {
  .grid-sizer, .item { width: calc(50%-10px)!important; }
  .overlay .description { font-size: .8em!important;}
}

@media screen and (max-width: 720px) {
  .grid-sizer, .item { width: calc(33%-10px)!important; }
  .overlay .description { font-size: .5em!important;padding: 5px!important}
}

@media screen and (max-width: 480px) {
  .grid-sizer, .item { width: calc(50%-10px)!important; }
  .overlay .description { font-size:.5em!important;padding: 2px!important}
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}

.overlay .title {
    text-align: center;
    font-size: 30px;
}

.overlay .description {
    position: absolute;
    top: 0;
	font-size: 2.6em;
    left: 0;
    font-family: 'Oswald', sans-serif;
    width: 100%;
    margin: 0;
	padding: 15px;
}
a.overlay, a.overlay:hover{
	color: yellow!important;
}
.overlay .description p {
    margin: 15px;
}

.item:hover .overlay {
    display: block;
}