@charset "utf-8";
/* CSS Document */
:root{
	--sizer:75px;
}

@media (min-width: 768px){
	:root{
	--sizer:120px;
}
}

@media (min-width: 1024px){
	:root{
	--sizer:150px;
}
}

.marquee {
  display: flex;
  block-size: var(--marquee-item-height);
  margin-block: var(--marquee-item-height);
  position: relative;
  margin-top: 250px;	
  overflow-x: hidden;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marqueeGroup {
  --marquee-item-width: var(--sizer);
  --marquee-item-height: var(--sizer);
  --marquee-duration: 24s;
  --marquee-items: 16;
}

.marqueeGroup12 {
  --marquee-item-width: var(--sizer);
  --marquee-item-height: var(--sizer);
  --marquee-duration: 23s;
  --marquee-items: 15;
}

.marqueeHolder {
  --marquee-item-offset: max(
    calc(var(--marquee-item-width) * var(--marquee-items)),
    calc(100% + var(--marquee-item-width))
  );
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
  animation-direction: normal;	
}

.marqueeReverse {
  --marquee-item-offset: max(
    calc(var(--marquee-item-width) * var(--marquee-items)),
    calc(100% + var(--marquee-item-width))
  );
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
  animation-direction: reverse;	
}

/*marquee set 1*/
.marqueeGroup .marqueeHolder:nth-of-type(1) {--marquee-item-index: 1;}

.marqueeGroup .marqueeHolder:nth-of-type(2) {--marquee-item-index: 2;}

.marqueeGroup .marqueeHolder:nth-of-type(3) {--marquee-item-index: 3;}

.marqueeGroup .marqueeHolder:nth-of-type(4) {--marquee-item-index: 4;}

.marqueeGroup .marqueeHolder:nth-of-type(5) {--marquee-item-index: 5;}

.marqueeGroup .marqueeHolder:nth-of-type(6) {--marquee-item-index: 6;}

.marqueeGroup .marqueeHolder:nth-of-type(7) {--marquee-item-index: 7;}

.marqueeGroup .marqueeHolder:nth-of-type(8) {--marquee-item-index: 8;}

.marqueeGroup .marqueeHolder:nth-of-type(9) {--marquee-item-index: 9;}

.marqueeGroup .marqueeHolder:nth-of-type(10) {--marquee-item-index: 10;}

.marqueeGroup .marqueeHolder:nth-of-type(11) {--marquee-item-index: 11;}

.marqueeGroup .marqueeHolder:nth-of-type(12) {--marquee-item-index: 12;}

.marqueeGroup .marqueeHolder:nth-of-type(13) {--marquee-item-index: 13;}

.marqueeGroup .marqueeHolder:nth-of-type(14) {--marquee-item-index: 14;}

.marqueeGroup .marqueeHolder:nth-of-type(15) {--marquee-item-index: 15;}

.marqueeGroup .marqueeHolder:nth-of-type(16) {--marquee-item-index: 16;}

/*marquee set 2*/
.marqueeGroup12 .marqueeReverse:nth-of-type(1) {--marquee-item-index: 1;}

.marqueeGroup12 .marqueeReverse:nth-of-type(2) {--marquee-item-index: 2;}

.marqueeGroup12 .marqueeReverse:nth-of-type(3) {--marquee-item-index: 3;}

.marqueeGroup12 .marqueeReverse:nth-of-type(4) {--marquee-item-index: 4;}

.marqueeGroup12 .marqueeReverse:nth-of-type(5) {--marquee-item-index: 5;}

.marqueeGroup12 .marqueeReverse:nth-of-type(6) {--marquee-item-index: 6;}

.marqueeGroup12 .marqueeReverse:nth-of-type(7) {--marquee-item-index: 7;}

.marqueeGroup12 .marqueeReverse:nth-of-type(8) {--marquee-item-index: 8;}

.marqueeGroup12 .marqueeReverse:nth-of-type(9) {--marquee-item-index: 9;}

.marqueeGroup12 .marqueeReverse:nth-of-type(10) {--marquee-item-index: 10;}

.marqueeGroup12 .marqueeReverse:nth-of-type(11) {--marquee-item-index: 11;}

.marqueeGroup12 .marqueeReverse:nth-of-type(12) {--marquee-item-index: 12;}

.marqueeGroup12 .marqueeReverse:nth-of-type(13) {--marquee-item-index: 13;}

.marqueeGroup12 .marqueeReverse:nth-of-type(14) {--marquee-item-index: 14;}

.marqueeGroup12 .marqueeReverse:nth-of-type(15) {--marquee-item-index: 15;}

.marqueeGroup12 .marqueeReverse:nth-of-type(16) {--marquee-item-index: 16;}


.imgHolder{
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: var(--sizer);
	width: var(--sizer);
}

/*trp*/
.tpr01{
	background-image: url("../img/tpr/pinkFish.png");
}
.tpr02{
	background-image: url("../img/tpr/blueBear.png");
}
.tpr03{
	background-image: url("../img/tpr/purpleCat.png");
}
.tpr04{
	background-image: url("../img/tpr/greenDog.png");
}
.tpr05{
	background-image: url("../img/tpr/blueFish.png");
}
.tpr06{
	background-image: url("../img/tpr/purpleBear.png");
}
.tpr07{
	background-image: url("../img/tpr/greenCat.png");
}
.tpr08{
	background-image: url("../img/tpr/pinkDog.png");
}
.tpr09{
	background-image: url("../img/tpr/purpleFish.png");
}
.tpr10{
	background-image: url("../img/tpr/greenBear.png");
}
.tpr11{
	background-image: url("../img/tpr/pinkCat.png");
}
.tpr12{
	background-image: url("../img/tpr/blueDog.png");
}
.tpr13{
	background-image: url("../img/tpr/greenFish.png");
}
.tpr14{
	background-image: url("../img/tpr/pinkBear.png");
}
.tpr15{
	background-image: url("../img/tpr/blueCat.png");
}
.tpr16{
	background-image: url("../img/tpr/purpleDog.png");
}
/*stickers*/
.stk01{
	background-image: url("../img/stickers/stk_fox.png");
}
.stk02{
	background-image: url("../img/stickers/stk_frog.png");
}
.stk03{
	background-image: url("../img/stickers/stk_panda.png");
}
.stk04{
	background-image: url("../img/stickers/stk_plat.png");
}
.stk05{
	background-image: url("../img/stickers/stk_narwhal.png");
}
.stk06{
	background-image: url("../img/stickers/stk_bunny.png");
}
.stk07{
	background-image: url("../img/stickers/stk_bluey.png");
}
.stk08{
	background-image: url("../img/stickers/stk_bear.png");
}
.stk09{
	background-image: url("../img/stickers/stk_uni.png");
}
.stk10{
	background-image: url("../img/stickers/stk_goldie.png");
}
.stk11{
	background-image: url("../img/stickers/stk_kitty.png");
}
.stk12{
	background-image: url("../img/stickers/stk_puppy.png");
}

.ball01{
	background-image: url("../img/gumballs/pink_3.gif");
}
.ball02{
	background-image: url("../img/gumballs/blue_2.gif");
}
.ball03{
	background-image: url("../img/gumballs/green.gif");
}

@keyframes go {
  to {  
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}