@charset "utf-8";
/* CSS Document */
/*GALERIE CSS*/
	.gallery {
		max-width: 600px;
		padding: 10px;
		/*background: #666;*/
		border-radius: 10px;
		margin: 0 auto;
		border: 1px solid #ccc;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	}

	.gallery:after {
		content: "";
		display: block;
		clear: both;
	}

		.gallery li {
			float: left;
			width: 18%;
			margin: 1%;
		}

			.gallery li > a {
				float: left;
				max-height: 80px;
				-webkit-filter: grayscale(.5) sepia(.8);
				-webkit-transition: .5s;
				position: relative;
			}

				.gallery li > a img {
					max-width: 100%;
					box-shadow: 0 0 5px rgba(0, 0, 0, .3);
					-webkit-transition: .5s;
				}

				.gallery li > a:hover {
					-webkit-filter: grayscale(0) sepia(0);
					z-index: 1;
				}

				.gallery li > a:hover img {
					-webkit-transform: scale(1.4);
					box-shadow: 0 0 15px rgba(0, 0, 0, .8);
				}

				.gallery article {
					width: 0;
					height: 0;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
				}

				.gallery article:target {
					width: 100%;
					height: 100%;
					padding: 100px 0;
					box-sizing: border-box;
					margin: 0;
					text-align: center;
					background: rgba(0, 0, 0, .8);
					z-index: 1;
				}

					.gallery article img {
						opacity: 0;
						-webkit-transition: .7s;
						border: 10px solid #fff;
						max-height: 100%;
						max-width: 100%;
						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: 40px;
							margin-left: -50px;
							width: 100px;
							background: rgba(250, 250, 250, .9);
							color: #333;
							border-radius: 15px;
							text-decoration: none;
							padding: 6px 6px 6px 25px;
							box-sizing: border-box;
							text-transform: uppercase;
							-webkit-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: 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;
						}

						article .prev {
							left: 50%;
							margin-left: -450px;
							border-right: 60px solid rgba(250, 250, 250, .1);
						}

							article .prev:hover {
								border-right: 60px solid rgba(250, 250, 250, .2);
							}

						article .next {
							right: 50%;
							margin-right: -450px;
							border-left: 60px solid rgba(250, 250, 250, .1);
						}

							article .next:hover,
							article > a:hover ~ nav .next {
								border-left: 60px solid rgba(250, 250, 250, .2);
							}