:root{
	--bc1:#eaeef1;
	--bc2:rgb(56 58 59 / 59%);
	--c1:150px;
	--c12:200px;
	--c2:250px;
	--c3:300px;
	--c48:47%;
	--c30:30%;
	--c31:31.1%;
	--c32:32%;
	--c5:400px;
}
[data-headimg]{
	max-width: 1400px;
    margin: 0 auto;
    padding: 0 .5em;
}
#ssgal.fullw img{
	width:100%;
}
#cols{
	display: flex;
}
.content #cols{
	margin:0 auto;
	max-width:var(--maxw);
}
.si a{
	text-decoration:none;
}
.si p span{
	padding:0 0 .3em .3em;
}
.thumbs{
    width: 90vw;
    display: block;
    margin: 0 auto 2em auto;
    max-width: calc((var(--c1) + 1em) *7);
}
.thumbs.medium{
	width: 90vw;
	max-width: calc((var(--c2) + 1em) *5);
}
.fullw .si{
    max-width:100%;
    margin: .5em;
}
.thumbs .si{
	margin:0 0 .5em 0;
}
.thumbs .si img{
	max-width:var(--c1);
}
.col{
	margin:0 auto;
}
/** 2 Spaltig */
[data-cnt="2"] .col{
	margin:0 0 0 auto;
}
[data-cnt="2"] .col:nth-child(2){
	margin:0 auto 0 0;
}
.thumbs .si{
	display:block;
}
.col,
.thumbs .si span,
.thumbs.medium .si span{
	display: inline-block;
}
#ssgal,
.thumbs .si span{
	box-sizing: border-box;
}
/** ------------------------- min 350 -------------------------------------------------------- */
@media (min-width: 350px){
	.si p{
		width:calc(97% - var(--c1));
        display: inline-block;
		margin:0 0 .5em 0;
	}
}
/** ------------------------- min 400 -------------------------------------------------------- */
@media (min-width: 400px){
	.thumbs{
		width: 320px;
	}
	.thumbs .si img[data-o="p"]{
		width:var(--c1);
	}
}
/** ------------------------- min 500 -------------------------------------------------------- */
@media (min-width: 500px){
	.thumbs{
		width: 500px;
	}
	.thumbs .si{
		display: inline-block;
		width: var(--c1);
		height:var(--c1);
		margin:.5em;
		background:var(--bc1);
		float: left;
	}
	.thumbs .si img{
		width:100%;
		max-width:100%;
	}
	.thumbs .si img[data-o="p"]{
		height: 100%;
		width: auto;
	}
	.thumbs .si span{
		width: var(--c1);
		background: rgb(0 0 0 / 46%);
		color: #fff;
		padding: 0.7em;
		line-height: 1.4em;
		font-size: .9em;
	}
	.thumbs .si div{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.thumbs .si p{
		position:absolute;
		margin: -0.3em 0 0 0;
		width: var(--c1);
		text-align: left;
		animation: fadein 500ms;
		-webkit-transition: opacity 500ms ease-out;
		-ms-transition: opacity 500ms ease-out;
		transition: opacity 500ms ease-out;
		opacity:0;
	}
	.thumbs.medium .si{
		width: var(--c48);
		height:var(--c2);
	}
	.thumbs.medium .si p{
		width: var(--c2);
		margin-top:10em;
	}

	.thumbs.medium .si p{
		width: var(--c2);
		margin-top:10em;
	}
	.thumbs.medium .si span{
		width: var(--c2);
		font-size: 1em;
	}
	.thumbs .si:hover p{
		opacity:1;
	}
}
/** ------------------------- min 600 -------------------------------------------------------- */
@media (min-width: 600px){
}
/** ------------------------- min 680 -------------------------------------------------------- */
@media (min-width: 680px){
	.thumbs{
		width:665px;
	}
	.thumbs .si{
		width: var(--c12);
		height:var(--c12);
	}
}
/** ------------------------- min 750 -------------------------------------------------------- */
@media (min-width: 750px){
	.thumbs.medium .si{
		width: var(--c30);
	}
}
/** ------------------------- min 800 -------------------------------------------------------- */
@media (min-width: 800px){
	[data-headimg]{
		padding: 0 1em;
	}
	.fullw .si{
		margin: 1em;
	}
}
/** ------------------------- min 900 -------------------------------------------------------- */
@media (min-width: 900px){
	[data-headimg]{
		padding: 0 2em;
	}
	.thumbs{
		width:865px;
	}

	.thumbs.medium .si{
		width:var(--c31);
	}
}
/** ------------------------- min 1350 -------------------------------------------------------- */
@media (min-width: 1350px){
	.thumbs.medium .si{
		width:var(--c32);
		height: var(--c5);
	}
}