/**************************************************************
	* @Author: Anthony Payumo 
	* @Date:   November 23, 2020
	* @Email: 1010payumo@gmail.com
	* @Desc: GAMES PAGE | CONTENT DESIGN
	
	NOTE:
	for animation can do animation fade in (right, left, center)
	or you can apply this line inside "tab-content-img" selector for animation of dice and chips
	sample tags commented in first tabs pane
	
	PAGE CONTROLS:
		- sportsbook.php
		- esports.php
		- poker.php
		- lottery.php
		- horseracing.php
		- fishing.php
	
	***************************************************************/
	/*START MAIN CONTENT*/
	.bg-sports{background-image:url('../../includes/images/sportsbook/Game-Pages-Sports-BG.png') !important;}
	.bg-esports{background-image:url('../../includes/images/esports/Game-Pages-Esports-BG.png') !important;}
	.bg-poker{background-image:url('../../includes/images/poker/Game-Pages-Pokers-BG.png') !important;}
	.bg-lottery{background-image:url('../../includes/images/lottery/Game-Pages-Lottery-BG.png') !important;}
	.bg-horseracing{background-image:url('../../includes/images/horseracing/Game-Pages-Horse-BG.png') !important;}
	.bg-fishing{background-image:url('../../includes/images/fishing/Game-Pages-Fishing-BG.png') !important;}
	.bg-miki{background-image:url('../../live-racing/images/Frame1000003301.png') !important;}

	/*START MAIN CONTENT*/
	.main-content{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}
	/*END MAIN CONTENT*/
	
	/*START ITEM MENU*/
	.content-item-section{
		position:absolute;
		box-shadow: 2px 2px 1px rgba(216,58,58,1);
		border-radius: 35px;
		border: 1px solid #f58672;
		margin-top: -75px;
	}
	.content-item-menu {
		background: rgb(216,58,58);
		background: linear-gradient(360deg, rgba(216,58,58,1) 0%, rgba(245,134,114,1) 79%, rgba(245,134,114,1) 100%);
		border-radius: 35px;
		position: relative;
		z-index:0;
	}
	.content-item-menu a{
		display: inline-block;
		cursor: pointer;
		box-sizing: border-box;
		position:relative;
		z-index:1;
		color:#fff;
		padding: .5rem .4rem;
		font-weight: 700;
		animation-timing-function:ease;
		/*transition-duration:0.6s;*/
		font-size: 14px;
	}
	.content-item-menu .selector{
		/* height:100%; */
		height: 35px;
		display:inline-block;
		position:absolute;
		left:0px;
		top:0px;
		z-index:1;
		border-radius:35px;
		transition-duration:0.4s;
		/*transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
		background: #fff;
	}
	/*END ITEM MENU*/
	
	/*START TAB CONTENT*/
	.tab-content-desc{margin-top: 30px;}
	/* .tab-content-img .cimg1{position: absolute;left:20%;bottom: 100px;}
	.tab-content-img .cimg2{position: relative;left: 48px;}
	.tab-content-img .cimg3{position: absolute;right: -25px;}
	.tab-content-img .cimg2 img{ width: 739px;object-fit: contain;max-width: 100%;} */
	.tab-content-img .cimg2 img{ width: 640px;}
	.tab-content-desc{color:#fff !important;}
	.tab-content-desc h1{font-size: 4rem;}
	/*END TAB CONTENT*/
	
	/*bootstrap custom*/
	.content-item-menu .nav-link.active, .content-item-menu .show>.nav-link{
		background-color: transparent !important;
		transition-duration:0.4s;
		color:#643111 !important;
	}
	.content-item-menu .nav-item{height:auto !important; width:auto !important;}
	.content-item-menu .nav-item:hover{background: none !important;}
	.btn-section{ margin-top: 100px;}
	.btn-section.jili-fishing{ 
		margin-top: unset;
	}
	.btn-section .btn-primary{
		border-radius: 35px !important;
		border-style: solid;
		border-width: 4px;
		border-color: #fff;
		background: rgb(245,134,114) !important;
		background: linear-gradient(90deg, rgba(245,134,114,1) 0%, rgba(216,58,58,1) 50%, rgba(245,134,114,1) 100%) !important;
		padding: .375rem 2rem;
	}
	.btn-section .btn-primary:active, .btn-section .btn-primary:focus{
		box-shadow: none !important;
		border-color: #fff !important;
		background: rgb(216,58,58) !important;
		background: linear-gradient(90deg, rgba(216,58,58,0.6811099439775911) 0%, rgba(216,58,58,1) 50%, rgba(216,58,58,0.6895133053221288) 100%) !important;
	}
	
	/*START ANIMATION*/
	.doAnimate{
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	.doDelay3s{
		-webkit-animation-delay: .3s;
		-moz-animation-delay: .3s;
		animation-delay: .3s;
	}
	.doDelay2s{
		-webkit-animation-delay: .2s;
		-moz-animation-delay: .2s;
		animation-delay: .2s;
	}
	
	/*FADE IN*/
	@-webkit-keyframes fadeIn {
		from {opacity: 0; }
		to {opacity: 1;}
	}
	@keyframes fadeIn {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	.fadeIn {
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}

	/*FADE IN RIGHT*/
	@-webkit-keyframes fadeInRight {
		from {
			opacity: 0;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@keyframes fadeInRight {
		from {
			opacity: 0;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}

	.fadeInRight {
		-webkit-animation-name: fadeInRight;
		animation-name: fadeInRight;
	}

	/*FADE IN LEFT*/
	@-webkit-keyframes fadeInLeft {
		from {
			opacity: 0;
			-webkit-transform: translate3d(-100%, 100px, 0);
			transform: translate3d(-100%, 100px, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@keyframes fadeInLeft {
		from {
			opacity: 0;
			-webkit-transform: translate3d(-100%,100px, 0);
			transform: translate3d(-100%, 100px, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	.fadeInLeft {
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
	}

	/*FADE IN CENTER*/
	@-webkit-keyframes fadeInCenter {
		from {
			opacity: 0;
			-webkit-transform: translate3d(5%, 10%, 0);
			transform: translate3d5%, 10%, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@keyframes fadeInCenter {
		from {
			opacity: 0;
			-webkit-transform: translate3d(5%, 0, 0);
			transform: translate3d(5%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	.fadeInCenter {
		  -webkit-animation-name: fadeInCenter;
		  animation-name: fadeInCenter;
	}
	/*END ANIMATION*/

/* JILI CSS */
.tab-content-img .cimg2.jili__char img{ 
	width: 800px;
	position: relative;
	object-fit: unset;
	min-width: unset;
	max-width: unset;
}
.jili_games {
	position: relative;
	display: grid;
	grid-template-columns: auto auto auto auto;
	gap: 10px;
	z-index: 1;
	margin-bottom: 20px;
}
.jili_cards {
	position: relative;
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	z-index: 1;
	margin-bottom: 30px;
}
/* PULSE */
.pulse:hover {
	animation-name: pulse;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: reverse;
}
@keyframes pulse {
	50% {
	transform: scale(0.9);
	}
	100% {
	transform: scale(1);
	}
}
.jili_games .jiligame1,
.jili_games .jiligame2,
.jili_games .jiligame3,
.jili_games .jiligame4,
.jili_games .jiligame5,
.jili_games .jiligame6,
.jili_games .jiligame7,
.jili_games .jiligame8,
.jili_games .jiligame9,
.jili_games .jiligame10,
.jili_games .jiligame11 {
	width: 160px;
	height: 160px;
}
.jili_cards .jilicard1 img,
.jili_cards .jilicard2 img,
.jili_cards .jilicard3 img,
.jili_cards .jilicard4 img,
.jili_cards .jilicard5 img,
.jili_cards .jilicard6 img,
.jili_cards .jilicard7 img,
.jili_cards .jilicard8 img,
.jili_cards .jilicard9 img,
.jili_cards .jilicard10 img,
.jili_cards .jilicard11 img,
.jili_cards .jilicard12 img,
.jili_cards .jilicard13 img,
.jili_cards .jilicard14 img {
	width: 225px;
	height: auto;
}