.disegno-animato {
	position: relative;
}
.disegno-animato::before {
	content: '';
    position: absolute;
    background-repeat: no-repeat;
    z-index: 1;
}
.disegno-animato::after {
	content: '';
    position: absolute;
    background-repeat: no-repeat;
    z-index: 1;
}

/* HOME */

#home-asilo .disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/aereo-carta.svg);
	background-color: var(--verde);
	animation: spin 8s infinite ease;
	right: 7%;
    bottom: -3%;
}
#home-attivita .disegno-animato::before {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/palloncino.svg);
	background-color: var(--arancione);
	animation: move-v 8s infinite ease;
	left: 2%;
    top: -10%;
}
#home-iscrizione .disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/pianeta.svg);
	background-color: var(--viola);
	animation: spin-inv 8s infinite ease;
	left: 42%;
    bottom: -5%;
}
#home-news .disegno-animato::before {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/nuvola1.svg);
	background-color: var(--azzurro);
	animation: move-v 8s infinite ease;
	right: 2%;
    top: -6%;
}
#home-news .disegno-animato::after {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/nuvola2.svg);
	background-color: var(--magenta);
	animation: move-h 8s infinite ease;
	left: 2%;
    bottom: -9%;
}

/* ATTIVITA */

#sez-soggetti-attivita .disegno-animato::before {
	width: 140px;
    height: 140px;
	mask: url(../../img/SVG/disegni/aquilone.svg);
	background-color: var(--magenta);
	animation: move-v 8s infinite ease;
	right: 57%;
    top: -8%;
}
#sez-scopo-attivita .disegno-animato::before {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/nuvola1.svg);
	background-color: var(--arancione);
	animation: move-h 8s infinite ease;
	right: 7%;
    top: -3%;
}
#sez-proposta-attivita .disegno-animato::before {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/pianeta.svg);
	background-color: var(--viola);
	animation: spin-inv 8s infinite ease;
	left: -23%;
    top: -29%;
}
#sez-meta-attivita .disegno-animato::before {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/matita.svg);
	background-color: var(--magenta);
	animation: move-h 8s infinite ease;
	left: 7%;
    top: -56%;
}
#sez-meta-attivita .disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/razzo.svg);
	background-color: var(--azzurro);
	animation: move-v 8s infinite ease;
	right: 2%;
    bottom: -12%;
}
#sez-traguardi-attivita .disegno-animato::after {
	width: 140px;
    height: 140px;
	mask: url(../../img/SVG/disegni/caramella.svg);
	background-color: var(--azzurro);
	animation: spin 8s infinite ease;
	left: 7%;
    bottom: 5%;
}

/* CHILD ATTIVITA */

#ludiche-img.disegno-animato::before {
	width: 150px;
    height: 150px;
	mask: url(../../img/SVG/disegni/razzo.svg);
	background-color: var(--azzurro);
	animation: move-v 8s infinite ease;
	left: 8%;
    top: 23%;
}
#ludiche-img.disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/pallone.svg);
	background-color: var(--magenta);
	animation: spin 8s infinite ease;
	right: 7%;
    bottom: 16%;
}
#pittoriche-img.disegno-animato::before {
	width: 150px;
    height: 150px;
	mask: url(../../img/SVG/disegni/matita.svg);
	background-color: var(--verde);
	animation: move-h 8s infinite ease;
	left: 8%;
    bottom: 23%;
}
#pittoriche-img.disegno-animato::after {
	width: 140px;
    height: 140px;
	mask: url(../../img/SVG/disegni/pittura.svg);
	background-color: var(--arancione);
	animation: move-v 8s infinite ease;
	right: 10%;
    top: 23%;
}
#manipolative-img.disegno-animato::before {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/puzzle-1.svg);
	background-color: var(--viola);
	animation: move-v 8s infinite ease;
	left: 7%;
    bottom: 21%;
}
#manipolative-img.disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/stella.svg);
	background-color: var(--magenta);
	animation: spin 8s infinite ease;
	right: 8%;
    top: 22%;
}
#motorie-img.disegno-animato::before {
	width: 100px;
    height: 100px;
	mask: url(../../img/SVG/disegni/palla.svg);
	background-color: var(--viola);
	animation: move-v 8s infinite ease;
	left: 9%;
    top: 21%;
}
#motorie-img.disegno-animato::after {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/racchetta.svg);
	background-color: var(--magenta);
	animation: spin 8s infinite ease;
	right: 8%;
    bottom: 22%;
}
#musicale-img.disegno-animato::before {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/tamburo.svg);
	background-color: var(--verde);
	animation: move-v 8s infinite ease;
	left: 9%;
    top: 2%;
}
#musicale-img.disegno-animato::after {
	width: 110px;
    height: 110px;
	mask: url(../../img/SVG/disegni/note.svg);
	background-color: var(--azzurro);
	animation: spin 8s infinite ease;
	right: 10%;
    bottom: 34%;
}
#narrazione-img.disegno-animato::before {
	width: 110px;
    height: 110px;
	mask: url(../../img/SVG/disegni/casa.svg);
	background-color: var(--magenta);
	animation: spin-inv 8s infinite ease;
	left: 9%;
    bottom: 24%;
}
#narrazione-img.disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/libro.svg);
	background-color: var(--arancione);
	animation: spin 8s infinite ease;
	right: 10%;
    top: 2%;
}
#inglese-img.disegno-animato::after {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/cubo.svg);
	background-color: var(--viola);
	animation: move-h 8s infinite ease;
	left: 34%;
    bottom: 24%;
}
#ecologica-img.disegno-animato::before {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/albero.svg);
	background-color: var(--verde);
	animation: move-v 8s infinite ease;
	left: 9%;
    bottom: 24%;
}
#ecologica-img.disegno-animato::after {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/ape.svg);
	background-color: var(--magenta);
	animation: move-h 8s infinite ease;
	right: 10%;
    top: 22%;
}
#religione-img.disegno-animato::before {
	width: 120px;
    height: 120px;
	mask: url(../../img/SVG/disegni/arcobaleno.svg);
	background-color: var(--magenta);
	animation: move-h 8s infinite ease;
	left: 9%;
    top: 24%;
}
#religione-img.disegno-animato::after {
	width: 140px;
    height: 140px;
	mask: url(../../img/SVG/disegni/sole.svg);
	background-color: var(--arancione);
	animation: spin-inv 8s infinite ease;
	right: 10%;
    bottom: 22%;
}
#orto-img.disegno-animato::after {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/fiori.svg);
	background-color: var(--viola);
	animation: spin 8s infinite ease;
	left: 34%;
    bottom: 24%;
}

/* CONTATTI */

#contatti-form.disegno-animato::before {
	width: 140px;
    height: 140px;
	mask: url(../../img/SVG/disegni/girandola.svg);
	background-color: var(--verde);
	animation: move-v 8s infinite ease;
	left: 0%;
    top: 9%;
}
#contatti-form.disegno-animato::after {
	width: 130px;
    height: 130px;
	mask: url(../../img/SVG/disegni/ciliegie.svg);
	background-color: var(--azzurro);
	animation: spin-inv 8s infinite ease;
	right: 0%;
    bottom: 9%;
}

/* KEYFRAMES */

@keyframes spin {
	0% {
    	transform: rotate(0deg);
	}

	50% {
    	transform: rotate(-40deg);
	}
	
	100% {
		transform: rotate(0deg);
	}
}

@keyframes spin-inv {
	0% {
    	transform: rotate(0deg);
	}

	50% {
    	transform: rotate(40deg);
	}
	
	100% {
		transform: rotate(0deg);
	}
}

@keyframes move-v {
	0% {
    	transform: translateY(0%);
	}

	50% {
    	transform: translateY(-30%);
	}
	
	100% {
		transform: translateY(0%);
	}
}

@keyframes move-h {
	0% {
    	transform: translateX(0%);
	}

	50% {
    	transform: translateX(-30%);
	}
	
	100% {
		transform: translateX(0%);
	}
}