#awards-container { position:fixed; pointer-events: none; z-index:9999; } .stackable-container > div { position: absolute; } .stackable-container div, .stackable-container img, .ricardo { animation-iteration-count: infinite !important; animation-timing-function: linear !important; } /*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 alternate} .wholesome img {animation: sealY 10s alternate} .wholesome:nth-child(even), .wholesome:nth-child(n+2):nth-child(n+3) img {animation-direction: alternate-reverse} @keyframes sealX { 100% {transform: translateX(98vw)} } @keyframes sealY { 100% {transform: translateY(85vh)} } /*train*/ .train img { width: 100px !important; height: 51px !important; } @media (max-width: 992px) { .train img { width: 40px !important; height: 20px !important; } } .train:nth-child(1), .scooter:nth-child(1) {top:2%} .train:nth-child(2), .scooter:nth-child(2) {top:27%} .train:nth-child(3), .scooter:nth-child(3) {top:52%} .train:nth-child(4), .scooter:nth-child(4) {top:77%} .train {animation: train 12s;} .train:nth-child(odd) {animation-direction: reverse;} .train:nth-child(odd) img {transform: scaleX(-1);} @keyframes train { from {transform: translateX(-3vw)} to {transform: translateX(99vw)} } /*scooter*/ .scooter img { width: 100px !important; height: 135px !important; } @media (max-width: 992px) { .scooter img { width: 40px !important; height: 54px !important; } } .scooter {animation: train 14s;} .scooter:nth-child(even) {animation-direction: reverse;} .scooter:nth-child(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, ricardo1Xb 11.6s, ricardo1Y 23.2s;} .ricardo2 {animation: ricardo2 8.5s;} .ricardo3 {animation: ricardo3 10s;} @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;} } @keyframes tilt { 0% {transform: rotate(0deg);} 25% {transform: rotate({{p.award_count("tilt", v)}}deg);} 75% {transform: rotate(-{{p.award_count("tilt", v)}}deg);} 100% {transform: rotate(0deg);} } @media (max-width: 720px) { @keyframes tilt { 0% {transform: rotate(0deg);} 25% {transform: rotate({{p.award_count("tilt", v)/4}}deg);} 75% {transform: rotate(-{{p.award_count("tilt", v)/4}}deg);} 100% {transform: rotate(0deg);} } } .tilt { animation-name: tilt; animation-duration: 60s !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-timing-function: linear !important; }