/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 17 2026 | 09:48:56 */
/* Add your CSS code here. */
/* set footer not visible at bootstrap */
/* it will set visible after footer reposition by javascript */
#main-content, footer {
	visibility: visible;
}
#my-photo {
	overflow: hidden;
}
#my-photo img {
	max-width: 100%;
	height: 100%;
	 object-fit: contain; 
}
#loading-content {
	display: block;
}
/* slider container is invisible at startup projects */
/* it will set visible after projects load by javascript */
#slider-layer {
	visibility: hidden;
}
/* widescreen */
@media only screen and (min-width: 2400px) {
	header, body, footer {
		font-size: 24px!important;
	}
	.project-layer:not(:first-child) {
		display: none;
	}
	.project-layer:first-child {
		visibility: hidden;
	}
}
/* desktop */
@media only screen and (min-width: 1366px) and (max-width: 2399px) {
	header, body, footer {
		font-size: 16px!important;
	}
	.project-layer:not(:first-child) {
		display: none;
	}
	.project-layer:first-child {
		visibility: hidden;
	}
}
/* laptop */
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
	header, body, footer {
		font-size: 12px!important;
	}
	.project-layer {
		border-bottom: 2px solid var(--e-global-color-accent);
	}
}
/* tablet landscape */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	header, body, footer {
		font-size: 12px!important;
	}
	.project-layer {
		border-bottom: 2px solid var(--e-global-color-accent);
	}
}
/* tablet portrait */
@media only screen and (min-width: 880px) and (max-width: 1023px) {
	header, body, footer {
		font-size: 12px!important;
	}
	.project-layer {
		border-bottom: 2px solid var(--e-global-color-accent);
	}
}
/* mobile landscape */
@media only screen and (min-width: 768px) and (max-width: 879px) {
	header, body, footer {
		font-size: 12px!important;
	}
	.project-layer {
		border-bottom: 2px solid var(--e-global-color-accent);
	}
}
/* mobile portrait */
@media only screen and (max-width: 767px) {
	header, body, footer {
		font-size: 12px!important;
	}
	.project-layer {
		border-bottom: 2px solid var(--e-global-color-accent);
	}
}
a {
	background-color: transparent;
	text-decoration: none!important;
	color: #000
}
.elementor-button-link {
	text-decoration:none!important;
	/* toglie l'underline ai pulsanti con link */
}
.text-accent {
	color: var(--e-global-color-accent)
}
.img-box {
	position: relative;
}
.img-box .img-front {
	opacity: 0;
	transition: opacity .8s;
}
.img-box:hover .img-front {
	opacity: 1;
}
.img-box .img-back {
	position: absolute;
	top: 0px;
	left: 0px;
}
/* slider nella pagina projects */
#slider {
	visibility: hidden;
}
#slider .slider-button .elementor-button-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Stile per gli slide non attivi */
#slider .project-slide:not(.swiper-slide-active) img {
	filter: grayscale(1);
}
#slider .project-slide:not(.swiper-slide-active) .slider-button {
	filter: grayscale(1);
	opacity: 0.5;
}
/* Stile Hover per gli slide non attivi */
#slider .project-slide:not(.swiper-slide-active) img:hover {
	filter: grayscale(0.5);
}
#slider .project-slide:not(.swiper-slide-active) .slider-button:hover {
	filter: grayscale(0);
	opacity: 1;
}
/* Stile del cursore per tutti i pulsanti dello slider */
#slider .slider-button:hover {
	cursor: pointer;
}
.swiper-button-prev path, .swiper-button-next path {
	stroke: var(--e-global-color-background);
	fill: var(--e-global-color-primary)!important;
	filter: drop-shadow(0 0 10px var(--e-global-color-background));
}
.slidePrevious-layer:hover {
	background: #832BFF;
	background: linear-gradient(90deg,rgba(131, 43, 255, 1) 0%, rgba(113, 37, 220, 0.55) 62%, rgba(79, 26, 153, 0.43) 100%);
}
.slideNext-layer:hover {
	background: #832BFF;
	background: linear-gradient(270deg,rgba(131, 43, 255, 1) 0%, rgba(113, 37, 220, 0.55) 62%, rgba(79, 26, 153, 0.43) 100%);
}
.slideNext-layer:hover svg path, .slidePrevious-layer:hover svg path{
	fill: white!important;
	filter: drop-shadow(0 0 0);
}
/* ruota l'icona del pulsante di 45° antiorario */
.slider-button .elementor-button-icon {
	transform: rotate(-45deg);
}
.slider-button .elementor-button-content-wrapper {
	display: flex;
	justify-content: space-between;
}
/* end of slider nella pagina projects */
/* pulsanti di download per popup modal: inserimento icona */
.download span:after {
	content: '';
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	background: url('/wp-content/uploads/2025/06/down-arrow-icon.png') no-repeat center center;
	background-size: 1.5rem;
	filter: invert(100%);
}
/* problema ripristino immagine in overlay per i video */
/* Nascondi il video quando l'overlay clonato è visibile */
.project-video .cloned-poster-overlay.visible {
	opacity: 1;
}
/* Nascondi l'overlay quando il video è in riproduzione */
.project-video .cloned-poster-overlay {
	opacity: 0;
	pointer-events: none;
	/* Non blocca i clic sul video sottostante */
	z-index: 2;
	transition: opacity 0.5s ease-in-out;
}
.project-video .cloned-poster-overlay.show-on-pause {
	opacity: 1;
	pointer-events: auto;
	/* Riattiva i clic */
}
/* Assicurati che il contenitore sia posizionato per l'assoluto */
.project-video {
	position: relative;
	z-index: 0;
}
/* Stile per l'overlay clonato */
.cloned-poster-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2 !important;
	/* Forza la sovrapposizione */
	cursor: pointer !important;
	/* Forza il cursore a "mano" */
	transition: opacity 0.5s ease-in-out;
}
.grow-underline {
	position: relative;
	text-decoration: none;
	/* Rimuove la sottolineatura di default del link */
	color: var(--e-global-color-accent);
}
.grow-underline:after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	/* La linea parte con larghezza zero */
	height: 3px;
	bottom: 0;
	left: 0;
	background-color: var(--e-global-color-accent);
	transform-origin: center center;
	transition: transform 0.25s ease-out;
}
.grow-underline:hover:after {
	transform: scaleX(1);
}
// custom controls on video
.video-container {
	position: relative;
	width: 100%;
	/*max-width: 800px;*/
}
video {
	width: 100%;
	display: block;
}
.custom-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	pointer-events: none;
}
@media only screen and (min-width: 1366px) {
	.custom-controls {
		padding: 10px 10%;
	}
}
@media only screen and (max-width: 1365px) {
	.custom-controls {
		padding: 10px 10px;
	}
}
.video-container:hover .custom-controls,
.video-container.visible .custom-controls
.custom-controls.visible {
	opacity: 1;
	pointer-events: auto;
}
.control-btn{
	font-family: var(--fa-family-classic);
	background: none;
	border: none;
	color: white;
	font-size: 1rem;
	cursor: pointer;
	padding: 5px;
}
.control-btn:focus, .control-btn:hover {
	background: none;
}
/* Icone Play/Pausa con caratteri font Awesome */
.play-btn::before {
	font-weight: 900;
	margin-right: 5px !important;
	content: '\f04b'
}
.pause-btn::before {
	font-weight: 900;
	margin-right: 5px !important;
	content: '\f04c'
}
/* Icone Volume/Mute con caratteri font Awesome */
.volume-btn::before {
	font-weight: 900;
	margin-right: 5px !important;
	content: "\f028";
}
.mute-btn::before {
	font-weight: 900;
	margin-right: 5px !important;
	content: "\f6a9";
}
.progress-bar-container {
	flex-grow: 1;
	height: 8px;
	background: rgba(255, 255, 255, 0.3);
	margin: 0 10px;
	border-radius: 4px;
	cursor: pointer;
}
.progress-bar {
	height: 100%;
	background-color: #fff;
	width: 0%;
	border-radius: 4px;
}
.time-display {
	font-size: 0.8rem;
	/*min-width: 90px;*/
	text-align: right;
	margin: 5px;
}

/*------------ effetti sul footer -------------*/
/* Stili di base del contenitore */
#footer-layer {
	pointer-events: auto;
	/*scroll-margin-top: 50px;*/
}
.indicatorArrow {
	justify-content: center;
	align-items: center;
	transition: transform 0.5s ease-in-out;
	/* Per una transizione fluida */
}
/* ----- Shake effect ------*/
/* Definizione dell'animazione di scuotimento orizzontale.
L'elemento si sposta alternativamente di 10px a sinistra e 10px a destra,
tornando a 0px all'inizio e alla fine del ciclo.
*/
@keyframes shakeX {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}
/* Classe che attiva l'animazione per l'indicatore */
.shake-active {
	animation: shakeX 2s cubic-bezier(.36,.07,.19,.97) both;
}
/* ----- end of shake effect ------*/
/*---- growShink & underline effect ----*/
/* Animazione sul link della mail */
/* Classe da applicare per l'effetto */
.mail-me a {
	text-decoration: none;
	position: relative;
	display: inline-block;
	color: var(--e-global-color-secondary);
	/*transition: transform 0.5s ease-in-out;*/
	transition: transform 0.5s ease-out;
}
/* Classe per attivare l'effetto */
.mail-me a {
	text-decoration: none;
	position: relative;
	display: inline-block;
}
.mail-me a:hover {
	text-decoration: underline 2px var(--e-global-color-secondary) !important;
}
/* Sottolineatura animata */
.mail-me a::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 5px;
	height: 2px;
	width: 0%;
	/*background: linear-gradient(to right, var(--e-global-color-secondary),var(--e-global-color-accent),var(--e-global-color-secondary));*/
	background: var(--e-global-color-secondary);
	background-size: 200% 100%;
	background-position: left;
	transition: width 0.6s ease-in-out, background-position 0.6s ease-in-out;
}
.mail-me a.animate-link::after {
	width: 100%;
	background-position: right;
}
/*---- end of growShink & underline effect ----*/
/*---- pulse effect ----*/
@keyframes pulse {
	0%   {
		transform: scale(1);
		opacity: 1;
	}
	50%  {
		transform: scale(1.1);
		opacity: 0.7;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.pulse {
	animation: pulse 1s ease-in-out 2;
}
/*---- end of pulse effect ----*/
/*--- heartBeat effect ----*/
/* Applicato al pulsante Linkedin */
@keyframes heartBeat {
	0%   {
		transform: scale(1);
	}
	14%  {
		transform: scale(1.3);
	}
	28%  {
		transform: scale(1);
	}
	42%  {
		transform: scale(1.3);
	}
	70%  {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}
.linkedin a.heartbeat {
	display: inline-block;
	animation: heartBeat 2s ease-in-out;
}
/*--- end of heartBeat effect ----*/
/*---- color-wave effect ----*/
.color-wave {
	background: linear-gradient(270deg, #000000, #444444, #888888, #cccccc, #ffffff);
	/*background: linear-gradient(270deg, #ff0000, #ff9900, #00ff00, #00ffff, #0000ff, #ff00ff);*/
	background-size: 1200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: waveColors 2s linear 1 forwards;
}
@keyframes waveColors {
	0%   {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}
/*---- end of color-wave effect ----*/
/*---- shrink effect ----*/
#slogan {
	/* Imposta la transizione predefinita per il ripristino */
	transition: transform 0.5s ease-out;
	transform-origin: left center; 
}
.shrink {
	/* La transizione per la riduzione */
	transform: scale(0.5);
	transition: transform 0.5s ease-in;
	transform-origin: left center; 
}
/*---- end of shrink effect ----*/
/*---- grow effect ----*/
.grow {
	/* La transizione per la riduzione */
	transform: scale(1.1);
	transition: transform 0.5s ease-in;
	padding-left: 5px;
}
/*---- end of grow effect ----*/

/*------ timeline modifier (page: About)--------*/
#timeline .ue_item_content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0% 0% 0% 0% !important;
}
/* rotazioni dei testi */
#timeline .ue_item:nth-of-type(1) .ue_item_text {
  transform: rotate(-6deg);
}
#timeline .ue_item:nth-of-type(2) .ue_item_text {
  transform: rotate(6deg);
}
#timeline .ue_item:nth-of-type(3) .ue_item_text {
  transform: rotate(-2deg);
}
#timeline .ue_item:nth-of-type(4) .ue_item_text {
  transform: rotate(6deg);
}
/* altezza ultima timeline */
#timeline .ue_item:nth-of-type(4) .ue_item_vr_line {
    height: 40px !important;
}
#timeline .ue_item_icon img {
	max-width: 14vh;
	height: auto; /* Mantiene le proporzioni */
	display: block; /* Opzionale, per evitare spazi bianchi indesiderati sotto l'immagine */
}	
/* widescreen */
@media only screen and (min-width: 2400px) {
	#timeline .ue_item_text {
		font-size: 1.5rem;
	}
}
/* desktop */
@media only screen and (min-width: 1366px) and (max-width: 2399px) {
	#timeline .ue_item_text {
		font-size: 1.125rem;
	}
}
/* laptop */
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
	#timeline .ue_item_text {
		font-size: 1.0rem;
	}
}
/* tablet landscape */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	#timeline .ue_item_text {
		font-size: 1.0rem;
	}
}
/* tablet portrait */
@media only screen and (min-width: 880px) and (max-width: 1023px) {
	#timeline .ue_item_text {
		font-size: 1.0rem;
	}
}
/* mobile landscape */
@media only screen and (min-width: 768px) and (max-width: 879px) {
	#timeline .ue_item_text {
		font-size: 1.0rem;
	}
}
/* mobile portrait */
@media only screen and (max-width: 767px) {
	#timeline .ue_item_text {
		font-size: 1.0rem;
	}
}

/* project page new */

/* Container di riferimento per gli overlay */
.pf-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1 / 1;   /* card sempre quadrata, indipendente dall'immagine caricata */
}