div.slider {
	display: flex;
	justify-content: center;
	position: relative;
	height: 290px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	box-shadow: 0px 0px 5px #000000, 0px 0px 20px #000000;
	overflow: hidden;
}

div.details img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

div.slider div.prev,
div.slider div.next {
	display: none;
	position: absolute;
	top: calc(50% - 30px);
	width: 40px;
	height: 60px;
	background-color: rgba(17, 17, 17, 0.7);
	background-image: url('/images/arrow.png');
	background-size: 20px;
	background-position: 11px center;
	background-repeat: no-repeat;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	transition: 80ms;
}
div.slider div.prev:hover,
div.slider div.next:hover {
	background-color: rgba(34, 34, 34, 0.8);
	cursor: pointer;
}
div.slider div.prev:active,
div.slider div.next:active {
	background-color: rgba(51, 51, 51, 0.8);
	background-position: 13px center;
}

div.slider div.prev {
	left: 5px;
	transform: rotate(180deg);
}

div.slider div.next {
	right: 5px;
}

div.slider div.navigator {
	display: none;
	position: absolute;
	height: 22px;
	bottom: 5px;
	padding: 4px 5px;
	background-color: rgba(17, 17, 17, 0.7);
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

div.slider div.navigator div {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #777777;
}

div.slider div.navigator div.active {
	width: 8px;
	height: 8px;
	margin: 3px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background-color: #bbbbbb;
}

div.slider:hover div.prev,
div.slider:hover div.next,
div.slider:hover div.navigator {
	display: block;
}