header
{
	display: none;
}

header > a.logo
{
/*	box-sizing: border-box; */
/*	width: 12vw; */
/*	height: 2.25em; */
	background-repeat: no-repeat;
	background-position: center;

	/* box-sizing: border-box; */
	width: 4cm;
	background-size: contain;
	background-image: url('/ctstudio/ctstudio_logo_full_456x175.webp');
/*
	height: 1.75em;
	border-color: transparent;
	box-shadow: initial;
*/
}

/*
@media screen and (prefers-contrast: more)
{
	header.mainmenubar a
	{
		text-shadow:
			-0.05em 0px 0.05em #ffffff,
			0px -0.05em 0.05em #ffffff,
			0px  0.05em 0.05em #ffffff,
			 0.05em 0px 0.05em #ffffff;
	}
}
*/

@media screen
{
	header
	{
		left: 0px;
		position: fixed;
		right: 0px;
		z-index: 2;
	}
	
	header.mainmenubar
	{
		top: 0px;
		background-color: #f8f8f8;
	}

	header.mainmenubar,
	header.mainmenubar > nav
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 5mm;
	}


	header.mainmenubar,
	header.mainmenubar > nav,
	header.mainmenubar > form
	{
		height: 15mm;
	}

	header.mainmenubar a
	{
		padding: 0px 5mm;
		height: 14mm;

		color: #000080;
		text-decoration: none;
		font-variant: small-caps;
		background-position: -5cm -5cm;
		background-repeat: no-repeat;
		border-bottom: 1mm solid transparent;
	}
	
	header.mainmenubar > nav > a,
	header.mainmenubar > form > a
	{
		display: inline-block;
		display: inline-flex;
		align-items: center;
	}

	header.mainmenubar a:hover,
	header.mainmenubar a:active,
	header.mainmenubar a:focus,
	header.mainmenubar a:focus-visible
	{
/*		background-color: #f0f0ff;*/
		text-decoration: none;
		color: #000000;
		border-bottom-color: #8080c0;
	}

	header > a.logo
	{
		background-position: center;
		width: 2.5cm;
		background-size: 2.5cm;
/*
		background-position: center;
		width: 5em;
		background-size: 1.5em;
		background-size: contain;
		background-image: url('/ctstudio/ctstudio_logo_full_456x175.webp');
*/
	}
}


@media screen
{
	header.mainmenubar
	{
		height: 1.5cm;
	}

/*
	body.withphotosubmenu header.mainmenubar
	{
		height: 3.5cm;
	}
*/

	header.mainmenubar + main
	{
/*		margin-top: 2.25em; */
/*		margin-top: 2.75em; */
/*		margin-top: 3.9em;  */
		margin-top: 1.5cm;
	}

	header.photosubmenubar
	{
		top: 1.5cm;
	}
	
	header.photosubmenubar + main
	{
/*		margin-top: 2.25em; */
/*		margin-top: 2.75em; */
/*		margin-top: 3.9em;  */
		margin-top: 3cm;
	}

/*
	header a > span
	{
		border: 0px none transparent;
	}
*/
}


/*
@media screen and @media (orientationx: landscape)
{
	header.mainmenubar
	{
		flex-direction: column;
		bottom: 0px;
/ *		width: 100%; * /
	}

	header.mainmenubar nav
	{
		flex-direction: column;
	}

}
*/

@media screen and (max-width: 17.5cm)
{
/*
	header.mainmenubar,
	header.photosubmenubar
	{
/ *
		height: 9.5vw;
    	max-height: 1.75em;
		background-color: #ffffc0;
* /
	}

	header.mainmenubar
	{
		height: min(14vw, 18mm);
	}

	body.withphotosubmenu header.mainmenubar
	{
		height: min(26vw, 33mm);
	}

	header.photosubmenubar
	{
		top: min(14vw, 18mm);
	}
*/	
/*
	header.mainmenubar + main
	{
		margin-top: 1.5cm;
	}
*/
/*
	header.photosubmenubar + main
	{
		margin-top: 3cm;
	}
*/

}






@media screen and (max-width: 22.5cm) /* Studio Logo -> Icon */
{
	header > a.logo,
	header.mainmenubar > form > a
	{
	/*	width: 100%; */
		width: 1cm;
		background-size: 1cm;
	}

	header > a.logo
	{
		background-image: url('/ctstudio/ctstudio_logo_smallsquareround_nopadding_200.webp');
	}

	header.mainmenubar > form > a
	{
		background-position: center;
	}

	header.mainmenubar > form > a > span
	{
		display: none;
	}
}

@media screen and (max-width: 20cm) /* Main main buttons -> dyn size / pads / gaps */
{
	header.mainmenubar,
	header.mainmenubar > nav
	{
		gap: 2vw;
	}
	
	header.mainmenubar a
	{
		font-size: 4vw;
		padding: 0px 2vw;
	}
}

/*
@media screen and (max-width: 17.5cm) / * Main main buttons -> icons * /
{
	header.mainmenubar > nav > a
	{
		background-position: center;
		background-size: 1.25cm;
		width: 2.25em;
	}

	header.mainmenubar > nav > a > span
	{
		display: none;
	}
}
*/