/**
 * képrotátor (image slider)
 */
.box.box-imagelist.slider > div.frame {
	position: relative;
	overflow: hidden;
	padding: 0;
}

.box.box-imagelist.slider div.images,
.box.box-imagelist.slider div.control {
	display: block;
	margin: 0;
	padding: 0;
	z-index: 1;
}

.box.box-imagelist.slider div.images > div.item {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 0;
}

.box.box-imagelist.slider div.images > div.item.show {
	z-index: 1;
}

.box.box-imagelist.slider div.images > div.item.hidden {
	display: none;
}

.box.box-imagelist.slider div.images div.image {
	display: block;
	position: relative;
	width: 100%;

	animation-duration: 1.1s;
}

.box.box-imagelist.slider div.images > div.item > div.text {
	display: block;
	position: absolute;
	right: 20px;
	bottom: 10px;
	padding: 7px;
	border: 1px solid white;
	background-color: white;
	background-color: rgba(255, 255, 255, 0.7);

	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;

	animation-duration: 0.7s;
}

.box.box-imagelist.slider div.images div.image img {
	width: 100%;
	display: block;
	border: 0;
}

.box.box-imagelist.slider div.control {
	opacity: 0.5;
	position: absolute;
	left: 50%;
	bottom: 2vw;

	transition: opacity 300ms;
}

.box.box-imagelist.slider div.control > ul {
	display: block;
	padding: 0;
	margin: 0;
	margin-left: -50%;
}

.box.box-imagelist.slider:hover div.control {
	opacity: 1;
}

.box.box-imagelist.slider div.control li {
	display: inline-block;
	border: none;
	margin: 0 5px;
	cursor: pointer;
	border-radius: 10px;
	border: 2px solid transparent;

	transition: border-color 0.7s;
}

.box.box-imagelist.slider div.control li:hover {
}

.box.box-imagelist.slider div.control li > .dot {
	display: block;
	border-radius: 8px;
	background-color: black;
	width: 16px;
	height: 16px;
	margin: 1px;
}

.box.box-imagelist.slider div.control li.showing {
	border: 2px solid #fff;
}

.box.box-imagelist.slider div.control li.showing:hover {
}

div.images > div.item.show.right div.image {
	animation-name: slider-image-in-right;
}
div.images > div.item.hide.right div.image {
	animation-name: slider-image-out-right;
}
div.images > div.item.show.left div.image {
	animation-name: slider-image-in-left;
}
div.images > div.item.hide.left div.image {
	animation-name: slider-image-out-left;
}
div.images > div.item.show.opacity div.image {
	animation-name: slider-image-in-opacity;
}
div.images > div.item.hide.opacity div.image {
	animation-name: slider-image-out-opacity;
}
div.images > div.item.show.tv div.image {
	animation-name: slider-image-in-tv;
}
div.images > div.item.hide.tv div.image {
	animation-name: slider-image-out-tv;
}
div.images > div.item.show.zoom div.image {
	animation-name: slider-image-in-zoom;
}
div.images > div.item.hide.zoom div.image {
	animation-name: slider-image-out-zoom;
}
div.images > div.item.show.rota div.image {
	animation-name: slider-image-in-rota;
}
div.images > div.item.hide.rota div.image {
	animation-name: slider-image-out-rota;
}

div.images > div.item.show div.text {
	animation-name: slider-text-in;
}
div.images > div.item.hide div.text {
	animation-name: slider-text-out;
}


@keyframes slider-image-in-right {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

@keyframes slider-image-out-right {
	from {
		left: 0;
	}

	to {
		left: -100%;
	}
}

@keyframes slider-image-out-left {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@keyframes slider-image-in-left {
	from {
		left: -100%;
	}

	to {
		left: 0;
	}
}

@keyframes slider-image-out-opacity {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes slider-image-in-opacity {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slider-image-out-tv {
	from {
		transform: scaleY(1) scaleX(1);
		opacity: 1;
	}

	to {
		transform: scaleY(0.01) scaleX(1.5);
		opacity: 0;
	}
}

@keyframes slider-image-in-tv {
	from {
		transform: scaleY(0.7) scaleX(1.2);
		opacity: 0;
	}

	to {
		transform: scaleY(1) scaleX(1);
		opacity: 1;
	}
}

@keyframes slider-image-out-zoom {
	from {
		transform: scale(1);
		opacity: 1;
	}

	to {
		transform: scale(3);
		opacity: 0;
	}
}

@keyframes slider-image-in-zoom {
	from {
		transform: scale(0.3);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes slider-image-out-rota {
	from {
		transform: scale(1) rotate(0);
		opacity: 1;
	}

	to {
		transform: scale(0.1) rotate(980deg);
		opacity: 0;
	}
}

@keyframes slider-image-in-rota {
	from {
		transform: scale(0.3) rotate(-30deg);
		opacity: 0.5;
	}

	to {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
}

@keyframes slider-text-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slider-text-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}