*,
*:after,
*:before {
	box-sizing: border-box;
}

.grid {
	max-width: 69em;
	list-style: none;
	margin: 0 auto;
	padding: 100px 0 0;
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 33%;
	opacity: 0;
}

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

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}

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

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


.modal {
	position: fixed;
	background: rgba(0, 0, 0, .8);
	width: 100%;
	height: 100%;
	top: 80px;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	z-index: -1;
	transition: all 300ms ease-in-out;
}

#modal1:target {
	opacity: 1;
	z-index: 10;
}

#modal2:target {
	opacity: 1;
	z-index: 10;
}

#modal3:target {
	opacity: 1;
	z-index: 10;
}

#modal4:target {
	opacity: 1;
	z-index: 10;
}

#modal5:target {
	opacity: 1;
	z-index: 10;
}

#modal6:target {
	opacity: 1;
	z-index: 10;
}

#modal7:target {
	opacity: 1;
	z-index: 10;
}

#modal8:target {
	opacity: 1;
	z-index: 10;
}

#modal9:target {
	opacity: 1;
	z-index: 10;
}

#modal10:target {
	opacity: 1;
	z-index: 10;
}

#modal11:target {
	opacity: 1;
	z-index: 10;
}

#modal12:target {
	opacity: 1;
	z-index: 10;
}

#modal13:target {
	opacity: 1;
	z-index: 10;
}

#modal14:target {
	opacity: 1;
	z-index: 10;
}

#modal15:target {
	opacity: 1;
	z-index: 10;
}

#modal16:target {
	opacity: 1;
	z-index: 10;
}

#modal17:target {
	opacity: 1;
	z-index: 10;
}

#modal18:target {
	opacity: 1;
	z-index: 10;
}

#modal19:target {
	opacity: 1;
	z-index: 10;
}

#modal20:target {
	opacity: 1;
	z-index: 10;
}

	.imgbg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 80px;
		left: 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}

	#imgbg1 {
		background-image: url(../images/1.jpg);
	}

	#imgbg2 {
		background-image: url(../images/2.jpg);
	}

	#imgbg3 {
		background-image: url(../images/3.jpg);
	}

	#imgbg4 {
		background-image: url(../images/4.jpg);
	}

	#imgbg5 {
		background-image: url(../images/5.jpg);
	}

	#imgbg6 {
		background-image: url(../images/6.jpg);
	}

	#imgbg7 {
		background-image: url(../images/7.jpg);
	}

	#imgbg8 {
		background-image: url(../images/8.jpg);
	}

	#imgbg9 {
		background-image: url(../images/9.jpg);
	}

	#imgbg10 {
		background-image: url(../images/10.jpg);
	}

	#imgbg11 {
		background-image: url(../images/11.jpg);
	}

	#imgbg12 {
		background-image: url(../images/12.jpg);
	}

	#imgbg13 {
		background-image: url(../images/13.jpg);
	}

	#imgbg14 {
		background-image: url(../images/14.jpg);
	}

	#imgbg15 {
		background-image: url(../images/15.jpg);
	}

	#imgbg16 {
		background-image: url(../images/16.jpg);
	}

	#imgbg17 {
		background-image: url(../images/17.jpg);
	}

	#imgbg18 {
		background-image: url(../images/18.jpg);
	}

	#imgbg19 {
		background-image: url(../images/19.jpg);
	}

	#imgbg20 {
		background-image: url(../images/20.jpg);
	}

		.prev, .next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.prev, .next, .close {
			opacity: 0.6;
			transition: all 300ms ease-in-out;
			filter: drop-shadow(3px 3px 7px #333);
			width: 50px;
		}

		.prev:hover, .next:hover, .close:hover {
			opacity: 1;
		}

		.prev {
			left: 5%;
		}

		.next {
			right: 5%;
		}

		.close {
			position: absolute;
			top: 2%;
			right: 2%;
		}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	.grid {
		padding: 60px 0 0;
	}

		.grid li {
			width: 50%;
		}

	.modal {
		top: 60px;
	}
			.prev, .next, .close {
				width: 20px;
			}
}

/* =< 319 */

@media screen and (max-width: 319px) {
	.grid {
		padding: 60px 0 0;
	}

		.grid li {
			width: 50%;
		}

	.modal {
		top: 60px;
	}
			.prev, .next, .close {
				width: 20px;
			}
}