@font-face {
		font-family: calligraphic;
	src: url('../data/Balqis.ttf');
}

@font-face {
		font-family: normal_text;
	src: url('../data/comic-sans/COMICSANS.ttf');
}

/* :root {
	inline-size: 100vi;
	block-size: 100vb;
} */

/* .margin { width: calc( (100vw - var(--content-width)) / 2); } */

* {
	/* TEST */
	/* background-color: rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue)); */
	/* TEST */
	color: black;
	box-sizing: border-box;/* content-box */
	/* border-style: solid; */
}

html {
	/* Page background & HeaderTitle: Watermelon Pink (hex: E37383; rgb: 227, 115, 131) / Almond rgb(234, 221, 202) / Brass rgb(255, 193, 110)
	Golden rod rgb(218, 165, 32) / Ecru rgb(194, 178, 128) / Wheat rgb(245, 222, 179) / giallo ocra rgb(174, 160, 75) / 244 233 226 / light tan 214 181 136*/
	/* Color to fade to the Page background & HeaderTitle: Ivory HEX #ff3333 RGB 255, 255, 240 / Beige 	rgb(245, 245, 220) / Cornsilk rgb(255, 248, 220)*/
	/* Header Navigation Bar & Top Footer: Pastel red (hex: FAA0A0; rgb: 250, 160, 160 ) / Darkening almond rgb(210.6, 198.9, 181.8); */
	/* Footer Banner: Watermelon Pink (hex: FAA0A0; rgb: 250, 160, 160 ) / Dark Almond (rgb(163.8, 154.7, 141.4)) */
	/* Footer Banner border-color: Dark Almond rgb(117, 110.5, 101);*/ 
	--pageBckGndColorRed: 234;
	--pageBckGndColorGreen: 221;
	--pageBckGndColorBlue: 202;
	--ToColorRed: 234;
	--ToColorGreen: 221;
	--ToColorBlue: 202;
	--headerTitleBckGndColorRed: 214;
	--headerTitleBckGndColorGreen: 181;
	--headerTitleBckGndColorBlue: 136;
	--headerNavBarBckGndColorRed: 210.6;
	--headerNavBarBckGndColorGreen: 198.9;
	--headerNavBarBckGndColorBlue: 181.8;
	--footerTopBckGndColorRed: 210.6;
	--footerTopBckGndColorGreen: 198.9;
	--footerTopBckGndColorBlue: 181.8;
	--footerBannerBckGndColorRed: 163.8;
	--footerBannerBckGndColorGreen: 154.7;
	--footerBannerBckGndColorBlue: 141.4;
	--footerBannerBorderColorRed: 117;
	--footerBannerBorderColorGreen: 110.5;
	--footerBannerBorderColorBlue: 101;
}

html, body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	overflow-x:hidden;
	/* TEST */
	background-color: rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue));
	/* TEST */
}

/* 1 inch = 2.54 cm; 
min_widthFont = 0.1 inch (2.5file:///C:/Users/BARO4/Desktop/K_baro4/Documents/ChFl_WP20/data/escalier_chambord3_resized.jpg4 mm)
max_widthFont = 0.2 inch (5.08 mm)*/

/* mobile phone vertical aspect ratio (W/H) 9/16 --> 9/18 --> 9/19 ; PC screen aspect ratio around 3/2 
use golden ration, according to which headings should be 1.618 times larger than body*/

body {
	--minFontTitle: 30px;
	--maxFontTitle: 60px;
	--fontTitle: clamp(var(--minFontTitle), 5vw , var(--maxFontTitle));
	
	--minFontArt: 10px;
	--maxFontArt: 20px;
	/* CUSTOMIZATION */
	--fontArt: clamp(var(--minFontArt), 1.3vw , var(--maxFontArt));
	/* --fontArt: clamp(var(--minFontArt), var(--minFontArt) + 0.0166667 * (100vw - 600px), var(--maxFontArt) ); */
	/* CUSTOMIZATION */
	
	--minFontNavbar: 9px;
	--maxFontNavbar: 18px;
    --fontNavbar: clamp(var(--minFontNavbar), 1.5vw , var(--maxFontNavbar));
	
	--minFontBrand: 10px;
	--maxFontBrand: 20px;
	--fontBrand: clamp(var(--minFontBrand), 1.5vw , var(--maxFontBrand));	
	
	--minFontQuot: 8px;
	--maxFontQuot: 18px;
	--fontQuot: clamp(var(--minFontQuot), 1.3vw , var(--maxFontQuot));
	/* --fontQuot: clamp(var(--minFontQuot), var(--minFontArt) + 0.0166667 * (100vw - 600px), var(--maxFontQuot) ); */
	
	--minFontFootCap: 7.5px;
	--maxFontFootCap: 16px;
	--fontFootCap: clamp(var(--minFontFootCap), 1.5vw , var(--maxFontFootCap));
	
	--minFontFootAdd: 6.5px;
	--maxFontFootAdd: 16px;
	--fontFootAdd: clamp(var(--minFontFootAdd), 1.5vw , var(--maxFontFootAdd));
	
	transition-property: --fontArt;
	transition-duration: 3s;
}

.tgtFontArt
{
	/* CUSTOMIZATION */
	--fontArt: clamp(var(--minFontArt), 1.3vw , var(--maxFontArt));
	/* --fontArt: clamp(var(--minFontArt), var(--minFontArt) + 0.0166667 * (100vw - 600px), var(--maxFontArt) ); */
	/* CUSTOMIZATION */
}
	
/* .page_wrapper {
	min-height: 100%;
	display: grid;
	grid-template-rows: max(auto, 20%), 1fr, max(auto, 20%);
	grid-template-rows: auto, 1fr, auto;
} */

.page_wrapper {
	min-height: 100%;
	display: flex;
	flex-flow: column nowrap;
	/* border-style: solid;
	color: yellow; */
}

span:lang(en), p:lang(en) {
display: none;}

/* span:lang(it), p:lang(it) {
display: none;} */

@media screen and (orientation: portrait) {
	* {
	/* TEST */
	/* background-color: rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue)); */
	/* TEST */
	color: black;
	box-sizing: border-box;/* content-box */
	/* border-style: solid; */
} 

}


/*-----------------------------------------------------------  <pageMainSection - ORIENTATION LANDSCAPE>  ---------------------------------*/

.pageMainSection { 
	/* min-height: 65vh; */
	flex-grow: 1;
	--flexBasLeft: 25%;
	--flexBasRight: 25%;
	--flexBasCent: 50%;
	--doorThick: 1vw;
	--doorThick: clamp(10px, 1.2vw, 20px);
	--doorWidth: 0;
	--doorHeight: 0;
	--doorColor: #C19A6B; /* #5C4033 (dark brown) / #966919 (golden brown) / #7B3F00 (chocolate) / #C19A6B (Camel) */
	
	--startPageAnim_t: 1s;
	--doorsOpeningDuration: 1.5s;
	--panelsOpenDuration: 1.5s;
	--panelsResizeDuration: 1s;
	--textFadeInDuration: 2s;
	
	/* min-height: 70vh; */
	display: flex;
	width: 100%;
	color: brown;
	align-items: stretch;
	background-image: url('../data/muro.jpg');
	background-size: cover;
	perspective: 500vmin;
	perspective-origin: 50% 50%;
	/* border-style: solid;
	color: pink; */
}
	
	
.left_panel {
	flex: 0 0 var(--flexBasLeft);
	/* border-style: solid; */
	color: green;
	display: flex;
	flex-flow: row nowrap;
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 2;
	transform-style: preserve-3d;
	animation: resize_left 1s ease-in 4s 1 normal forwards;
	animation: resize_left var(--panelsResizeDuration) ease-in 
	calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
	animation-play-state: paused;
}

@keyframes resize_left {
	from {
		flex: 0 0 var(--flexBasLeft);
	}
	
	to {
		flex: 0 0 25%;
	}
}

.left_panel_pivot {
	/* position: absolute;
	left: 0; */
	height: 100%;
	width: 0%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	color: transparent;
	visibility: hidden;
	/* border-style: solid;
	color: orange; */
}


.leftPanel__image {
	width: 100%;
	object-fit: cover;
	/* border-right: 0.4vmin solid rgb(117, 110.5, 101); */ /* ( darkening almond) */
	border-right: 0.4vmin solid transparent;
	transform: rotateY(0deg);
	transform-origin: right;
	visibility: hidden;
	animation: open_left 1.5s ease-in 2.5s 1 normal forwards;
	animation: open_left var(--panelsOpenDuration) ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) ) 1 normal forwards;
	animation-play-state: paused;
}


@keyframes open_left {
	0% {
		visibility: visible;
		filter: drop-shadow(0 0 2vmin rgb(0,0,0));
		transform: rotateY(90deg);
	}
	
	20% {
		filter: drop-shadow(0 0 1.5vmin rgb(0,0,0));
		transform: rotateY(70deg);
	}
	
	40% {
		filter: drop-shadow(0 0 1vmin rgb(0,0,0));
		transform: rotateY(45deg);
	}
	
	65% {
		filter: drop-shadow(0 0 0.5vmin rgb(0,0,0));
		transform: rotateY(20deg);
	}
	
	80% {
		filter: drop-shadow(0 0 0vmin rgb(0,0,0));
		visibility: visible;
		transform: rotateY(0deg);
	}
	
	100% {
		filter: drop-shadow(0 0 0vmin rgb(0,0,0));
		visibility: visible;
		transform: rotateY(0deg);
	}
}

.centralPanel__image_theme_pivot_high, .centralPanel__image_theme_pivot_low {
	width: 1vw;
	height: 3vw;
	object-fit: cover;
	/* z-index: 2; */
	z-index: 1;
	/* transform: translateX(-0.4vmin); */
}

.centralPanel__image_theme_pivot_left {
	transform: translateX(-1vw);
}

.central_panel {
	position: relative;
	flex: 0 0 var(--flexBasCent);
	/* height: 100%; */
	min-height: 100%;
	display: flex;
	flex: row nowrap;
	background-color: transparent;
	transform-style: preserve-3d;
	animation: resize_cent 1s ease-in 4s 1 normal forwards;
	animation: resize_cent var(--panelsResizeDuration) ease-in 
	calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
	animation-play-state: paused;
	/* border-style: solid; 
	color: blue; */
}

@keyframes resize_cent {
	from {
		flex: 1 1 var(--flexBasCent);
	}
	
	99% {
		flex: 1 1 var(--flexBasCent);
	}
	
	to {
		flex: 1 1 50%;
	}
}

.central_text {
	width: 100%;
	/* height: 100%; */
	min-height: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-around;
	padding: 2vmin 0;
	animation: central_t calc( var(--doorsOpeningDuration) + var(--panelsOpenDuration) + var(--panelsResizeDuration) + var(--textFadeInDuration) )
	ease-in var(--startPageAnim_t) 1 normal forwards;
	/* CUSTOMIZATION */
	animation: central_t calc( var(--doorsOpeningDuration) + var(--panelsOpenDuration) + var(--panelsResizeDuration) )
	ease-in var(--startPageAnim_t) 1 normal forwards;
	/* CUSTOMIZATION */
	background-color: transparent;
	background-image: linear-gradient( to right, transparent, transparent);
	animation-play-state: paused;
	/* border-style: solid;
	color: green; */
}


@keyframes central_t {
	from {
		box-shadow: 0 0 1vmin black;
		background-image: linear-gradient( to right, black, black);
		}
	/* CUSTOMIZATION */
	/* 65% { */
	75% {
	/* CUSTOMIZATION */
		box-shadow: 0 0 1vmin black;
		background-image: linear-gradient( to right, black, black);
		}
	
	to {
		box-shadow: 0 0 1vmin transparent;
		background-image: linear-gradient( to right, rgb(234, 221, 202) 1%, rgb(244.5, 238, 228.5) 20%, rgb(250.8, 248.2, 244.4), 
		rgb(244.5, 238, 228.5) 80%, rgb(234, 221, 202) 99%);
		}
}

.central_text > article {
	width: 100%;
	padding-left: 1.6vmin;
	padding-right: 1.6vmin;
	padding-bottom: 2vmin;
	text-align: center;
	font-size: var(--fontArt, 2vmin);
	font-family: normal_text;
	font-weight: bold;
	line-height: 1.2;
	color: black; /* #00008B (dark blue) / #673147 (puce) / #0047AB(cobalt blue)/ #1434A4 (egyptian blue) */
	background-color: transparent;
	opacity: 0;
	/* animation: central_font 1s ease-in 7s 1 normal forwards;
	animation: central_font 1s ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) 
	+ var(--panelsResizeDuration) + var(--textFadeInDuration) ) 1 normal forwards; */
	/* CUSTOMIZATION */
	animation: central_font var(--textFadeInDuration) ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) 
	+ var(--panelsResizeDuration) ) 1 normal forwards;
	/* CUSTOMIZATION */
	animation-play-state: paused;
	/* border-style: solid;
	color: blue; */
}

@keyframes central_font {
	from {opacity: 0;}
	
	to {opacity: 1;}
}

p {
	text-align: justify;
	width: min(95%, max-content);
	margin: 0 auto;
	background-color: transparent;
}

p:lang(it) > span, p:lang(en) > span {
	color: #811331;
	/* CUSTOMIZATION */
	color: rgb(74, 4, 4);
	/* CUSTOMIZATION */
	background-color: transparent;
} /* (almond) rgb(234, 221, 202) */

p::first-letter {
	initial-letter: 3 2;
	-webkit-initial-letter: 4 2;
	color: rgb(var(--headerTitleBckGndColorRed), var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue));
}

.central_text > video {
	width: 14vmax;
	height: 14vmax;
	object-fit: contain;
	object-position: center;
	margin-bottom: 1vmin;
	box-shadow: 0 0 1vmin black;
	opacity: 0;
	animation: central_video 1s ease-in 7s 1 normal both;
	animation: central_video 1s ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) 
	+ var(--panelsResizeDuration) + var(--textFadeInDuration) ) 1 normal both;
	/* CUSTOMIZATION */
	animation: central_video var(--textFadeInDuration) ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + 
	var(--panelsOpenDuration) + var(--panelsResizeDuration) ) 1 normal both;
	/* CUSTOMIZATION */
	animation-play-state: paused;
}

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

.centralPanel__image_theme_doorLeft, .centralPanel__image_theme_doorRight { 
	position: absolute;
	/* width: 50%; */
	height: 100%;
	top: 0;
	bottom: 0;
	object-fit: contain;
	z-index: 3;
	filter: drop-shadow(0 0 0vmin rgb(0,0,0));
	display: block;
	visibility: hidden;
	}

/*NEW doors with thickness --> when the page is loading .boxLeft replaces .centralPanel__image_theme_doorLeft and .boxRight replaces .centralPanel__image_theme_doorRight */

.boxLeft, .boxRight { 
	display: none;
	position: absolute;
	top: 0;
	height: 100%;
	/* height: var(--doorHeight); */
	width: var(--doorWidth);
	transform-style: preserve-3d;
	transform: translateZ(calc( (var(--doorThick)/2) *-1 ));
	/* border-style: solid; */
	color: blue;
}

.centralPanel__image_theme_doorLeft { 
    /* left: 0; */
	right: 50%;
    border-radius: 0 2vmin 2vmin 0;
    /* animation: door_l_open 1.5s ease-in 1s 1 normal both;
	animation-play-state: paused; */
 }

.boxLeft {
	left: 0;
	animation: door_l_open 1.5s ease-in 1s 1 normal both;
	animation: door_l_open var(--doorsOpeningDuration) ease-in var(--startPageAnim_t) 1 normal both;
	animation-play-state: paused;
}

.boxLeft div:nth-of-type(2) {
	width: calc(100% + 5px);}

/* NEW doors with thickness --> these are the faces of both .boxLeft and .boxRight */

.boxLeft_front {
	position: absolute;
	width: 100%;
	/* width: var(--doorWidth); */
	height: 100%;
	/* height: var(--doorHeight); */
	/* background-color: blue; */
	opacity: 1;
	border-radius: 0 2vmin 2vmin 0;
	transform: rotateX(0deg) translateZ(calc( var(--doorThick)/2 ));
}

.boxLeft_front > img {
	position: absolute;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.boxLeft_back {
	position: absolute;
	width: 100%;
	/* width: var(--doorWidth); */
	height: 100%;
	/* height: var(--doorHeight); */
	background-color: #966919; /* #5C4033 (dark brown) / #966919 (golden brown) */
	/* text-align: center;
	align-content: center;
	color: white; */
	opacity: 0.2;
	opacity: 1;
	transform: rotateX(180deg) translateZ(calc( var(--doorThick)/2 ));
}

.boxLeft_back > img {display: none;}

.boxLeft_left {
	position: absolute;
	width: var(--doorThick);
	height: 100%;
	/* height: var(--doorHeight); */
	/* background-color: orange; */
	background-color: var(--doorColor);
/* 	opacity: 0.5; */
	transform: translateX(calc( var(--doorWidth)/2 - var(--doorThick)/2 )) rotateY(-90deg) translateZ(calc( var(--doorWidth)/2 ));
}

.boxLeft_right {
	position: absolute;
	width: var(--doorThick);
	height: 100%;
	/* height: var(--doorHeight); */
	/* background-color: violet; */
	background-color: var(--doorColor);
/* 	opacity: 0.5; */
	transform: translateX(calc( var(--doorWidth)/2 - var(--doorThick)/2 )) rotateY(90deg) translateZ(calc( var(--doorWidth)/2 ));
}

.boxLeft_top {
	position: absolute;
	width: 100%;
	/* width: var(--doorWidth); */
	height: var(--doorThick);
	/* background-color: green; */
	background-color: var(--doorColor);
	/* opacity: 0.5; */
	transform: translateY(calc( var(--doorHeight)/2 - var(--doorThick)/2 )) rotateX(90deg) translateZ(calc( var(--doorHeight)/2 ));
}

.boxLeft_bottom {
	position: absolute;
	width: 100%;
	/* width: var(--doorWidth); */
	height: var(--doorThick);
	/* background-color: yellow; */
	background-color: var(--doorColor);
	/* opacity: 0.5; */
	transform: translateY(calc( var(--doorHeight)/2 - var(--doorThick)/2 )) rotateX(-90deg) translateZ(calc( var(--doorHeight)/2 ));
}
/* end of NEW doors with thickness */

.centralPanel__image_theme_doorRight {
	/* right: 0; */
	left: 50%;
	border-radius: 1vmin 0 0 1vmin;
	/* animation: door_r_open 1.5s ease-in 1s 1 normal both;
	animation-play-state: paused; */
 }
 
.boxRight { 
right: 0;
animation: door_r_open 1.5s ease-in 1s 1 normal both;
animation: door_r_open var(--doorsOpeningDuration) ease-in var(--startPageAnim_t) 1 normal both;
animation-play-state: paused;
}

@keyframes door_l_open {
	0% {
		visibility: visible;
		/* filter: drop-shadow(0 0 2vmin rgb(0,0,0)); */
		transform: rotateY(0deg);
		transform-origin: left;
		}
	
	25% {
		transform: rotateY(-20deg);
		}
	
	50% {
		transform: rotateY(-45deg);
		}
	
	75% {
		transform: rotateY(-70deg);
		}
	
	100% {
		visibility: hidden;
		transform: rotateY(-90deg);
		transform-origin: left;
		/* filter: drop-shadow(0 0 2vmin rgb(0,0,0)); */
		}
}

@keyframes door_r_open {
	0% {
		visibility: visible;
		/* filter: drop-shadow(0 0 2vmin rgb(0,0,0)); */
		transform: rotateY(0deg);
		transform-origin: right;
		}
	
	25% {transform: rotateY(20deg);}
	
	50% {transform: rotateY(45deg);}
	
	75% {transform: rotateY(70deg);}

	100% {
		visibility: hidden;
		/* filter: drop-shadow(0 0 2vmin rgb(0,0,0)); */
		transform: rotateY(90deg);
		transform-origin: right;
		}
}

.right_panel {
	display: flex;
	flex-flow: row nowrap;
	flex: 0 0 var(--flexBasRight);
	background-size: cover;
	background-repeat: no-repeat;
	/*	transform: rotateY(180deg); */
	z-index: 2;
	background-color: transparent;
	transform-style: preserve-3d;
	animation: resize_right 1s linear 4s 1 normal forwards;
	animation: resize_right var(--panelsResizeDuration) linear 
	calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
	animation-play-state: paused;
	/* border-style: solid; 
	color: green; */
}


@keyframes resize_right {
	
	from {
		flex: 0 0 var(--flexBasRight);
	}
	
	to {
		flex: 0 0 25%;
	}
}
	

.right_panel_pivot {
	/* position: absolute;
	right: 0; */
	width: 0%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	color: transparent;
	visibility: hidden;
	/* border-style: solid;
	color: orange; */
}

.rightPanel__image {
	width: 100%;
	object-fit: cover;
	border-right: 0.4vmin solid transparent;
	transform: translateX(-100%) rotateY(180deg);
	transform-origin: right;
	visibility: hidden;
	animation: open_right 1.5s linear 2.5s 1 normal forwards;
	animation: open_right var(--panelsOpenDuration) linear calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) ) 1 normal forwards;
	animation-play-state: paused;
	/* border-style: solid;
	color: pink; */
}

@keyframes open_right {
	
	0% {
		visibility: visible;
		filter: drop-shadow(0 0 2vmin rgb(0,0,0));
		transform: translateX(-100%) rotateY(118deg);
	}
	
	20% {
		filter: drop-shadow(0 0 1.5vmin rgb(0,0,0));
		transform: translateX(-100%) rotateY(133.5deg);
	}
	
	40% {
		filter: drop-shadow(0 0 1vmin rgb(0,0,0));
		transform: translateX(-100%) rotateY(149deg);
	}
	
	60% {
		filter: drop-shadow(0 0 0.5vmin rgb(0,0,0));
		transform: translateX(-100%) rotateY(164.5deg);
	}
	
	80% {
		visibility: visible;
		filter: drop-shadow(0 0 0vmin rgb(0,0,0));
		transform: translateX(-100%) rotateY(180deg);
	}
	
	100% {
		filter: drop-shadow(0 0 0vmin rgb(0,0,0));
		visibility: visible;
		transform: translateX(-100%) rotateY(180deg);
	}
}


/*-----------------------------------------------------------  </MAIN BODY - ORIENTATION LANDSCAPE>  ---------------------------------*/

/*-----------------------------------------------------------  <MAIN BODY - ORIENTATION PORTRAIT>  ---------------------------------*/

@media screen and (orientation: portrait) {
	
/* CUSTOMIZATION */
body {
/* 	--minFontArt: 7.8px; */
	--minFontArt: 10px;
	--maxFontArt: 20px;
	--fontArt: clamp(var(--minFontArt), var(--minFontArt) + 0.0166667 * (100vw - 600px), var(--maxFontArt) );
}

.tgtFontArt
{
	--fontArt: clamp(var(--minFontArt), var(--minFontArt) + 0.0166667 * (100vw - 600px), var(--maxFontArt) );
}
/* CUSTOMIZATION */

.pageMainSection {
	/* min-height: 65vh; */
	/* min-height: 72vh; */
	--flexBasLeft: 0%;
	--flexBasRight: 0%;
	--flexBasCent: 100%;
	
	--startPageAnim_t: 1s;
	--doorsOpeningDuration: 1.5s;
	--panelsOpenDuration: 1.5s;
	--panelsResizeDuration: 1.5s;
	--textFadeInDuration: 1.5s;
	/* padding-top: 2vmin;
	padding-bottom: 3vmin; */
	background-size: cover;
	overflow: visible;
	/* overflow: hidden; */
	border-left: 0vmin solid transparent;
	border-right: 0vmin solid transparent;
	border-image: url('../data/colonna_tortile.jpg') 39 round;
	/* color: green; */
	/* border-style: solid; */
	animation: central_sec 4s ease-in 4s 1 normal forwards;
/* CUSTOMIZATION */
	animation: central_sec 3s ease-in 4s 1 normal forwards;
	animation: central_sec calc( var(--panelsResizeDuration) /* + var(--textFadeInDuration) */ ) 
	ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
/* CUSTOMIZATION */
	animation-play-state: paused;
}


@keyframes central_sec {
	
	from {
		overflow: hidden;
		border-left: 0vmin solid transparent;
		border-right: 0vmin solid transparent;
	}
	
	50% { 
		overflow: visible;
		border-left: 0vmin solid transparent;
		border-right: 0vmin solid transparent;
		/* CUSTOMIZATION */
		/* background-image: url('data/chambord_mirrored.jpg'); */
		/* CUSTOMIZATION */
	}
	
	to {
		border-left: 4vmin solid transparent;
		border-right: 4vmin solid transparent;
		/* CUSTOMIZATION */
		/* background-image: url('data/chambord_mirrored.jpg'); */
		/* CUSTOMIZATION */
	}
}

.left_panel {
	flex: 0 0 var(--flexBasLeft);
	animation: resize_left 1.5s linear 4s 1 normal forwards;
	animation: resize_left var(--panelsResizeDuration) linear 
	calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
	animation-play-state: paused;
}


.leftPanel__image, .left_panel_pivot {
	display: none;
}

@keyframes resize_left {
	
	from {
		flex: 1 1 var(--flexBasLeft);
	}
	
	99% {
		flex: 1 1 var(--flexBasLeft);
	}
	
	to {
		flex: 0 0 0%;
	}
}

.right_panel {
	flex: 0 0 var(--flexBasRight);
	animation: resize_right 1.5s linear 4s 1 normal forwards;
	animation: resize_right var(--panelsResizeDuration) linear 
	calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
	animation-play-state: paused;
}

	
.rightPanel__image, .right_panel_pivot {
	display: none;
}

@keyframes resize_right {
	
	from {
		flex: 1 1 var(--flexBasRight);
	}
	
	99% {
		flex: 1 1 var(--flexBasRight);
	}
	
	to {
		flex: 0 0 0%;
	}
}
.central_panel {
	animation: resize_cent 1.5s ease-in 4s 1 normal forwards;
	animation: resize_cent var(--panelsResizeDuration) ease-in 
	calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + var(--panelsOpenDuration) ) 1 normal forwards;
	animation-play-state: paused;
	/* border-style: solid;
	color: blue; */
}


@keyframes resize_cent {
	from {
		flex: 0 0 var(--flexBasCent);
	}
	
	to {
		flex: 0 0 100%;
	}
}

.centralPanel__image_theme_doorLeft, .centralPanel__image_theme_doorRight {
	object-fit: contain;
	filter: drop-shadow(0, 0, 2vmin, rgb(0,0,0));
	display: block;
	visibility: hidden;
}

.boxLeft { border-radius: 0 2vmin 2vmin 0;
	animation: door_l_open 4.5s ease-in 1s 1 normal both;
	animation: door_l_open calc( var(--doorsOpeningDuration) + var(--panelsOpenDuration) + var(--panelsResizeDuration) ) 
	ease-in var(--startPageAnim_t) 1 normal both;
	animation-play-state: paused;
 }

	
.boxRight {
	border-radius: 1vmin 0 0 1vmin;
	animation: door_r_open 4.5s ease-in 1s 1 normal both;
	animation: door_r_open calc( var(--doorsOpeningDuration) + var(--panelsOpenDuration) + var(--panelsResizeDuration) ) 
	ease-in var(--startPageAnim_t) 1 normal both;
	animation-play-state: paused;
 }
 
 
 .boxLeft > div:nth-of-type(2) {
	 width: 100%;
 }
 
 	.boxLeft_back > img {
	display: block;
	position: absolute;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: rotateX(180deg);
}

@keyframes door_l_open {
	0% {/*display: block;*/
		visibility: visible;
	filter: drop-shadow(0, 0, 2vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(0deg);
	transform-origin: left;}
	
	/* 14% */ 7% {
		filter: drop-shadow(0, 0, 1.5vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-25deg);}
	
	/* 28% */ 14% {
		filter: drop-shadow(0, 0, 1vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-50deg);}
	
	/* 43% */ 21% {
		filter: drop-shadow(0, 0, 0.5vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-75deg);}
	
    /* 57% */ 28% {
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-100deg);}
	
	/* 71% */ 35% {
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-125deg);}
	
	/* 85% */ 43%{
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-150deg);}
	
	/* 99% */ 50% {display: block;
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-180deg) translateX(0%) scaleX(100%);
	transform-origin: left;}
	
/* 	99% {display: block;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-180deg) translateX(calc(50% - (var(--flexBasCent) / 2)) );
	transform-origin: left;}
	
	100% {display: none;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(-180deg) translateX(calc(50% - (var(--flexBasCent) / 2)) );
	transform-origin: left;} */
	
	99% {/*display: block;*/
	visibility: visible;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	/* transform: perspective(1000vmin) rotateY(-180deg) translateX(calc(50vw - 100%)) scaleX(1%); */
	transform: perspective(1000vmin) rotateY(-180deg) translateX(0%) scaleX(100%);
	transform-origin: left;}
	
	100% {/*display: none;*/
	visibility: hidden;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	/* transform: perspective(1000vmin) rotateY(-180deg) translateX(calc( (50vw - 100%) * (101/100) )) scaleX(0%); */
	transform: perspective(1000vmin) rotateY(-180deg) translateX(0%) scaleX(100%);
	transform-origin: left;}
	
}

@keyframes door_r_open {
	0% {/*display: block;*/
		visibility: visible;
	filter: drop-shadow(0, 0, 2vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(0deg);
	transform-origin: right;}
	
	/* 14% */ 7% {
		filter: drop-shadow(0, 0, 1.5vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(25deg);}
	
	/* 28% */ 14% {
		filter: drop-shadow(0, 0, 1vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(50deg);}
	
	/* 43% */ 21% {
		filter: drop-shadow(0, 0, 0.5vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(75deg);}
	
	/* 57% */ 28% {
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(100deg);}
	
	/* 71% */ 35% {
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(125deg);}
	
	/* 85% */ 43% {
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(150deg);}
	
    /* 99% */ 50% {display: block;
    filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(180deg) translateX(0%) scaleX(100%);
	transform-origin: right;}
	
/* 	99% {display: block;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(180deg) translateX(calc((50% - (var(--flexBasCent) / 2)) *-1) );
	transform-origin: right;}
	
	100% {display: none;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	transform: perspective(1000vmin) rotateY(180deg) translateX(calc((50% - (var(--flexBasCent) / 2)) *-1) );
	transform-origin: right;} */
	
	99% {/*display: block;*/
	visibility: visible;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	/* transform: perspective(1000vmin) rotateY(180deg) translateX(calc( (50vw - 100%) *-1 )) scaleX(1%); */
	transform: perspective(1000vmin) rotateY(180deg) translateX(0%) scaleX(100%);
	transform-origin: right;}
	
	100% {/*display: none;*/
	visibility: hidden;
	filter: drop-shadow(0, 0, 0vmin, rgb(0,0,0));
	/* transform: perspective(1000vmin) rotateY(180deg) translateX(calc( ( (50vw - 100%) * (101/100) ) *-1 )) scaleX(0%); */
	transform: perspective(1000vmin) rotateY(180deg) translateX(0%) scaleX(100%);
	transform-origin: right;}
}

.central_text {
	/* background-image: linear-gradient( to right, transparent, transparent); */
	background-size: cover;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	padding: 1% 7%;
	/* animation: central_t 6s ease-in 1s 1 normal forwards; */
	animation: central_t 
	calc( var(--doorsOpeningDuration) + var(--panelsOpenDuration) + var(--panelsResizeDuration) + var(--textFadeInDuration) ) 
	ease-in var(--startPageAnim_t) 1 normal forwards;
	animation-play-state: paused;
}


@keyframes central_t {
	0% {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url('../data/chambord_mirrored.jpg');
	}
	
	75% {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url('../data/chambord_mirrored.jpg');
	}
	
	81% {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
		linear-gradient(to right, rgba(234, 221, 202, 0.5) 1%, rgba(244.5, 238, 228.5, 0.5) 20%, rgba(255,255,255,0.35), 
			rgba(244.5, 238, 228.5, 0.5) 80%, rgba(234, 221, 202, 0.5) 99%), url('../data/chambord_mirrored.jpg');
	}
	
	87% {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
		linear-gradient(to right, rgba(234, 221, 202, 0.5) 1%, rgba(244.5, 238, 228.5, 0.5) 20%, rgba(255,255,255,0.35), 
			rgba(244.5, 238, 228.5, 0.5) 80%, rgba(234, 221, 202, 0.5) 99%), url('../data/chambord_mirrored.jpg');
	}
	
	93% {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), 
		linear-gradient(to right, rgba(234, 221, 202, 0.5) 1%, rgba(244.5, 238, 228.5, 0.5) 20%, rgba(255,255,255,0.35), 
			rgba(244.5, 238, 228.5, 0.5) 80%, rgba(234, 221, 202, 0.5) 99%), url('../data/chambord_mirrored.jpg');
	}
	
	100% {
		background-image: linear-gradient(to right, rgba(234, 221, 202, 0.5) 1%, rgba(244.5, 238, 228.5, 0.5) 20%, rgba(255,255,255,0.35), 
			rgba(244.5, 238, 228.5, 0.5) 80%, rgba(234, 221, 202, 0.5) 99%), url('../data/chambord_mirrored.jpg');
	} 
}

.central_text > article {
	/* font-size: 2.5vw; */
	font-size: var(--fontArt, 2.5vw);
	line-height: 1.6;
	width: clamp(40ch, 100%, 60ch);
	background-color: transparent;
	/* animation: central_font 1s ease-in 7s 1 normal forwards; */
	/* CUSTOMIZATION */
	animation: central_font var(--textFadeInDuration) ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + 
	var(--panelsOpenDuration) + var(--panelsResizeDuration) )  1 normal forwards;
	/* CUSTOMIZATION */
	animation-play-state: paused;
}

@keyframes central_font {
	from {
		opacity: 0;
		text-shadow: none;
		}
	
	to {
		opacity: 1;
		text-shadow: 0.2px 0.2px 0px white, -0.2px -0.2px 0px white;
		}
}

p:lang(it) > span, p:lang(en) > span {
	background-color: transparent;
} 

.central_text > video {
	opacity: 0;
	border-radius: 20%;
	/* animation: central_video 1s ease-in 7s 1 normal both; */
	/* CUSTOMIZATION */
	animation: central_video var(--textFadeInDuration) ease-in calc( var(--startPageAnim_t) + var(--doorsOpeningDuration) + 
	var(--panelsOpenDuration) + var(--panelsResizeDuration) )  1 normal both;
	/* CUSTOMIZATION */
	animation-play-state: paused;
}

@keyframes central_video {
	0% {
		opacity: 0;
		}
	
	100% {
		opacity: 1;
		}
}

}


/*-----------------------------------------------------------  </MAIN BODY - ORIENTATION PORTRAIT>  ---------------------------------*/