/*==================================================*/
/*            Gestaltung galerie.html -->
/*==================================================*/


#maingalerie {
	width: 100%;
	margin: 0px auto 30px auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: left;
	align-items: baseline;
	//background-color: blue;
}

.bildgalerie {
	width: 99%;
	margin-left: 0px;
    //margin-right: 12px;
	margin-bottom: 2px;
	border: 2.2px solid #373737;
}

.bildgalerie:hover {
    transform: scale(1.05);
	transition: 0.7s;
	opacity: 0.3;
}

figure {
	width: 18.932%;
	margin-left: 2px;
    margin-right: 10px;
	margin-bottom: 10px;
	//background-color: gray;
}

figcaption {
	padding: .4em;
	text-align: center;
	font: 14px arial;
	color: #525252;
}


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

#maingalerie {
	width: 100%;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
	//background-color: pink;
}

.bildgalerie {
	width: 99%;
	border: 1.5px solid #373737;
}

figure {
	width: 29.45%;
	margin: 5px 0px 5px 9px;
	padding: 0px;
}

figcaption {
	margin-top: -2px;
	padding: .2em;
	text-align: center;
	font: 8px arial;
}

}


@media screen and (min-width: 355px) and (max-width: 478px) {

#maingalerie {
	width: 100%;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
}

.bildgalerie {
	width: 99%;
	border: 1.5px solid #373737;
}

figure {
	width: 29.45%;
	margin: 4px 0px 5px 10px;
	padding: 0px;
}

figcaption {
	margin-top: -2px;
	padding: .2em;
	text-align: center;
	font: 8.4px arial;
}

}


@media screen and (min-width: 479px) and (max-width: 630px) {

#maingalerie {
	width: 100%;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
}

.bildgalerie {
	width: 99%;
	border: 1.5px solid #373737;
}

figure {
	width: 30.8%;
	margin: 5px 0px 5px 9px;
	padding: 0px;
}

figcaption {
	margin-top: -2px;
	padding: .2em;
	text-align: center;
	font: 10px arial;
}

}


@media screen and (min-width: 631px) and (max-width: 740px) {

#maingalerie {
	width: 100%;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
}

.bildgalerie {
	width: 99%;
	border: 1.5px solid #373737;
}

figure {
	width: 31.6%;
	margin: 5px 0px 5px 9px;
	padding: 0px;
}

figcaption {
	margin-top: -2px;
	padding: .2em;
	text-align: center;
	font: 12.5px arial;
}

}


@media screen and (min-width: 741px) and (max-width: 1028px) {

#maingalerie {
	width: 100%;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
}

.bildgalerie {
	width: 99%;
	border: 1.5px solid #373737;
}

figure {
	width: 31.6%;
	margin: 10px 0px 5px 9px;
	padding: 0px;
}

figcaption {
	margin-top: -2px;
	padding: .2em;
	text-align: center;
	font: 12.5px arial;
}

}


@media screen and (min-width: 1029px) and (max-width: 1282px) {

#maingalerie {
	width: 100%;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
}

.bildgalerie {
	width: 99%;
	border: 1.5px solid #373737;
}

figure {
	width: 32.4%;
	margin: 5px 0px 15px 9px;
	padding: 0px;
}

figcaption {
	margin-top: -2px;
	padding: .2em;
	text-align: center;
	font: 15px arial;
}

}