@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Anton&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url(plugins/fontawesome.min.css);
:root {
	--font-primary: "Nunito", sans-serif;
	--font-white: rgb(255 255 255/1);
	--font-abu: rgb(195 201 204 / 1);
	--bg-theme-rgb: 255 31 31;
	--bg-body: 30 32 34;
	--bg-border: 81 81 81;
	--bg-section: 53 56 59;
	--bg-news: rgb(157 15 15 / 1);
	--bg-input: 95 102 109;
	--bs-warning: #ff4343;
	--bs-warning-rgb: 255, 31, 31;
}
html, body{background: rgb(var(--bg-body)/1);}
body {font-family: var(--font-primary); color: var(--font-white);}
div, nav {transition: all .3s ease-in;}
.fcolor{color:rgb(var(--bg-theme-rgb)/1);}
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
.navbar-toggler-icon{width:1.2em !important;height:1.2em !important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 13,202,240,1 %29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;}
.container{max-width:80rem;}
img.lazy { display: block; vertical-align: middle; height: auto; object-fit: cover; object-position: center;}
.loading-overlay{display:flex;justify-content:center;align-items:center;margin:0 auto; left:0; right:0; top:0; bottom:0; position:fixed; zoom:1.1; background: rgb(0 0 0 / .5); width:100%;backdrop-filter: blur(3px); z-index:1077;}
.loading-overlay ~ div, .loading-overlay ~ form, .loading-overlay ~ header, .loading-overlay ~ nav  {color: transparent !important; text-shadow: 0 0 4px rgba(0,0,0,0.5); filter: blur(.1rem);}
.loader-bg {position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1035; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);}
.loader-bg .loader-track {position: relative; height: 3px; display: block; width: 100%; overflow: hidden;}
.loader-bg .loader-track .loader-fill:after, .loader-bg .loader-track .loader-fill:before {content: ''; background: rgb(var(--bg-theme-rgb)/1); position: absolute; top: 0; left: 0; bottom: 0; will-change: left, right;}
.loader-bg .loader-track .loader-fill:before {-webkit-animation: mbar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: mbar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;}
.loader-bg .loader-track .loader-fill:after {-webkit-animation: m_s 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: m_s 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s;}
@-webkit-keyframes mbar {0% {left: -35%;right: 100%;}60% {left: 100%;right: -90%;}100% {left: 100%;right: -35%;}}
@keyframes mbar {0% {left: -35%;right: 100%;}60% {left: 100%;right: -90%;}100% {left: 100%;right: -35%;}}
@-webkit-keyframes m_s {0% {left: -200%;right: 100%;}60% {left: 107%;right: -8%;}100% {left: 107%;right: -8%;}}
@keyframes m_s {0% {left: -200%;right: 100%;}60% {left: 107%;right: -8%;}100% {left: 107%;right: -8%;}}
.error-message{
	font-size: .8em;
	font-style: italic;
	color: rgb(255 136 136);
    margin-top: .25em;
}
.pgheader{background-color:rgb(var(--bg-body)/1);border-bottom:2px solid var(--bg-news); height: 4.6rem;position:fixed; margin-bottom:4em;display:flex; align-items:center; transition: height .3s ease-in;}
.pgheadermenu{display:flex; align-items:center; transition: height .3s ease-in; background-color:rgb(var(--bg-body)/1);}
.pgheadermenu .navbar-brand{width:150px; transition: width .3s ease-in;max-height: 3.25em;}
.pgheadermenu ul.menu{
	margin-bottom: auto;
	height: 4.5rem;
	transition: height .3s ease-in;
}
.pgheadermenu ul.menu li.nav-item{height: 4.5rem; display:flex; align-items:center; margin: 0 6px;opacity:1;transition: height .3s ease-in;}
.pgheadermenu ul.menu li.nav-item a{display:flex; flex-direction: row; flex-wrap: nowrap; align-items:center; justify-content: center;}
.pgheadermenu ul.menu li.nav-item a.active, .pgheadermenu ul.menu li.nav-item a:hover{color:var(--bs-warning);font-weight:600;}
.pgheadermenu ul.menu li.nav-item a span{text-transform:uppercase;font-size:.9rem !important;letter-spacing:2;margin-left:10px;}
.pgheadermenu ul.menu li.nav-item a:hover{transition: color .3s ease-in;}
.pgheadermenu ul.menu li.nav-item:has(a):hover{transition: opacity .2s ease-in;opacity:.75;}
.apkdownload{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoratian: none;
	-webkit-animation-name: blink;
	animation-name: blink;
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.apkdownload:hover{
	color:#fff !important;
}
@-webkit-keyframes blink {
  0% {transform: scale3d(0.5, 1, 0.5);opacity: 0;}
  100% {transform: scale3d(0.8, 1, 0.8);opacity: 0.8;}
}
@keyframes blink {
  0% {transform: scale3d(0.8, 1, 0.8);opacity: 0;}
  100% {transform: scale3d(1, 1, 1);opacity: 0.8;}
}
.offcanvas-header{height: 3.5em; border-bottom:1px solid rgb(var(--bg-border));padding:.5em 1em}
.pgslider{
	margin:0 auto;
	margin-top:4.5em;
	position: relative;
	padding: 0 .75em 1em .75em;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTkyMCAxMDAwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPnBhdGh7b3BhY2l0eTouMTtjbGlwLXBhdGg6dXJsKCNjbGlwUGF0aCk7ZmlsbDp1cmwoI2xpbmVhckdyYWRpZW50KTt9PC9zdHlsZT48Y2xpcFBhdGggaWQ9ImNsaXBQYXRoIj48cmVjdCB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDAwIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhckdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjkwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9ImhzbCgwIDAlIDEwMCUvMSkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImhzbCgwIDAlIDEwMCUvMCkiLz48L2xpbmVhckdyYWRpZW50PjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5MjAsMTAwMClzY2FsZSgtMSwtMSkiPjxwYXRoIGQ9Ik0xMzg0LjUgMzQzLjJMMTkyLjcgMTUzNWwtMjEzLjUtM0wxMzgzIDEyOC4ybDEuNSAyMTV6Ii8+PHBhdGggZD0iTTE5MTkuNyA0NDguM0wxMzU5IDEwMDlsLTEwMC40LTEuNEwxOTE5IDM0Ny4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMTc2LjcgNTE0LjNMNjE2IDEwNzVsLTEwMC40LTEuNEwxMTc2IDQxMy4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik02NDQuNyA0NTcuM0w4NCAxMDE4bC0xMDAuNC0xLjRMNjQ0IDM1Ni4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMzg3LjcgNDQ4LjNMODI3IDEwMDlsLTEwMC40LTEuNEwxMzg3IDM0Ny4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMjUwLjEgNDkzLjhsLTU0NSA1NDUtNTIuNyA0My42IDY0MS45LTY0MS45LTQ0LjIgNTMuM3oiLz48cGF0aCBkPSJNODkxLjEgNjM5LjFMLTc3OCAyMzA4LjNsLTI5OC45LTQuMkw4ODkgMzM4LjFsMi4xIDMwMXoiLz48cGF0aCBkPSJNMTg3MC40IDQxOS44TC0yOC44IDIzMTlsLTM0MC4xLTQuOEwxODY4IDc3LjNsMi40IDM0Mi41eiIvPjxwYXRoIGQ9Ik05MDguNCA0MzYuOEwtOTkwLjggMjMzNmwtMzQwLjEtNC44TDkwNiA5NC4zbDIuNCAzNDIuNXoiLz48cGF0aCBkPSJNMTYzMi40IDUxNS44TC0yNjYuOCAyNDE1bC0zNDAuMS00LjhMMTYzMCAxNzMuM2wyLjQgMzQyLjV6Ii8+PHBhdGggZD0iTTExNzYuMyA1NjcuMUwtMTQ0NS42IDMxODlsLTQ2OS41LTYuNkwxMTczIDk0LjNsMy4zIDQ3Mi44eiIvPjxwYXRoIGQ9Ik0xNDI3LjMgNTgwLjFMLTExOTQuNiAzMjAybC00NjkuNS02LjZMMTQyNCAxMDcuM2wzLjMgNDcyLjh6Ii8+PHBhdGggZD0iTTE2NDkuNSA4ODAuMkw0NTcuNyAyMDcybC0yMTMuNS0zTDE2NDggNjY1LjJsMS41IDIxNXoiLz48cGF0aCBkPSJNNjc1LjggNTIyLjJsLTI2MjEuOSAyNjIxLjktNDY5LjQtNi42TDY3Mi41IDQ5LjRsMy4zIDQ3Mi44eiIvPjxwYXRoIGQ9Ik0yNTk1LjkgNTIyLjJMLTI2IDMxNDQuMWwtNDY5LjUtNi42TDI1OTIuNiA0OS40bDMuMyA0NzIuOHoiLz48L2c+PC9zdmc+), linear-gradient(to right, rgb(41 41 41 / 5), rgb(80 80 80 / 1));
	background-repeat: repeat-x;
	background-position: top left;
	background-size: clamp(20em, 100rem, 100em) auto, cover;
	border-bottom:2px solid var(--bg-news);
	transition: padding .3s ease-in;
}
.pgslider .webslider{
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:1.5em;
}
.pgslider .webslider .swiper-slide img{object-fit: cover; border-radius:1.5em;}
.webslider .swiper-slide{display: flex; justify-content: center; align-items: center;}
.swiper-pagination-bullet{
	background:#fff!important;
}
.swiper-pagination-bullet-active{
	background:rgb(var(--bg-theme-rgb)/1)!important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom:-.9em!important;
}
.swal2-popup.swal2-toast .swal2-title{
	margin:0!important;
	padding:0!important;
	padding-bottom:.25em!important;
	font-size:1.2em!important;
}
.swal2-html-container{
	margin:0!important;
	font-size:.8em!important;	
}
.swal2-html-container ul{list-style:square!important; margin:0px 0px 0px -15px!important;}
.swal2-html-container ul li{margin-bottom:2px!important;}
.swal2-container{z-index:1073!important;}
.navbar-toggler{border:0!important;}
button:focus{box-shadow:0 0 0 0rem!important;}
/* News ticker */
#newsTicker:before{
	content:"";
	position:absolute;
	width:35px;
	height:35px;
	background: linear-gradient(45deg, transparent 0%, transparent 50%, var(--bg-news) 50%, var(--bg-news) 100%);
	-webkit-filter: drop-shadow(2px 0 0 rgb(var(--bg-theme-rgb) / 1));
	filter: drop-shadow(-1px 0 0 rgb(var(--bg-theme-rgb) / 1));
	top:0;
	left:0;
	overflow:hidden;
}
#newsTicker:after{
	content:"";
	position:absolute;
	width:35px;
	height:35px;
	background: linear-gradient(135deg, var(--bg-news) 0%, var(--bg-news) 50%, transparent 50%, transparent 100%);
	-webkit-filter: drop-shadow(2px 0 0 rgb(var(--bg-theme-rgb) / 1));
	filter: drop-shadow(1px 0 0 rgb(var(--bg-theme-rgb) / 1));
	top:0;
	right:0;
	overflow:hidden;
}
#newsTicker{margin:0 auto; width:100%; height:35px; position:relative; overflow:hidden;}
#newsTicker>.bn-title{width:auto; height:35px; display:inline-block; position:relative;}
#newsTicker>.bn-title>label{display:inline-block; background:var(--bg-news); border-bottom:1px solid rgb(var(--bg-theme-rgb) / 1); margin-left:35px; padding:0 15px 0 5px; line-height:35px; font-size:.8em; color:#FFF; height:35px; box-sizing:border-box;transition: all .3s ease-in;}
#newsTicker>ul{background:var(--bg-news); border-bottom:1px solid rgb(var(--bg-theme-rgb) / 1); padding:0; margin:0; list-style:none; position:absolute; left:150px; top:0; right:35px; height:35px; font-size:.8em;}
#newsTicker>ul>li{position:absolute; height:35px; width:100%; line-height:35px; display:none;}
#newsTicker>ul>li>a{text-decoration:none; color:rgb(225 230 233 / 1); overflow:hidden; display:block; white-space: nowrap;text-overflow: ellipsis; font-weight:normal;}
#newsTicker>ul>li>a span{color:rgb(255 188 0 / 1);}

/* Content */
.bg-title-product {
	display:flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	color: rgb(255 255 255 / 1);
	font-size:.9em;
	padding: .75rem;
	cursor:pointer;
	border-radius: .75em;
    backdrop-filter: blur(3px);
	background-color: rgba(var(--bg-theme-rgb) / .6);
	background-repeat: repeat-x;
	background-position: top right;
	background-size: clamp(60em, 100rem, 100em) auto, cover;
	transition: all .25s ease-in, background-position 1s;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.bg-title-product.selected, .bg-title-product:hover{
	background-position: top center;
	transform:scale(0.95);
	box-shadow:0 0 0 .25em rgb(var(--bg-theme-rgb) / 1) inset;
	box-shadow: rgb(var(--bg-body)/1) 0px 0px 0px 4px, rgb(var(--bg-theme-rgb) / 1) 0px 0px 0px 7px;
}
.bg-title-product h1{font-size:1.3vw;}
.bg-title-product .popprovimg{
	width:100%;
    display: block;
    vertical-align: middle;
	border-radius: .75rem;
	margin-right:.75em;
	max-height:5rem;
	max-width:5rem;
	aspect-ratio: 1 / 1;
	background-image: url('../../images/produk/bgprods.svg'), linear-gradient(to bottom, rgb(0 0 0 / .5) 0%, rgb(34 32 34 / .75) 50%);
	background-position: bottom center;
	background-size: cover;
	object-fit:cover;
	transition: transform .25s, margin-right .25s;
}
.bg-title-product.selected .popprovimg, .bg-title-product:hover .popprovimg{
	transform: scale(1.25);
	border-radius: .5rem;
	margin-right:1.5em;
}
.card-custom {
  background: linear-gradient(135deg, #ffb600, #d6b55b, #a67c00, #8c6a27);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  color: #222; /* teks tetap kontras di atas latar terang */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-custom:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.card-title-custom {
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  padding: 0.75rem 1.25rem;
  color: #2f2f2f;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* ❗️ Kunci: keluar dari padding card-body */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  width: calc(100% + 3rem); /* total margin yang dikurangi */
}
.card-custom p {
	color:#1c1c1c;
}
.logo-bulat-wrapper {
  position: absolute;
  top: -40px; /* sesuaikan untuk separuh tinggi logo */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.logo-bulat {
  width: clamp(60px, 20vw, 100px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f4f4f4, #d9d9d9 60%, #bfbfbf 100%);
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.4),
    inset 2px 2px 6px rgba(0, 0, 0, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-bulat img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Efek glossy mengilap */
.logo-bulat::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.logo-bulat:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    inset -2px -2px 8px rgba(255, 255, 255, 0.35),
    inset 2px 2px 6px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.5); /* gold glow */
}

@media (max-width: 576px) {
  .card-custom {
	padding: 1.5rem 1rem;
  }
  .logo-bulat {
	width: 30vw;
	max-width: 90px;
  }
  .card-title-custom {
	  margin-left: -1rem;
	  margin-right: -1rem;
	  width: calc(100% + 2rem);
  }
}
.lottery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.lottery-ball {
  width: clamp(28px, 4vw, 42px);
  height: clamp(28px, 4vw, 42px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #444, #222 60%, #111 100%);
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.1),
    inset 2px 2px 5px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.5);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
  border: 2px solid #333;
}
.lottery-ball:hover {
  transform: scale(1.1);
}

.pgcontent{
	position:relative;
	font-size:1em;
	margin-top:1.25em;
	margin-bottom:1.25em;
}
.pgcontent .contenthot .swiper-slide{width:100%;}
.card-info{background-color:#34373b!important;}
.pgcontent3{
	position: relative;
	background:#34373b;
}
.pgcontent3 .card{background: rgb(var(--bg-body)/1);}
.pgcontent3 .card label span{
	display:block;
	margin-top:-.5em;
	font-size:.5em;
}
.pgfooter{
	background-image: url("../images/footerbg.svg");
	background-repeat: repeat-x;
	background-position: bottom center;
	background-size:cover;
	object-fit:cover;
}

.pgfooter .pgfooter-brand {
    font-size: .5em;
    font-weight: 600;
    color: #333;
	margin-bottom:.5em;
}

.pgfooter .pgfooter-text {
    color: var(--font-white);
    font-size: 0.65rem;
	margin-bottom:0;
}

.pgfooter .copyright {
    color: var(--font-white);
    font-size: 0.65em;
}
.pgabout h2{font-size:1.25rem;}
.pgabout p{
	text-align:justify;
	line-height:1.7em;
}

.progress, .progress-stacked{
	--bs-progress-bg:rgb(var(--bg-border));
}
.jpprogress {
	position: absolute;
	margin: 0 auto;
	margin-top: 2.5em;
	height: 5em;
	background: var(--bg-news);
	color: #fff;
	transform: translate(-50%, -50%);
	left: 50% !important;
	border-bottom: 1px solid rgb(var(--bg-theme-rgb) / 1); /* Ganti dari border-top */
/* Glow sides (left, right, bottom only) */
	box-shadow:
		-0.2em 0 0.8em var(--bg-news),   /* left */
		0.2em 0 0.8em var(--bg-news),    /* right */
		0 0.3em 1em var(--bg-news);      /* bottom */	
}

.jpprogress:before {
	content: "";
	width: 5em;
	height: 5em;
	background: linear-gradient(135deg, transparent 0%, transparent 50%, var(--bg-news) 50%, var(--bg-news) 100%);
	-webkit-filter: drop-shadow(-1.5px 0 0 rgb(var(--bg-theme-rgb) / 1));
	filter: drop-shadow(-1.5px 0 0 rgb(var(--bg-theme-rgb) / 1));
	position: absolute;
	left: -4.95em;
	top: 0; /* dipindah dari bottom */
	transform: scaleY(-1); /* membalik isi pseudo-element */
	overflow: hidden;
}

.jpprogress:after {
	content: "";
	width: 5em;
	height: 5em;
	background: linear-gradient(45deg, var(--bg-news) 0%, var(--bg-news) 50%, transparent 50%, transparent 100%);
	-webkit-filter: drop-shadow(2px 0 0 rgb(var(--bg-theme-rgb) / 1));
	filter: drop-shadow(2px 0 0 rgb(var(--bg-theme-rgb) / 1));
	position: absolute;
	right: -4.95em;
	top: 0; /* dipindah dari bottom */
	transform: scaleY(-1); /* membalik isi pseudo-element */
	overflow: hidden;
}


.jpprogress .jptit, .jpprogress .jpsum{
	width:50%;
	padding:.5em;
	text-align:center;
	font-size:1.7vw;
	font-weight:700;
	line-height:1em;
}
.jpprogress .jpsum{
	font-family: "ZCOOL QingKe HuangYou", sans-serif;
	font-size:3vw;
	font-weight:800;
	padding:.3px;
}

.starrate:before{
	display:inline-block;
	content:"";
	width:100%;
	max-height:1em;
	max-width:1em;
	aspect-ratio: 1 / 1;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iI2ZhY2MxNSIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjg2OCAyLjg4NGMtLjMyMS0uNzcyLTEuNDE1LS43NzItMS43MzYgMGwtMS44MyA0LjQwMS00Ljc1My4zODFjLS44MzMuMDY3LTEuMTcxIDEuMTA3LS41MzYgMS42NTFsMy42MiAzLjEwMi0xLjEwNiA0LjYzN2MtLjE5NC44MTMuNjkxIDEuNDU2IDEuNDA1IDEuMDJMMTAgMTUuNTkxbDQuMDY5IDIuNDg1Yy43MTMuNDM2IDEuNTk4LS4yMDcgMS40MDQtMS4wMmwtMS4xMDYtNC42MzcgMy42Mi0zLjEwMmMuNjM1LS41NDQuMjk3LTEuNTg0LS41MzYtMS42NWwtNC43NTItLjM4Mi0xLjgzMS00LjQwMXoiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==);
	background-position: bottom center;
	background-size: cover;
	object-fit:cover;
}
.nav-pills .nav-item{
	margin-right:1em;
}
.nav-pills .nav-link{
	background-color: rgb(var(--bg-input) / 1);
	color:#fff;
	font-size:.9em;
	transition: all 0s ease-in;
	line-height: 1.3em;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link, .nav-pills .nav-link:not(.active):hover{
	background-color: var(--bg-news);
}
.bg-title-game h5{font-size:1.2em;margin-bottom:0;}
.bg-title-game .catgame{font-size:.8em;}
.bg-title-game button{margin-bottom: -35px !important;transition: all .25s ease-in;}
.bg-title-game{
	position:relative;
	display:flex;
	align-items: flex-end;
	align-content: center;
	justify-content: flex-start;
	font-size:.9em;
	border-radius: .75em;
	transition: all .25s ease-in;
    margin: 0 auto;	
	cursor:pointer;
	/* overflow:hidden; */
}
.bg-title-game.off .game-img{filter:grayscale(100%) blur(3px);-webkit-filter: grayscale(100%) blur(3px);-moz-filter: grayscale(100%) blur(3px);-o-filter: grayscale(100%) blur(3px);-ms-filter: grayscale(100%) blur(3px);}
.bg-title-game:hover{transform:scale(1.03);overflow:visible;}
.bg-title-game:hover button{margin-top:-.25em;margin-bottom: .5em !important;}
.bg-title-game.off:hover .game-img{filter:brightness(40%) grayscale(100%) blur(3px);-webkit-filter:brightness(40%) grayscale(100%) blur(3px);-moz-filter:brightness(40%) grayscale(100%) blur(3px);-o-filter:brightness(40%) grayscale(100%) blur(3px);-ms-filter:brightness(40%) grayscale(100%) blur(3px);}
.bg-title-game:hover .game-info{
	height:100%;
	border-radius: .75em;
	transform:scale(1.03);
	box-shadow:0 0 0 2px rgb(var(--bg-theme-rgb) / 1) inset, 0 0 0 1px rgb(var(--bg-border)) inset;	
}
.bg-title-game:hover .game-img{
	filter:blur(3px);-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);
}
.bg-title-game .game-img{
	width:100%;
	height: auto;
	border-radius: .75em;
	object-position: center;
	object-fit: cover;
	aspect-ratio: 4 / 6;
	transition: all .2s ease-in;
	z-index:1;
}
.bg-title-game .game-info{
	display:flex;
	flex-direction: column;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-end;
	position: absolute;
	margin: 0 auto;
    width: 100%;
	height: 100%;
	padding: .3em .6em;
	transition: all .25s ease-in;
	z-index: 2;
	background:linear-gradient(to bottom, rgb(0 0 0 /0) 30%, rgb(0 0 0 /1) 100%);
	border:1px solid rgb(var(--bg-border));
	border-radius:.75em
}
.bg-title-game .provlogo{
	display: block;
    position: absolute;
	top:.75em;
	right:.75em;
    margin: 0 auto;
	padding:2px;
    width: 100%;
    height: auto;
	max-width:50px;
	max-height:50px;
	background:rgb(0 0 0 / .75);
	box-shadow: rgb(var(--bg-border)) 0px 0px 0px 1px;
	border-radius:50%;
    z-index: 2;
}
.bg-title-game .provlogo img{
	width:100%;
	object-position: center;
	object-fit: cover;
	transform: scale(1);
}
.bg-title-game .hot-icon::after{
	position:absolute;
	top:150%;
	left:-.25em;
    margin: 0 auto;
	width:4em;
	height:4em;
	transform: translateY(0px);
	animation: float 1.5s ease-in-out infinite;	
    z-index: 2;
}
.bg-title-game .hot-icon{
	position:absolute;
	top:0;
	left:0;
	margin-top: 1em;
    margin-left: 1em;
    padding: .25em .75em;
    border-radius: .5em 0;
    font-size: .8em;
    line-height: 1em;	
    z-index: 2;
}
.headcontent{
	margin:0 auto;
	margin-top:4.5em;
	position:relative;
	width:100%;
	height:340px;
}
.headcontent img{
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0px;
	object-position: center;
	object-fit: cover;
	background:linear-gradient(to bottom, rgb(0 0 0 /0) 30%, rgb(0 0 0 /1) 100%);
}
.headcontent .titles{background:var(--bg-news); border-top:1px solid rgb(var(--bg-theme-rgb) / 1);}
.headcontent .titles h1{font-family: "Anton", sans-serif; font-size:2em;}
.headcontent .titles h1:after{
	content:"";
	position:absolute;
	width:2.2em;
	height:2.2em;
	background: linear-gradient(45deg, var(--bg-news) 0%, var(--bg-news) 50%, transparent 50%, transparent 100%);
	-webkit-filter: drop-shadow(2px 0 0 rgb(var(--bg-theme-rgb) / 1));
	filter: drop-shadow(2px 0 0 rgb(var(--bg-theme-rgb) / 1));
	top:0;
	right:auto;
	overflow:hidden;
}
.headcontent .subtitles{
	position:absolute;
	bottom:0;
	right:0;
}
.headcontent .subtitles .catgames{
	margin:0 auto;
	overflow:hidden;
}
.headcontent .subtitles .catgames .nav{
	display:flex;
	justify-content: space-between;
	align-items:center;
	flex-wrap: nowrap;
	margin-left:1.4em;
}
.headcontent .subtitles .catgames .nav.nav-pills .nav-item:has(.nav-link.active), .headcontent .subtitles .catgames .nav.nav-pills .nav-item:has(.nav-link:hover){
	background-color: var(--bg-news);
	border: 1px solid rgb(var(--bg-theme-rgb));
}
.headcontent .subtitles .catgames .nav.nav-pills .nav-item{
	max-width:150px;
	text-align:center;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
	border-radius:0;
	-webkit-transform:skew(-45deg);
	-moz-transform:skew(-45deg);
	-o-transform:skew(-45deg);
	transform:skew(-45deg);
	background-color: rgb(var(--bg-input) / 1);
	border: 1px solid rgb(var(--bg-border));
	box-shadow:5px 3px 0px rgb(var(--bs-info-rgb), 1);
}
.headcontent .subtitles .catgames .nav.nav-pills .nav-item .nav-link{
	-webkit-transform:skew(45deg);
	-moz-transform:skew(45deg);
	-o-transform:skew(45deg);
	transform:skew(45deg);
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.products{
	position: relative;
	display: flex;
    align-items: center;
	justify-content: center;
	align-content: center;
	margin:0 auto;
	padding:.75em;
	border-radius:15%;
	box-shadow:0px 0px 0px 1px rgb(0 0 0 / 1) inset, 0px 0px 0px 2px rgb(var(--bg-border)) inset;
	cursor:pointer;
    backdrop-filter: blur(3px);
}
.products.active:hover{cursor:default;}
.products.active, .products:hover{box-shadow:0px 0px 0px 2px rgb(var(--bg-theme-rgb) / 1) inset, 0px 0px 0px 3.5px rgb(var(--bg-border)) inset;}
.products .prodimg.deactive{filter: grayscale(100%);}
.products .prodimg.trouble{filter: sepia(200%);}
.products .prodimg.mainten{filter: saturate(30%);}
.products .pdstatus{
	position:absolute;
	top:0;
	right:0;
    margin-top: .5em;
    margin-right: .5em;
    padding: .25em .75em;
    border-radius: 0 1.25em;
    font-size: .8em;
    line-height: 1em;
}
.products .pdname{
	width:95%;
	text-align:center;
    font-size: .8em;
    line-height: 1em;
	background:var(--bs-gray);
    border-radius: 0 0 1.35em 1.35em;
    padding: .25em .75em;
	bottom:0;
    margin-bottom: .35em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position:absolute;
}
.products .prodimg{
	width:-webkit-fill-available;
	max-height:125px;
	max-width:125px;
	transition: all .25s ease-in;
}
.products:hover .prodimg{
	transform:scale(1.1);
}
.input-group-text{
	background-color: rgb(var(--bg-body));
	border-color:rgb(var(--bg-border));
}
.floatcointainer{
	position:fixed;
	bottom:1.5em;
	left:1.5em;
	cursor:pointer;
	z-index:1077;
}
.floatcointainer .sosbutton{
	width:3em;
	height:3em;
	padding:.5em;
	border-radius:50%;
}
.floatcointainer .sosbutton i {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	font-size:1.5em;
}
.floatcointainer ul.options {
	display:none;
	list-style-type: none;
	position:absolute;
	bottom:2.25em;
	left:0;
	padding-left:0;
}
.floatcointainer ul.options li{
	display:flex;
	justify-content:flex-start;
	margin:.5em 0;
}
.floatcointainer ul.options li a{
	display:flex;
	align-items: center;
	justify-content:flex-start;
	text-decoration:none;
	position: relative;
}
.floatcointainer ul.options li a .btn-label{
	opacity: 0;
	transform: translateX(-30px) scale(0.95);
	transition: transform 0.4s ease, opacity 0.3s ease;
	white-space: nowrap;
	padding:.25em 1.5em .25em .5em;
	margin-left:-.5em;
	align-self:center;
	background-color: black;
	color:#fff;
	border-radius:0 1em 1em 0;
}
.floatcointainer ul.options li a:hover .btn-label {
    opacity: 1;
	transform: translateX(0) scale(1);
}
.footer-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    height: 60px;
    background-color: rgba(var(--bs-warning-rgb), 1) !important;
	background-image: linear-gradient(180deg, rgb(0 0 0 / 20%), transparent);
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .06);
	border-top:1px solid rgb(var(--bg-theme-rgb) / 1);
	transform: translateY(0);
    z-index: 1052;
}
.footer-bar a {
    color: #000;
    padding-top: 12px;
    position: relative;
    flex: 1 1 auto;
	text-decoration:none;
}
.footer-bar a i {
    font-size: 18px;
    position: relative;
    z-index: 2;
}
.footer-bar .active-nav i, .footer-bar .active-nav span {
    color: #ffffff !important;
}
.footer-bar a span {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 0px;
    opacity: .7;
    font-family: Roboto, sans-serif !important;
}
.footer-bar .fc ul.options {
	display:none;
	list-style-type: none;
	position:absolute;
	bottom:60px;
	margin-bottom:0 !important;
	right:0;
	padding-right:0;
}
.footer-bar .fc ul.options li{
	display:flex;
	justify-content:flex-end;
	margin:.75em 0;
}
.footer-bar .fc ul.options li a{
	display:flex;
	justify-content:flex-end;
	text-decoration:none;			
	margin-right:1em;
	padding-top:0;
}
.footer-bar .fc ul.options li a .btn-label{
	padding:.25em 1em .25em 1em;
	margin-right:-.5em;
	align-self:center;
	background-color: black;
	font-size:13px;
	color:#fff;
	border-radius:1em 0 0 1em;
	opacity:1;
}
.footer-bar .fc .sb {
    width: 3em;
    height: 3em;
    padding: .5em;
    border-radius: 50%;
}
.footer-bar .fc .sb i {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	font-size: 1.5em;
}
@media screen and (min-width: 768px){
	.footer-bar {
		display: none!important;
		transform: translateY(100%);
		transition: transform ease-in 3s;
	}
}
@media screen and (max-width: 1536px) {
}
@media screen and (max-width: 1280px) {
	.bg-title-product h1{font-size:1.5vw;}
	.jpprogress{
		height:3.5em;
		margin-top: 1.75em;
	}
	.jpprogress:before{
		width:3.5em;
		height:3.5em;
		left:-3.3em;
	}
	.jpprogress:after{
		width:3.5em;
		height:3.5em;
		right:-3.3em;
	}
}
@media screen and (max-width: 1024px) {
	.bg-title-product h1{font-size:1.8vw;}
	.jpprogress .jpsum, .jpprogress .jptit{padding:.25em;}
	.jpprogress .jptit{font-size:2.5vw;}
	.jpprogress .jpsum{font-size:4vw;}
	.products .pdname{
		border-radius: 0 0 1.35em 1.35em;
	}	
}
@media screen and (max-width: 992px) {
	.pgheader{height:4em;margin-bottom:3.5em;}
	.pgslider{margin-top:4em;}
	.pgheadermenu .navbar-brand{max-height:3em;}
	.pgheadermenu, .pgheadermenu ul.menu li.nav-item{height:auto;}
	.pgheader .container, .pgslider .container, .pgcontent .container, .pgabout .container, .pgcontent3 .container{margin-left: 0px; margin-right:0px; padding-right: 0; padding-left: 0; max-width:100%;}
	.pgheader .container nav .offcanvas-body{
		display:flex;
		flex-direction: column;
		background: linear-gradient(180deg, #222222 0%, rgb(0 0 0  / .2) 100%), url('../images/Untitled.jpg');
		background-repeat:repeat-x;
		background-size:cover;
		background-position:bottom center;		
		/* background:var(--bs-gray-dark); */
	}
	.pgheadermenu .navbar-brand{width:auto;}
	.pgheadermenu ul.menu{height:4rem; padding-top:10px;}
	.pgheadermenu ul.menu li.nav-item a{flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; flex-grow: 0; width:100%;height:3em;}
	.pgheadermenu ul.menu li.nav-item a span{margin-left:10px;}
	.bg-title-product {font-size:.8em;}
	.bg-title-product h1{font-size:1.7vw;}
	.bg-title-product.selected .popprovimg, .bg-title-product:hover .popprovimg{margin-right:1.5em;}
	.jpprogress{
		height:4em;
		margin-top: 1.85em;
	}
	.jpprogress:before{
		width:4em;
		height:4em;
		left:-3.8em;
	}
	.jpprogress:after{
		width:4em;
		height:4em;
		right:-3.8em;
	}
	.jpprogress .jpsum, .jpprogress .jptit{padding:.25em;}
	.jpprogress .jptit{font-size:2.4vw;}
	.jpprogress .jpsum{font-size:3.7vw;}
	.headcontent{height:300px;margin-top:3.5em;}
	.headcontent:has(.subtitles){margin-bottom:4.25em;}
	.headcontent .subtitles{
		position:relative;
		margin: 0 auto;
		width: 100%;
		top: 18.75em;
	}
	.headcontent .subtitles .catgames .nav{
		margin-left: 0;
	}
	.products .pdname{
		border-radius: 0 0 1.25em 1.25em;
	}
}
@media screen and (max-width: 820px) {
	.jpprogress{
		height:3em;
		margin-top: 1.5em;
	}
	.jpprogress:before{
		width:3em;
		height:3em;
		left:-2.8em;
	}
	.jpprogress:after{
		width:3em;
		height:3em;
		right:-2.8em;
	}
	.jpprogress .jpsum{font-size:3.5vw;}
	.products .pdname{
		border-radius: 0 0 1.35em 1.35em;
	}
}
@media screen and (max-width: 768px) {
	.pgheader{height:3.5em !important;}
	.pgslider{margin-top:3.5em;}
	.pgfooter{margin-bottom:60px;}
	.pgregister{padding-bottom:62px;}
	.floatcointainer{display:none;}	
	.pgheadermenu .navbar-brand, .offcanvas-title{max-height:2.5em;}
	.pgheadermenu ul.menu li.nav-item{height:3.5em; padding-top:0;}
	.pgslider{padding-bottom:1em;}
	#newsTicker, #newsTicker>.bn-title, #newsTicker>.bn-title>label, #newsTicker>ul, #newsTicker>ul>li{height:20px;}
	#newsTicker>.bn-title>label, #newsTicker>ul>li{line-height:19px; font-size:.8em;}
	#newsTicker:before{width:20px;height:20px;}
	#newsTicker:after{width:20px;height:20px;}
	#newsTicker>.bn-title>label {position:relative;top:-.3em;width:100%;margin-left: 20px; padding:0 20px 0 5px!important;}
	#newsTicker>ul{right:20px;}
	h1 {font-size:2vw;}
	h5 {font-size:3vw;}
	.bg-title-product {padding: .5rem; border-radius: .75rem;}
	.bg-title-product .popprovimg{max-height:4rem; max-width:4rem;}
	.bg-title-product.selected .popprovimg, .bg-title-product:hover .popprovimg{margin-right:1.2em; transform:scale(1.1); border-radius:.65rem;}
	.bg-title-product {font-size:1.5vw;padding:.5em;}
	.bg-title-game .game-info h5{font-size:1.2em;}
	.bg-title-game .provlogo{top: 1em;right: .75em;}
	.bg-title-game .hot-icon:after{left: .25em;width: 3em;height: 3.5em;}
	.jpprogress{
		height:3.5em;
		margin-top: 1.75em;
	}
	.jpprogress:before{
		width:3.5em;
		height:3.5em;
		left:-3.4em;
	}
	.jpprogress:after{
		width:3.5em;
		height:3.5em;
		right:-3.4em;
	}
	.jpprogress .jpsum, .jpprogress .jpsum{padding:.25em;}
	.jpprogress .jptit{font-size:2.5vw;}
	.jpprogress .jpsum{font-size:4vw;}
	.nav-pills .nav-link{font-size: .85em !important;padding: .5em .7em;}
	.headcontent{height:250px;margin-top:3.5em;}
	.headcontent .subtitles{
		position:relative;
		margin: 0 auto;
		width: 100%;
		top: 15.6em;
	}
	.products .pdstatus{
        padding: 0.25rem .75em;
        font-size: .8em;
		border-radius: 0 1em;
	}
	.products .pdname{
		font-size: .7em;
		border-radius: 0 0 1.35em 1.35em;
	}
}
@media screen and (max-width: 640px) {
	h1 {font-size:2.5vw !important;}
	h5 , label.fs-5{font-size:3.5vw !important;}
	h6{font-size:3vw !important;}
	.bg-title-product {font-size:2vw !important;}
	.pgslider{padding-bottom:1em;}
	.card-info .card-body{padding:.75em;}
	.card-info .card-title{font-size:3.5vw;}
	.card-info .card-text{font-size:2.5vw;}	
	.pgabout h2{font-size:3.5vw;}
	.pgcontent p, .pgabout p{font-size:3vw;}
	.nav-pills .nav-item{
		margin-right:.5em !important;
		max-width:120px!important;
	}
	.nav-pills .nav-link {
		border-radius: 1em;
		font-size:.85em !important;
		padding: .5em .7em;
	}
	.bg-title-game:hover{
		transform:scale(1.01) !important;
	}
	.bg-title-game .game-info h5{font-size:1em!important;}
	.bg-title-game .provlogo{max-width:35px !important; max-height:35px !important; top:.5em !important;right:.5em !important;}
	.bg-title-game .hot-icon:after{left: .25em;width: 3em;height: 3.5em;}
	.bg-title-game .catgame{font-size: .65em;}
	.jpprogress{
		height:2em!important;
		margin-top: 1em!important;
	}
	.jpprogress:before{
		width:2em!important;
		height:2em!important;
		left:-1.9em!important;
	}
	.jpprogress:after{
		width:2em!important;
		height:2em!important;
		right:-1.9em!important;
	}
	.jpprogress .jpsum, .jpprogress .jpsum{padding:.25em!important;}
	.jpprogress .jptit{font-size:2vw;}	
	.jpprogress .jpsum{font-size:3.75vw}
	.headcontent{height:175px;margin-top:3.5em;}
	.headcontent .titles h1{font-size:1.2em!important;}
	.headcontent .titles h1:after{width:2.89em;height:2.89em;}
	.headcontent:has(.subtitles){margin-bottom:3.75em;}
	.headcontent .subtitles{top: 10.95em;}
	.products .pdstatus{
        padding: 0.25rem .75em;
        font-size: .8em;
	}
	.products .pdname{
		text-align:center;
		font-size: .7em;
		border-radius: 0 0 1.35em 1.35em;
		padding: .25em .75em;
	}	
}
@media screen and (max-width: 577px) {
	.headcontent .titles h1:after{width:2.05em;height:2.05em;}
	.headcontent .subtitles{top: 10.95em;}
	.bg-title-product .popprovimg{max-height:3rem !important; max-width:3rem !important;}
	.products .pdstatus{
		margin-top: .75em;
		margin-right: .75em;
		padding: 0.25rem .75em;
		font-size: .5em;
		line-height: .75em;
	}
	.products .pdname{
		text-align:center;
		font-size: .5em;
		border-radius: 0 0 1.2em 1.2em;
		padding: .25em .75em;
	}		
	.jpprogress .jptit{font-size:2.5vw;}
	.offcanvas{
		--bs-offcanvas-width:100%!important;
	}
}
/* bg animated */
.canvasanim {position: relative;}
.canvasanim,.circles {width: 100%;height: 100%;}
.circles {position: absolute;top: 0; left: 0; overflow: hidden;}
.circles li,.circles li:first-child,.circles li:nth-child(2),.circles li:nth-child(3),.circles li:nth-child(4),.circles li:nth-child(5),.circles li:nth-child(6),.circles li:nth-child(7),.circles li:nth-child(8),.circles li:nth-child(9),.circles li:nth-child(10),.circles li:nth-child(11){position: absolute;display: block;list-style: none; bottom: -150px; animation: animate2 25s linear infinite; background-size:cover; object-fit:cover;}
.circles li:first-child {left:0%; width:40px; height:40px; animation-delay: 0s;background-image: url(../../images/cat/1.png);}
.circles li:nth-child(2) {left: 10%;width: 60px;height: 60px;animation-delay: 2s;animation-duration: 12s;background-image: url(../../images/cat/2.png);}
.circles li:nth-child(3) {left: 70%;width: 75px;height: 75px;animation-delay: 4s;background-image: url(../../images/cat/3.png);}
.circles li:nth-child(4) {left: 0%;width: 60px;height: 60px;animation-delay: 0s;animation-duration: 18s;background-image: url(../../images/cat/4.png);}
.circles li:nth-child(5) {left: 65%;width: 130px;height: 130px;animation-delay: 0s;background-image: url(../../images/cat/1.png);}
.circles li:nth-child(6) {left: 75%;width: 110px;height: 110px;animation-delay: 3s;background-image: url(../../images/cat/6.png);}
.circles li:nth-child(7) {left: 35%;width: 150px;height: 150px;animation-delay: 7s;background-image: url(../../images/cat/7.png);}
.circles li:nth-child(8) {left: 15%;width: 55px;height: 55px;animation-delay: 10s;animation-duration: 45s;background-image: url(../../images/cat/11.png);}
.circles li:nth-child(9) {left: 20%;width: 60px;height: 60px;animation-delay: 2s;animation-duration: 35s;background-image: url(../../images/cat/9.png);}
.circles li:nth-child(10) {left: 85%;width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;background-image: url(../../images/cat/10.png);}
.circles li:nth-child(11) {left: 5%;width: 80px;height: 80px;animation-delay: 0s;background-image: url(../../images/cat/11.png);}
@keyframes animate1 {
  0% {transform: translateY(0) rotate(0deg);opacity: 1;border-radius: 0;}
  to {transform: translateY(-1000px) rotate(2turn);opacity: 0;border-radius: 50%;}
}
@keyframes animate2 {
  0% {transform: translateY(0) rotate(0deg);opacity: 1;border-radius: 0;}
  to {transform: translateY(-1000px) rotate(2turn);opacity: 0;border-radius: 5%;}
}
@keyframes float {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-10px);}
	100% {transform: translateY(0px);}
}
a.nav-link .catimg{padding:.5em 1em;}
.catimg{
	position: relative!important;
    display: inline-block!important;
    background: transparent!important;
    padding: 0!important;
    width: 25%!important;
    height: auto!important;
    filter: brightness(0) invert(1);
}
.hot-icon:after{
	content: "";
	display:inline-block;
	position:relative;
	height:1.2em;
	width:1.2em;
	background-image:url(../images/flame.gif);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	object-position:center;
	object-fit:cover;
	margin-top:-.25em;
}
.form-control:disabled,.form-select:disabled{background-color:rgb(var(--bs-dark-rgb));}
.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
.input-group .form-control{border-right:0;}
.input-group .input-group-text{border-left:0;}
.border-input{border-color:rgb(120 121 122);}
.bg-input{background-color:rgb(var(--bg-input) / 0.75);}
.bg-input:focus{background-color:rgb(var(--bg-input) / 1); box-shadow:none;}
.bg-input:focus .border-input{border-color:rgb(var(--bg-theme-rgb) / .25);}
.bg-glass{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTkyMCAxMDAwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPnBhdGh7b3BhY2l0eTouMTtjbGlwLXBhdGg6dXJsKCNjbGlwUGF0aCk7ZmlsbDp1cmwoI2xpbmVhckdyYWRpZW50KTt9PC9zdHlsZT48Y2xpcFBhdGggaWQ9ImNsaXBQYXRoIj48cmVjdCB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDAwIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhckdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjkwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9ImhzbCgwIDAlIDEwMCUvMSkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImhzbCgwIDAlIDEwMCUvMCkiLz48L2xpbmVhckdyYWRpZW50PjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5MjAsMTAwMClzY2FsZSgtMSwtMSkiPjxwYXRoIGQ9Ik0xMzg0LjUgMzQzLjJMMTkyLjcgMTUzNWwtMjEzLjUtM0wxMzgzIDEyOC4ybDEuNSAyMTV6Ii8+PHBhdGggZD0iTTE5MTkuNyA0NDguM0wxMzU5IDEwMDlsLTEwMC40LTEuNEwxOTE5IDM0Ny4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMTc2LjcgNTE0LjNMNjE2IDEwNzVsLTEwMC40LTEuNEwxMTc2IDQxMy4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik02NDQuNyA0NTcuM0w4NCAxMDE4bC0xMDAuNC0xLjRMNjQ0IDM1Ni4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMzg3LjcgNDQ4LjNMODI3IDEwMDlsLTEwMC40LTEuNEwxMzg3IDM0Ny4xbC43IDEwMS4yeiIvPjxwYXRoIGQ9Ik0xMjUwLjEgNDkzLjhsLTU0NSA1NDUtNTIuNyA0My42IDY0MS45LTY0MS45LTQ0LjIgNTMuM3oiLz48cGF0aCBkPSJNODkxLjEgNjM5LjFMLTc3OCAyMzA4LjNsLTI5OC45LTQuMkw4ODkgMzM4LjFsMi4xIDMwMXoiLz48cGF0aCBkPSJNMTg3MC40IDQxOS44TC0yOC44IDIzMTlsLTM0MC4xLTQuOEwxODY4IDc3LjNsMi40IDM0Mi41eiIvPjxwYXRoIGQ9Ik05MDguNCA0MzYuOEwtOTkwLjggMjMzNmwtMzQwLjEtNC44TDkwNiA5NC4zbDIuNCAzNDIuNXoiLz48cGF0aCBkPSJNMTYzMi40IDUxNS44TC0yNjYuOCAyNDE1bC0zNDAuMS00LjhMMTYzMCAxNzMuM2wyLjQgMzQyLjV6Ii8+PHBhdGggZD0iTTExNzYuMyA1NjcuMUwtMTQ0NS42IDMxODlsLTQ2OS41LTYuNkwxMTczIDk0LjNsMy4zIDQ3Mi44eiIvPjxwYXRoIGQ9Ik0xNDI3LjMgNTgwLjFMLTExOTQuNiAzMjAybC00NjkuNS02LjZMMTQyNCAxMDcuM2wzLjMgNDcyLjh6Ii8+PHBhdGggZD0iTTE2NDkuNSA4ODAuMkw0NTcuNyAyMDcybC0yMTMuNS0zTDE2NDggNjY1LjJsMS41IDIxNXoiLz48cGF0aCBkPSJNNjc1LjggNTIyLjJsLTI2MjEuOSAyNjIxLjktNDY5LjQtNi42TDY3Mi41IDQ5LjRsMy4zIDQ3Mi44eiIvPjxwYXRoIGQ9Ik0yNTk1LjkgNTIyLjJMLTI2IDMxNDQuMWwtNDY5LjUtNi42TDI1OTIuNiA0OS40bDMuMyA0NzIuOHoiLz48L2c+PC9zdmc+), linear-gradient(220deg, rgb(var(--bg-section)), rgb(33 33 33 / 1))!important;
	background-repeat: repeat-x!important;
	background-position: top left!important;
	background-size: clamp(20em, 100rem, 60em) auto, cover!important;
	box-shadow:rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset!important;
}
.bg-clips{
	background-image: url("../images/bgdot.svg"), url("../images/footerbg.svg"), linear-gradient(45deg, rgb(var(--bg-section)), rgb(var(--bg-border)), rgb(var(--bg-body)))!important;
	background-repeat: repeat-x, repeat-x !important;
	background-position: top left, bottom center !important;
	background-size:cover, contain;
	object-fit:cover;
}
.bgs-body{background-color:rgb(var(--bg-body));}
.bgs-border{background-color:rgb(var(--bg-border));}
.bgs-section{background-color:rgb(var(--bg-section));}
.bgs-gradient{background-image:linear-gradient(180deg, rgb(0 0 0 / 20%), transparent);transition:all .5s linear;}
.bgs-gradient:hover{background-image:linear-gradient(0deg, rgb(0 0 0 / 20%), transparent);}
.border-theme{border-color:rgb(var(--bg-theme-rgb)/1)!important;}
.border-theme-gray{border-color:rgb(var(--bg-border))!important;}
.pgregister{
	position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    width: 100vw;
    height: 100vh;
	background-color:#000;
	transition: opacity .15s linear;
}
.bg-register{
	background-image:url();
	background-size:cover;
	background-repeat:repeat-x;
	background-pisition:top center;
	object-position:center;
	object-fit:cover;
}