@media screen and (max-width: 500px) {
	.flex-container img, .flex-img {
		width: clamp(130px, 16vw, 300px) !important; 
	}
}

BODY {
	background-image: url('/layout/img/dot_bg.png'), url('/layout/img/300450671.gif');
	overflow-x: hidden;
}

.small_addr {
	font-size: min(max(7px, 1.9vw), 17px);
}

.slider {
	box-sizing: border-box;
	padding-left: 0.18rem;
	padding-right: 0.18rem;
	appearance: none;
	border-radius: 2px;
	width: 17rem;
	height: 1.4rem;
	background: #282727;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	background-image: url('../../layout/img/minus.png'), url('../../layout/img/plus.png'), url('../../layout/img/stripe_bg.png');
	background-size: 0.6rem 0.6rem, 0.6rem 0.6rem, auto;
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center left 6px, center right 6px;
	background-attachment: local;
	vertical-align: middle !important;	transition: all 0.2s ease-in-out;
	/*	border: 1px dotted #555; */
		animation-timing-function: steps(20) !important;
	animation: grab;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.slider:active {
	width: 19rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	background-size: 1rem 1rem, 1rem 1rem, auto;
	background-position: center left 4px, center right 4px;
	transition: all 0.2s ease-in-out;
	cursor: grabbing !important;
	border: 0;
	background-color: transparent;

	/*	box-shadow: 0 0 0 0.05rem #777;
	transition: box-shadow 0.2s linear;
*/
}

.slider:hover {
	opacity: 1;
}

div#qTip {
	padding: 3px;
	display: none;
	background: var(--mdark);
	color: var(--white);
	border-bottom: 1px solid var(--dark);
	border-right: 1px solid var(--dark);
	border-left: 1px solid var(--light);
	border-top: 1px solid var(--medium);
	font: bold 9px Verdana, Arial, sans-serif;
	text-align: left;
	position: absolute;
	z-index: 1000;
}

.slider::-webkit-slider-thumb {
	border-radius: 1px;
	-webkit-appearance: none;
	appearance: none;
	width: 2.75rem;
	height: 0.85rem;
	background: var(--medium);
	background-image: url('/layout/img/stripe_bg.png');
	transition: all 0.2s ease-in-out;
}

.slider::-webkit-slider-thumb:hover {
	cursor: grab;
}

.slider::-webkit-slider-thumb:active {
	width: 4rem;
	height: 1.1rem;
	transition: all 0.2s ease-in-out;
	cursor: grabbing !important;
}

.slider::-moz-range-thumb {
	width: 1.6rem;
	height: 1.6rem;
	background: var(--medium);
	background-image: url('/layout/img/stripe_bg.png');
	cursor: pointer;
}

#wrapper_README {
	vertical-align: middle;
	text-align: center;
	display: table;
	margin: 0 auto;
	width: 98vw;
	max-width: 1550px;
	transition: all 0.2s ease-out;
}

.table-cell_README {
	font-size: min(max(12px, 1.2vmin), 12px);
	display: table-cell;
	transition: all 0.2s ease-in-out;
	text-align: center;
}

@keyframes float {
	0% {

		transform: perspective(1000px) rotateY(7deg) scale(1.300);
	}

	50% {
		transform: perspective(1000px) rotateY(-7deg) rotateX(4deg) scale(1.300);
		filter: brightness(121%);
	}

	100% {

		transform: perspective(1000px) rotateY(7deg) scale(1.30);
	}


}


@keyframes flash {
	0% {
		filter: brightness(90%);
	}

	50% {
		filter: brightness(130%);
		box-shadow: 0 0 3vmax rgba(170, 170, 170, 0.50);
	}

	100% {
		filter: brightness(90%);
	}
}

@keyframes zoom {
	0% {
		transform: scale(1.000);z-index: 99;
	}

	100% {
		transform: perspective(1000px) rotateY(7deg) scale(1.300);z-index: 99;
	}
}

@keyframes grab {
	from {
		background-position: center left 6px, center right 6px, 0px;
	}

	to {
		background-position: center left 6px, center right 6px, 10px;
	}
}

.flex-img:hover {
	z-index: 99;
	box-sizing: border-box;
	cursor: pointer;
	border: 0.25em solid #151515 !important;
	image-rendering: crisp-edges;
	animation: zoom, float;
	animation-duration: 0.2s, 5s;
	animation-delay: 0s, 0.2s;
	animation-iteration-count: 1, infinite;
	animation-direction: normal, normal;
	box-shadow: 0 0 3vmax rgba(170, 170, 170, 0.25);
}

#flex-container {
	gap: 5px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	align-items: left;
	flex-flow: row wrap;
	align-items: flex-start;
	transition: all 0.5s;
}

#flex-container img {
	aspect-ratio: 40 / 25;
	image-rendering: crisp-edges;
	width: clamp(200px, 16vw, 300px); /* OLD VALUE clamp(200px, 16vw, 300px) */
	padding: 0px;
	margin: 0px;
	display: inline-block;
	vertical-align: middle;
}

.flex-img {

	z-index: 2;
	filter: brightness(107%) contrast(107%) saturate(110%);
	transition: all 0.2s linear;
	image-rendering: crisp-edges;
	width: clamp(200px, 16vw, 300px); /* OLD VALUE clamp(200px, 16vw, 300px) */
	text-align: center;
	line-height: 0px;
	margin: 3px;
	display: flex;
	vertical-align: middle;
}

.flex {
	z-index: 0;
	background-color: rgba(153, 153, 153, 0.075);
	text-align: center;
	line-height: 0px;
	display: flex;
	vertical-align: middle;
}

.flex-end {
	width: clamp(200px, 16vw, 300px);
	text-align: center;
	line-height: 0px;
	display: flex;
	vertical-align: middle;
	transition: all 0.2s linear;
}

.break {
	flex-basis: 100%;

}

:target {
	animation: flash;
	animation-duration: 2S;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transition: all 0.2s linear;
}

p {
	width: 100%;
}

.float_tl {
	position: fixed !important;
}

.float_br {
	pointer-events: none;
	margin-right: 1rem;
	margin-bottom: 1rem;
	vertical-align: bottom !important;
	background-color: color-mix(in srgb, var(--dark), transparent 50%);
	transition: all 0.5s ease-in-out;
	opacity: 0;
	border-radius: 3px;
	backdrop-filter: blur(7.5px);
	background-image: url('/layout/img/stripe_bg.png');
	text-align: center;
}

#zoom {
	position: absolute;
	top: 0.25rem;
	right: 0.4rem;
	font-size: 0.5rem;
	transition: all 0.4s ease-in-out !important;
}

#slider-output {
	transition: all 0.5s ease-in-out;
	vertical-align: middle;
	font-size: 3.5rem;
	font-weight: bold;
	color: #FFF;
	margin-bottom: 0.12rem;
}

.float_tr {
	position: fixed !important;
}

.input-wrapper {
	backdrop-filter: blur(4px);
}