
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ORIENTATION LANDSCAPE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.sticky_header {
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 3;
	min-height: 10vh;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	background: linear-gradient(to right, rgb(var(--headerTitleBckGndColorRed), var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue)), 10%, white);}

.sticky_header > div {
	/* margin-left: 2%;
	margin-right: 2%; */
	padding: 1vmin 0;
	text-align: center;
	/* border-style: solid; */
	color: black;
	background-color: inherit;}

.sticky_header > div:nth-child(2) {
	/* flex: 0 1 46%; */
	flex: 0 1 50vw;
	font-family: serif;
	font-weight: bold; 
	font-size: var(--fontTitle, 5vmin);
}

.sticky_header > div:nth-child(odd) {
	/* flex: 0 1 21%; */
	flex: 0 1 25vw;
	font-size: var(--fontQuot, 2vmin);
	font-weight: bold;
	font-family: calligraphic;
	/* border-style: solid; */
	color: black;
}
.sticky_header img {
	float: left;
	object-fit: contain;
	filter: none;
opacity: 1; }
	
/* #left_top_pic {
    width: 30%;
	height: 80%;
} */

.languages {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	/* flex: 0 0 4.5vh; */
	justify-content: center;
	align-items: center;
	background-color: inherit;
}

.languages input[type="radio"] {
cursor: pointer;
display: none;}

.languages label {
	cursor: pointer;
	width: min(5.5vw, calc(4vh * 1.5));
	height: min(calc(5.5vw / 1.5), 4vh);
	margin-right: 2.25vw;
	margin-left: 2.25vw;
}

.languages label[for="italian"] {
	background-image: url('../data/italian_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label[for="english"] {
	background-image: url('../data/eng_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label[for="french"] {
	background-image: url('../data/french_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label[for="german"] {
	background-image: url('../data/ger_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label:has(input[type="radio"]:checked) {
	outline: 0.1vmin solid black; /* Claret #811331*/
	outline-offset: -0.1vmin;
	box-shadow: inset 0vmin 0vmin 0.5vmin 0vmin;
	border-image: linear-gradient(to left, rgba(0,0,0,0.8), transparent 10% 90%, rgba(0,0,0,0.8)) 0 fill/0/0;
	border-image: linear-gradient(to left, rgba(0,0,0,0.8), rgba(211,211,211,0.5) 10% 90%, rgba(0,0,0,0.8)) 0 fill/0/0;
	border-image: linear-gradient(to left, rgba(211,211,211,0.2) 0% 100%) 0 fill/0/0;
}

/* #right_top_pic {
    width: 40%;
	height: 55%;
} */
	
nav {
	/* flex: 1 0 auto; */
flex: 0 0 100%;
	align-self: end;
display: grid;
/* grid-template-columns: 20% 20% 20% 20% 20%; */
grid-template-columns: repeat(5, 1fr);
align-items: center;
text-align: center;
color: #811331; /* (Claret) #811331; */
/* border-style: solid; */
background-color: rgb(var(--headerNavBarBckGndColorRed), var(--headerNavBarBckGndColorGreen), var(--headerNavBarBckGndColorBlue));}

nav > * {
	margin: 1vh 2%;
	/* border-style: solid; */
}

.navBar__navLink {
	font-size: var(--fontNavbar, 2vmin);
	color: #811331; /* (Claret) #811331; */
	color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
}

.navBar__dropDownMenu > .navBar__navLink {
	margin: 0;
	padding: 0;
}

.navBar__dropDownMenu {
	position: relative;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	/* color: orange;
	border-style: solid; */
}

.dropDownMenu__table {
	position: absolute;
	display: none;
	/* display: block; */
	top: 0;
	top: calc(var(--fontNavbar) + 2vh + 1px);
	right: 0;
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	/* width: max-content; */
	color: black;
	background-color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	border-radius: 2vmin;
	overflow: hidden;
	/* border-style: solid; */
	
}

.dropDownMenu__table_prodotti_show, .dropDownMenu__table_cucina_show {
	display: block;
}

.dropDownMenu__table > li {
	margin: 0;
	padding: 0;
	/* width: fit-content; */
	text-align: start;
	text-align: center;
	color: rgb(var(--footerBannerBorderColorRed), var(--footerBannerBorderColorGreen), var(--footerBannerBorderColorBlue));
	background-color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	border-style: solid none;
	border-style: none;
	border-width: 0.1px;
}

.dropDownMenu__table > li:hover {
	background-color: beige;
}

/* .navBar__dropDownMenu_prodotti:hover .dropDownMenu__table_prodotti {
	display: block;
} */

.dropDownMenu__table_prodotti:hover {
	display: block;
}

/* .navBar__dropDownMenu_cucina:hover .dropDownMenu__table_cucina {
	display: block;
} */

.dropDownMenu__table_cucina:hover {
	display: block;
}

.dropDownMenu__table > li > a {
	color: rgb(var(--footerBannerBorderColorRed), var(--footerBannerBorderColorGreen), var(--footerBannerBorderColorBlue));
	/* background-color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue)); */
	width: max-content;
	/* color: blue; */
}

.dropDownMenu__button {
	/* width: min-content; */
	/* padding: 0 1vmin; */
	height: 100%;
	position: relative;
	font-size: var(--fontNavbar, 2vmin);
	--dropDownMenuButtonRotation: 90deg;
	--dropDownMenuButtonYTranslation: 25%;
	background-color: transparent;
	border-style: none;
	color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	/* border-style: solid;
	color: red; */
}

.dropDownMenu__button:before {
    content: '\27A6';
	display: block;
	position: absolute;
	/* top: 0;
	transform: rotate(90deg) translateX(75%) translateY(25%); */
	bottom: 0;
	transform: rotate(var(--dropDownMenuButtonRotation)) translateY(var(--dropDownMenuButtonYTranslation));
	padding: 0;
	margin: 0;
	/* border-style: solid;
	color: green; */
}

.dropDownMenu__button:hover {
	color: black;
}

.dropDownMenu__button:active {
	filter: drop-shadow(0vw 0vh 4vmin white);
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ORIENTATION PORTRAIT %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


@media screen and (orientation: portrait) {

nav {
/* background: linear-gradient(to right, #FAA0A0, 10%, white); */
background: linear-gradient(to right, rgb(var(--headerNavBarBckGndColorRed), var(--headerNavBarBckGndColorGreen), var(--headerNavBarBckGndColorBlue)), 50%, white);
/* border-style: solid none; */
border-style: none;
}

}
