/*Standards der Seite setzen*/
body {
	background-color: #A6223D;
    	background-image: url("../images/background.png");
	background-size: 2em;
    	font-family: Corbel;
}
			
/*Obere Hälfte des Logos*/
#header {
	background-image: url("../images/logo.png");
	background-repeat: no-repeat;
	background-position: center 5%;
	margin-left: 1%;
	margin-right: 1%;
	height: 65px; //oder 4em;
}

/*untere Hälfte des Logos+Menüzeile*/
#header2 { 
  	background-color: #FEFAF7;
  	background-image: url("../images/logo2.png");
  	background-repeat: no-repeat;
  	background-position: center 0px;
  	margin-left: 1%;
  	margin-right: 1%;
  	height: 80px; //oder 3em;
  	border-radius: 10px;
  	border-width: 3px;
  	/*border-style: solid;*/
  	border-color: #A6223D;
  	font-size:30px;
}

/*Footer*/
#footer {
	background-color: #FEFAF7;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 10px;
	border-radius: 10px;
  	border-width: 3px;
	height: 65px;
}

/*Inhalt der Seite -> Body*/
#content { 
  	background-color: #FEFAF7;
  	margin-left: 1%;
  	margin-right: 1%;
  	margin-top: 10px;
	margin-bottom: 10px;
  	border-radius: 10px;
  	border-width: 3px;
  	/*border-style: solid;*/
  	border-color: #A6223D;
  	/*text-align:center;*/
}

/*Inhalt der Seite Fotos -> Body*/
#photo { 
  	background-color: #FEFAF7;
  	margin-left: 1%;
  	margin-right: 1%;
  	margin-top: 10px;
	margin-bottom: 10px;
  	border-radius: 10px;
  	border-width: 3px;
  	/*border-style: solid;*/
  	border-color: #A6223D;
  	text-align:center;
}




/*lightbox*/


.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 {
		//max-width: 700px;
		padding: 10px;
		background: #FEFAF7;
		border-radius: 20px;
		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;
	}

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

			.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;
			}

			.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: 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%;
						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;
						-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: 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: 31%;
	}

}

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

	h1 {
		font-size: 1.2em;
	}

	.gallery li {
		width: 48%;
	}

}