@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
  --primary-gradient: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
  --secondary-gradient: linear-gradient(135deg, #42e695 0%, #3bb2b8 100%);
  --accent-gradient: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  --success-gradient: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --border-color: rgba(226, 232, 240, 0.8);
  --surface: #fff;
  --btn-primary-fg: #ffffff;
  --btn-alt-fg: #ffffff;
  --link-fg: #6e48aa;
  --header-fg: var(--text-secondary);
  --footer-fg: var(--text-muted);
	--hue: 223;
	--bg: hsl(var(--hue),10%,80%);
	--fg: hsl(var(--hue),10%,10%);
	--trans-dur: 0.3s;
  --media-height: 260px;
  --top:0px;
  --top325:325px;
}
@media (max-width: 900px) {
  :root {
    --media-height: 220px;
  }
}
@media (max-width: 560px) {
  :root {
    --media-height: 180px;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}
body {
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.jfeatures {
	text-align: left;
}
.jfeatures ul {
	display: flex;
}
.jfeatures ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	cursor: pointer;
	width: 47px;
	height: 47px;
	border: 2px solid blueviolet;
	border-radius: 50%;
	color: blueviolet;
	transition: all 0.3s ease;
}
.jfeatures ul li:first-child {
	margin-left: 0;
}
.jfeatures ul li:hover {
	background: blueviolet;
	color: #fff;
}
ul li:is(:hover, .active) {
	background: blueviolet;
	color: #fff;
}
ul .jspeech.active {
	pointer-events: none;
}
.dashboard-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dashboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  //background: var(--primary-gradient);
  background-image: url("../load-static/logo-s.png");
	background-repeat: no-repeat;
	background-size: cover;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
}
.brand-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--header-fg);
}
.tagline {
  margin-left: auto;
  color: var(--header-fg);
  font-weight: 600;
  white-space: nowrap;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}
.widget {
  background: var(--card-bg);
  border-radius: 15px;
  padding: 15px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 440px;
}
.widget-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.content {
  min-height: 130px;
  display: grid;
  place-items: center;
  text-align: center;
}
.widget.wide {
  grid-column: span 2;
}

.widget.widebp {
  grid-column: span 3;
  min-height:650px;
}
@media (max-width: 900px) {
  .widget.wide {
    grid-column: 1 / -1;
  }
  .widget.widebp {
    grid-column: 1 / -1;
  }
}
.widget-title.with-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.widget-title.with-actions .title-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.widget-title.with-actions .title-actions .btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}
.widget-title.with-actions .title-actions select {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-primary);
}
@media (max-width: 615px) {
  .dashboard-container {
    padding: 0;
  }
  .widget {
  	border-radius: 1px;
  }
}
.weather-graphic {
  width: 100%;
  height: 110px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.9)
  );
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  overflow: hidden;
}
.weather-graphic .wg-emoji {
  font-size: 46px;
  line-height: 1;
}
.weather-graphic .wg-svg {
  width: 90%;
  height: auto;
  display: block;
}
.media-box {
  width: 100%;
  height: var(--media-height);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: grid;
}
.media-img,
.media-img.skeleton {
  width: 100%;
  height: 100% !important;
  grid-area: 1 / 1;
}
.media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  justify-content: flex-end;
  align-items: center;
}
.btn {
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.btn:active {
  transform: translateY(0);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--primary-gradient);
  color: var(--btn-primary-fg);
  border-color: transparent;
}
.btn.alt {
  background: var(--secondary-gradient);
  color: var(--btn-alt-fg);
  border-color: transparent;
}
.btn.special {
  background-color: #F505AE;
  color: var(--btn-primary-fg);
  border-color: transparent;
}
.btn.icon {
  width: 44px;
  display: grid;
  place-items: center;
}
.input,
select {
  width: 100%;
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
}
.input:focus,
select:focus {
  outline: none;
  border-color: rgba(110, 72, 170, 0.35);
  box-shadow: 0 0 0 4px rgba(110, 72, 170, 0.1);
}
.muted {
  color: var(--text-muted);
  font-size: 13px;
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: #edf2f7;
  border-radius: 12px;
  width: 100%;
  height: 140px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.credit.small {
  margin: 4px auto 0;
  text-align: center;
  color: var(--footer-fg);
  font-size: 12px;
}
a {
  color: var(--link-fg);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.cur-grid {
  display: grid;
  grid-template-areas: "amount" "row" "submit";
  gap: 8px;
}
#cur-amount {
  grid-area: amount;
}
.cur-row {
  grid-area: row;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 8px;
}
.cur-submit {
  grid-area: submit;
  justify-self: end;
}
.gh-search {
  margin-top: auto;
  justify-content: flex-end;
}
.movies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}
.movie-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.movie-card img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}
.movie-card .mc-body {
  padding: 8px;
  font-size: 13px;
}
.palettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
.palette-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.palette-title {
  font-weight: 600;
  font-size: 14px;
}
.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.swatch {
  position: relative;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.swatch:hover .copy {
  opacity: 1;
}
.copy {
  position: absolute;
  right: 6px;
  top: 6px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid var(--border-color);
  opacity: 0;
  transition: opacity 0.15s;
}
.hex {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}
.palette-fixed {
  min-height: 340px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
}
.palette-fixed .palettes {
  max-height: 180px;
  overflow: hidden;
}
.palette-fixed .controls {
  margin-top: auto;
}
#palette-apply.applied {
  box-shadow: 0 0 0 3px rgba(66, 230, 149, 0.35);
}
z {
  font-family: "Font Awesome 5 Free";
	display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: blue;
  margin-bottom: 20px;
}
z:before {
  content: "\f10d";
  margin: 3px 10px 0 0;
  font-weight: 900;
  color: gray;
}
z:after {
  content: "\f10e";
  margin: 0 0 3px 10px;
  font-weight: 900;
  color: gray;
}
@media only screen and (max-width: 480px) {
  z {
    font-size: 20px;
  }
}
.wafeatures {
	display:none;
}
.wafeatures ul {
	display: flex;
}
.wafeatures ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	cursor: pointer;
	width: 47px;
	height: 47px;
	border: 2px solid blueviolet;
	border-radius: 50%;
	color: blueviolet;
	transition: all 0.3s ease;
}
.wafeatures ul li:first-child {
	margin-left: 0;
}
.wafeatures ul li:hover {
	background: blueviolet;
	color: #fff;
}
ul li:is(:hover, .active) {
	background: blueviolet;
	color: #fff;
}
ul .speech.active {
	pointer-events: none;
}
.weathercard {
	position: relative;
	overflow: hidden; /* Ensure vertical scrolling */
	height: 100%;
	width: 100%;
	margin: auto;
	border: none;
	border-radius: 32px;
	display:none;
}
.sun,
.moon {
	position: absolute;
	left: 50%;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	transform-origin: 0px 220px;
	transition: all 1s;
	transform: rotate(-90deg); /* Initial rotation of -90 degrees */
}
.sun {
	bottom: 300px;
	background: #fceabb;
	box-shadow: 0px 0px 40px 15px #fceabb;
	opacity: 1;
}
.moon {
	bottom: 250px;
	background: url("../load-weather/moon.jpg");
	background-size: contain;
	box-shadow: 0px 0px 20px 5px #ffffff;
	opacity: 0;
}

@keyframes rise-set {
	0% {
		transform: rotate(-90deg);
	}
	100% {
		transform: rotate(90deg);
	}
}
.hours-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	backdrop-filter: blur(20px);
}
.hours {
	display: flex;
	padding: 8px;
}
.hours-container {
	scroll-behavior: smooth;
}
.hour {
	padding: 5px 10px;
	cursor: pointer;
	margin: 2px;
	transition: background-color 0.3s ease;
	border-radius: 16px;
	height: 107px;
	min-width: 80px;
	text-align: center;
}
.hour:hover {
	background-color: rgba(255, 255, 255, 0.3);
}
.weatheractive {
	background-color: rgba(255, 255, 255, 0.7);
}
.weatherlast {
	min-width: 150px;
}
.weatherbackground {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, #fefefe 0%, #00a4e4 74%);
	z-index: 0;
	transition: all 2s linear;
}
.weatherbackgroundNight {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, #4c5177 0%, #051428 74%);
	z-index: -1;
	transition: all 2s linear;
}
.weathercard,
.weathercard-body {
	background: transparent !important;
	padding: 0;
}
.rain {
	width: 100%;
	height: 100%;
	opacity: 0;
}
.weatherdrop {
	background: -webkit-gradient(
		linear,
		0% 0%,
		0% 100%,
		to(rgba(255, 255, 255, 0.6)),
		from(rgba(255, 255, 255, 0))
	);
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255, 0.6) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	width: 1px;
	height: 30px;
	position: absolute;
	bottom: 0px;
	-webkit-animation: fall 0.3s linear infinite;
	-moz-animation: fall 0.3s linear infinite;
}
@-webkit-keyframes fall {
	to {
		margin-top: 500px;
	}
}
@-moz-keyframes fall {
	to {
		margin-top: 500px;
	}
}
.temperature {
	position: absolute;
	z-index: 2;
	right: 24px;
	top: 24px;
	text-align: right;
	font-size: 40px;
	font-weight: 600;
}
.weatherType {
	position: absolute;
	z-index: 2;
	right: 24px;
	top: 72px;
	text-align: right;
	font-size: 16px;
	line-height: 34px;
	text-transform: capitalize;
}
.currentDay {
	position: absolute;
	z-index: 2;
	left: 8px;
	bottom: 144px;
	text-align: left;
	font-size: 16px;
	line-height: 34px;
}
.hour span {
	position: relative;
	display: flex;
	text-align: center;
	color: black;
}
.hour .timeSpan {
	font-size: 14px;
	font-weight: 300;
}
.hour .tempSpan {
	font-size: 14px;
	font-weight: 700;
}
.hour:last-child::after {
	width: 300px;
	height: 1px;
	content: "";
}
.hour .material-symbols-rounded {
	font-size: 32px;
	line-height: 40px;
}
.hour[data-weather="sunny"] .material-symbols-rounded::after {
	content: "sunny";
}
.hour[data-weather="clear-night"] .material-symbols-rounded::after {
	content: "clear_night";
}
.hour[data-weather="partly-cloudy"] .material-symbols-rounded::after {
	content: "partly_cloudy_day";
}
.hour[data-weather="partly-cloudy-night"] .material-symbols-rounded::after {
	content: "partly_cloudy_night";
}
.hour[data-weather="cloudy"] .material-symbols-rounded::after {
	content: "cloud";
}
.hour[data-weather="foggy"] .material-symbols-rounded::after {
	content: "foggy";
}
.hour[data-weather="rainy"] .material-symbols-rounded::after {
	content: "rainy";
}
.hour[data-weather="snowy"] .material-symbols-rounded::after {
	content: "ac_unit";
}
.hour[data-weather="thunderstorm"] .material-symbols-rounded::after {
	content: "thunderstorm";
}
.weathercard {
	color: black;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
		rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	border: none;
}
.credit {
	box-shadow: none;
	border-radius: 0;
}
#cloud {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	filter: brightness(200%) drop-shadow(0 0 10px rgba(255, 255, 255, 01));
	top: 0;
	transition: all 2s;
}
#snow {
	opacity: 0;
	top: 0;
	position: absolute;
	pointer-events: none;
	z-index: 0;
	width: 100%;
	height: 100%;
	transition: all 2s;
}
#rain {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	transition: all 2s;
}
#lightning {
	position: absolute;
	top: -200px;
	left: 0;
	width: 100%;
	height: 150%;
	background: radial-gradient(
		closest-side,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.5)
	);
	opacity: 0;
	pointer-events: none;
	animation: lightningFlash var(--lightning-duration) linear infinite;
}
@keyframes lightningFlash {
	0%,
	100% {
		opacity: 0;
	}
	24% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	26% {
		opacity: 0;
	}
	28% {
		opacity: 1;
	}
	29% {
		opacity: 0;
	}
}
.bpplaym {
	height: 100%;
	display:none;
}
.bpmlobby {
	
}
.bpmfinished {
	display:none;
}
.bpmcloselob {
	display:none;
}
.bpmstart {
	position: relative;
	display:none;
}
#bpongm {
    height: 100%;
}
#pbscoremaddm {
	width: 50%;
	margin: 0 auto;
	position: relative;
	display:none;
}
.pbaddscore {
	float: right;
	margin-top: 5px;
}
.bpmplayerinfo {
	margin-bottom: 50px;
}
#bpreshootm, #bprestartm, #bpstartm, #bpmcurplayer {
	margin: 12rem auto;
	font-size: 2rem;
	padding: 1rem 2rem;
	display: none;
}
#bpmcurplayer {
	display:block;
}
#bpstartm {
	display:block;
}
#bptimerm {
	display:none;
}
#bpreshootm:hover, #bprestartm:hover{
	cursor: pointer;
	background-color: black;
	color: yellow;
}
#bptimem {
	margin: auto;
	display: block;
	text-align: center;
	font-size: 3rem;
	font-family: sans-serif;
	font-weight: bold;
}
#bptimem {

}
.bpbpcupmsm {
	margin: auto; 
	width: 420px;
	margin-top:50px;
}
.bpbpcupmsmm {
	margin: auto; 
	width: 4200px;
	margin-top:50px;
}
.bpcupm {
	width: 100px;
	position: relative;
}
.bprowm2 {
	margin-top: -10rem;
	margin-left: 55px;
}
.bprowm3 {
	margin-top: -10rem;
	margin-left: 105px;
}
.bprowm4 {
	margin-top: -10rem;
	margin-left: 160px;
}
.bpcupm5 {
	top:5rem;
}
.bpcupm6 {
	top:5rem;
}
.bpcupm7 {
	top:5rem;
}
.bpcupm8 {
	top: 10rem;
}
.bpcupm9 {
	top: 10rem;
}
.bpcupm10 {
	top: 15rem;
}
.bpballm {
	width: 50px;
	height: 50px;
	position: relative;
}
.bpshooterm {
	position: relative;
	top: 425px;
	width: 100%;
	display: grid;
	place-items: center;
}
.bpshootXm {
	animation: bpshootXm 1s infinite linear;
}
@keyframes bpshootXm {
	0%{left:0px}
	25%{left:210px}

	75%{left:-210px}
	100%{left:0px}
}
.bpshootYm {
	animation: bpshootYm 1s infinite linear;
}
@keyframes bpshootYm {
	0%{top:0px}
	50%{top:-195px}
	100%{top:0px}
}
.bpmfadeAwaym {
	animation: bpmfadeAwaym 1s;
	opacity: 0
}
@keyframes bpmfadeAwaym {
	0%{opacity: 1}
	100%{opacity: 0}
}
.bpmarginTopm {
	animation: bpmarginTopm 1s;
	animation-timing-function: ease;
}
@keyframes bpmarginTopm {
	0%{top: var(--top)}
	100%{top: var(--top325)}
}
.bpmp-1 {
	fill: #ff1d25;
}
.bpmp-2 {
	fill: #241dff;
}
.bpm-1,.bpm-2 {
	stroke: #000;
	stroke-miterlimit: 10;
	stroke-width: 17px;
}
.bpm-2 {
	fill: #fff;
}

#bpmtitle {
	font-size: 5vw;
	text-align: center;
	animation: bpmwobble 3s infinite;
}
@keyframes bpmwobble{
	0%{transform: rotate(-5deg);}
	50%{transform: rotate(5deg);}
	100%{transform: rotate(-5deg);}
}
.bpmbutton {
	font-size: 5vmin;
	padding: 10px;
	border: 2px solid black;
	width: 50vw;
	margin: 10px;
	cursor: pointer;
	text-align:center;
	transition: transform .2s;
	border-radius: 10px;
	position: relative;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bpmbutton:hover {
	
}
#bpinput{
	height: 100%;
	width: 45vw;
	font-size: 24px;
	text-align: center;
	outline: none;
	border: none;
	text-transform: uppercase;
}
.bpmh {
	margin-top: 44px;
	display:none;
	position: relative;
}
.bpms {
	margin-top: 100px;
}
#bpmfinishedt {
	font-size: 80px;
	text-shadow: 0 0 10px black;
	text-align: center;
	margin-bottom: 50px;
}
#bpmcode {
	font-size: 80px;
	text-shadow: 0 0 10px black;
	text-align: center;
	margin-bottom: 50px;
}
#bpmplayers {
	box-sizing: border-box;
	font-size: 30px;
	color: #888;
	text-align: center;
}
#bpmlobinfo {
	border-top: 1px solid #888;
	box-sizing: border-box;
	font-size: 14px;
	color: #888;
	text-align: center;
	margin-top: 10px;
  padding-top: 10px;
}
.bpmflash {
	animation-name: bpmflash;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}
@keyframes bpmflash {
	0%{fill:#ff1d25}
	50%{fill:#241dff}
	100%{fill: #ff1d25}
}
.bpmhelplines {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.bpmhelpline {
	display:none;
	position: relative;
	border-top: 1px dotted black;
	height: 2px;
}
.bpmhelpline1 {
	top: 50px;
	width: 10px;
	margin-left: 27px;
}
.bpmhelpline2 {
	top: 100px;
	width: 20px;
	margin-left: 22px;
}
.bpmhelpline3 {
	top: 150px;
	width: 30px;
	margin-left: 17px;
}
.bpmhelpline4 {
	top: 200px;
	width: 40px;
	margin-left: 12px;
}
.bpplay {
	
}
#bpong {
    /*overflow-x: hidden;*/
    display: block;
    height: 100%;
}
#pbscoreadd {
	width: 50%;
	margin: 0 auto;
	position: relative;
	display:none;
}
.pbaddscore {
	float: right;
	margin-top: 5px;
}
#bpreshoot, #bprestart, #bpstart {
	margin: 10rem auto;
	font-size: 2rem;
	padding: 1rem 2rem;
	display: none;
}
#bpstart {
	display:block;
}
#bptimer {
	display:none;
}
#bpreshoot:hover, #bprestart:hover{
	cursor: pointer;
	background-color: black;
	color: yellow;
}
#bptime {
	margin: auto;
	display: block;
	text-align: center;
	font-size: 3rem;
	font-family: sans-serif;
	font-weight: bold;
}
#bptime {

}
/*
#bptime::after {
	content: " seconds";
}
*/
.bpbpcups {
	margin: auto; 
	width: 310px;
	margin-top:50px;
}
.bpbpcupsm {
	margin: auto; 
	width: 4200px;
	margin-top:50px;
}
.bpcup {
	width: 100px;
	position: relative;
}
.bprow2 {
	margin-top: -10rem;
	margin-left: 50px;
}
.bprow3 {
	margin-top: -10rem;
	margin-left: 100px;
}
.bpcup4 {
	top:5rem;
}
.bpcup5 {
	top:5rem;
}
.bpcup6 {
	top: 10rem;
}
.bpball {
	width: 50px;
	height: 50px;
	position: relative;
}
.bpshooter {
	position: relative;
	top: 375px;
	//left: 125px;
	//width: 300px;
	//margin: auto;
	
	width: 100%;
	display: grid;
	place-items: center;
}
.bpshootX {
	animation: bpshootX 1s infinite linear;
}
@keyframes bpshootX {
	0%{left:0px}
	25%{left:125px}
	50%{left:0px}
	75%{left:-125px}
	100%{left:0px}
}
.bpshootY {
	animation: bpshootY 1s infinite linear;
}
@keyframes bpshootY {
	0%{top:0px}
	50%{top:-175px}
	100%{top:0px}
}
.bpfadeAway {
	animation: bpfadeAway 1s;
	opacity: 0
}
@keyframes bpfadeAway {
	0%{opacity: 1}
	100%{opacity: 0}
}
.bpmarginTop {
	animation: bpmarginTop 1s;
	animation-timing-function: ease;
}
@keyframes bpmarginTop {
	0%{top: var(--top)}
	100%{top: var(--top325)}
}
.beerload {
	disbeerloaday: block;
	margin: auto;
	width: 16em;
	height: auto;
}
.beerload__bottles,
.beerload__bottle--bounce,
.beerload__bottle--in,
.beerload__bottle--out,
.beerload__cap--on,
.beerload__fill--full,
.beerload__fill--half,
.beerload__fill--startle1,
.beerload__fill--startle2,
.beerload__rod {
	animation: move-right 0.6s linear infinite;
}
.beerload__bottle {
	transform-origin: 8px 56px;
}
.beerload__bottle--bounce {
	animation-name: bounce;
}
.beerload__bottle--in,
.beerload__bottle--out {
	animation-name: fade-in;
}
.beerload__bottle--in {
	opacity: 0;
}
.beerload__bottle--out {
	animation-direction: reverse;
}
.beerload__bottle--out ~ .beerload__bottle {
	opacity: 0;
}
.beerload__bottle-glass,
.beerload__cap,
.beerload__rod {
	stroke: hsl(var(--hue),10%,30%);
}
.beerload__bottle-glass {
	fill: hsla(var(--hue),10%,30%,0.05);
	transition:
		fill var(--trans-dur),
		stroke var(--trans-dur);
}
.beerload__bottle-glare {
	stroke: hsl(0,0%,100%);
}
.beerload__cap,
.beerload__rod {
	transition: stroke var(--trans-dur);
}
.beerload__cap {
	fill: hsl(0,0%,100%);
}
.beerload__cap--on {
	animation-name: cap-on;
	animation-timing-function: ease-in;
}
.beerload__fill {
	fill: hsla(43,90%,50%,0.8);
	stroke: hsl(43,90%,95%);
	stroke-width: 4px;
}
.beerload__fill--full {
	animation-name: fill-up-full;
}
.beerload__fill--half {
	animation-name: fill-up-half;
}
.beerload__fill--startle1 {
	animation-name: fill-startle1;
}
.beerload__fill--startle2 {
	animation-name: fill-startle2;
}
.beerload__rod {
	animation-name: down-up;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,20%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.beerload__bottle-glass,
	.beerload__cap,
	.beerload__rod {
		stroke: hsl(var(--hue),10%,50%);
	}
	.beerload__bottle-glass {
		fill: hsla(var(--hue),10%,50%,0.05);
	}
}
/* Animations */
@keyframes bounce {
	from,
	50%,
	to {
		animation-timing-function: ease-out;
		transform: translate(56px,0) scale(1,1);
	}
	66.7% {
		animation-timing-function: ease-in;
		transform: translate(56px,0) scale(1.1,0.9);
	}
	83.3% {
		animation-timing-function: ease-out;
		transform: translate(56px,0) scale(0.95,1.05);
	}
}
@keyframes cap-on {
	from { transform: translate(0,0); }
	50%,
	to { transform: translate(0,23px); }
}
@keyframes fill-startle1 {
	from { transform: translate(0,8px); }
	to { transform: translate(-20px,8px); }
}
@keyframes fill-startle2 {
	from { transform: translate(-20px,8px); }
	25% { transform: translate(-30px,8px); }
	to { transform: translate(0,8px); }
}
@keyframes fill-up-half {
	from { transform: translate(-30px,56px); }
	to { transform: translate(-15px,32px); }
}
@keyframes fill-up-full {
	from { transform: translate(-15px,32px); }
	to { transform: translate(0,8px); }
}
@keyframes move-right {
	from { transform: translate(0,24px); }
	to { transform: translate(28px,24px); }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes down-up {
	from,
	to {
		animation-timing-function: ease-in;
		transform: translate(0,0);
	}
	50% {
		animation-timing-function: ease-out;
		transform: translate(0,24px);
	}
	66.7% {
		animation-timing-function: ease-in;
		transform: translate(0,31px);
	}
}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.track{
    width:2px;
    margin-right:5px;
    background:rgba(0,0,0,0);
    transition:background 250ms linear;
}
.track:hover,
.track.dragging{
    background:#d9d9d9;
    background:rgba(0,0,0,.15);
}
.handle{
    right:0;
    width:2px;
    background:#999;
    transition:width 250ms;
    background:rgba(255,255,255,.2);
}
.mhn-player{
	position:relative;
}
.mhn-player .album-art,
.mhn-player .album-thumb{
	background:url('../load-static/logo-s.png') no-repeat center / 50%;
}
.mhn-player .album-art{
	height:330px;
	overflow:hidden;
	position:relative;
}
.mhn-player .album-art img{
	width:100%;
	display:block;
}
.mhn-player .album-art:before{
	top:30px;
	left:50%;
	width:200px;
	content:'';
	font-size:72px;
	font-weight:600;
	position:absolute;
	margin-left:-100px;
	color:rgba(255,255,255,.4);
}
.mhn-player .album-art:after{
	top:0;
	left:0;
	content:'';
	width:inherit;
	height:inherit;
	position:absolute;
	background:linear-gradient(to bottom, rgba(0,0,0,.2),  rgba(0,0,0,1));
}
.mhn-player .album-art img{
	width:100%;
	position:relative;
}
.mhn-player .album-art.blur img{
	-webkit-filter:blur(3px);
	-moz-filter:blur(3px);
	filter:blur(3px);
}
.mhn-player a{
	color:inherit;
	text-decoration:none;
}
.mhn-player .play-list{
	top:15px;
	left:15px;
	right:15px;
	display:none;
	bottom:150px;
	overflow-y:auto;
	position:absolute;
	width:auto!important;
	background:rgba(0,0,0,.8);
	padding-right:1px!important;
	z-index: 10;
}
.mhn-player .play-list a{
	color:#ccc;
	display:block;
	overflow:hidden;
	padding:6px 10px;
	white-space:nowrap;
	text-overflow:ellipsis;
	transition:all .4s ease-in-out 0s;
}
.mhn-player .play-list a:hover{
	background:rgba(255,255,255,.2);
}
.mhn-player .play-list a.active{
	color:#2ecc71;
}
.mhn-player .play-list .album-thumb{
	width:35px;
	height:35px;
	overflow:hidden;
	margin-right:10px;
}
.mhn-player .play-list .album-thumb img{
	width:100%;
	display:block;
}
.mhn-player .play-list .songs-info{
	text-shadow:0 2px 2px #000;
}
.mhn-player .play-list .songs-info .song-title{
	font-size:14px;
}
.mhn-player .play-list .songs-info .songs-detail{
	font-size:13px;
	overflow:hidden;
	text-overflow:ellipsis;
}
.mhn-player .current-info{
	left:30px;
	right:30px;
	color:#FFF;
	bottom:160px;
	margin-left:-15px;
	margin-right:-15px;
	position:absolute;
	text-shadow:0 2px 4px #000;
}
.mhn-player .current-info>div{
	margin-top:10px;
}
.mhn-player .current-info .song-title{
	font-size:24px;
	margin-top:10px;
	font-weight:400;
}
.mhn-player .current-info .fa{
	min-width:30px;
	font-size:18px;
	text-align:center;
	font-weight:normal;
}
.mhn-player .controls{
	margin-top:30px;
	position:relative;
}
.mhn-player .controls .toggle-play-list{
	right:5px;
	width:40px;
	color:#ccc;
	height:40px;
	bottom:100px;
	border-radius:50%;
	line-height:40px;
	text-align:center;
	background-color:crimson;
}
.mhn-player .controls .fa-pp:before{
	content:'\f04b';
}
.mhn-player .controls .active .fa-pp:before{
	content:'\f04c';
}
.mhn-player .controls .progress{
	height:1px;
	margin:15px 0;
	position:relative;
	background:#262626;
}
.mhn-player .controls .duration{
	color:#ccc;
	font-size:14px;
	width: 99%;
}
.mhn-player .controls .progress .bar{
	width:0;
	display:block;
	height:inherit;
	background:#bc3958;
	box-shadow:0 0 5px 0 #bc3958;
}
.mhn-player .controls .action-button a{
	width:40px;
	height:40px;
	font-size:16px;
	margin-right:5px;
	border:2px solid;
	line-height:35px;
	border-radius:50%;
	text-align:center;
	display:inline-block;
}
.mhn-player .controls .action-button a:hover,
.mhn-player .controls .action-button a.active{
	color:#ccc;
}
.mhn-player .controls .action-button a .fa{
	font-size:inherit;
}
.volume{
	height:10px;
	width:100px;
	margin:0 10px;
	font-size:14px;
	cursor:pointer;
	display:inline-block;
	-webkit-appearance:none;
	background:transparent;
}
.volume::-webkit-slider-runnable-track{
	height:.5em;
	background:#d8d8d8;
	border-radius:.25em;
	-webkit-appearance:none;
}
.volume::-moz-range-track{
	border:none;
	height:.5em;
	background:#d8d8d8;
	border-radius:.25em;
}
.volume::-ms-track{
	border:none;
	height:.5em;
	color:transparent;
	background:#d8d8d8;
	border-radius:.25em;
}
.volume::-webkit-slider-thumb{
	-webkit-appearance:none;
	position:relative;
	margin:-.25em;
	border:none;
	width:1em;
	height:1em;
	border-radius:.5em;
}
.volume::-moz-range-thumb{
	border:none;
	width:1em;
	height:1em;
	cursor:ew-resize;
	border-radius:.5em;
}
.volume::-ms-thumb{
	border:none;
	width:1em;
	height:1em;
	border-radius:.5em;
}
.volume::-ms-fill-lower, .volume::-ms-fill-upper{
	border-radius:5em;
	background:transparent;
}
.volume::-ms-tooltip{
	display:none;
}
.volume::-ms-fill-lower{
	background:#f05e7b;
}
.volume::-webkit-slider-thumb{
	background:#dc143c;
}
.volume::-moz-range-thumb{
	background:#dc143c;
}
.volume::-ms-thumb{
	background:#dc143c;
}

.volume::-webkit-slider-runnable-track{
	background-size:50% 100%;
	background-repeat:no-repeat;
	background-image:linear-gradient(#f05e7b, #f05e7b);
}
.volume::-moz-range-track{
	background-size:50% 100%;
	background-repeat:no-repeat;
	background-image:linear-gradient(#f05e7b, #f05e7b);
}
.volume[data-css="0"]::-webkit-slider-runnable-track{background-size:0% 100%}
.volume[data-css="0"]::-moz-range-track{background-size:0% 100%}
.volume[data-css="0.1"]::-webkit-slider-runnable-track{background-size:10% 100%}
.volume[data-css="0.1"]::-moz-range-track{background-size:10% 100%}
.volume[data-css="0.2"]::-webkit-slider-runnable-track{background-size:20% 100%}
.volume[data-css="0.2"]::-moz-range-track{background-size:20% 100%}
.volume[data-css="0.3"]::-webkit-slider-runnable-track{background-size:30% 100%}
.volume[data-css="0.3"]::-moz-range-track{background-size:30% 100%}
.volume[data-css="0.4"]::-webkit-slider-runnable-track{background-size:40% 100%}
.volume[data-css="0.4"]::-moz-range-track{background-size:40% 100%}
.volume[data-css="0.5"]::-webkit-slider-runnable-track{background-size:50% 100%}
.volume[data-css="0.5"]::-moz-range-track{background-size:50% 100%}
.volume[data-css="0.6"]::-webkit-slider-runnable-track{background-size:60% 100%}
.volume[data-css="0.6"]::-moz-range-track{background-size:60% 100%}
.volume[data-css="0.7"]::-webkit-slider-runnable-track{background-size:70% 100%}
.volume[data-css="0.7"]::-moz-range-track{background-size:70% 100%}
.volume[data-css="0.8"]::-webkit-slider-runnable-track{background-size:80% 100%}
.volume[data-css="0.8"]::-moz-range-track{background-size:80% 100%}
.volume[data-css="0.9"]::-webkit-slider-runnable-track{background-size:90% 100%}
.volume[data-css="0.9"]::-moz-range-track{background-size:90% 100%}
.volume[data-css="1"]::-webkit-slider-runnable-track{background-size:100% 100%}
.volume[data-css="1"]::-moz-range-track{background-size:100% 100%}
.fancy-alert {
	font-family: sans-serif;
	color: white;
	width: 78px;
	z-index: 1020;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	position: fixed;
	overflow: hidden;
	box-shadow: 0 4px rgba(0, 0, 0, 0.3);
	opacity: 0;
	height: 78px;
	background-color: gray;
	@include scale(0);
	@include transition(all 0.5s);
	&.fancy-alert__active {
		opacity: 1;
		top: 20px;
		@include scale(1);
	}
	&.fancy-alert__extended {
		width: 800px;
		.fancy-alert--content {
			opacity: 1;
			@include transition(all 0.5s);
		}
		.fancy-alert--words {
			top: 18px;
			opacity: 1;
		}
	}
	&.error {
		background-color: #d64646;
	}
	&.success {
		background-color: #3cb971;
	}
	&.info {
		background-color: #e8c22c;
	}
	a {
		color: white;
		text-decoration: underline;
	}
	.fancy-alert--content {
		padding: 10px;
		opacity: 0;
	}
	.fancy-alert--words {
		font-size: 18px;
		font-weight: bold;
		padding: 0 18px 0 90px;
		max-width: 80%;
		position: relative;
		top: -50px;
		opacity: 0;
		height: 60px;
		@include transition(all 0.3s);
		@include transition-delay(0.5s);
	}
	.fancy-alert--icon {
		padding: 26px;
		float: left;
		font-size: 26px;
		background-color: rgba(3, 3, 3, 0.15);
	}
	.fancy-alert--close {
		position: absolute;
		text-decoration: none;
		right: 10px;
		top: 10px;
		font-size: 15px;
		padding: 6px 9px;
		background: rgba(0, 0, 0, 0.12);
	}
}
.show-alert {
	border: 0;
	background: #f2f2f2;
	padding: 15px 70px;
	font-weight: bold;
	border-radius: 5px;
	border-bottom: 3px solid #c8c8c8;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.23),
	inset 0 -53px 20px -30px rgba(59, 65, 74, 0.06);
	margin: 0 10px;
	font-size: 16px;
	cursor: pointer;
	color: #808080;
	text-shadow: 0 1px #fff;
	outline: 0;
	position: relative;
	&:active {
		border: 0;
		box-shadow: none;
		top: 2px;
	}
}
.show-alert__info {
	color: #e8c22c;
}
.show-alert__success {
	color: #3cb971;
}
.show-alert__error {
	color: #d64646;
}
.fsleaderboard {
	display: none;
  width: 100%;
}
.fsscoreboard {
  background: #333;
  box-shadow: 0 4px 0px #333;
}
.fsheader {
  padding: 5px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  background-color: #222;
  border-radius: 15px 15px 0 0;
  border-bottom: solid 2px #444;
}
.fsheader h1 {
  flex-grow: 1;
  font-size: 1.5em;
  letter-spacing: 3px;
  font-weight: normal;
  color: var(--btn-primary-fg);
}
.fsplayer {
  display: flex;
  border-bottom: solid 2px #444;
}
.fsplayer-name {
  flex-grow: 1;
  padding: 5px 0px 0px 0px;
  color: var(--btn-primary-fg);
}
.fsplayer-score {
  background: var(--primary-gradient);
}
.fscounter {
  display: flex;
}
.fscounter-score {
  flex-grow: 1;
  background: var(--primary-gradient);
  text-align: center;
  font-family: monospace;
  padding: 5px;
  width: 80px;
}
.fsstats {
  margin-top: 0;
  font-weight: normal;
}
.fsstats td:first-child {
  text-align: left;
  font-weight: normal;
  letter-spacing: 2px;
  color: var(--btn-primary-fg);
  font-size: 0.7em;
}
.fsstats td:last-child {
  text-align: left;
  color: var(--btn-primary-fg);
}

.fssvg {
  padding: 15px 10px 5px 10px;
  margin: -5px -10px -5px 10px;
  background: #2f2f2f;
  border-radius: 0 15px 0 0;
}
.bpleaderboard {
	display: none;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 365px;
  height: 308px;
  background: linear-gradient(to bottom, #3a404d, #181c26);
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
  h1 {
    font-size: 18px;
    color: #e1e1e1;
    padding: 12px 13px 18px;
    & svg {
      width: 25px;
      height: 26px;
      position: relative;
      top: 3px;
      margin-right: 6px;
      vertical-align: baseline;
    }
  }
  ol {
    counter-reset: bpleaderboard;
    list-style: none;
    li {
      position: relative;
      z-index: 1;
      font-size: 14px;
      counter-increment: bpleaderboard;
      padding: 18px 10px 18px 50px;
      cursor: pointer;
      backface-visibility: hidden;
      transform: translateZ(0) scale(1, 1);
      &::before {
        content: counter(bpleaderboard);
        position: absolute;
        z-index: 2;
        top: 15px;
        left: 15px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #c24448;
        background: #fff;
        border-radius: 20px;
        text-align: center;
      }
      mark {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 18px 10px 18px 50px;
        margin: 0;
        background: none;
        color: #fff;
        &::before,
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
          bottom: -11px;
          left: -9px;
          border-top: 10px solid #c24448;
          border-left: 10px solid transparent;
          transition: all 0.1s ease-in-out;
          opacity: 0;
        }
        &::after {
          left: auto;
          right: -9px;
          border-left: none;
          border-right: 10px solid transparent;
        }
      }
      small {
        position: relative;
        z-index: 2;
        display: block;
        text-align: right;
      }
      &::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fa6855;
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
        //transform: scaleX(1.06) scaleY(1.03);
        transition: all 0.3s ease-in-out;
        opacity: 0;
      }
      &:nth-child(1) {
        background: #fa6855;
        &::after {
          background: #fa6855;
        }
      }
      &:nth-child(2) {
        background: #e0574f;
        &::after {
          background: #e0574f;
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
        }
        & mark {
          &::before,
          &::after {
            border-top: 6px solid #ba4741;
            bottom: -7px;
          }
        }
      }
      &:nth-child(3) {
        background: #d7514d;
        &::after {
          background: #d7514d;
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11);
        }
        & mark {
          &::before,
          &::after {
            border-top: 2px solid #b0433f;
            bottom: -3px;
          }
        }
      }
      &:nth-child(4) {
        background: #cd4b4b;
        &::after {
          background: #cd4b4b;
          box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
        }
        & mark {
          &::before,
          &::after {
            top: -7px;
            bottom: auto;
            border-top: none;
            border-bottom: 6px solid #a63d3d;
          }
        }
      }
      &:nth-child(5) {
        background: #c24448;
        border-radius: 0 0 10px 10px;
        &::after {
          background: #c24448;
          box-shadow: 0 -2.5px 0 rgba(0, 0, 0, 0.12);
          border-radius: 0 0 10px 10px;
        }
        & mark {
          &::before,
          &::after {
            top: -9px;
            bottom: auto;
            border-top: none;
            border-bottom: 8px solid #993639;
          }
        }
      }
    }
    li:hover {
      z-index: 2;
      overflow: visible;
      &::after {
        opacity: 1;
        transform: scaleX(1.06) scaleY(1.03);
      }
      & mark {
        &::before,
        &::after {
          opacity: 1;
          transition: all 0.35s ease-in-out;
        }
      }
    }
  }
}
.pagination ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 8px;
  border-radius: 50px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.pagination ul li{
  color: #20B2AA;
  list-style: none;
  line-height: 45px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}
.pagination ul li.numb{
  list-style: none;
  height: 45px;
  width: 45px;
  margin: 0 3px;
  line-height: 45px;
  border-radius: 50%;
  margin: 0 auto;
}
.pagination ul li.numb.first{
  margin: 0px 3px 0 -5px;
}
.pagination ul li.numb.last{
  margin: 0px -5px 0 3px;
}
.pagination ul li.dots{
  font-size: 22px;
  cursor: default;
}
.pagination ul li.btn{
  padding: 0 20px;
  border-radius: 50px;
}
.pagination li.active,
.pagination ul li.numb:hover,
.pagination ul li:first-child:hover,
.pagination ul li:last-child:hover{
  color: #fff;
  background: #20B2AA;
}
svg.msgame {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Orbitron", sans-serif;
  background: #000;
}
.msbtn {
  cursor: pointer;
  user-select: none;
}
.fsgwrap {
  position: relative;
  height: 100%;
  min-height: 500px;
  padding-bottom: 20px;
}
.fsggame {
	transform-style: preserve-3d;
	perspective: 500px;
	min-height: 100%;
  height: 100%;
}
@mixin width($max){
	@media (max-width: $max){
		@content;
	}
}
@keyframes matchAnim {
	0% {
		background: #bcffcc;
	}
	100% {
		background: white;
	}
}
.fsgcard {
  float: left;
  width: 16.66666%;
  height: 25%;
  padding: 5px;
  text-align: center;
	display: block;
	perspective: 500px;
	position: relative;
	cursor: pointer;
  z-index: 50; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);  
	@include width(800px){
		width: 25%;
		height: 16.666%;
	}
	.fsginside {
		width: 100%;
		height: 100%;
		display: block;
		transform-style: preserve-3d;
		transition: .4s ease-in-out;
		background: white;
		&.fsgpicked, &.matched {
			transform: rotateY(180deg);
		}
		&.matched {
			animation: 1s matchAnim ease-in-out;
			animation-delay: .4s;
		}
		&.fsgpickedz {
			background-color:red;
		}
	}
  .fsgfront, .fsgback {
  	border: 1px solid black;
  	backface-visibility: hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	padding: 20px;
  	img {
  		max-width: 100%;
  		display: block;
  		margin: 0 auto;
  		max-height: 100%;
			position: absolute;
			top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  	}
  }
  .fsgfront {
  	transform: rotateY(-180deg);
  	@include width(800px){
  		padding: 5px;
  	}
		position: relative;
		.fsgcard-number {
			font-size: 100px;
			font-weight: 700;
			position: absolute;
			top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
			text-align: center;
			opacity: 0.15;            
		}
  	.fsginf {
  		width: 100%;
			position: absolute;
			top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  	}
  	.fsgdes {
  		width: 100%;
			position: absolute;
			top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  	}
  }
  .fsgback{
		transform: rotateX(0);
		@include width(800px){
  		padding: 10px;
  	}
  }
}
@media only screen and (max-width: 900px) {
	.fsgcard {
	  width: 20%;
	}
	.fsginf {
		font-size: 14px;
	}
	.fsgdes {
		font-size: 14px;
	}
}
@media only screen and (max-width: 700px) {
	.fsgcard {
	  width: 25%;
	}
	.fsginf {
		font-size: 12px;
	}
	.fsgdes {
		font-size: 12px;
	}
}
@media only screen and (max-width: 500px) {
	.fsgcard {
	  width: 33%;
	}
	.fsginf {
		font-size: 12px;
	}
	.fsgdes {
		font-size: 12px;
	}
}
.fsgmodaloverlay {
	display: none;
	background: rgba(0,0,0,.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.fsgmodal {
	display: none;
	position: relative;
	width: 500px;
	height: 400px;
	max-height: 90%;
	max-width: 90%;
	min-height: 380px;
	margin: 0 auto;
	background: white;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 10px;
	.fsgwinner {
		font-size: 80px;
		text-align: center;
		font-family: "Anton", sans-serif;
		color: #4d4d4d;
		text-shadow: 0px 3px 0 black;
		@include width(480px){
			font-size: 60px;
		}
	}
	.fsgrestart {
		font-family: "Anton", sans-serif;
		margin: 30px auto;
		padding: 20px 30px;
		display: block;
		font-size: 30px;
		border: none;
		background: #4d4d4d;
		background: linear-gradient(#4d4d4d, #222);
		border: 1px solid #222;
		border-radius: 5px;
		color: white;
		text-shadow: 0px 1px 0 black;
		cursor: pointer;
		&:hover {
			background: linear-gradient(#222, black);
		}
	}
	.fsgmessage {
		text-align: center;
		a {
			text-decoration: none;
			color: #28afe6;
			font-weight: bold;
			&:hover {
				$c: lighten(#28afe6, 10%);
				color: $c;
				border-bottom: 1px dotted $c;
			}
		}
	}
}
.cookiew {
  position: fixed;
  bottom: 50px;
  right: -370px;
  max-width: 345px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.cookiew.cookies {
  right: 20px;
}
.cookiew cookieh {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
cookieh cookiei {
  color: #4070f4;
  font-size: 32px;
}
cookieh h2 {
  color: #4070f4;
  font-weight: 500;
}
.cookiew .cookied {
  margin-top: 16px;
}
.cookiew .cookied p {
  color: #333;
  font-size: 16px;
}
.cookied p a {
  color: #4070f4;
  text-decoration: none;
}
.cookied p a:hover {
  text-decoration: underline;
}
.cookiew .cookieb {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cookieb .cookiebtn {
  border: none;
  color: #fff;
  padding: 8px 0;
  border-radius: 4px;
  background: #4070f4;
  cursor: pointer;
  width: calc(100% / 2 - 10px);
  transition: all 0.2s ease;
}
.cookieb #acceptBtn:hover {
  background-color: #034bf1;
}
#declineBtn {
  border: 2px solid #4070f4;
  background-color: #fff;
  color: #4070f4;
}
#declineBtn:hover {
  background-color: #4070f4;
  color: #fff;
}