/* base + mobile stylesheet < 768px width*/

/*reset bad defaults*/
body, td, div, ul, li, h1, h2, h3, input, p, form
	{
	margin:0;
	padding:0;
	}

td, div, ul, li, h1, h2, h3, input, p, form
	{
	font-size:inherit;
	}

body *
	{
	box-sizing:border-box;
	}	

/*load fonts*/
@font-face {
	font-family: 'Segoe';
    /*src: local('Segoe UI'), url('img/fonts/SegoeUI.ttf');*/
    src: local('Segoe UI'), url('img/fonts/SEGOEUI.TTF');    
}

@font-face {
	font-family: 'SegoeB';
    /*src: local('Segoe UI Bold'), url('img/fonts/SegoeUIBold.ttf');*/
    src: local('Segoe UI Bold'), url('img/fonts/SEGOEUIB.TTF');    
}

@font-face {
	font-family: 'Bebas';
    src: local('Bebas Neue'), url('img/fonts/BebasNeue-Regular.ttf');
}

@font-face {
	font-family: 'Napkin';
    src: local('Bebas Neue'), url('img/fonts/Napkinscriptssk.ttf');
}

@font-face {
	font-family: 'Dufanthe';
    src: local('Dufanthe'), url('img/fonts/Dufanthe.otf');
}

/*styles for the page*/
body
	{
	color:#38310f;
	font-size:26px;
	min-height:100%;
	font-family:Segoe;
	background-color:#f3efe8;
	--barrascorr:0px;
	}

@media (pointer: fine)
{
	body
		{
		--barrascorr:15px;
		}
}	

body > .daterangepicker
	{
	color:black;
	}

body.oldie
	{
	height:100%;
	}

a
	{
	color:#628414;
	text-decoration:none;
	}

a img
	{
	border:0;
	}

body > header
	{
	overflow-x:clip;
	--top-space:190px;
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:top center;
	background-image:url(img/bg_lasagna.jpg);
	border-bottom:9px solid #3e5b00;
	}
	
body.menup > header
	{
	background-image:url(img/bg_menu.jpg);
	}
	
body.ingred > header
	{
	background-image:url(img/bg_ingredienti.jpg);
	}
	
body.chisiamo > header
	{
	background-image:url(img/bg_chisiamo.jpg);
	}
	
body.contatti > header
	{
	background-image:url(img/bg_contatti.jpg);
	}
	
body.gallery > header
	{
	background-image:url(img/bg_gallery.jpg);
	}
	
@media screen and (max-width: 1621px)
	{
	#extp > div::after
		{
		content:none !important;
		}
	}
  
/*@media screen and (max-width: 1764px)
	{
	body > header > .int,
	body > header > .int #menubar
		{
		overflow-x:clip;
		}
	}
  */
@media screen and (max-width: 1928px)
	{
	body > footer
		{
		overflow-x:clip;
		}
	}
  
@media screen and (min-width: 2290px)
	{
	body > header
		{
		background-size:100% auto;
		}
	}
  
body > header > nav
	{
	padding-top:185px;
	}
	
#menubar
	{
	margin-bottom:100px;
	height:calc(var(--top-space) / 2.05);
	background-color:rgba(255, 255, 255, 0.7);
	}

#logof::before,
#logof::after
	{
	top:0;
	content:"";
	width:calc(((100vw - 100%) / 2) - 0px);
	display:block;
	position:absolute;
	}
	
#logof::before,
#logof::after
	{
	height:100%;
	background-color:#526c1b;
	}
	
#menubar::before,
#logof::before
	{
	right:100%;
	}
#menubar::after,
#logof::after
	{
	left:100%;
	}
	
#logo
	{
	top:60px;
	width:210px;
	left:20px;
	z-index:0;
	display:block;
	position:absolute;
	}

#logo img
	{
	width:100%;
	height:auto;
	}
	
#menuh
	{
	top:30px;
	right:30px;
	width:33px;
	min-height:28px;
	position:absolute;
	background-repeat:no-repeat;
	background-image:url("img/mopen.svg");
	}
	
/*#menuh:hover,*/
#menuh.popped
	{
	background-image:url("img/mclose.svg");
	}
	
#menu
	{
	height:100%;
	display:none;
	font-size:calc((var(--top-space) / 2.05) / 1.93);
	line-height:calc((var(--top-space) / 2.05) / 1.93);
	list-style: none;
	font-family:Bebas;
	align-items:center;
	justify-content:end;
	}
	
/*#menuh:hover #menu,*/
#menuh.popped #menu
	{
	top:70px;
	left:25vw;
	z-index:2;
	width:75vw;
	padding:20px;
	display:block;
	position:fixed;
	background-color:black;	
	}	

#menubg
	{
	display:none;
	}

/*#menubar:has(#menuh:hover)::before,*/
#menubar:has(#menuh.popped) #menubg
	{
	top:0;
	left:0;
	z-index:1;
	content:"";
	width:100vw;
	height:100vh;
	display:block;
	position:fixed;
	background-color:transparent;
	}	

/*#menuh:hover #menu > li,*/
#menuh.popped #menu > li
	{
	display:block;
	margin-bottom:20px;
	text-align:right;
	}
	
#menu li a
	{
	color:inherit;
	white-space:nowrap;
	text-transform: uppercase;
	}

/*#menuh:hover #menu > li a,*/
#menuh.popped #menu > li a
	{
	color:#e8e2d4;
	}
	
header .social
	{
	right:0;
	display:none;
	position:absolute;
	top:calc(var(--top-space) * 0.1);
	}
	
footer .social
	{
	padding:30px 0;
	display:block;
	text-align:center;
	}
	
.social a
	{
	margin-right:10px;
	}

footer .int > a
	{
	margin-top:30px;
	}

main
	{	
	margin-top:-50px;
	}
	
.boxes
	{
	display:flex;
	--spazio:72px;	
	flex-wrap:wrap;
	gap:var(--spazio);
	flex-direction:column;
	}
	
.box
	{
	flex:1;
	display:flex;
	padding:30px;
	padding-top:35px;
	border-radius:12px;
	flex-direction:column;
	background-color:#efede1;
	justify-content:space-between;
	box-shadow: 4px 0px 15px #00000080;
	}

#area.box,
#doc.box
	{
	max-width:none;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:100px;
	}
	
.box h1
	{
	flex-basis:134px;
	display:flex;
	flex-grow:1;
	flex-shrink:0;
	font-size:28px;
	position:relative;
	padding-bottom:10px;
	align-items:flex-end;
	/*font-weight:normal;*/
	justify-content:center;
	border-bottom:2px solid currentcolor;
	}
	
.box h1 span
	{
	text-align:center;
	}

.box h1::before,
#orari > a::before
	{
	width:100%;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	}

.box h1::before
	{
	top:0;
	position:absolute;
	}

#orari h1::before
	{
	content:url(img/orari.svg);
	}

#tavoli h1::before
	{
	content:url(img/tavolib.svg);
	}

#fmenu h1::before
	{
	content:url(img/menu.svg);
	}

#dove h1::before
	{
	content:url(img/dove.svg);
	}

#dop h1::before
	{
	content:url(img/quality.svg);
	}

body.ingred .box h1::before
	{
	content:url(img/quality.svg);
	}
	
body.gallery .box h1::before
	{
	content:url(img/gallery.svg);
	}
	
body.gallery .box h1
	{
    margin: 0 28px;
    font-family: Bebas;
	text-transform:uppercase;
	}
	
body.ingred .box > a
	{
	font-size:24px;
	text-align:left;
	padding:10px 15px;
	background-color:#38310f;
	}	

body.ingred .box > a > span
	{
	color:#a5933f;
	margin:10px 0;
	display:inline-block;
	}
	
body.ingred .box > a.cantina
	{
	background-color:#561a04;
	}	
	
#area h1,
#area h2,
#doc h1,
#doc h2
	{
	border:0;
	font-size:38px;
	font-family:Bebas;
	font-weight:normal;
	text-transform:uppercase;
	}
	
#area h1,
#doc h1
	{
	flex-basis:170px;
	}
	
#area h2,
#doc h2
	{
	margin:40px 0;
	}
	
#area.chisiamo h2
	{
	text-align:center;
	}
	
#area.menup h1::before
	{
	content:url(img/menu.svg);
	}

#area.chisiamo h1::before
	{
	content:url(img/chisiamo.svg);
	}

#area.contatti h1::before
	{
	content:url(img/contatti.svg);
	}

#area h1 span,
#doc h1 span
	{
	display:inline-block;
	border-top:2px solid currentcolor;
	}
	
#area.menup h2
	{
	font-size:60px;
	font-family:Dufanthe;
	font-weight:normal;
	position:relative;
	padding-left:82px;
	text-transform:none;
	}	
	
#area.menup h2::before
	{
	left:0;
	top:20px;
	width:100%;
	content:"";
	display:block;
	height:100px;
	position:absolute;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:top left;
	background-image:url(img/cuoco.svg);
	}
	
#area .corpo,
#doc .corpo
	{
	padding:0 10px;
	}
	
#area .corpo img,
#doc .corpo img
	{
	--img-padding:10px;
	--spazio-testo:60px;

	height: auto;
	padding:var(--img-padding);
	border:1px solid currentcolor;
	max-width:calc(100% - (var(--img-padding) * 2) - 2px);
	}
	
#area h2 img,
#doc h2 img
	{
	margin-top:107px;
	margin-bottom:80px;
	}
	
#area img[style*="float:left;"],
#doc img[style*="float:left;"]
	{
	margin-right:var(--spazio-testo);
	}
	
#area img[style*="float:right;"],
#doc img[style*="float:right;"]
	{
	margin-left:var(--spazio-testo);
	}
	
#area.chisiamo img[src*=".svg"],
#area.contatti img[src*=".svg"]
	{
	margin-top: 30px;
	border:0 !important;
	}
	
#area .corpo ul,
#doc .corpo ul
	{
	margin:20px 0;
	margin-left:50px;
	}
	
.box > div
	{
	flex:1;
	padding-top:40px;
	text-align:center;
	text-wrap:balance;
	min-height: 233px;
	}
	
body.gallery .box > div
	{
    padding-top:10px;
	}	
	
.box img
	{
	max-width:100%;
	}
	
body.gallery .box img
	{
	padding:7px;
	aspect-ratio:1;
	object-fit:cover;
	margin:20px;
	max-width:calc(100% - 56px);
	border:1px solid currentcolor;
	}
	
.box > a 
	{
	color:white;
	padding:10px;
	display:block;
    margin-top:1em;	
	min-height:192px;
	text-align:center;
	border-radius:12px;
	background-color:#38310f;
	}
	
.box > a[href]
	{
	min-height:0;
	background-color:#779a0a;
	}	
	
#dove.box > a 
	{
	background-color:#38310f;
	}
	
/*#orari > a::before
	{
	margin-top:10px;
	margin-bottom:10px;
	content:url(img/tavoli.svg);
	}*/

.box.menup
	{
	padding-bottom:100px;
	}
	
.box.menup > section:last-child
	{
	display:flex;
	column-gap:0;
	flex-wrap:wrap;
	--menupadding:50px;
	flex-direction:column;
	}
	
.box.menup .portata
	{
	width:100%;
	display:flex;
	margin-top:2em;
	padding:0 10px;
	flex-direction:column;
	flex-basis: calc(100% / 3);
	}
	
.box.menup .portata h3
	{
	font-size:26px;
	}
	
.box.menup .portata span:last-child
	{
	font-size:24px;
	line-height:26px;
	display:inline-block;
	}
	
.box.menup .portata.piedemenu
	{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	padding: 0 var(--menupadding);
	padding-bottom:1em;
	}

.box.menup .portata ul
	{
	flex:1;
	list-style:none;
	}
	
.box.menup .portata h2
	{
	margin:0 !important;
	margin-bottom:130px !important;
	}
	
.box.menup .portata li.piatto
	{
	margin-bottom:1em;
	}

.box.menup .portata li.piatto span:first-of-type
	{
	float:right;
	font-size:30px;
	line-height:35px;
	font-weight:bold;
	font-family:Dufanthe;
	margin-left:1em;
	}
	
#nlf
	{
	margin-top:80px;
	}

#nlf > div:first-child > span
	{
	text-align:center;
	} 
	
#nlf > div:first-child > span:first-child
	{
	display:block;
	font-size:42px;
	font-family: Bebas;
	text-transform:uppercase;
	}

#nlf > div:first-child > span:last-child
	{
	display:block;
	font-size:26px;
	font-family: Napkin;
	}

#extnlf
	{
	min-height:94px;
	margin-top:17px;	
	background-color:#e6e0cd;
	}
	
#extnlf .editform
	{
	padding:20px 0;
	}	
	
#extnlf .editform input,
#extnlf .editform label,
#extnlf .edittable > div > span > span
	{
	width:auto;	
	height:auto;
	font-size:inherit;
	}

#extnlf .editform input
	{
	border:0 !important;
	max-width:100%;
	}
	
#extnlf .editform input.text
	{
	background-color: #efede1;
	}

#extnlf .edittable > div > span > span
	{
	font-size:inherit;
	}

#extnlf .editform .edittable
	{
	grid-area: a;
	}	

#extnlf .editform .edittable > div 
	{
	column-gap:72px;
	}	
	
#extnlf .editform .edittable > div > span > span:not(.err)	
	{
	flex:none;
	max-width: calc(100% - 20px);
	}

#extnlf .editform .edittable > div > span.blk:first-child .lbl
	{
	display:none;
	}	

#extnlf .editform .edittable > div > span.blk:last-child .lbl
	{
	order:3;
	font-size:16px;
	}	
	
#extnlf .editform .edittable > div > span.blk:last-child .err
	{
	order:2;
	}	
	
div.edittable > div
	{
	flex-direction:column;
	}
	
#extnlf .editform .cmdbuttons
	{
	grid-area: b;
	padding:0 30px;
	}	

#extnlf .editform .cmdbuttons .bottone
	{
	width:100%;
	height:auto;
	max-width:none;	
	min-width:0;
	display:inline-block;
	}	

#extnlf .editform .btnspacer
	{
	display:none !important;
	}	

#infscroll
	{
	font-size:14px;
	text-align:justify;
	}

#extp
	{
	font-size:26px;
	font-family:Bebas;
	padding:27px 0;
	margin-top:167px;	
	position:relative;
	background-color:#3e5b00;
	}

#extp > div
	{
	color:white;
	display:flex;
	column-gap:150px;
	line-height:100%;
	position:relative;
	flex-direction:column;
	}
	
#extp > div > a#logof
	{
	padding:15px 0;
	position:relative;
	display:inline-block;
	background-color:#526c1b;
	}
	
#extp > div > a#logof img
	{
	max-width:100%;
	}

#extp > div > a#indp,
#extp > div > a#telp
	{
	color:inherit;
	text-align:center;
	text-transform:uppercase;
	}

#extp > div > a#indp span,
#extp > div > a#telp span
	{
	line-height:32px;
	display:inline-block;
	border-top:3px solid currentcolor;
	}

#extp > div > a#indp::before,
#extp > div > a#telp::before
	{
	width:auto;
	content:"";
	height:40px;
	display:block;
	margin-bottom:20px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:top center;
	}
	
#extp > div > a#indp::before
	{
	background-image:url(img/dovef.svg);
	}
	
#extp > div > a#telp::before
	{
	background-image:url(img/phonef.svg);
	}
	
.int
	{
	margin: 0 20px;	
	position:relative;
	}
	
header .int
	{
	margin-left:auto;
	margin-right:auto;
	}
	
#copy
	{
	font-size:16px;
	font-family:SegoeB;
	text-align: center;
	padding:40px 0 25px 0;
	}
	
#copy > span
	{
	display:block;
	}	
	
#q4 span
	{
	color:#927d33;
	}