/* large Desktops and laptops ----------- */
@media only screen and (min-width: 1225px) and (max-width: 2500px) {
	.container {
		max-width: 1170px
	}

	.dxn {
		display: none !important;
	}
}







/* Desktops and laptops  */
@media only screen and (min-width: 992px) and (max-width: 1224px) {
	.container {
		max-width: 960px;
	}

	.dxn {
		display: none !important;
	}
}








/* TABLETS (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container {
		max-width: 720px
	}

	.dxn {
		display: none !important;
	}
}














/* Smartphones (portrait and landscape)  */
@media only screen and (min-width: 320px) and (max-width: 767px) {



	.fmenuBig::-webkit-scrollbar {
		width: 0px;
	}

	.fmenuBig::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px #fff;
	}

	.fmenuBig::-webkit-scrollbar-thumb {
		background-color: #31ee91;
		outline: 1px solid #31ee91;
		border-radius: 5px;
	}




	.container {
		max-width: 360px;
	}

	.smd {
		display: none !important;
	}

	.header .left {
		width: 40%;
	}

	.logoMenu {
		width: 70%;
		gap: 0;
	}

	.header .logo a img {
		width: 100%;
	}

	.wrapSgupSin .content::-webkit-scrollbar {
		width: 0px;
	}

	.wrapSgupSin .content::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px #fff;
	}

	.wrapSgupSin .content::-webkit-scrollbar-thumb {
		background-color: #31ee91;
		outline: 1px solid #31ee91;
		border-radius: 5px;
	}

	.header .menuIcon {

		padding: 4px 4px 2px 4px;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.wrapSgupSin .content .signClose {
		z-index: 11;
	}

	.wrapSgupSin .content {
		overflow-y: scroll;
	}

	.wrapSgupSin .content .signUp {
		flex-direction: column;
	}

	.wrapSgupSin .content .signUp .left {
		width: 100%;
	}

	.wrapSgupSin .content .signUp .right {
		width: calc(100% - 40px);
	}


	.rightSide {
		width: 100%;
	}

	.rightSide .banner .info {
		position: absolute;
		left: 10px;
		text-align: left;
		top: 10px;
	}

	.rightSide .banner .info h2 {
		font-size: 15px;
		margin-bottom: 5px;
	}

	.rightSide .banner .info h4 {
		font-size: 13px;
		margin-bottom: 5px;
	}

	.rightSide .banner .info h3 {
		font-size: 17px;
		margin-bottom: 5px;
	}

	.rightSide .banner .info .bg {
		padding: 0px 0px;
		background: #a9a9a900;
		backdrop-filter: blur(0px);
		margin-bottom: 64px;
	}

	.rightSide .banner img:nth-child(1) {
		display: none;
	}

	.rightSide .banner img:nth-child(2),
	.rightSide .banner img:nth-child(4) {
		width: 364px;
		right: -4px;
		bottom: 0px;
		transform: translateY(-77px);
	}

	.featured {
		flex-direction: column;
		row-gap: 7px;
	}

	.featured .left {
		width: 100%;
	}

	.featured .left .sinFeature {
		border-radius: 10px;
		width: 49%;
		height: 120px;
		position: relative;
	}
	.featured .left .sinFeature:nth-child(2) > img {
		
width: 102px;
		
margin-left: 62px;
		
height: 62px;
		
margin-top: 41px;
	}

	.featured .left .sinFeature .info {
	}

	.featured .left .sinFeature img {
		height: 80px;
		width: 80px;
		margin-left: 80px;
		margin-top: 32px;
	}

	.featured .left .sinFeature .info img {
		width: 20px;
		height: 20px;
		margin-top: -2px;
		margin-left: 0;
	}


	.featured .left .sinFeature .info h1 {
		font-size: 16px;
		font-weight: 500;
	}

	.featured .left .sinFeature h5 {
		display: none;
	}

	.featured .right {
		width: 100%;
	}

	.featured .right .sinFeature {
		width: 23.5%;
		height: 100px;
	}

	.featured .right .sinFeature img {
		width: 40px;
		height: 40px;
		margin-right: 36px;
		margin-top: 17px;
	}

	.featured .right .sinFeature .info {
		width: 100%;
		height: calc(100% - 20px);
		padding: 10px;
		display: flex;
		align-items: end;
		justify-content: center;
		margin-top: 19px;
		text-align: center;
	}

	.featured .right .sinFeature .info h1 {
		font-size: 13px;
		font-weight: 400;
	}

	.featured .right .sinFeature .info img {
		display: none;
	}

	.deposit {
		width: calc(100% - 20px);
		flex-direction: column;
		row-gap: 10px;
		padding: 20px;
		margin: 30px auto;
	}

	.column {
		flex-direction: column !important;
	}

	.latestRace ul li {
		padding: 10px 12px;
		border-radius: 7px;
		font-size: 12px;
		font-weight: 600;
	}

	.latestRace .Wager .top {
		flex-direction: column;
		row-gap: 7px;
		margin-bottom: 10px;
	}

	.latestRace .Wager .top .left {
		width: 100%;
	}

	.latestRace .Wager .top .right {
		width: 100%;
		row-gap: 7px;
	}

	.latestRace .Wager .top .right .timeremain,
	.latestRace .Wager .top .right .lastChamp {
		width: 49%;
	}

	.latestRace .Wager .mid {
		display: none;
	}

	.latestRace .Wager .top .right .remain {
		gap: 5px;
	}

	.latestRace .Wager .top .right .remain .hour {
		padding: 5px;
	}

	.latestRace .Wager .top .right .remain .hour h2 {
		font-size: 14px;
	}

	.latestRace .Wager .top .right .remain .hour p {
		font-size: 9px;
	}

	.latestRace .Wager .top .right .lastChamp h4 {
		font-size: 12px;
	}

	.latestRace .Wager .top .right .lastChamp .profil .proDe p,
	.latestRace .Wager .top .right .lastChamp .profil .proDe p i {
		font-size: 11px;
	}

	.allDraw .sinDraw {
		width: 20%;
		padding: 10px;
	}

	.allDraw .sinDraw .timing .h {
		padding: 3px 5px;
		font-size: 10px;
	}

	.allDraw .sinDraw img {
		position: absolute;
		top: -15px;
		right: -15px;
		width: 60px;
		border-radius: 50%;
		border: 7px solid var(--secondry-bg);
	}

	.footer {
		background: var(--white);
		padding: 40px;
		display: none;
	}

	.notification {
		width: calc(100%);
		padding: 15px;
	}

	.loginSignUp .signUp {padding: 8px 9px;background: var(--primary-color);border: none;box-shadow: none;padding: 10px 18px;}

	.header .liveCur {
		gap: 5px;
		padding: 5px 10px;
	}

	.header .liveCur h5 {
		font-size: 11px;
	}

	.sidebar {
		display: none;
	}

	.recentBigWin .item {
		width: 15%;
	}


	.footerMenu {
		position: fixed;
		bottom: -1px;
		display: block;
		width: 100%;
		height: 10vh;
		background: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15px 15px 0 0;
		z-index: 9999;
	}

	.footerMenu ul {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.footerMenu ul li {}

	.footerMenu ul li a {
		color: var(--color);
		font-size: 13px;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 5px;
	}
	.footerMenu ul li.active a {
		color: var(--primary-color);
		font-size: 13px;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 5px;
	}

	.content {
		padding-bottom: 65px;
	}


	.footerMenu ul li a i {}

	.footerMenu ul li a span {}


	.fmenuBig {
		position: absolute;
		top: 6vh;
		left: 0;
		width: calc(100%);
		background: var(--white);
		height: 0;
		display: none;
		padding: 0 15px;
	}

	.fmenuBig.active {
		height: 85vh;
		display: block;
		z-index: 999;
		overflow-y: scroll;
		padding-top: 10px;
		position: fixed;
		top: 57px;
	}

	.lightDark {
		margin-top: 15px;
	}

	.topMenu .bcToken {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-image: radial-gradient(85.75% 170.25% at 0% 100%, rgba(35, 238, 136, 0.15) 0%, rgba(35, 238, 136, 0) 100%);
		background-color: var(--primary-bg);
		color: var(--black);
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.topMenu .bcToken img {
		width: 24px;
		height: 24px;
	}

	.topMenu .bcToken>svg {
		width: 18px;
		height: 18px;
		transform: rotate(180deg);
		background: var(--ddd);
		fill: var(--color);
		padding: 3px;
		border-radius: 3px;
	}

	.topMenu .bcToken h5 {
		font-size: 15px;
		font-weight: 700;
	}

	.topMenu .bcToken .tkper svg {
		width: 12px;
		height: 12px;
		fill: var(--primary-color);
		margin-right: 5px;
	}

	.topMenu .bcToken .tkper span {
		font-size: 14px;
		font-weight: 500;
		color: var(--primary-color);
	}

	.topMenu .bcToken .info p {
		font-size: 14px;
		font-weight: 500;
		color: var(--black);
	}

	.topMenu .leftMenu {}

	.topMenu .leftMenu ul.menuPrimary {}

	.topMenu .leftMenu ul.menuPrimary>li {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: space-between;
		background: var(--secondry-bg);
		margin-bottom: 5px;
		/* padding: 7px; */
		border-radius: 5px;
		cursor: pointer;
		transition: var(--transition);
		position: relative;
		height: 38px;
		overflow: hidden;
	}

	.topMenu .leftMenu ul.menuPrimary>li.active {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: space-between;
		background: var(--secondry-bg);
		margin-bottom: 5px;
		/* padding: 7px; */
		border-radius: 5px;
		cursor: pointer;
		transition: var(--transition);
		position: relative;
		height: auto;
		overflow: visible;
	}

	.topMenu .leftMenu ul.menuPrimary li:last-child {
		margin-bottom: 0px;

	}

	.topMenu .leftMenu ul.menuPrimary li.active {
		background: var(--secondry-bg);
	}

	.topMenu .leftMenu ul.menuPrimary li .flex-between {
		padding: 7px;
	}

	.topMenu .leftMenu ul.menuPrimary>li:hover {
		transition: var(--transition);
		background-image: radial-gradient(85.75% 170.25% at 0% 100%, rgba(35, 238, 136, 0.15) 0%, rgba(35, 238, 136, 0) 100%);
		background-color: var(--primary-bg);
		color: var(--black);
	}

	.topMenu .leftMenu ul.menuPrimary>li.active:hover {
		transition: var(--transition);
		background-image: var(--secondry-bg);
	}

	.topMenu .leftMenu ul.menuPrimary li ul {}

	.topMenu .leftMenu ul.menuPrimary li ul li {
		background: transparent;
	}

	.topMenu .leftMenu ul.menuPrimary li ul li:hover {
		transition: var(--transition);
		background-image: radial-gradient(85.75% 170.25% at 0% 100%, rgba(35, 238, 136, 0.15) 0%, rgba(35, 238, 136, 0) 100%);
		background-color: var(--primary-bg);
		color: var(--black);
	}

	.topMenu .leftMenu ul.menuPrimary li .align-center {
		gap: 10px;
	}

	.topMenu .leftMenu ul.menuPrimary li i {
		font-size: 16px;
		color: var(--color);
	}

	.topMenu .leftMenu ul.menuPrimary li a {
		color: var(--black);
		font-size: 13px;
		font-weight: 700;
	}

	.topMenu .leftMenu ul.menuPrimary li svg {
		width: 18px;
		height: 18px;
		/* transform: rotate(180deg); */
		background: var(--ddd);
		fill: var(--color);
		padding: 3px;
		border-radius: 3px;
		transform: rotate(270deg);
	}

	.topMenu .leftMenu ul.menuPrimary li ul li svg {
		transform: rotate(180deg);
	}

	.topMenu .leftMenu ul.menuPrimary li ul li {
		position: relative;
	}

	.topMenu .leftMenu ul.menuPrimary li ul li ul {
		position: absolute;
		left: 110%;
		background: var(--secondry-bg);
		top: 0;
		width: 200px;
		border-radius: 5px;
		transform: rotateY(90deg);
		transform-origin: left;
		transition: var(--transition);
	}

	.topMenu .leftMenu ul.menuPrimary li ul li:hover ul {
		transition: var(--transition);
		transform: rotateY(0deg);
		transform-origin: left;
		z-index: 55;
	}

	.topMenu .leftMenu ul.menuPrimary li ul li ul li {
		padding: 7px;
	}

	.searchDetails .body .data .srAllBc .sinbc {
		width: 30%;
	}

	.searchDetails .body ul.SrchTabMenu {
		flex-wrap: wrap;
	}

	.searchDetails .body .data {
		height: calc(100vh - 55vh);
		overflow-y: scroll;
	}

	.header .liveCur {
		gap: 5px;
		padding: 5px 8px;
	}

	.header .liveCur img {
		width: 15px;
	}

	.header .liveCur h5 {
		font-size: 8px;
	}
}

/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {}