#awards-container {
position:fixed;
pointer-events: none;
z-index:9999;
}

#awards-container > div {
position: absolute;
}

/*seal*/
.wholesome img {
	width: 100px !important;
	height: 89.5px !important;
}
@media (max-width: 992px) {
	.wholesome img {
		width: 40px !important;
		height: 27px !important;
	}
}

.wholesome {animation: sealX 9s linear infinite}
.wholesome img {animation: sealY 10s linear infinite}

.wholesome1 {animation-direction: alternate}
.wholesome1 img {animation-direction: alternate}
.wholesome2 {animation-direction: alternate-reverse}
.wholesome2 img {animation-direction: alternate-reverse}
.wholesome3 {animation-direction: alternate}
.wholesome3 img {animation-direction: alternate-reverse}
.wholesome4 {animation-direction: alternate-reverse}
.wholesome4 img {animation-direction: alternate}

@keyframes sealX {
	from {} to {transform: translateX(98vw)}
}
@keyframes sealY {
	from {} to {transform: translateY(85vh)}
}

/*train common*/
.train1, .scooter1 {top:2%}
.train2, .scooter2 {top:27%}
.train3, .scooter3 {top:52%}
.train4, .scooter4 {top:77%}

@keyframes train {
	from {transform: translateX(-3vw)}
	to {transform: translateX(99vw)}
}

/*train*/
.train img {
	width: 100px !important;
	height: 51px !important;
}
@media (max-width: 992px) {
	.train img {
		width: 40px !important;
		height: 20px !important;
	}
}

.train{animation: train 11s linear infinite;}
.train:nth-of-type(odd) {animation-direction: reverse;}
.train:nth-of-type(odd) img {transform: scaleX(-1);}

/*scooter*/
.scooter img {
	width: 100px !important;
	height: 135px !important;
}
@media (max-width: 992px) {
	.scooter img {
		width: 40px !important;
		height: 54px !important;
	}
}

.scooter {animation: train 11s linear infinite;}
.scooter:nth-of-type(even) {animation-direction: reverse;}
.scooter:nth-of-type(even) img {transform: scaleX(-1);}

/*confetti*/
.confetti {
	background-image: url(/assets/images/confetti2.webp);
	background-repeat: repeat;
}

/*fireworks*/
.firework img {
	max-width: 15rem;
}

/*ricardo*/
.ricardo {
	position: fixed !important;
	bottom: 0;
}
.ricardo img {
	max-height: min(30vw,15rem);
}

.ricardo1 {animation: ricardo1Xa 5.8s linear infinite, ricardo1Xb 11.6s linear infinite, ricardo1Y 23.2s linear infinite;}
.ricardo2 {animation: ricardo2 8.5s linear infinite;}
.ricardo3 {animation: ricardo3 10s linear infinite;}

@keyframes ricardo1Xa {
	0% {right: -200px}
	50% {right: 200px}
	100% {right: -200px}
}

@keyframes ricardo1Xb {
	0%{left:unset}
	49% {left: unset}
	50% {left: -200px}
	75% {left:200px}
	100% {left: -200px}
}

@keyframes ricardo1Y {
	0% {bottom:20vh}
	24% {bottom: 20vh}
	25% {bottom: 60vh}
	49% {bottom: 60vh}
	50% {bottom: 10vh}
	74% {bottom: 10vh}
	75% {bottom: 50vh}
	99% {bottom: 50vh}
	100% {bottom: 20vh}
}


@keyframes ricardo2 {
	0% { opacity: 1; left: 0; right: unset;}
	18% {opacity: 0; left: 0; right: unset;}
	19% {opacity: 0; left: unset; right: 20vw;}
	20% {opacity: 1; left: unset; right: 20vw;}
	38% {opacity: 0; left: unset; right: 20vw;}
	39% {opacity: 0; left: 20vw; right: unset;}
	40% {opacity: 1; left: 20vw; right: unset;}
	58% {opacity: 0; left: 20vw; right: unset;}
	59% {opacity: 0; left: unset;right: 60vw;}
	60% {opacity: 1; left: unset; right: 60vw;}
	78% {opacity: 0; left: unset; right: 60vw;}
	79% {opacity: 0; left: 80vw; right: unset;}
	80% {opacity: 1; left: 80vw; right: unset;}
	98% {opacity: 0; left: 80vw; right: unset;}
	99% {opacity: 0; left: 0; right: unset;}
	100% {opacity: 1; left: 0; right: unset;}
}

@keyframes ricardo3 {
	50% {transform: translateX(100vw); top: unset; bottom: 0;}
	51% {transform: translateX(100vw) rotate(180deg); top: 0; bottom: unset;}
	100% {transform: translateX(-15vw) rotate(180deg); top: 0; bottom: unset;}
}