/* Defaults */


a {
  color: #5b7083;
  transition: all .25s ease-in-out;
}

/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 30px;
  column-fill: initial;
}

/* Masonry item */
.masonry .brick {
  margin-bottom: 30px;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
}

/* Masonry image effects */
.masonry .brick img {
  transition: all .5s ease-in-out;
  backface-visibility: hidden; /* Remove Image flickering on hover */
}

.masonry .brick:hover img {
  opacity: .75;
}

/* Gutterless masonry */
.masonry.gutterless {
  column-gap: 0;
}

.masonry.gutterless .brick {
  margin-bottom: 0;
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 4;
  }
}

.grid {
			max-width: 76em;
			margin: 0 auto;
		}
		.grid li {
			padding: 0.5em;
		}
		.grid li > div {
			background: #808080;

			text-align: center;
		}
		.grid li a {
			color: #fff;
		}

		@media all and (min-width: 27em) {
			.grid li {
				width: 50%;
				float: left;
			}
		.grid .img img{
			background-size: cover;	
			background-repeat: no-repeat;		
			background-position: 50% 50%;
			overflow: hidden;
			display: block;
			top: 0px;
			left: 0px;
			z-index: 4;
			}
		
		
		}
		@media all and (min-width: 40em) {
			.grid li {
				width: 33.3333333%;
			}
			.grid li.wide {
				width: 88.666666%;
			}
		}
/*		@media all and (min-width: 60em) {
			.grid li {
				width: 25%;
			}
			.grid li.wide {
				width: 50%;
			}
		}*/
		
/*small P
			p {
				font-weight: normal;
				font-size: 1em;
				line-height: 1.05em;
				color: #454545;
			}*/