.xslider-wrapper
{
	position: relative;
	overflow: hidden;
	height: 25rem;
} 

.xslider-wrapper > ul 
{
	width: 100%; height: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.xslider-wrapper  > ul > li
{
	display: inline-block;
	margin-left: -6px;
	width: 100%; height: 100%;
	position: relative;
	overflow: hidden;
}
.xslider-wrapper  > ul > li:first-child
{
	margin-left: 0;
}

.xslider-wrapper > ul > li > img 
{ 
	background: url(/images/loading.gif) 50% no-repeat;
	min-height: 100%; min-width: 100%;
	z-index: -1; 
}
.xslider-wrapper.auto-width > ul > li > img { width: 100%; }
.xslider-wrapper.auto-img > ul > li > img { position: absolute; top: 0; left: 0; }
.xslider-wrapper.auto-center > ul > li > img { top: -50%; }
.xslider-wrapper > ul > li > div 
{ 
	position: absolute;
	bottom: 0; left: 0px; 
	z-index: 10;
	padding: 0.3rem 0.5rem;
	color: var(--color-white);
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.7);
	white-space: normal;
}
.xslider-wrapper > ul > li > .title
{
	font-size: var(--font-size-large);
	top: 0; bottom: unset;
	width: 100%;
}

.xslider-wrapper > .slider-nav
{
	position: absolute;
	top: 50%;
	font-size: var(--font-size-normal);
	color: var(--color-white);
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.5);
	border-radius: 50%;
	width: 2rem; height: 2rem;
	line-height: 1.9rem; 
	text-align: center;
	padding: 0; margin: 0;
	cursor: pointer;
	z-index: 75;
	transition: background-color 0.3s ease-in-out;
}
.xslider-wrapper > .slider-nav:hover
{
	background-color: rgb(0,0,0);
}

.xslider-wrapper > .slider-nav[slider-dir="right"] { right: 0.2rem; }
.xslider-wrapper > .slider-nav[slider-dir="left"] { left: 0.2rem; }

.xslider-wrapper > .slider-nav:before 
{
	content: ' ';
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	border: 2px solid rgb(255,255,255); 
	border: 2px solid rgba(255,255,255,0.5); 
	border-radius: 50%;
	transition: border 0.3s ease-in-out;
	pointer-events: none;
}
.xslider-wrapper:hover > .slider-nav:before { border: 2px solid rgb(255,255,255); }

.xslider-wrapper .slider-dots 
{
	position: absolute; bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 101 !important;
}
.xslider-wrapper .slider-dots > div
{
	position: relative;
	display: inline-block;
	margin: 0 5px;
	width: 12px; height: 12px;
	background-color: rgb(0,0,0);
	border-radius: 50%;
	cursor: pointer;
	z-index: 100;
	transition: background-color 0.3s ease-in-out;
}
.xslider-wrapper .slider-dots > div.selected
{
	background-color: var(--color-galax);
}

.xslider-wrapper .slider-dots > div:before
{
	content: ' ';
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	border: 2px solid rgb(255,255,255); 
	border-radius: 50%;
	transition: border 0.3s ease-in-out;
	pointer-events: none;
}

.xslider-wrapper .slider-dots > div:hover
{
	background-color: var(--color-white);
}
.xslider-wrapper .slider-dots > div:hover:before
{
	border: 2px solid var(--color-black);
}