@font-face	{
	font-family: Outfit;
//	src: url('/fonts/Outfit/Outfit-VariableFont_wght.ttf');
	font-weight: normal;
	src: url('/fonts/Outfit/static/Outfit-Light.ttf');
/*
	Outfit-Thin.ttf		100
	Outfit-ExtraLight.ttf	200
	Outfit-Light.ttf	300
	Outfit-Regular.ttf	400
	Outfit-Medium.ttf	500
	Outfit-SemiBold.ttf	600
	Outfit-Bold.ttf		700
	Outfit-ExtraBold.ttf 	800
	Outfit-Black.ttf	900
*/
	}

@font-face	{
	font-family: Outfit;
	font-weight: bold;
	src: url('/fonts/Outfit/static/Outfit-Bold.ttf');
	}

@font-face	{
	font-family: Questrial;
	src: url('/fonts/Questrial/Questrial-Regular.ttf');
	}

@font-face	{
	font-family: Carlito;
	font-weight: normal;
	src: url('/fonts/Carlito/Carlito-Regular.ttf');
	}

@font-face	{
	font-family: Carlito;
	font-weight: bold;
	src: url('/fonts/Carlito/Carlito-Bold.ttf');
	}

BODY	{
//	background: #392019;	wood_1;
//	background: #784226;	wood_0 világos rész;
	background: #3d2213;
	background-image: url('pics/background_wood_0_new.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: Outfit, Carlito, Arial, Helvetica, sans-serif;
//	font-family: Questrial, Carlito, Arial, Helvetica, sans-serif;
//	font-family: Carlito, Arial, Helvetica, sans-serif;
	color: #c0c0b0;
	padding: 0;
	margin: 0;
/*	looks like not work:
*/	text-size-adjust: none;

	}

#strip	{
	background: rgba(0,0,0,.8);
	margin: 0 20vw 0 20vw; 
	padding: 0;
	min-height: 100vh;
	}

/*
@keyframes splash_move_top_bar {
	from {padding-top: 45vh;}
	to {padding-top: 5vh;}
	}
*/

#top_bar	{
//	background: #25399e26;
	margin: 0;
	padding: 5vh 2vw 5vh 2vw;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
//	animation: splash_move_top_bar 5s;
	}

/*
@keyframes splash {
	from {opacity: 0;}
	to {opacity: 1;}
	}
*/

#menu	{
//	background: #ffff0026;
	word-spacing: 1em;
//	animation: splash 2s 5s both;
	}

#main	{
//	background: #00ff0026;
	padding: 2vh 2vw 2vh 2vw;
	}

H1	{
	background: #c0c0b026;
	border-radius: 5px;
	width: 37vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 3.5vw;
	text-align: center;
	font-size: 200%;
	height: 1.2em;
	}

/*
H1.splash	{
//	background: #ff000026;
	margin: 40% 20% 5% 20%;
	}

@keyframes splash_move {
	from {margin-top: 40%;}
	to {margin-top: 10%;}
	}

H1.splash2	{
//	background: #ff000026;
	margin: 10% 20% 5% 20%;
//	animation: splash_move 5s;
	}
*/

/* ide tenni az iniciálé és content DIV-eket */

P	{
	background: #c0c0b026;
	border-radius: 5px;
	margin: 0 0 0.5vw 0;
	padding: 0.5vw 1vw 0.5vw 1vw;
	text-align: justify;
	}

/*
P.splash	{
	animation: splash 5s;
	}
*/

A	{
	color: inherit;
	text-decoration: none;
	font-weight: bold;
	}

A.enlarge {
	cursor: zoom-in;
	}

A:hover	{
	color: #ffffff;
	text-shadow:
		1px 1px 10px #ffffff20,
		1px -1px 10px #ffffff20,
		-1px 1px 10px #ffffff20,
		-1px -1px 10px #ffffff20;
	}

/*
path#logo:hover	{
//	fill: #ffffff;
	}

svg:hover	{
	text-shadow:
		1px 1px 10px #ffffff20,
		1px -1px 10px #ffffff20,
		-1px 1px 10px #ffffff20,
		-1px -1px 10px #ffffff20;
//	border: 1px solid red;
	}
*/

SPAN.active	{
	text-decoration: underline solid #c0c0b052;
	text-decoration-thickness: 0.5ex;
	text-underline-offset: 1ex;
	}

IMG	{
	background: #c0c0b026;
	border-radius: 5px;
	box-shadow:
		2px 2px 3px 0px rgba(0,0,0,.9);
	}

IMG.logo	{
	width: 20vw;
	background: none;
	border-radius: 0;
	box-shadow: none;
	}

/*
IMG.topleft	{
	float: left;
	margin: 0 0 0 0;
	}

IMG.splash	{
//	animation: splash 5s;
	}
*/
svg	{
//	background: #00ffff26;
	margin-left: 20vw;
	margin-top: 0vh;
	width: 20vw;
	}


IMG.icon	{
	height: 1em;
	vertical-align: -0.3ex;
	box-shadow: none;
	background: none;
	border-radius: 0;
	}

@keyframes splash_move_logo {
	from {margin-left: 18vw;}
	to {margin-left: 0;}
	}

IMG#logo_in_top_bar	{
//	background: #00ffff26;
	margin-left: 0vw;
//	animation: splash_move_logo 5s both;
	}

IMG#splash_logo	{
//	background: #00ffff26;
	position: absolute;
	left: 40vw;
	top: calc(50vh - 3.50vw);
//	animation: splash_move_logo 5s both;
	}

IMG#splash_logo_hover	{
//	background: #ff00ff26;
	position: absolute;
	left: 40vw;
	top: calc(50vh - 3.50vw);
	opacity: 0;
//	animation: splash_move_logo 5s both;
	}

IMG#splash_logo_hover:hover	{
	opacity: 1;
	}

#signature	{
//	background: #00ffff26;
	width: 50%;
	text-align: center;
	margin-top: 1em;
	}

#signature IMG	{
	box-shadow: none;
	background: none;
	border-radius: 0;
	}

HR	{
	background: #c0c0b0;
	width: 37vw;
	height: 0.5ex;
	margin-top: 3.5vw;
	margin-bottom: 3.5vw;
	border-width: 0;
	}

DIV.splash	{
//	animation: splash 5s;
	}

TD	{
	padding: 0;
	}

#footer	{
	font-size: small;
	text-align: right;
	}

/* ===================================================== */

.hidden	{
	display: none;
	}

TABLE.product-matrix	{
	width: 100%;
/* Hogyan tudnám elérni, hogy négyzet alakú legyen a táblázatcella,
   azaz ugyanolyan magas legyen, mint ami szélességre éppen adódott?
   Az alábbi nem működik!
*/	height: attr(width);
	border-collapse: collapse;
	}

TABLE.product-matrix TD	{
	text-align: center;
	padding: 0px;
	}

DIV.product-matrix	{
//	background: #00ff0026;
//	height: 400px;
	display: grid;
	grid-template-columns: 15vw 15vw 15vw;
	justify-content: space-around;
	row-gap: 3.5vw;
	}

.tile	{
//	background: #c0c0b026;
//	border: solid red 1px;
	position: relative;
	width: 15vw;
	height: 15vw;
	margin: auto;
	display: grid;
	place-content: center;
	}

/* ebben a formában ugrálós
.tile:hover	{
	width: 16vw;
	}
*/

.tile IMG	{
	border-radius: 5px;
	max-width: 15vw;
	max-height: 15vw;
	}

.tile .tile-text	{
	position: absolute;
	width: 100%;
	bottom: 1em;
	background: #00000080;
	text-align: center;
	}

/* ===================================================== */
/*	gallery stuff					 */
/* ===================================================== */

#darkness	{
	background: rgba(0,0,0,.8);
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
	height: 100vh;
	}

TABLE	{
//	background: #ff000026;
	width: 100%;
	border-collapse: collapse;
	}

H1.gallery	{
	margin-top: 1vw;
	margin-bottom: 1vw;
	}

TD.close	{
//	background: #ff000026;
	text-align: center;
	font-size: 300%;
	}

TD.navigate	{
//	background: #0000ff46;
	width: 2ex;
	font-size: 300%;
	text-align: center;
	}

TD.image {
//	background: #ff00ff26;
	width: calc(100vw - 12ex);
	height: calc(100vh - 3vw - 3.6em);
	text-align: center;
	}

IMG.gallery	{
	max-height: calc(100vh - 3vw - 3.6em);
	max-width: calc(100vw - 12ex);
	}

TD.caption	{
//	background: #00ff0026;
	height: 1.2em;
	text-align: center;
	}

.warning	{
	color: red;
	font-weight: bold;
	}