div#gallery {
	overflow: hidden;
}

div#img1 {
	background-image: url("../bilder/img1.jpg");
}

div#img2 {
	background-image: url("../bilder/img2.jpg");
}

div#img3 {
	background-image: url("../bilder/img3.jpg");
}

div#img4 {
	background-image: url("../bilder/img4.jpg");
}

div#img5 {
	background-image: url("../bilder/img5.jpg");
}

div#img6 {
	background-image: url("../bilder/img6.jpg");
}

div#img7 {
	background-image: url("../bilder/img7.jpg");
}

div#img8 {
	background-image: url("../bilder/img8.jpg");
}

div#img9 {
	background-image: url("../giebelstaendig/bilder/gal1.jpg");
}

div#img10 {
	background-image: url("../natuerlichkeit/bilder/gal1.jpg");
}

div#img11 {
	background-image: url("../bilder/img11.jpg");
}

div#img13 {
	background-image: url("../bilder/img13.jpg");
}

div.galimage {
    float: left;
	background-size: cover;
	background-position: center;
	position: relative;
	touch-action: auto;
}

div.galimage.portrait.right {
	float: right;
}

@media only screen and (min-width: 100px) and (orientation:portrait) {
	div.galimage {
		width: 100%;
	}
} 

@media only screen and (min-width: 800px) {
	div.galimage {
	    width: 50%;
	}
}

@media only screen and (min-width: 800px) {
div.galimage.wide {
		width: 100%;    
 }
}

@media only screen and (min-width: 992px) {
div.galimage {
		width: 33.33%;    
 }
}

@media only screen and (min-width: 992px) {
div.galimage.wide {
		width: 66.6%;    
 }
}

.galimage:before {
    content: "";
    display: block;
    padding-top: 70.1%;
}

.galimage.portrait:before  {
    padding-top: 140.15%;
} 

.galimage.wide:before  {
    padding-top: 35.05%;
}

.overlay {
	display: block;
    padding: 40% 10% 0% 10%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    -webkit-transition: -webkit-transform .25s ease-in;
    -o-transition: -o-transform .25s ease-in;
    transition: transform .25s ease-in;
    -webkit-transition: -webkit-transform 0.25s ease-in;
    -o-transition: -o-transform 0.25s ease-in;
    -webkit-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    color: #ffffff !important;
    font-size: 24px;
    text-decoration: none;
    visibility: hidden;
}

div.galimage:hover .overlay, div.galimage:active .overlay, div.galimage:focus .overlay {
	-webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
}

.overlay .subtitle {
	display: block;
	font-size: 18px;
	margin-top: 1.5em;
}