149 lines
3.0 KiB
CSS
149 lines
3.0 KiB
CSS
#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 0s infinite}
|
|
.wholesome img {animation: sealY 10s linear 0s 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 0s 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 0s 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 img {
|
|
max-height: min(30vw,15rem);
|
|
}
|
|
|
|
.ricardoleft {animation: ricardoleft 2.9s 2 alternate !important;}
|
|
.ricardoright {animation: ricardoright 2.9s 2 alternate !important;}
|
|
|
|
@keyframes ricardoleft {
|
|
from {}
|
|
to {transform: translateX(200px);}
|
|
}
|
|
|
|
@keyframes ricardoright {
|
|
from {transform: translateX(110vw);}
|
|
to {transform: translateX(95vw);}
|
|
}
|
|
|
|
#ricardo1 {
|
|
top:60%;
|
|
left:-10%;
|
|
}
|
|
|
|
#ricardo2 {
|
|
top:70%;
|
|
left:50%;
|
|
animation: ricardo2 1.7s linear infinite !important;
|
|
max-height:200px;
|
|
}
|
|
|
|
#ricardo3 {
|
|
top:75%;
|
|
animation: ricardo3 10s linear infinite !important;
|
|
max-height:150px;
|
|
}
|
|
|
|
@keyframes ricardo2 {
|
|
0% {opacity:20%}
|
|
50% {opacity:100%}
|
|
100% {opacity:0%}
|
|
}
|
|
|
|
@keyframes ricardo3 {
|
|
50% {transform: translateX(105vw);}
|
|
51% {transform: translate(105vw,-86vh) rotate(180deg);}
|
|
100% {transform: translate(-15vw,-86vh) rotate(180deg);}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
@keyframes ricardo3 {
|
|
50% {transform: translateX(105vw);}
|
|
51% {transform: translate(105vw,-86vh) rotate(180deg);}
|
|
100% {transform: translate(-70vw,-86vh) rotate(180deg);}
|
|
}
|
|
}
|