@charset "utf-8";

/* Mobile */
@media only screen and (min-width: 0px) {
	.fasciabanner {
		text-align: center;
		width: auto;
		height: auto;
	}
	.contenitorebanner {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}    
    .contenitorebannerridotto {
        max-width: 1500px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
    }   
    
	.banner {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: auto;
	}
	.banner-mobile {
		display: inherit;
	}
	.banner-desktop {
		display: none;
	}
	.banner-img {
		width: 100%;
		height: auto;
	}

	/* Banner Zucca Halloween */

	.halloween-banner {
		opacity: 0;
		animation: fadeInBanner 1s ease forwards;
		animation-delay: 3.5s; /* 0.5s entrata + 2.5s scuotimento + 0.5s uscita */
	}

	.halloween-contenitore-zucca {
		position: relative;
		width: 320px;
		height: 220px;
		margin: 0 auto;
		overflow: hidden;
		pointer-events: none; /* Disabilita l'interazione con il contenitore */
		opacity: 1;
		animation: fadeOutContenitore 0.5s 3s forwards;
	}

	/* Zucca full screen */
	.halloween-banner-zucca {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100vw;
		height: 100vh;
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
		background: url('../immagini/img-banner-pers/halloween-23439.svg') no-repeat center/contain;
		background-size: contain;
		z-index: 99999 !important;
		animation: EntrataZucca 0.5s forwards, ScuotiZucca 0.5s 0.5s infinite, UscitaZucca 0.5s 2.5s forwards;
		animation-delay: 0s 0s 0.5s 2.5s;
	}

	/* Animazioni */
	@keyframes EntrataZucca {
		0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.8; }
    	100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	}

	@keyframes ScuotiZucca {
		0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
		20% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
		40% { transform: translate(-50%, -50%) scale(1) rotate(5deg); }
		60% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
		80% { transform: translate(-50%, -50%) scale(1) rotate(5deg); }
	}

	@keyframes UscitaZucca {
		0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    	100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
	}

	@keyframes fadeInBanner {
		to {
			opacity: 1;
		}
	}

	@keyframes fadeOutContenitore {
		to {
			opacity: 0;
			pointer-events: none;
			display: none;
		}
	}
	/* Codice di esempio da inserire nell'HTML del banner
	
	<img class="banner-img halloween-banner" src="https://www.farmaciasancarloroma.com/immagine.php?tipo=1&amp;src=dr%20kleen%20settembre%201920X384.png&amp;w=1920">
	<div class="halloween-contenitore-zucca">
		<div class="halloween-banner-zucca"></div>
	</div>
	
	*/

}

/* Tablet */
@media only screen and (min-width: 481px) {
	.banner-mobile {
		display: none;
	}
	.banner-desktop {
		display: inherit;
	}
}

/* Desktop */
@media only screen and (min-width: 769px) {
}