@font-face { 
  font-family: 'AgencyB';
  src: url('../fonts/agencyfb_bold.ttf');
}
@font-face { 
  font-family: 'AgencyR';
  src: url('../fonts/agencyfb_reg.ttf');
}
@font-face { 
  font-family: 'Atomic';
  src: url('../fonts/atomic.otf');
}
@font-face { 
  font-family: 'Black';
  src: url('../fonts/RevxNeueBlack.ttf');
}
@font-face { 
  font-family: 'Bold';
  src: url('../fonts/RevxNeueBold.ttf');
}
@font-face { 
  font-family: 'Medium';
  src: url('../fonts/RevxNeueMedium.ttf');
}
@font-face { 
  font-family: 'Regular';
  src: url('../fonts/RevxNeueRegular.ttf');
}
@font-face { 
  font-family: 'SemiBold';
  src: url('../fonts/RevxNeueSemiBold.ttf');
}








* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	user-select: none;  
}

body, html {
	position: relative;
	height: 100%;
	width: 100%;
	font-size: 0.7292vw;
	overflow: hidden;
	color: white;
	scroll-behavior: smooth;
}


#BG {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cont_wrap {
  width: auto;
  display: flex;
  flex-direction: column;
  height: auto;
	background-image: url('../images/bg.png');
	border-radius: 0.625vw;
	padding: 1.25vw;
	background-size: 100% 100%;
	overflow: hidden;
  padding-bottom: 3vw;
}
.icon_hd {
	margin-top: -0.3646vw;
	margin-left: -0.3646vw;
	width: 2.8125vw;
	height: 2.8125vw;
	background-image: url('../images/tringle.png');
	background-size: 100% 100%;
	filter: drop-shadow(0 0.208vw 0.898vw rgba(255, 138, 43, 0.95));
}
.buttons {
  margin-left: auto;
  margin-right: auto;
  margin-top: -60px;
}
.start {
  width: 203px;
  font-size: 15px;
  font-family: 'SemiBold';
  color: white;
  height: 38px;
  border: none;
  border-radius: 0.1042vw;
  cursor: pointer;
  box-shadow: 0 0.469vw 1.406vw rgba(255, 138, 43, 0.25);
  background: #ff8a2b;
}
.winning-card {
  position: relative;
}
.line_w {
  width: 3px;
  height: 63%;
  background: rgba(255, 255, 255, 0.021);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
}
.icon_hd svg {
	width: 0.8854vw;
	height: 0.8854vw;
}
.left_block {
	gap: 0.0521vw;
}
.flex_hd span:first-child {
	font-size: 2.2917vw;
	font-family: 'AgencyB';
	letter-spacing: -0.03em;
	text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25);
}
.flex_hd span:last-child {
	margin-left: -0.7583vw;
	width: 4.2708vw;
	height: 2.6563vw;
	margin-top: 0.1vw;
	background-image: url('../images/city_text.png');
	background-size: 100% 100%;
	filter: drop-shadow(0 0 0.835vw rgba(255, 138, 43, 0.85));
}
.name_ui {
	margin-top: 0.1563vw;
	font-size: 1.0313vw;
	font-family: 'AgencyR';
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.35em;
}
.flex_hd {
	height: 1.9479vw;
}
.header {
	align-items: flex-start;
}
.close_pannel {
	height: 1.4063vw;
	border-radius: 0.156vw;
	padding: 0.156vw 0.156vw 0.156vw 0.313vw;
	background: rgba(255, 59, 59, 0.11);
	gap: 0.2604vw;
	margin-left: auto;
}
.close_box {
	width: 1.0938vw;
	height: 1.0938vw;
	background-image: url('../images/close_box.png');
	background-size: 100% 100%;
	border-radius: 0.1042vw;
	box-shadow: 0 0.208vw 0.625vw rgba(255, 52, 52, 0.15);
}
.close_pannel span {
	font-size: 0.7292vw;
	font-family: 'Medium';
	color: #ff3434;
	letter-spacing: -0.03em;
	text-shadow: 0 0 0.833vw rgba(255, 52, 52, 0.25);
}
.info_block {
	gap: 0.3125vw;
	width: 18.3958vw;
	margin-top: 0.5208vw;
}
.info_block svg {
	width: 0.8333vw;
	height: 0.8333vw;
	flex-shrink: 0;
}
.info_block span {
	font-size: 0.7292vw;
	font-family: 'Regular';
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.65);
}
.flex {
  display: flex;
}
.alcn {
  display: flex;
  align-items: center;
}
.jlcn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.clmn {
  display: flex;
  flex-direction: column;
}
.viewport {
  transform: scale(0.8);
}
.close {
  cursor: pointer;
}



.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-position-x: center; 
}

.viewport {
  margin: 0 auto;
  width: 1096px;
  height: 400px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.winning-card {
  z-index: 100;
}


.slider {
  display: inline-block;
}

.slider > ul li {
  color: white;
  text-decoration: none;
  list-style-type: none;
  display: inline-block;
  width: 250px;
  height: 250px;
  background: linear-gradient(180deg, #F8F8F8 0%, #C7C7C7 100%);
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin-right: 24px;
  position: relative;
  border-radius: 2px;
  transform: translateX(-125px);
}

/* Rarity gradients */
.slider > ul li.very-high {
  background-image: url('../images/green.png');
}
.slider > ul li.high {
  background-image: url('../images/purple.png');
}

.slider > ul li.mid  {
  background-image: url('../images/lightpurple.png');
}

.slider > ul li.low {
  background-image: url('../images/red.png');
}

.slider > ul li.very-low {
  background-image: url('../images/yellow.png');
}



.absolute {
  position: absolute;
  width: 100%;
  height: 100%;
}

span.item-detail {
  position: relative;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 100px;
  margin-bottom: 4px;
}

span.schwarzgeld {
  background: #ff3f4259;
  color: #FF3F42;
  font-size: 14px;
  font-family: 'Medium';
  border-radius: 2px;
}

span.wear {
  background: #f89406;
  display: none;
}

.item-details {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 8px;
}

span.no-schwarzgeld {
  display: none;
}

.cover {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 9px;
  padding-left: 16px;
  width: 100%;
  text-align: left;
}
.cover span:first-child {
  font-size: 18px;
  font-family: 'SemiBold';
  text-shadow: 0 0 24px  rgba(255, 255, 255, 0.25);
}
.cover span:last-child {
  font-size: 15px;
  font-family: 'Medium';
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.5);
}


/* Images */
img {
  object-fit: fit;
  width: 45%;
  margin: 0 auto;
  padding-bottom: 71px;
}

.slider > ul {
  padding-left: 0;
  display: flex;
  flex-direction: row;
  margin: 0;
}
