@charset "utf-8";

<!-- BEGIN OF Style for Masonry Gallery -->
.grid {
	margin:0 auto;
	padding:0;
	width:100%;
}

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

.grid-item {
	width:calc(25% - (1 - 1 / 4) * 10px);;
	box-sizing:border-box;
	background-color:lightgrey;
	margin-bottom:10px;
}

/*
Bezeichnen wir die Anzahl der Bilder mit nrImgs und die Breite der Gaps mit wGap.
Die Anzahl der Gaps ist nrGaps = nrImgs - 1. Die Summe der Breite der Gaps beträgt dann
wGapSum = nrGaps * wGap = (nrImgs - 1) * wGap
Diese Summe muessen wir auf alle Bilder verteilen, um den Wert wDelta zu ermitteln, um den wir die Breite der Bilder verringern müssen:

wDelta = wGapSum / nrImgs = (nrImgs - 1) * wGap / nrImgs = (nrImgs - 1) / nrImgs * wGap = (1 - 1 / nrImgs) * wGap

width:calc(33.333% - (1 - 1 / 3) * 10px);
*/

@media (max-width: 1260px) {
	.grid-item {
	width:calc(25% - (1 - 1 / 4) * 10px);
	}
}

@media all and (max-width: 1080px) {
	.grid-item {
		width:calc(33.333% - (1 - 1 / 3) * 10px);;
	}
}

@media all and (max-width: 700px) {
	.grid-item {
		width:calc(50% - (1 - 1 / 2) * 10px);;
	}
}

@media (max-width: 480px) {
	.grid-item {
		width:100%;
	}
}

.grid-item img {
	width:100%;
	vertical-align:bottom;
}

/* ANIMATION */
.grid-item {
	opacity: 0;
}

.grid-item.shown,
.no-js .grid-item,
.no-cssanimations .grid-item {
	opacity: 1;
}

/* Effect 1: opacity */
.grid.effect-1 .grid-item.animate {
	-webkit-animation: fadeIn 0.8s ease forwards;
	animation: fadeIn 0.8s ease forwards;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 .grid-item.animate {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.8s ease forwards;
	animation: moveUp 0.8s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
<!-- END OF Style for Masonry Gallery -->