@charset "UTF-8"; 
@import url(../../settings/setting.css);

#tinyFader {
	position: relative;
	margin: 30px auto 30px auto;
	padding: 0;
	width: 100%;
	height: var(--tfh);
}
.tiny-fader {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: relative;
}
.tiny-fades {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
}
.tiny-fader-width {
	max-width: var(--tfw);
}
.tiny-f-ar .tiny-fader .tiny-fades, .tiny-fade img {
	aspect-ratio: var(--tfar);
}
.tiny-f-display .tiny-fader .tiny-fades .tiny-fade img {
	object-fit: var(--tfof);
}
.tiny-fade img {
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: var(--tfofw);
	max-width:100%;
	height:var(--tfofh);
}
.tiny-fade {
	list-style: none;
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	transition: all var(--tft) linear;
}
.tiny-f-show, .tiny-fade:first-child {
	opacity: 1;
	z-index: 2;
	visibility: visible;
}
#tinyFader .tiny-f-controls {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translateX(50%);
	width: 140px;
	padding: .3rem .3rem;
	opacity: var(--tfcon);
	transition: opacity 1s;
}
#tinyFader:hover .tiny-f-controls {
	opacity:.8;
}
.tiny-f-control {
	width: 30px!important;
	height: 30px!important;
	border-radius: 50%;
	-webkit-appearance: none;
	color: rgb(255, 255, 255, 0.7);
	background: rgba(46, 46, 46, 0.85);
	border: 1px solid rgb(170, 170, 170, 0.4);
	font-size: .9rem;
	cursor: pointer;
}
.tiny-f-control:nth-child(1), .tiny-f-control:nth-child(3) {
	font-weight:bold;
}
.tiny-f-control:nth-child(2) {
	font-size: .8rem;
}
.tiny-f-control:hover {
	color: rgb(255, 255, 255, 0.85);
	background: rgba(46, 46, 46, 0.7);
	border: 1px solid rgb(170, 170, 170, 0.2);
}
@media (min-width: 768px) {
#tinyFader .tiny-f-controls {
	width: 200px;
 padding: .5rem .5rem;
}
.tiny-f-control {
	width: 40px!important;
	height: 40px!important;
	font-size: 1.2rem;
}
.tiny-f-control:nth-child(1), .tiny-f-control:nth-child(3) {
	font-weight:normal;
}
.tiny-f-control:nth-child(2) {
	font-size: 1.1rem;
}
}