/*PENTING BUAT BUG DARI OWL*/

.owl-carousel .owl-stage, 
.owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto !important;
        touch-action: auto !important;
}
button.owl-next, 
button.owl-prev {
	background-color: rgba(0,0,0,0.3) !important;
}

/*
--- OWL CAROUSEL Point ---
*/

.sa_owl_theme .owl-dots {
	padding: 0 !important;
}

.sa_owl_theme .owl-dots .owl-dot span {
	background-color: var(--color-gray-light) !important;
	
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .35);
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .35);
}

.sa_owl_theme .owl-dots .active span {
	background-color: var(--color-purple-light) !important;
	border-color: var(--color-purple-light) !important;
}

.sa_owl_theme .owl-dots .owl-dot span:hover {
	background-color: var(--color-purple-light) !important;
	border-color: var(--color-purple-light) !important;
}

.sa_owl_theme .owl-nav button.owl-prev, 
.sa_owl_theme .owl-nav button.owl-next {
	color: var(--color-main);
}

.sa_owl_theme .owl-nav button.owl-prev:hover, 
.sa_owl_theme .owl-nav button.owl-next:hover {
	color: var(--color-purple-light);
}

/*** GAMES - OWL CAROUSEL SLIDER FOR GAMES SLIDER ***/

.main-games, 
.main-games .title-games, 
.main-games .content-games, 
.main-games .item-game, 
.main-games .inner-game, 
.main-games .icon-game, 
.main-games .detail-game, 
.main-games .title-game, 
.main-games .subtitle-game {
	float: left;
	width: 100%;
	position: relative;	
}

.main-games {
	background-image: url('../images/bg/bg-games.webp?v2');
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	padding: var(--padding-section);
	z-index: -1;
} 

.main-games .title-games {
	display: flex;
	justify-content: start;
	align-items: center;
	padding-left: 25%;
}

.main-games .title-games h1 {
	font-size: 2rem;
}

.main-games .content-games {
	margin-top: 1rem;
}

#main_games.sa_owl_theme .owl-stage-outer {	
	-webkit-transform: skewX(-7deg);
			transform: skewX(-7deg);
}

#main_games.sa_owl_theme .owl-nav button.owl-prev, 
#main_games.sa_owl_theme .owl-nav button.owl-next {
	font-size: 2rem;
	color: var(--color-secondary);
	margin-top: -3rem !important;
}

#main_games.sa_owl_theme .owl-nav button.owl-prev {
	left: -2.5rem;
} 

#main_games.sa_owl_theme .owl-nav button.owl-next {
	right: -2.5rem;
}

#main_games.sa_owl_theme .owl-nav button.owl-prev:hover, 
#main_games.sa_owl_theme .owl-nav button.owl-next:hover {
	color: var(--color-teal-highlight);
}

.main-games .item-game {
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%, var(--color-teal-highlight) 100%);
	padding: 0.125rem;
	margin-bottom: 2rem;
	
	-webkit-box-shadow: 0.1875rem 0.3125rem 0.4375rem rgba(0, 0, 0, .75);
			box-shadow: 0.1875rem 0.3125rem 0.4375rem rgba(0, 0, 0, .75);	
}

.main-games .item-game a {
	display: table;
}

.main-games .inner-game {

}

.main-games .icon-game {
	overflow: hidden;
}

.main-games .icon-game img {
	-webkit-transform: scale(1.1);
			transform: scale(1.1);
			
	-webkit-transition: transform .3s ease-in-out;
			transition: transform .3s ease-in-out;
}

.main-games .item-game a:hover .icon-game img {
	-webkit-transform: scale(1);
			transform: scale(1);	
}

.main-games .detail-game {
	background: #000;
	text-align: center;
	padding: .7rem .7rem 1.5rem;
}

.main-games .title-game {
	-webkit-transform: skewX(7deg);
			transform: skewX(7deg);		
}

.main-games .title-game h3 {
	font-family: 'PlayBold';
	font-size: 1rem;
	color: var(--color-main);
	text-transform: uppercase;
}

.main-games .subtitle-game {
	font-family: 'PlayRegular';
	font-size: .875rem;
	color: var(--color-teal-highlight);
	
	-webkit-transform: skewX(7deg);
			transform: skewX(7deg);		
}

@media(max-width: 1199px) {
	.main-games .title-game {
		min-height: 2.6em;
	}
}

@media(max-width: 767px) {
	.owl-prev {
		margin-left: 0.3em;
	}
	.owl-next {
		margin-right: 0.3em;
	}
	
	#main_games.sa_owl_theme .owl-nav button.owl-prev {
		left: -1rem;
	} 

	#main_games.sa_owl_theme .owl-nav button.owl-next {
		right: -1rem;
	}
}
@media(max-width: 575px) {
	.main-games .content-games {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		float: none;
		margin-top: 0;
	}
	.main-games .title-games {
		padding: 0;
		text-align: center;
		justify-content: center;
		margin-bottom: 1em;
	}
	.main-games .title-game {
		min-height: unset;
		height: 2.6em;
		overflow: hidden;
	}
	.main-games .title-games > * {
		font-size: 1.6em !important;
	}
}
@media(max-width: 530px) {
	.main-games .subtitle-game {
		min-height: 3em;
	}
}
@media(max-width: 480px) {
	.main-games .subtitle-game {
		min-height: unset;
	}
}
@media(max-width: 340px) {
	.main-games .subtitle-game {
		min-height: 3em;
	}
}