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


#galerie {
	width: 100%;
	margin: 20px auto 40px auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	padding: 0px 0px 0px 0px;
	//background-color: pink;
}

.bildgalerie {
	width: 153px;
	height: 102px;
	border: 1px solid #000000;
}

figure {
	width: 170px;
	//position: relative;
	margin: 4px 10px 10px 4px;
	padding: 0px;
}

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


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

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

.bildgalerie {
	width: 64px;
	height: 43px;
	border: 1px solid #000000;
}

figure {
	width: 72px;
	//position: relative;
	margin: 4px 0px 5px 4px;
	padding: 0px;
}

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

}


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

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

.bildgalerie {
	width: 70px;
	height: 47px;
	border: 1px solid #000000;
}

figure {
	width: 77px;
	margin: 4px 0px 5px 4px;
	padding: 0px;
}

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

}


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

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

.bildgalerie {
	width: 80px;
	height: 53px;
	border: 1px solid #000000;
}

figure {
	width: 84px;
	//position: relative;
	margin: 4px 0px 5px 5px;
	padding: 0px;
}

figcaption {
	padding: .3em;
	text-align: center;
	font: 12.8px arial;
}

}


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

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

.bildgalerie {
	width: 98px;
	height: 65px;
	border: 1px solid #000000;
}

figure {
	width: 102px;
	//position: relative;
	margin: 4px 0px 5px 5px;
	padding: 0px;
}

figcaption {
	padding: .3em;
	text-align: center;
	font: 14px arial;
}

}


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

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

.bildgalerie {
	width: 110px;
	height: 73px;
	border: 1px solid #000000;
}

figure {
	width: 125px;
	//position: relative;
	margin: 4px 0px 5px 5px;
	padding: 0px;
}

figcaption {
	padding: .3em;
	text-align: center;
	font: 14.5px arial;
}

}


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

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

.bildgalerie {
	width: 173px;
	height: 115px;
	border: 1px solid #000000;
}

figure {
	width: 180px;
	//position: relative;
	margin: 4px 0px 5px 5px;
	padding: 0px;
}

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

}