@font-face {
	font-family: 'Balatro';
	src: url('balatro.otf.woff2') format('woff2');
}

html{
	overflow-y: scroll;
}

body:before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: url('bg.jpg') 75%;
	background-size: cover;
	opacity: .2;
	content: "";
	z-index: -1;
}

body {
	background-color: #313946;
	font-family: 'Balatro' !important;
}

.bg-fixture {
	background: repeating-linear-gradient(
		-45deg,rgba(40, 46, 58, 0.5),
		rgba(40, 46, 58, 0.5) 10px,
		rgba(40, 46, 58, 0.2) 10px,
		rgba(40, 46, 58, 0.2) 15px
	);
}

#fixture-main {
	margin-top: 1rem;
}

.badge {
	border-radius: 0px;
}

.btn:focus, .btn:active {
	outline: 0 !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

.daytitle {
	text-align: center;
	padding-top: 3rem;
	padding-bottom: .6rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.8);
}

#weeks-col {
	background: rgba(3, 3, 3, 0.1);
	text-align: center;
	overflow-y: hidden;
}

#weeksup a, #weeksdown a {
	text-decoration: none;
	color: #fff;
}

#weeksup {
	background-color: #059cfa;
}

#weeksdown {
	background-color: #fe5f54;
}

.weeks-nav span {
	cursor: pointer;
	background-color: #059cfa;
	color: #333;
}

.weeks-title, .weeks {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
}

.weeks-title {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 7px;
}

.weeks {
	padding-top: 5px;
	padding-bottom: 10px;
}

.week {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(-45deg, transparent 10%, rgba(0, 0, 0, 0.2) 10%);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 3px;
	padding: 2px;
	cursor: default;
	margin-top: 6px;
}

.week a {
	cursor: pointer;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.5);
}

.week:hover, .week-active {
	background: linear-gradient(-45deg, transparent 20%, #fe5f54 20%);
}

.week:hover a, .week a:hover, .week-active a {
	color: rgba(0, 0, 0, 1);
}

.btn-lightblue {
	background-color: #fe5f54;
	color: #fff;
	border-color: #fe5f54;
}

.btn-lightblue:hover {
	background-color: #059cfa;
	border-color:  #059cfa;
}

/* DIVISON ARROWHEAD */
.btn-accordion-a {
	background-color: #059cfa;
	color: #EFEFEF !important;
	opacity: 0.9;
}

.btn-accordion-a:hover {
	background-color: #059cfa;
	opacity: 1;
}

/* DIVISION BLOODSTONE */
.btn-accordion-b {
	background-color: #fe5f54;
	color: #EFEFEF !important;
	opacity: 0.9;
}

.btn-accordion-b:hover {
	background-color: #fe5f54;
	opacity: 1;
}

.bg-title {
	padding-right: 10rem !important;
	background: linear-gradient(-45deg, transparent 3.3rem, #059cfa 3.3rem);
	white-space: nowrap;
}

.bg-description {
	padding-right: 8rem !important;
	background: linear-gradient(-45deg, transparent 3.5rem, #fe5f54 3.5rem);
	box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.4);
	white-space: nowrap;
}

.w-auto {
	width: auto;
	display: inline-block;
}

#mobile-weeks {
	display: none;
}

.accordion-item {
	background: transparent;
}

.accordion-item .col {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

.badge.border.mx-2 {
	background-color: #666 !important;
}

.col {
	cursor: default;
}

.col a {
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}

.al {
	padding-top: 0;
	padding-bottom: 4px;
	background-color: #fe5f54 !important;
}

.al span {
	font-size: 16px;
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 768px) {
	.bg-title {
		padding-right: 10px !important;
		background: #059cfa !important;
		border-radius: 5px 5px 5px 0;
	}

	.bg-description {
		border-radius: 0 0 0 5px;
	}

	.bg-title h1 {
		font-size: 18px !important;
	}

	.bg-description h2 {
		font-size: 14px !important;
	}

	.daytitle {
		padding-top: 1.6rem;
	}

	.accordion-header .col,
	.accordion-content .col,
	.accordion-header .col-auto,
	.accordion-content .col-auto {
		white-space: nowrap;
		font-size: 11px;
	}

	#normal-weeks {
		display: none;
	}

	#mobile-weeks {
		display: block;
	}

	.dropdown .btn {
		font-size: 12px;
		font-weight: 300;
	}

	.dropdown-menu {
		min-width: inherit;
		height: 250px;
		overflow-y: scroll;
		text-align: center;
	}

	ul.dropdown-menu li a {
		padding-right: 25px !important;
		padding-left: 25px !important;
	}

	ul.dropdown-menu li a.active, ul.dropdown-menu li a:focus {
		color: #333 !important;
		background-color: #fe5f54 !important;
	}

	#mll {
		display: none;
	}
}