.sportGroup
{
	position:relative;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

.sportGroup .divSportGroupIcon
{
	background-position:center left;
	background-repeat:no-repeat;
	background-size:30px 30px;
	float:left;
	height:40px;
	line-height:40px;
	margin-right:5px;
	position:absolute;
	width:36px;
}

.sportGroup .h3SportGroupLabel
{
	height:40px;
	left:40px;
	line-height:40px;
	position:absolute;
}

.sportGroup .divButtonBar
{
	position:absolute;
	right:0px;
	top:0px;
	z-index:1;
}

.sportGroup .btnPrevious, .sportGroup .btnNext
{
	background-color:#292a2f;
    border:2px solid #3f4656;
    border-radius:50%;
	color:#888b90;
    cursor:pointer;
    float:left;
    height:36px;
	line-height:36px;
    margin-right:15px;
	text-align:center;
    transition:border 0.25s, box-shadow 0.25s, color 0.25s;
    width:36px;
}

.sportGroup .btnPrevious:hover, .sportGroup .btnPrevious:focus, .sportGroup .btnNext:hover, .sportGroup .btnNext:focus
{
	border:2px solid #cffdff;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
	color:#ffffff;
}

.sportGroup .divSportContainer
{
	left:-30px;
	padding-top:20px;
	position:relative;
	width:calc(100% + 60px);
}

.sportGroup .divSportContainer:before
{
	background-color:#1b1c20;
	bottom:10px;
	box-shadow:0px 0px 15px 10px #1b1c20;
	content:"";
	display:block;
	left:0px;
	position:absolute;
	top:30px;
	width:20px;
	z-index:1;
}

.sportGroup .divSportContainer:after
{
	background-color:#1b1c20;
	bottom:10px;
	box-shadow:0px 0px 10px 10px #1b1c20;
	content:"";
	display:block;
	position:absolute;
	right:0px;
	top:30px;
	width:20px;
	z-index:1;
}

.sportGroup .divSportScroller
{
	overflow-x:scroll;
	overflow-y:hidden;
	padding:0px 30px;
	position:relative;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
}

.sportGroup .divSportScroller::-webkit-scrollbar
{
	background:transparent;
	height:0px;
	width:0px;
}

.sportGroup .divSportRow
{
	white-space:nowrap;
}

.sportGroup .divSportRow.auto
{
	white-space:normal;
}

.sportGroup .divSportRow:first-child
{
	margin-top:40px;
}

.sportGroup .divSportRow:after
{
	clear:both;
	content:"";
	display:block;
}

.sportGroup .divSportTile
{
	background-color:#292a2f;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 20px rgba(0, 0, 0, 0.25);
	cursor:pointer;
	display:inline-block;
	height:200px;
	margin-bottom:20px;
	margin-right:20px;
	overflow:hidden;
	position:relative;
	transition:height 0.25s, margin 0.25s, transform 0.25s, width 0.25s;
	width:calc((100% - 80px) / 5);
}

.sportGroup .divSportTile:last-child
{
	margin-right:50px;
}

.sportGroup .auto .divSportTile:nth-child(5n)
{
	margin-right:0px;
}

.sportGroup .divSportTile:hover, .sportGroup .divSportTile:focus
{
	transform:scale(1.05);
	z-index:2;
}

.sportGroup .divSportTile:after
{
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 20px rgba(0, 0, 0, 0.25);
	content:"";
	display:block;
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

.sportGroup .imgTile
{
	left:0px;
	height:100%;
	object-fit:cover;
	position:absolute;
	top:0px;
	width:100%;
}

.sportGroup .divSportLabel
{
	color:#ffffff;
	font-family:"Bayshore", sans-serif;
	font-size:50px;
	left:20px;
	position:absolute;
	text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9, 0px 0px 15px #01eff9;
	top:15px;
}

.sportGroup .divTileOverlay
{
	background-color:rgba(0, 0, 0, 0.85);
	bottom:0px;
	left:0px;
    will-change: opacity;
	opacity:0;
	position:absolute;
	right:0px;
	top:0px;
	transition:opacity 0.25s;
}

.sportGroup .divSportTile:hover .divTileOverlay, .sportGroup .divSportTile:focus .divTileOverlay
{
	opacity:1;
    will-change: opacity;
}

.sportGroup .divTileOverlay:after
{
	background-image:url('../../images/iconNeon.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:1% 1%;
	content:"";
	display:block;
	height:100px;
	left:calc(50% - 50px);
	position:absolute;
	top:calc(50% - 65px);
	transform:rotate(0deg);
	transition:background-size 0.25s, transform 0.25s;
	width:100px;
}

.sportGroup .divSportTile:hover .divTileOverlay:after, .sportGroup .divSportTile:focus .divTileOverlay:after
{
	background-size:100% 100%;
	transform:rotate(360deg);
}

.sportGroup .divOverlayLabel
{
	bottom:20px;
	color:#cffdff;
	font-size:16px;
	left:20px;
	overflow:hidden;
	position:absolute;
	right:20px;
	text-align:center;
	text-overflow:ellipsis;
    text-shadow:0px 0px 5px #01eff9;
	white-space:nowrap;
}

.sportGroup .btnShowMore
{
	display:none;
	left:50%;
	position:relative;
	transform:translateX(-50%);
}

.sportGroup .btnShowMore.show
{
	display:inline-block;
}

.sportGroup .divSportTile.tournament-badge:before {
    content: 'TOURNAMENT';
    background-color: #aa59d2;
    border-radius: 5px;
    color: #ffffff;
    font-size: 9px;
    height: 20px;
    left: 10px;
    position: absolute;
    top: 10px;
    text-align: center;
    width: 70px;
    line-height: 21px;
    filter: drop-shadow(5px 5px 10px #000000);
}

/* MEDIA QUERIES */
@media (max-width: 1800px)
{
	.sportGroup .divSportTile
	{
		height:170px;
	}
}

@media (max-width: 1600px)
{
	.sportGroup .divSportTile
	{
		height:180px;
		width:calc((100% - 60px) / 4);
	}

	.sportGroup .auto .divSportTile:nth-child(5n)
	{
		margin-right:20px;
	}

	.sportGroup .auto .divSportTile:nth-child(4n)
	{
		margin-right:0px;
	}
}

@media (max-width: 1400px)
{
	.sportGroup .divSportTile
	{
		height:200px;
		width:calc((100% - 40px) / 3);
	}

	.sportGroup .auto .divSportTile:nth-child(5n), .sportGroup .auto .divSportTile:nth-child(4n)
	{
		margin-right:20px;
	}

	.sportGroup .auto .divSportTile:nth-child(3n)
	{
		margin-right:0px;
	}
}

@media (max-width: 1200px)
{
	.sportGroup .divSportTile
	{
		height:180px;
		width:calc((100% - 60px) / 4);
	}

	.sportGroup .auto .divSportTile:nth-child(5n), .sportGroup .auto .divSportTile:nth-child(3n)
	{
		margin-right:20px;
	}

	.sportGroup .auto .divSportTile:nth-child(4n)
	{
		margin-right:0px;
	}
}

@media (max-width: 1100px)
{
	.sportGroup .divSportTile
	{
		height:160px;
	}
}

@media (max-width: 1000px)
{
	.sportGroup .divSportTile
	{
		height:190px;
		width:calc((100% - 40px) / 3);
	}

	.sportGroup .auto .divSportTile:nth-child(5n), .sportGroup .auto .divSportTile:nth-child(4n)
	{
		margin-right:20px;
	}

	.sportGroup .auto .divSportTile:nth-child(3n)
	{
		margin-right:0px;
	}
}

@media (max-width: 900px)
{
	.sportGroup .divSportTile
	{
		height:170px;
	}
}

@media (max-width: 800px)
{
	.sportGroup .divSportContainer
	{
		left:-20px;
		width:calc(100% + 40px);
	}

	.sportGroup .divSportContainer:before, .sportGroup .divSportContainer:after
	{
		width:10px;
	}

	.sportGroup .divSportScroller
	{
		padding:0px 20px;
	}

	.sportGroup .divSportTile
	{
		height:155px;
		margin-bottom:15px;
		margin-right:15px;
		width:calc((100% - 30px) / 3);
	}

	.sportGroup .auto .divSportTile:nth-child(5n), .sportGroup .auto .divSportTile:nth-child(4n)
	{
		margin-right:15px;
	}

	.sportGroup .auto .divSportTile:nth-child(3n)
	{
		margin-right:0px;
	}

	.sportGroup .divTileOverlay:after
	{
		height:80px;
		left:calc(50% - 40px);
		top:calc(50% - 55px);
		width:80px;
	}
}

@media (max-width: 700px)
{
	.sportGroup .divSportTile
	{
		height:130px;
	}

	.sportGroup .divSportLabel
	{
		font-size:40px;
	}
}

@media (max-width: 600px)
{
	.sportGroup .btnPrevious, .sportGroup .btnNext
	{
		display:none;
	}

	.sportGroup .divSportContainer
	{
		left:-15px;
		width:calc(100% + 30px);
	}

	.sportGroup .divSportContainer:before, .sportGroup .divSportContainer:after
	{
		width:5px;
	}

	.sportGroup .divSportScroller
	{
		padding:0px 15px;
	}

	.sportGroup .divSportRow:first-child
	{
		margin-top:30px;
	}

	.sportGroup .divSportTile
	{
		height:110px;
	}

	.sportGroup .divSportLabel
	{
		font-size:30px;
		left:15px;
		top:10px;
	}

	.sportGroup .divTileOverlay:after
	{
		height:60px;
		left:calc(50% - 30px);
		top:calc(50% - 45px);
		width:60px;
	}

	.sportGroup .divOverlayLabel
	{
		bottom:15px;
		font-size:14px;
		left:10px;
		right:10px;
	}
}

@media (max-width: 500px)
{
	.sportGroup .divSportTile
	{
		height:115px;
		margin-bottom:10px;
		margin-right:10px;
		width:160px;
	}

	.sportGroup .auto .divSportTile
	{
		height:95px;
		width:calc((100% - 20px) / 3);
	}

	.sportGroup .auto .divSportTile:nth-child(5n), .sportGroup .auto .divSportTile:nth-child(4n)
	{
		margin-right:10px;
	}

	.sportGroup .auto .divSportTile:nth-child(3n)
	{
		margin-right:0px;
	}

	.sportGroup .divTileOverlay:after
	{
		height:50px;
		left:calc(50% - 25px);
		top:calc(50% - 40px);
		width:50px;
	}

	.sportGroup .divOverlayLabel
	{
		bottom:10px;
		left:5px;
		right:5px;
	}
}

@media (max-width: 420px)
{
	.sportGroup .divSportTile
	{
		height:105px;
		width:140px;
	}

	.sportGroup .auto .divSportTile
	{
		height:85px;
		width:calc((100% - 20px) / 3);
	}

	.sportGroup .divSportLabel
	{
		font-size:26px;
	}

	.sportGroup .divTileOverlay:after
	{
		height:40px;
		left:calc(50% - 20px);
		top:calc(50% - 35px);
		width:40px;
	}
}

@media (max-width: 400px)
{
	.sportGroup .auto .divSportTile
	{
		height:80px;
	}
}

@media (max-width: 380px)
{
	.sportGroup .divSportTile
	{
		height:95px;
		width:130px;
	}

	.sportGroup .auto .divSportTile
	{
		height:75px;
		width:calc((100% - 20px) / 3);
	}

	.sportGroup .divSportLabel
	{
		left:10px;
		top:5px;
	}
}
