/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  GIOSTRA CON LE INFORMAZIONI SUI COLLOQUI/PRESTAZIONI OFFERTE %%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  SCREEN ORIENTATION : LANDSCAPE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  MODIFICATIONS TO BASE CSS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.pageMainSection { 
	--heightCarousel: 10vw;
	/* --widthCarousel: 30vw; */
	--widthCarousel: 45vw;
	--heightCarousPanel: 10vw;
	--widthCarousPanel: 20vw;
	--numPanels: 6;
	
	/* --minFontPanel: 0.55rem; */
	--minFontPanel: 0.45rem;
	--maxFontPanel: 2.3rem;
	--fontPanel: clamp(var(--minFontPanel), 1.9vw , var(--maxFontPanel));
}

.pageMainSection > div:nth-of-type(4) > img {
/* #img_mirr_servizi { */
margin-bottom: min( calc( (var(--marginTopBetween) - var(--heightCarousel)) *-1 ), 0 );
/* border-style: solid;
color: green; */
}


.pageMainSection > div:nth-of-type(5) {
/* #div_servizi { */
	margin-top: max( calc( var(--marginTopBetween) - var(--heightCarousel) ), 0);
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  ADDED TO BASE CSS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#info_colloqui { 
position: relative;
/* margin-top: 2vh; */
/* transform: translateY( max( calc( var(--marginTopBetween) - var(--heightCarousel) ), 0) ); */
width: var(--widthCarousel);
/* height: 10vw; */
height: var(--heightCarousel);
/* grass_scene: height = 10vmin; top = -7.5vmin; overflow_bottom = 10 - 7.5 = 2.5vmin */
margin-bottom: 2.5vmin;
right: calc(var(--articleWidth) * 0.5);
z-index: 1;
/* border-style: solid;
color: orange; */
}

#info_colloqui_scene { 
position: relative;
display: flex;
flex-direction: row;
/* justify-content: space-around; */
justify-content: center;
align-items: center;
margin-top: 0;
width: 100%;
perspective: 60vmin;
perspective-origin: 50% 50%;
z-index: 1;
/* border-style: solid;
color: red; */
}

.carousel {
	position: relative;
	height: var(--heightCarousPanel);
	width: var(--widthCarousPanel);
	/* top: 2vw; */
	/* left: 7.5vw; */
	/* left: 12.5vw; */
	transform-style: preserve-3d;
	/* transform: translateZ(-17.32vw); */
	transition: transform 1s;
	/* border-style: solid;
	color: yellow; */
}

.panel {
	position: absolute;
	width: 90%;
	left: 10%;
	height: 100%;
	/* golden rod rgb(218, 165, 32) / Oxblood #4A0404 */
	color: #4A0404;
	font-weight: bold;
	font-family: calligraphic;
	font-size: var(--fontPanel, 1.9vw);
	opacity: 1;
	text-align: center;
	align-content: center; 
	background: radial-gradient(rgba(var(--headerTitleBckGndColorRed), var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue), 
	1.0) 0%, rgba(var(--headerTitleBckGndColorRed), var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue), 0.5) 40%, 55%, transparent 100%);
	color: black;
	text-shadow: 1px 1px 0px rgb(var(--headerTitleBckGndColorRed), var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue)), 
	-1px -1px 0px rgb(var(--headerTitleBckGndColorRed), var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue));
}

.outer_fence {
	position: absolute;
	width: 100%;
	height: 5%;
	background-color: rgb(92, 64, 51); /* (Dark brown) / rgb(149, 69, 53) (Chestnut) */
	background-image: repeating-linear-gradient(45deg, #4A0404 0 40%, rgb(var(--headerTitleBckGndColorRed), 
	var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue)) 60% 100%);
}

.f_top {
top: 10%;
left: 0%;
border-radius: 30%;
}

.f_bottom {
bottom: 10%;
left: 0%;
border-radius: 30%;}

.inner_fence {
	position: absolute;
	width: 3.4%;
	height: 100%;
	background-color: rgb(92, 64, 51); /* (Dark brown) / rgb(149, 69, 53) (Chestnut) */
	background-image: repeating-linear-gradient(45deg, #4A0404 0 40%, rgb(var(--headerTitleBckGndColorRed), 
	var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue)) 60% 100%);
}

.f_left {
top: 0%;
left: 3.4%;
border-radius: 30% 30% 0 0;}

.f_right {
top: 0%;
right: 3.4%;
border-radius: 30% 30% 0 0;}

/* translateZ = w/2 / (tg(60deg/2) = 10vw / tg(30deg) = 10 vw / 0.57735026 = 17.32051vw*/

#panel_1 {
	/* background-color: green; */
	/* transform: rotateY(0deg) translateZ(17.32051vw); */
	transform: rotateY( calc( (360deg / var(--numPanels)) * 0) ) 
	translateZ( calc(var(--widthCarousPanel) / (2*tan((360deg / (2*var(--numPanels))))) ));
}

#panel_2 {
	/* background-color: blue; */
	/* transform: rotateY(-60deg) translateZ(17.32051vw); */
	transform: rotateY( calc( (360deg / var(--numPanels)) * -1) ) 
	translateZ( calc(var(--widthCarousPanel) / (2*tan((360deg / (2*var(--numPanels))))) ));
}

#panel_3 {
	/* background-color: red; */
	/* transform: rotateY(-120deg) translateZ(17.32051vw); */
	transform: rotateY( calc( (360deg / var(--numPanels)) * -2) ) 
	translateZ( calc(var(--widthCarousPanel) / (2*tan((360deg / (2*var(--numPanels))))) ));
}

#panel_4 {
	/* background-color: orange; */
	/* transform: rotateY(-180deg) translateZ(17.32051vw); */
	transform: rotateY( calc( (360deg / var(--numPanels)) * -3) ) 
	translateZ( calc(var(--widthCarousPanel) / (2*tan((360deg / (2*var(--numPanels))))) ));
}

#panel_5 {
	/* background-color: violet; */
	/* transform: rotateY(-240deg) translateZ(17.32051vw);  */
	transform: rotateY( calc( (360deg / var(--numPanels)) * -4) ) 
	translateZ( calc(var(--widthCarousPanel) / (2*tan((360deg / (2*var(--numPanels))))) ));
}

#panel_6 {
	/* background-color: yellow; */
	/* transform: rotateY(-300deg) translateZ(17.32051vw); */
	transform: rotateY( calc( (360deg / var(--numPanels)) * -5) ) 
	translateZ( calc(var(--widthCarousPanel) / (2*tan((360deg / (2*var(--numPanels))))) ));
}

#but_fwd, #but_bwd {
	background-color: transparent;
	text-decoration: none;
	border-style: none;
	font-size: 4vmin;
	height: max-content;
	margin-top: 3vw;
	transform: rotate(-90deg);
	/* border-style: solid; */
	color: rgb(var(--headerTitleBckGndColorRed), 
	var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue));
	background-color: #4A0404;
	filter: drop-shadow(0 0 0.5vmin black);
	border-radius: 50%;
}

#but_fwd {
	margin-right: 5vw;
	/* margin-right: 15%; */
}

#but_fwd:after {
    content: '\27A6';
}

#but_bwd {
	margin-left: 5vw;
	/* margin-left: 15%; */
}

#but_bwd:after {
    content: '\27A5';
}

#but_fwd:hover, #but_bwd:hover {
	color: #811331;
	color: #4A0404;
	background-color: rgb(var(--headerTitleBckGndColorRed), 
	var(--headerTitleBckGndColorGreen), var(--headerTitleBckGndColorBlue));
}

#but_fwd:active {
	filter: drop-shadow(0vw 0vh 4vmin white);
	/* transform: rotate(30deg); */
	transform: rotate(0deg);
}

#but_bwd:active {
	filter: drop-shadow(0vw 0vh 4vmin white);
	/* transform: rotate(-30deg); */
	transform: rotate(-180deg);
}

#grass_scene {
	position: relative;
	height: 10vmin;
	/* (10/1920) * 1200 = 6.25 vw*/
	left: 15%;
	width: 70%;
	top: -7.5vmin;
	z-index: 0;
	display: none;
	/* border-style: solid;
	color: blue; */
}

.grass {
	position: absolute; 
	height: 100%;
	width: 20%;
	bottom: 0;
}

.grass > div { 
position: absolute;
height: 100%;
width: 100%;
	}

.blade_1 {
	left: 0.4vmin;
	border: 0.3vmin solid transparent;
	border-right: 0.3vmin solid #228B22; /* (forest green) */
	/* border-top-right-radius: 40%; */
	border-top-right-radius: 80%;
	animation: move_bl_1 7s ease-in 1s infinite forwards;
}

@keyframes move_bl_1 {
	0% {/* border-top-right-radius: 75%; */
	border-top-right-radius: 80%;
	}
	
	25% {/* border-top-right-radius: 65%; */
	border-top-right-radius: 100%;
		}
	
	50% {
		/* border-top-right-radius: 60%; */
		border-top-right-radius: 100%;
		}
	
	65% {/* border-top-right-radius: 70%; */
	border-top-right-radius: 80%;
		}
		
	/* 75% {border-top-right-radius: 70%;
		} */
		
		80% {/* border-top-right-radius: 70%; */
	border-top-right-radius: 90%;
		}
	
	100% {
		/* border-top-right-radius: 40%; */
		border-top-right-radius: 80%;
		}
}

.blade_2 {
	border-top-right-radius: 70%;
	left: 0.8vmin;
	border: 0.3vmin solid transparent;
	border-right: 0.3vmin solid #C9CC3F; /* (pear) */
	animation: move_bl_2 7s ease-in 1s infinite forwards;
}

@keyframes move_bl_2 {
	0% {/* border-top-right-radius: 65%; */
	border-top-right-radius: 70%;}
	
	25% {/* border-top-right-radius: 60%; */
	border-top-right-radius: 90%;}
	
	50% {/* border-top-right-radius: 90%; */
	border-top-right-radius: 90%;}
	
	65% {/* border-top-right-radius: 70%; */
	border-top-right-radius: 70%;
		}
		
/* 75% {border-top-right-radius: 100%;} */
		
	80% {border-top-right-radius: 80%;
		}
	
	100% {border-top-right-radius: 70%;}
}

.blade_3 {
	border-top-right-radius: 90%;
	border: 0.3vmin solid transparent;
	border-right: 0.3vmin solid #93C572; /* (pistachio) */
	animation: move_bl_3 7s ease-in 1s infinite forwards;
}

@keyframes move_bl_3 {
	0% {/* border-top-right-radius: 100%; */
	border-top-right-radius: 90%;
	width: 100%;
	left: 0%;}
	
	25% {/* border-top-right-radius: 60%; */
	border-top-right-radius: 100%;
	width: 120%;
	left: -20%;
	}
	
	50% {/* border-top-right-radius: 95%; */
	border-top-right-radius: 100%;
	width: 120%;
	left: -20%;
	}
	
	65% {/* border-top-right-radius: 95%; */
	border-top-right-radius: 90%;
	width: 100%;
	left: 0%;}
	
	/* 75% {border-top-right-radius: 100%;} */
	
	80% {border-top-right-radius: 100%;}
	
	100% {border-top-right-radius: 90%;}
}

.grass_leanright { 
position: absolute; 
height: 100%;
width: 20%;
bottom: 0;
left: 2%;
}

.grass_leanright > div { 
position: absolute;
height: 100%;
width: 100%;
	}

.blade_1_r {
	border: 0.3vmin solid transparent;
	border-left: 0.3vmin solid #93C572; /* (pistachio) */
	/* border-top-left-radius: 40%; */
	border-top-left-radius: 75%;
	right: 0.4vw;
	animation: move_bl_1_r 7s ease-in 1s infinite forwards;
}

@keyframes move_bl_1_r {
	0% {/* border-top-left-radius: 35%; */
	border-top-left-radius: 75%;
	width: 100%;
	right: 0.4vw;}
	
	25% {/* border-top-left-radius: 20%; */
	border-top-left-radius: 75%;
	width: 70%;
	right: 2.29vw;}
	
	50% {/* border-top-left-radius: 60%; */
	border-top-left-radius: 75%;
	width: 70%;
	right: 2.29vw;}
	
	65% {border-top-left-radius: 75%;
	width: 100%;
	right: 0.4vw;}
	
	/* 75% {border-top-left-radius: 90%;} */
	
	80% {border-top-left-radius: 75%;
	width: 70%;
	right: 2.29vw;}
	
	100% {/* border-top-left-radius: 40%; */
	border-top-left-radius: 75%;
	width: 100%;
	right: 0.4vw;}
}

.blade_2_r {
	border: 0.3vmin solid transparent;
	border-left: 0.3vmin solid #228B22; /* (forest green) */
	/* border-top-left-radius: 70%; */
	border-top-left-radius: 80%;
	right: 0.2vw;
	animation: move_bl_2_r 7s ease-in 1s infinite forwards;
}

@keyframes move_bl_2_r {
	0% {/* border-top-left-radius: 65%; */
	border-top-left-radius: 80%;
	width: 100%;
	right: 0.2vw;}
	
	25% {/* border-top-left-radius: 45%; */
	border-top-left-radius: 80%;
	width: 70%;
	right: 2.09vw;}
	
	50% {/* border-top-left-radius: 65%; */
	border-top-left-radius: 80%;
	width: 70%;
	right: 2.09vw;}
	
	65% {border-top-left-radius: 80%;
	width: 100%;
	right: 0.2vw;}
	
	/* 75% {border-top-left-radius: 100%;} */
	
	80% {border-top-left-radius: 70%;}
	
	100% {/* border-top-left-radius: 70%; */
	border-top-left-radius: 80%;}
}

.blade_3_r {
	border: 0.3vmin solid transparent;
	border-left: 0.3vmin solid #355E3B; /* (hunter green) */
	/* border-top-left-radius: 40%; */
	border-top-left-radius: 90%;
	right: 0;
	animation: move_bl_3_r 7s ease-in 1s infinite forwards;
}

@keyframes move_bl_3_r {
	0% {/* border-top-left-radius: 100%; */
	border-top-left-radius: 90%;
	width: 100%;
	right: 0%;}
	
	25% {/* border-top-left-radius: 60%; */
	border-top-left-radius: 80%;
	width: 80%;
	right: 20%;}
	
	50% {border-top-left-radius: 80%;
	width: 80%;
	right: 20%;}
	
	65% {border-top-left-radius: 90%;
	width: 100%;
	right: 0%;}
	
	/* 75% {border-top-left-radius: 100%;} */
	
	80% {border-top-left-radius: 80%;}
	
	100% {border-top-left-radius: 90%;}
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  SCREEN ORIENTATION : PORTRAIT %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media screen and (orientation: portrait) {

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  MODIFICATIONS TO BASE CSS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


#page_servizi > div:nth-of-type(5) {
/* #div_servizi { */
	margin-top: 0;
}

#page_servizi > div:nth-of-type(4) > img {
/* #img_mirr_servizi { */
	margin-bottom: 0;
	margin-left: 0%;
	width: 45%;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  ADDED TO BASE CSS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
	
#info_colloqui { 
position: static;
margin-top: 0vw;
margin-bottom: 0vw;
width: 45vw;
height: 12vw;
perspective: 100vmin;
perspective-origin: 50% 0%;
transform: translateY(0);
/* border-style: solid;
color: red; */
}

#info_colloqui_scene {
	transform-style: preserve-3d;
	display: flex;
	flex: row nowrap;
	justify-content: center;
	align-items: center;
	transform: translateX(0);
	/* border-style: solid;
	color: blue; */
}

#but_fwd, #but_bwd {
font-size: 2vmin;
}

.panel {
	width: 95%;
	left: 5%;
	/* font-size: 2vmin; */
	/* font-size: var(--fontPanel, 2vmin); */
}

#grass_scene {
	position: relative;
	height: 4vw;
	left: 15%;
	width: 70%;
	top: -4vw;
	z-index: 0;
	display: block;
	/* border-style: solid;
	color: blue; */
}

.blade_1, .blade_2, .blade_3, .blade_1_r, .blade_2_r, .blade_3_r {
	border-width: 0.2vmin;
}

}