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

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

	figure {
		margin: 0;
	}

.thumb1{
	border:1px solid #fff;	
	padding:2px;
	width:120px;
	height:90px;
}

.thumb2{
	padding:2px;
	width:70px;
	height:50px;
}

	.gallery {
		max-width: 700px;
		padding: 20px;
		background: #ccc;
		border-radius: 10px;
		margin: 0 auto;		
		border: 1px dashed #ccc;
		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;
	}
		
		.galery ul {
		list-style: none;
		padding: 0;
		}
		
		.gallery li {
			float: left;
			width: 18%;
			margin: 1%;
			list-style: none;
		}

			.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: 10px;
				left: 0;
			}

			.gallery article:target {
				width: 100%;
				height: 100%;
				padding: 100px 0 0 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: 1;
			}

				.gallery article figure {
					height: 100%;
				}

				.gallery article img {
					opacity: 0;
					-webkit-transition: .7s;
					transition: .7s;
					border: 10px solid #fff;
					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%;
						bottom: 500px;
						margin-left: -50px;
						width: 100px;
						background: rgba(250, 250, 250, .9);
						color: #333;
						border-radius: 15px;
						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: 0px;
							top: 3px;
							left: 5px;
							width: 24px;
							height: 21px;
							background: #666;
							border-radius: 50%;
						}

						article .close:hover {
							background: #fff;
						}

					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: 50%;
	}
	
	.gallery {
		/*max-width: 700px;*/
		padding: 10px;
	}
	
	article .close {
						position: absolute;
						left: 50%;
						bottom: 320px;
					}
	
	.gallery figcaption {
					display: none;
				}

}

@media screen and (max-width:350px) {

	h1 {
		font-size: 1.2em;
	}

	.gallery li {
		width: 48%;
	}

}