/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

.container{width:100%;margin-right:auto;margin-left:auto;padding:0 1rem}.row{margin:0 -1rem;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0%;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media only screen and (min-width:601px){.container{width:75%;margin:auto;padding:0;}.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0%;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media only screen and (min-width:993px){.container{width:90%}.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0%;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media only screen and (min-width:1112px){.container{width;85%;max-width:1100px}.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-xl{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0%;max-width:100%}.col-xl-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xl-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xl-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xl-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xl-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xl-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xl-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xl-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xl-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xl-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xl-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xl-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.start-xl{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xl{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xl{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xl{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xl{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xl{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xl{-ms-flex-pack:distribute;justify-content:space-around}.between-xl{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}

.flex {
	display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;
}

.flex-column {
	display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:column;-ms-flex-direction:column;flex-direction:column;
}

@media only screen and (max-width:600px) {
	.no-grow-sm { flex-grow: 0 }
}























:root {
	
	--clr-bg-main: #222;
	--clr-primary: #28c516;
	
	--clr-btn-primary-bg: #28c516;
	--clr-btn-primary-text: #fff;
	
	--clr-navbar-bg: #000;
	
	--fnt-main: Verdana, Helvetica, Arial, sans-serif;
	
}

.test {
	color: #28c516
}







html {
	background-color: #000;
	font-size: 62.5%;
}

body {
	background: var(--clr-bg-main);
	color: #fff;
	font-family: var(--fnt-main);
	font-size: 1.4rem;
}

* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

a {
	color: var(--clr-primary);
	text-decoration: none;
}

h1, h2, h3 {
	text-transform: uppercase;
}

.primary-text {
	color: var(--clr-primary);
}

p {
	line-height: 1.35;
}
















/* Buttons
-----------------------------------------------------*/
.btn {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	text-transform: uppercase;
	border: none;
	font-size: 1.4rem;
	line-height: 1em;
	margin: .1rem 0;
	padding: .7rem 1rem;
	border-radius: .3rem;
	background-color: var(--clr-btn-primary-bg);
	color: var(--clr-btn-primary-text);
	font-weight: bold;
	vertical-align: middle;
	cursor: pointer;
}

.btn:hover,
.btn:active {
	filter: brightness(.85);
}

.btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

@media only screen and (min-width:993px) {
	
	
	
}








.alert {
	margin: 2rem 0;
	padding: 1.5rem;
	background: #500404;
	color: #ffe7e7;
}























/* Navbar
-----------------------------------------------------*/
.navbar {
	height: 5.6rem;
	margin: 0
}

.sticky {
	-webkit-position: sticky;
	position: sticky;
	top: 5.6rem;
}

h2.sticky {
	background: black;
	padding: .5rem;
}

.navbar nav {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 5.6rem;
	line-height: 1em;
	color: white;
	background-color: var(--clr-navbar-bg);
	box-shadow: 0 2px 2px 2px rgba(0,0,0, .3);
	border-bottom: 2px solid var(--clr-primary);
}

.navbar .nav-title {
	font-size: 2.0rem;
	font-weight: 900;
	font-style: italic;
	color: var(--clr-primary);
}

.navbar .navbar-logo {
	width: auto;
	height: 2.4rem;
	vertical-align: middle;
}

.navbar .navbar-logo img {
	width: auto;
	height: 1em;
	vertical-align: text-bottom;
}

.navbar .navbar-logo strong {
	font-weight: 700;
}

@media only screen and (min-width:601px) {
	
	.navbar {
		height: 6.4rem;
	}
	
	.navbar nav {
		height: 6.4rem;
	}
	
	.navbar .navbar-logo {
		font-size: 1.55rem
	}
	
	.navbar .nav-title {
		font-size: 2.4rem;
	}
	
	.sticky {
		top: 6.4rem;
	}
	
}






/* Navbar menu
-----------------------------------------------------*/
#site-nav-menu-container {
	display: inline-block;
	position: relative;
	top: 8px
}

#site-nav-toggle {
	display: block;
	position: relative;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none
}

#site-nav-toggle input {
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
	-webkit-touch-callout: none
}

#site-nav-toggle span {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background: rgba(255,255,255, .8);
	border-radius: 3px;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		opacity 0.55s ease
}

#site-nav-toggle span:first-child {
	transform-origin: 0% 0%
}

#site-nav-toggle span:nth-last-child(2) {
	transform-origin: 0% 100%
}

#site-nav-toggle input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px)
}

#site-nav-toggle input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2)
}

#site-nav-toggle input:checked ~ span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, -1px)
}

#site-nav-menu {
	position: absolute;
	text-align: left;
	font-size: 1rem;
	width: 250px;
	border-radius: 10px;
	right: 0;
	padding: 8px 8px;
	background: rgba(0,0,0, 1);
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 100% 0%;
	opacity: 0;
	pointer-events: none;
	transform: scale(.1);
	transition: none;
	box-shadow: 0 5px 40px 15px rgba(0,0,0, .7)
}

#site-nav-menu li {
	padding: 15px 15px;
	color: #eee;
	border-radius: 8px;
	line-height: 1
}

#site-nav-menu li:hover {
	background-color: rgba(255,255,255, .18)
}

#site-nav-toggle input:checked ~ ul {
	pointer-events: auto;
	opacity: 1;
	transform: scale(1, 1);
	transition: transform .18s, opacity .25s
}

@media only screen and (min-width:601px) {
	
	#site-nav-menu-container {
		top: 10px
	}
	
}


















/* Sections
-----------------------------------------------------*/
.section {
	padding: 0
}

@media screen and (min-width: 601px) {
	
	.section {
		padding: 30px 0
	}
	
}

@media screen and (min-width: 1100px) {
	
	.section {
		padding: 40px 0
	}
	
}
















/* Headings, Text
-----------------------------------------------------*/













/* Lists
-----------------------------------------------------*/
.list-horiz {
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	margin: 0 0 4rem 0;
}

.list-horiz a {
	flex: 1;
}

.team-list {
	/*padding: .5rem;
	background: rgba(255,255,255, .9);
	border-radius: 3px;*/
}

.team-list-badge {
	display: inline-block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.team-list-badge[data-team="Arsenal"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2015/10/arsenal-fc-logo.png");
}
.team-list-badge[data-team="Aston Villa"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2014/09/aston-villa-logo.png");
}
.team-list-badge[data-team="Brentford"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2021/08/brentford-fc-logo.png");
}
.team-list-badge[data-team="Brighton"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2018/09/brighton-hove-albion-logo.png");
}
.team-list-badge[data-team="Burnley"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2018/09/burnley_fc-logo-brandlogos.net_.png");
}
.team-list-badge[data-team="Chelsea"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2011/08/chelsea-logo-vector.png");
}
.team-list-badge[data-team="Crystal Palace"] {
	background-image: url("https://upload.wikimedia.org/wikipedia/hif/c/c1/Crystal_Palace_FC_logo.png");
}
.team-list-badge[data-team="Everton"] {
	background-image: url("https://logodownload.org/wp-content/uploads/2019/04/everton-logo-escudo-0.png");
}
.team-list-badge[data-team="Leicester"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2015/10/leicester-city-fc-vector-logo-eps-svg.png");
}
.team-list-badge[data-team="Leeds"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2020/11/leeds-united-fc-logo.png");
}
.team-list-badge[data-team="Liverpool"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2011/08/liverpool-logo-vector.png");
}
.team-list-badge[data-team="Man City"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2017/05/manchester-city-fc-logo.png");
}
.team-list-badge[data-team="Man Utd"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2011/08/manchester-united-logo-vector.png");
}
.team-list-badge[data-team="Newcastle"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2014/10/newcastle-united-logo-preview.png");
}
.team-list-badge[data-team="Norwich"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2012/12/norwich-logo-vector.png");
}
.team-list-badge[data-team="Southampton"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2014/12/southampton-fc-logo.png");
}
.team-list-badge[data-team="Spurs"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2014/10/tottenham-hotspur-fc-logo.png");
}
.team-list-badge[data-team="Watford"] {
	background-image: url("https://logodownload.org/wp-content/uploads/2019/05/watford-logo.png");
}
.team-list-badge[data-team="West Ham"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2016/11/west-ham-united-fc-logo-preview.png");
}
.team-list-badge[data-team="Wolves"] {
	background-image: url("https://brandlogos.net/wp-content/uploads/2021/08/");
}









.fixture-list .fixture {
	display: flex;
	padding: .5rem 0;
}

.fixture-list .fixture:hover {
	text-decoration: none;
	color: white;
	background: rgba(255,255,255, .08);
}

.fixture-list .fixture span {
	min-width: 80px;
}
















/* Cards (UI)
-----------------------------------------------------*/
.card {
	margin: 1.5rem 0;
	padding: 1.5rem;
	border-radius: .4rem;
	background: rgba(255,255,255, .08);
}





















/* Packs
-----------------------------------------------------*/
.pack {
	position: relative;
	height: 1px;
	padding-top: 135%;
	border-radius: 1rem;
	margin: 0 0 2rem 0;
	background: rgb(190,190,190);
	background: linear-gradient(90deg, rgba(190,190,190,1) 0%, rgba(224,224,224,1) 37%, rgba(224,224,224,1) 40%, rgba(190,190,190,1) 100%);
	color: black;
}

.pack:hover {
	cursor: pointer;
}

.pack-type {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10%;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(0,0,0, .7);
}

.pack-cards {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15%;
	color: rgba(0,0,0, .9);
	font-size: 7.0rem;
	font-weight: 900;
}







/* Cards (Players)
-----------------------------------------------------*/
.player-card {
	position: relative;
	border-radius: 0;
	margin: 0 0 2rem 0;
	padding: 0 0 2em 0;
	color: white;
	background-color: black;
	font-size: 1.3rem;
	text-align: center;
	text-transform: uppercase;
}

.player-card:hover {
	box-shadow: 0px 0px 5px 2px rgba(255,255,255, .5);
}

.player-card.activated {
	box-shadow: 0px 0px 10px 5px gold;
}

.player-card.not-in-cards {
	background: black !important;
	border: 2px solid #fff;
	opacity: .35;
}

.player-card .head {
	position: relative;
	padding: 1em 0 0 0;
	background-color: rgba(0,0,0, .2);
	margin: 0 0 2em 0;
}

.player-card .photo {
	width: 36%;
	vertical-align: middle;
}

.player-card.not-in-cards .head {
	background-color: white;
}

.player-card.not-in-cards .photo {
	filter: brightness(0%);
}

.player-card .initials {
	position: absolute;
	top: .5em;
	left: .5em;
	font-size: 2.7em;
	font-weight: bold;
	margin: 0;
}

.player-card .name {
	margin: 2rem 0 0 0;
	height: 3em;
}

.player-card .name .surname {
	display: block;
	font-size: 1.7em;
	font-weight: bold;
}

.player-card .team {
	margin: 2rem 0 0 0;
	height: 3em;
}

.player-card .info {
	margin: 2rem 0 0 0;
}

.player-card .info span {
	display: block;
	line-height: 1.5
}



.player-card[data-team="Arsenal"] { color: #ffffff; background-color: #EF0107; }
.player-card[data-team="Aston Villa"] { color: #ffffff; background-color: #95BFE5; }
.player-card[data-team="Brentford"] { color: #ffffff; background-color: #0057B8; }
.player-card[data-team="Brighton"] { color: #ffffff; background-color: #000000; }
.player-card[data-team="Burnley"] { color: #ffffff; background-color: #6C1D45; }
.player-card[data-team="Chelsea"] { color: #ffffff; background-color: #034694; }
.player-card[data-team="Crystal Palace"] { color: #ffffff; background-color: #1B458F; }
.player-card[data-team="Everton"] { color: #ffffff; background-color: #003399; }
.player-card[data-team="Leicester"] { color: #ffffff; background-color: #003090; }
.player-card[data-team="Leeds"] { color: #000000; background-color: #FFCD00; }
.player-card[data-team="Liverpool"] { color: #ffffff; background-color: #C8102E; }
.player-card[data-team="Man City"] { color: #ffffff; background-color: #6CABDD; }
.player-card[data-team="Man Utd"] { color: #ffffff; background-color: #DA291C; }
.player-card[data-team="Newcastle"] { color: #ffffff; background-color: #241F20; }
.player-card[data-team="Norwich"] { color: #000000; background-color: #FFF200; }
.player-card[data-team="Southampton"] { color: #ffffff; background-color: #D71920; }
.player-card[data-team="Spurs"] { color: #ffffff; background-color: #132257; }
.player-card[data-team="Watford"] { color: #000000; background-color: #FBEE23; }
.player-card[data-team="West Ham"] { color: #ffffff; background-color: #7A263A; }
.player-card[data-team="Wolves"] { color: #000000; background-color: #FDB913; }









/* Pack modal
-----------------------------------------------------*/
.modal {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0, .6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: 10vh 0;
	display: none;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.modal.active {
	display: block;
}





















/* Lists
-----------------------------------------------------*/



















/* Forms
-----------------------------------------------------*/
.form-item {
	margin: 0 0 1.5rem;
	text-align: left;
}

.form-item label {
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255,255,255, .7);
	margin: 0 0 .5em 0;
}

.input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	border: none;
	border: 1px solid rgba(255,255,255, .3);
	background: rgba(0,0,0, .1);
	color: white;
	font-size: 1.6rem;
	padding: .8rem .8rem;
	margin: 0;
}




















/* Fixture
-----------------------------------------------------*/



/* Footer
-----------------------------------------------------*/
#site-footer {
	position: relative;
	margin: 3rem 0 0 0;
	padding: 3rem 0 1rem 0;
	background: #000;
	color: #aaa;
	font-size: .9em
}














































/* Forms */






















/* Other elements
-----------------------------------------------------*/



















/* Background colours
-----------------------------------------------------*/
.black { background-color: black !important }
.dark-violet { background-color: darkviolet !important }
.deep-pink { background-color: deeppink !important }
.green { background-color: green !important }
.indigo { background-color: indigo !important }
.orange-red { background-color: orangered !important }
.salmon { background-color: salmon !important }
.teal { background-color: teal !important }

.muted { color: #999 }




/* Align
-----------------------------------------------------*/
.align-left { text-align: left }
.align-center { text-align: center }
.align-right { text-align: right }
.float-left { float: left }
.float-right { float: right }




/* Opacities
-----------------------------------------------------*/
.opacity-5 { opacity: .5 }















/* Display
-----------------------------------------------------*/
.hide { display: none !important }
@media only screen and (max-width:600px) {
	.hide-on-sm { display: none; }
	.not-sm { display: none !important; }
}
@media only screen and (min-width:601px) {
	.only-sm { display: none !important; }
}
@media only screen and (min-width:601px) and (max-width:992px) {
	.hide-on-md { display: none; }
}
@media only screen and (min-width:993px) and (max-width:1111px) {
	.hide-on-lg { display: none; }
}
@media only screen and (min-width:1112px) {
	.hide-on-xl { display: none; }
}