a.photomenu_animals   { background-image: url('art/animals.webp'); } 
a.photomenu_flowers   { background-image: url('art/flowers.webp'); } 
a.photomenu_scenery   { background-image: url('art/scenery.webp'); } 
a.photomenu_fireworks { background-image: url('art/fireworks.webp'); } 
a.photomenu_other     { background-image: url('art/other.webp'); } 

a.photomenu_animals   span.icon { background-image: url('art/animals.svg'); } 
a.photomenu_flowers   span.icon { background-image: url('art/flowers.svg'); } 
a.photomenu_scenery   span.icon { background-image: url('art/scenery.svg'); } 
a.photomenu_fireworks span.icon { background-image: url('art/fireworks.svg'); } 
a.photomenu_other     span.icon { background-image: url('art/other.svg'); } 

a.photomenu
{
/*	filter: contrast(50%) brightness(150%); */
/*	filter: contrast(50%) brightness(100%); */
/*	filter: contrast(75%) brightness(150%); */
	position: relative;
	filter: grayscale(66.66%) brightness(75%);
	transition: filter 1s ease-in-out;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

a.photomenu span.icon
{
	color: #c0c0c0;
	background-color: #000000;
/*	background-color: rgba(0,0,0,0.25); */
	background-repeat: no-repeat;
	background-size: 2em;
/* 	filter: brightness(150%); */
/*	transition: filter 1s ease-in-out, background-color 1s ease-in-out; */
/*	position: absolute; */
}

a.photomenu:hover,
a.photomenu:active,
a.photomenu:focus,
a.photomenu:focus-visible
{
/*	filter: initial; */
	filter: grayscale(0%) brightness(100%);
	transition: filter 0.125s ease-in-out;
}

a.photomenu:hover span.icon,
a.photomenu:active span.icon,
a.photomenu:focus span.icon,
a.photomenu:focus-visible  span.icon
{
/*	background-color: rgba(0,0,0,0.5); */
	background-color: #8080c0;
	color: #ffffff;
/*	filter: contrast(200%) brightness(250%); */
/*	transition: filter 0.125s ease-in-out, background-color 0.125s ease-in-out; */
/*	transition: all 0.125s ease-in-out; */
}




main a.photomenu
{
	/* height: 5em; */

	margin: 0.5em;
/*	padding: 2em 0px;
	text-align: center; */
	border-radius: 0.2em;

/*	padding: 3em 0px 1em 0px; */
/*	text-align: right; */
/*	padding: 4em 0px 1em 0px; */
/*	margin: 0px 0.5em 1em 0px; */
	margin: 0px 0px 0.5em 0px;

	padding: 0px;
	height: 6em;
}

header.photosubmenubar
{
	background-color: #404040;
	display: block;
}

header.photosubmenubar nav
{
	display: flex;
}

header.photosubmenubar nav > div
{
	position: relative;

	flex: 1 1;
/*		border: 1px solid #ff00ff; */
	height: 1.75em;
}

header.photosubmenubar a.photomenu
{
/*	margin: 0px;
	padding: 0px;*/
	text-align: right;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

/* header.photosubmenubar nav > div a:after */
header.photosubmenubar nav > div:hover a:after
{
	content: ' ';
	display: block;
	position: absolute;
	bottom: 0px;
/*
	left: 1em;
	right: 0.25em;
*/
	left: 0px;
	right: 0px;

	height: 1mm;
/*	background-color: #ffffc0; */
/*	background: radial-gradient(circle,rgba(148, 187, 233, 1) 0%, #94BBE9 15%, #94BBE9 85%, rgba(148, 187, 233, 1) 100%); */
	background-color: #8080c0;
}

/*
header.photosubmenubar nav > div:first-child a:after
{
	left: 0px;
}

header.photosubmenubar nav > div:last-child a:after
{
	right: 0px;
}
*/

header.photosubmenubar nav > div a.photomenu
{
	clip-path: polygon(1cm 0px, 100% 0px, calc(100% - 1cm) 100%, 0px 100%);
	right: -1.05cm;
}

header.photosubmenubar nav > div:last-child a.photomenu
{
	clip-path: polygon(1cm 0px, 100% 0px, 100% 100%, 0px 100%);
	right: 0px;
}

header.photosubmenubar nav > div:first-child a.photomenu
{
	clip-path: polygon(0px 0px, 100% 0px, calc(100% - 1cm) 100%, 0px 100%);
}

main a.photomenu span.icon
{
	background-size: 1.25em;

/*	padding: 0.2em 0.5em 0.2em 1.75em;*/
/*	padding: 0.5em 0.5em 0.5em 2.5em; */
	padding: 0.2em 0.5em 0.2em 1.75em;
	background-position: 0.25em center;

	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;

	border-top-left-radius: 0.2em;
	border-bottom-right-radius: 0.2em;
	bottom: 0px;
	right: 0px;
	font-size: min(0.75cm, 10vh);
	position: absolute;
}

header.photosubmenubar a.photomenu div
{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;

/*
	clip-path: polygon(0px 0px, 100% 0px, calc(100% - 1em) 100%, 0px 100%);
*/
	clip-path: polygon(1cm 0px, 100% 0px, 100% 100%, 0px 100%);
	height: 100%;
	display: inline-block;
	display: inline-flex;
	justify-content: flex-end;
	align-items: flex-end;
	align-content: flex-end;
}

header.photosubmenubar a.photomenu span.icon
{
	background-size: 1em;


	padding: 0px 1cm 0px 1.75em;
	background-position: 0.66em center;

	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;

	border-top-left-radius: 0.2em;
/*	border-bottom-right-radius: 0.125em; */
/*	bottom: 0px;
	right: 0px;*/
	font-size: 6mm; /*min(0.6cm, 5vw); */
}


header.photosubmenubar,
header.photosubmenubar > nav,
header.photosubmenubar > nav > div
{
	height: 1.5cm;
}



@media screen and (max-width: 22.5cm)
{
	header.photosubmenubar a.photomenu span.icon
	{
		height: 1.5em;
		padding: 0px;
		width: 2.25cm;
		background-position: 5mm center;
	}
	
	header.photosubmenubar a.photomenu span.icon > span
	{
		display: none;
	}
}

@media screen and (max-width: 17.5cm)
{
	header.photosubmenubar + main
	{
		xmargin-top: 2em;
	}

	header.photosubmenubar nav
	{
		gap: 0.15em;
	}
	
	header.photosubmenubar nav > div
	{
		height: 9.5vw;
		max-height: 1.75em;
	}
	
	header.photosubmenubar nav > div a.photomenu,
	header.photosubmenubar nav > div:first-child a.photomenu,
	header.photosubmenubar nav > div:last-child a.photomenu
	{
		clip-path: initial;
		right: 0px;
	}
	
	header.photosubmenubar a.photomenu div
	{
		clip-path: initial;
	}

	header.photosubmenubar a.photomenu span.icon
	{
		/* background-size: 80%; */
		border-top-left-radius: 0px;
		background-size: min(80%, 1em);
		height: min(1.5em, 100%);

		width: 1.66em;
		background-position: 0.33em center;
	}
}