/**************************************************************
	* @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-cards{
		background-image:url('../../includes/images/cards/Game-Pages-Pokers-BG.webp') !important;
		height: 1250px !important;
		min-height: 1250px !important;
		overflow: hidden;
	}
	.main-content{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		min-height: 607px;
		height: 607px;
	}
	/*END MAIN CONTENT*/
	
	/*START ITEM MENU*/
	.content-item-section{
		position: absolute;
		box-shadow: none;
		border-radius: 6px;
		border: none;
		margin-top: -45px;
		z-index: 1;
	}
	.content-item-menu {
		border-radius: 6px;
		position: relative;
		z-index: 0;
		background: #ff7d01;
		border: 2px solid #fff;
	}
	.content-item-menu a{
		display: inline-block;
		cursor: pointer;
		box-sizing: border-box;
		position:relative;
		z-index:1;
		color:#fff;
		font-weight: 700;
		animation-timing-function:ease;
		/*transition-duration:0.6s;*/
		font-size: 14px;
		padding: 12px 8px;
	}
	.content-item-menu .selector{
		height:100%;
		display:inline-block;
		position:absolute;
		left:0px;
		top:0px;
		z-index:1;
		border-radius:35px;
		transition-duration:0.4s;
		background: #fff;
	}
	/*END ITEM MENU*/
	
	/*START TAB CONTENT*/
	.tab-content-desc{margin-top: 30px;}
	/*
	.tab-content-img{position: absolute; top: -66px;}
	*/
	.tab-content-img {
		position: absolute;
		top: 160px;
		right: 0;
	}

	.tab-content-img.jili__games,.tab-content-img.jili__games .cimg2.jili {
		width: 100%
	}
	
	.tab-content-img .cimg1 {
		position: absolute;
		left: 20%;
		bottom: 100px
	}
	
	.tab-content-img .cimg3 {
		position: absolute;
		right: -25px
	}
	
	.tab-content-img .cimg2 {
		position: relative
	}
	
	.tab-content-img .cimg2 img {
		object-fit: contain;
		min-width: 75%;
		width: 685px
	}
	
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s {
		width: 160px;
		position: absolute;
		min-width: 160px
	}
	
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-1 {
		top: 5px;
		right: 660px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-2 {
		top: 0;
		right: 465px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-3 {
		top: 0;
		right: 259px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-4 {
		top: 187px;
		right: 660px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-5 {
		top: 187px;
		right: 465px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-6 {
		top: 187px;
		right: 252px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-7 {
		top: 10px;
		right: 70px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-8 {
		top: 368px;
		right: 667px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-9 {
		top: 380px;
    	right: 465px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-10 {
		top: 360px;
		right: 250px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-11 {
		top: 191px;
		right: 65px;
	}
	.tab-content-img .cimg2.jili img.doAnimate.doDelay2s.jili_fish-12 {
		top: 360px;
		right: 65px;
	}
	.tab-content-img .cimg1{position: absolute;left:20%;bottom: 100px;}
	.tab-content-img .cimg3{position: absolute;right: -25px;}
	.tab-content-img .cimg2 img {
		object-fit: contain;
		min-width: 75%;
		width: 685px;
	}
	.tab-content-desc{color:#fff !important;}
	.tab-content-desc h1{font-size: 3rem;}
	/*END TAB CONTENT*/
	
	/*bootstrap custom*/
	.content-item-menu .nav-link.active, .content-item-menu .show>.nav-link{
		background-color: #fff !important;
		transition-duration: 0.4s;
		color: #ff7d01 !important;
		border-radius: 0;
		width: 100%;
	}
	.content-item-menu .nav-link.active, .content-item-menu .show>.nav-link-more{
		background-color: #fff !important;
		transition-duration: 0.4s;
		color: #ff7d01 !important;
		border-radius: 0;
		width: 100%;
		text-decoration: none;
	}
	.nav-link-more,
	.nav-link-more:hover {
		text-decoration: none;
	}
	.content-item-menu .nav-item.dropdown.show:after {
		content: '';
		width: 20px;
		height: 20px;
		background: #fff;
		display: block;
		position: absolute;
		right: -2px;
		bottom: -9px;
	}
	.content-item-menu .nav-item.dropdown .dropdown-menu {
		left: -86px !important;
		width: 200px;
		padding: 0 15px;
		border: 0;
		border-radius: 0 0 6px 6px;
	}
		.content-item-menu .nav-item.dropdown .dropdown-menu a {
			border-bottom: 1px solid rgba(0,0,0,.1);
		}
	.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 .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;
	}
	.main-content .tab-content{
		min-height: 0 !important;
	}
	.main-content .tab-content.jili-content {
		height: 1000px
	}
	
	.jili_cards {
		position: relative;
		display: grid;
		grid-template-columns: repeat(4, 1fr) !important;
		/* grid-template-columns: auto auto auto; */
		gap: 10px;
		z-index: 1;
	} 
	
	.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,
	.jili_cards .jilicard15 img,
	.jili_cards .jilicard16 img {
		width: 275px;
		height: auto;
	}
	.navbar .dropdown {
		z-index: 2;
	}
	/*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: translate3d(5%, 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*/