.container {
	width: 92%;
	padding: 0 4%;
}

	h1 {
		font-weight: normal;
		font-style: italic;
		text-align: center;
		margin: 80px 0 20px;
	}

	figure {
		margin: 0;
	}

	ul {
		list-style: none;
		padding: 0;
	}

	a img {
		border: none;
	}

	.gallery {
		padding: 7px;
		border-radius: 10px;
		margin: 0 auto;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.gallery:after {
		content: "";
		display: block;
		clear: both;
	}
		.gallery li {
		}
			.gallery li > a {
				float: left;
				width: 100%;
				-webkit-filter: grayscale(.5) sepia(.8);
				-webkit-transition: .5s;
				transition: .5s;
				position: relative;
				-webkit-transform: translateZ(0);
			}
				.gallery li > a img {
					max-width: 100%;
					display: block;
					box-shadow: 0 0 5px rgba(0, 0, 0, .3);
					-webkit-transition: .5s;
					transition: .5s;
				}
				.gallery li > a:hover {
					-webkit-filter: grayscale(0) sepia(0);
					z-index: 1;
				}
				.gallery li > a img:hover {
					-webkit-transform: scale(1.4);
					-ms-transform: scale(1.4);
					transform: scale(1.4);
					box-shadow: 0 0 15px rgba(0, 0, 0, .8);
				}
			.gallery article {
				width: 0;
				height: 0;
				overflow: hidden;
				position: fixed;
				top: 0;
				left: 0;
				color: #FFF;
			}
			.gallery article:target {
				width: 100%;
				height: 100%;
				padding: 100px 0;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				margin: 0;
				text-align: center;
				background: rgba(0, 0, 0, .9);
				z-index: 10;
				color: #FFF;
			}
			.gallery article a{
				color: #GGG;
			}
				.gallery article figure {
					height: 100%;
				}
				.gallery article img {
					opacity: 0;
					-webkit-transition: .7s;
					transition: .7s;
					max-height: 100%;
					max-width: 100%;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					box-shadow: 0 0 20px rgba(0, 0, 0, .5);
				}

				.gallery article:target img {
					opacity: 1;
				}
				.gallery figcaption {
					background: rgba(250, 250, 250, .1);
					padding: 5px 10px;
					font-size: 1.3em;
					font-style: italic;
					color: #999;
					margin-top: 20px;
				}
					article .close {
						position: absolute;
						left: 50%;
						top: 10px;
						margin-left: -50px;
						width: 200px;
						background: rgba(250, 250, 250, .9);
						color: #333;
						border-radius: 20px;
						text-decoration: none;
						padding: 6px 6px 6px 25px;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						text-transform: uppercase;
						-webkit-transition: .5s;
						transition: .5s;
					}
						article .close:before {
							content: "X";
							color: #fff;
							font-family: Arial;
							font-weight: bold;
							position: absolute;
							padding-top: 3px;
							top: 3px;
							left: 5px;
							width: 24px;
							height: 21px;
							background: #666;
							border-radius: 60%;
						}
						article .close:hover {
							background: #fff;
							color: #000;
						}
					article .arrow {
						position: absolute;
						top: 250px;
						width: 0;
						height: 0;
						border-top: 40px solid transparent;
						border-bottom: 40px solid transparent;
						text-indent: -9999px;
						-webkit-transition: .4s;
						transition: .4s;
					}
					article .prev {
						left: 50%;
						margin-left: -35%;
						border-right: 60px solid rgba(250, 250, 250, .1);
					}
					article .prev:hover {
						border-right-color: rgba(250, 250, 250, .2);
					}
					article .next {
						right: 50%;
						margin-right: -35%;
						border-left: 60px solid rgba(250, 250, 250, .1);
					}
					article .next:hover {
						border-left-color: rgba(250, 250, 250, .2);
					}
@media screen and (max-width:1100px) {
	article .arrow {
		top: 36px;
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
	}
	article .prev {
		margin-left: -130px;
		border-right: 40px solid rgba(250, 250, 250, .3);
	}
	article .next {
		margin-right: -130px;
		border-left: 40px solid rgba(250, 250, 250, .3);
	}
}
@media screen and (max-width:600px) {
	h1 {
		font-size: 1.4em;
	}
	.gallery li {
		width: 23%;
	}
}
@media screen and (max-width:450px) {
	h1 {
		font-size: 1.2em;
	}
	.gallery li {
		width: 31%;
	}
}
@media screen and (max-width:350px) {
	h1 {
		font-size: 1.2em;
	}
	.gallery li {
		width: 48%;
	}
}