/***** Eric Meyer CSS Reset Minified ******/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


/*************** NPL COLOR GUIDE *****************
Color Guide:
2023 Red: 				BG: #7a1720, ICON: #d8b9bc
2019 Purple:			BG: #632D63, TEXT: #D0C0D0
2018 Orange:     	BG: #CC6600, TEXT: White
*****************   end   *****************/

:root {
    --h-color: #7a1720;
    --icon-color: #d8b9bc;
    --header-color: #7a1720;
}

html,body  {
	height:100%;
	width:100%;
	margin:0;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	font-size:18px;
	line-height:1.4;
	font-family:'Josefin Slab',serif
}

hr {
	height: 2px;
	background-color: var(--h-color);
	border: none;
}

p {
	margin: 10px 0;
}
	
h1 {
	font-size: 1.5em;
	margin: 10px 0;
}

h1,h2,h3,h4,h5,h6,.navbar-brand {
	color: var(--h-color);
	font-family:'Acme',sans-serif;
	letter-spacing:.15em;
	margin: 10px 0;
}

strong {
	font-family:'Orbitron',sans-serif;
	letter-spacing:.08em;
	font-size:.8em;
	color: var(--header-color);
	font-weight: 700;
}

.links {
	float:right;
	list-style:none
}

.links li {
	line-height:55px;
	display:inline-block;
	text-decoration:none;
	margin:10px 5px 0 5px}

.links li a .glyphicon {
	color:var(--icon-color) !important}

@media screen and (max-width:700px) {
.links {
	padding:0}
}

.panel-heading h4 {
	color: var(--icon-color);
	text-transform:uppercase}

.panel-footer {
	background-color: var(--icon-color) !important;
	color: var(--header-color);
	font-weight:800;
	padding:15px}

.navbar-brand {
	color:var(--icon-color) !important}

.navbar {
	margin-bottom:0;
	border-radius:0;
	background-color: var(--header-color) !important}

.banner-small {
	max-height: 600px;
	width: auto;
}


.herewego {
	background-color:var(--header-color);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:25px;
	margin:25px 0;
}

.herewego img {
	max-width:650px;
}

.herewego h3 {
	color: white;
	margin: 1rem;
}


.ph-custom {
	background-color:var(--header-color) !important}

.joshotron {
	background: -webkit-linear-gradient(var(--icon-color) 40%, var(--header-color) 100%);
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.my-banner {
	background-color:var(--header-color) !important;
	height:100px;
	text-align:center;
	overflow:visible;
	margin:30px 0}

.my-banner span {
	line-height:100px;
	font-size:65px;
	text-transform:uppercase;
	font-weight:900;
	margin-top:5px;
	color: var(--icon-color)}

#games,#basics,#top {
height:50px}

@media screen and (max-width:700px) {
	#games,#basics,#top {
		height:35px
	}
	
	.my-banner span {
		font-size:45px}
	
	.herewego {
		margin:30px 0;
		min-height:200px}
	
	.herewego img {
		width:100%;
		border-left:none;
		border-right:none}
		
	.banner-big {
		display:none}
		
	.banner-small {
		margin-top:100px;
		display:block;
		width:100%}
	
	.navbar-brand {
		font-size:14px !important;
		}
}

.panel-body::-webkit-scrollbar {
	width:12px}

.panel-body::-webkit-scrollbar-track {
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}

.panel-body::-webkit-scrollbar-thumb {
	border-radius:10px;
	background-color:#71A0CB;
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}


@media screen and (min-width:992px) {
	.equal,.equal>div[class*='col-'] {
		display:-webkit-flex;
		display:flex;
		flex:1 1 auto}
	
	.panel-body.game {
	height:350px;
	max-height:350px !important;
	overflow-y:scroll}
}

.footer {
	margin-top:50px;
	background-color:var(--header-color);
	color:var(--icon-color);
	text-align:center}

.my-foot {
	height:200px;
	font-size:1.25em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center}