/* Normalize */
.fancyslider-container, .fancyslider-container * {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
	font-family: Helvetica, sans-serif;
	color: white;
	text-decoration: none;
}

/* Container and slides */
.fancyslider-container {
	margin: auto;
	width: 600px;
	height: 400px;
	position: relative;
	overflow: hidden;
}
.fancyslider-container .slide {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	background-size: cover;
	background-position: center;
}

/* History buttons */
.fancyslider-container .prev, .fancyslider-container .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
.fancyslider-container .next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
.fancyslider-container .prev:hover, .fancyslider-container .next:hover {
	background-color: rgba(0,0,0,0.8);
}

/* Navigation (pills) */
.fancyslider-container nav {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
}
.fancyslider-container nav a {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #ccc;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.fancyslider-container nav a:hover, .fancyslider-container nav a.active {
	background-color: #666;
}

/* Pagination */
.fancyslider-container .pagination {
	position: absolute;
	bottom: 5px;
	right: 5px;
	font-weight: lighter;
	font-size: .9rem;
}

/* Slide transitions */
.fancyslider-container .slide-slideInLeft {
	animation-name: slide-slideInLeft;
	animation-duration: 2s;
	left: 0%;
}
@keyframes slide-slideInLeft {
	from { left: -100%; }
	to { left: 0%; }
}
.fancyslider-container .slide-slideOutLeft {
	animation-name: slide-slideOutLeft;
	animation-duration: 2s;
	left: -100%;
}
@keyframes slide-slideOutLeft {
	from { left: 0%; }
	to { left: -100%; }
}
.fancyslider-container .slide-slideInRight {
	animation-name: slide-slideInRight;
	animation-duration: 2s;
	left: 0%;
}
@keyframes slide-slideInRight {
	from { left: 100%; }
	to { left: 0%; }
}
.fancyslider-container .slide-slideOutRight {
	animation-name: slide-slideOutRight;
	animation-duration: 2s;
	left: 100%;
}
@keyframes slide-slideOutRight {
	from { left: 0%; }
	to { left: 100%; }
}
.fancyslider-container .slide-fadeIn {
	animation-name: slide-fadeIn;
	animation-duration: 2s;
	opacity: 100%;
	display: block;
}
@keyframes slide-fadeIn {
	from { opacity: 0%; display: none; }
	to { opacity: 100%; display: block; }
}
.fancyslider-container .slide-fadeOut {
	animation-name: slide-fadeOut;
	animation-duration: 2s;
	opacity: 0%;
	display: none;
}
@keyframes slide-fadeOut {
	from { opacity: 100%; display: block; }
	to { opacity: 0%; display: none; }
}
.fancyslider-container .slide-rotateInLeft {
	animation-name: slide-rotateInLeft;
	animation-duration: 2s;
	left: 0%;
	transform:rotate(0deg);
}
@keyframes slide-rotateInLeft {
	from { left: -100%; transform:rotate(-360deg); }
	to { left: 0%; transform:rotate(0deg);}
}
.fancyslider-container .slide-rotateOutLeft {
	animation-name: slide-rotateOutLeft;
	animation-duration: 2s;
	left: -100%;
	transform:rotate(-360deg);
}
@keyframes slide-rotateOutLeft {
	from { left: 0%; transform:rotate(0deg); }
	to { left: -100%; transform:rotate(-360deg); }
}
.fancyslider-container .slide-rotateInRight {
	animation-name: slide-rotateInRight;
	animation-duration: 2s;
	left: 0%;
	transform:rotate(0deg);
}
@keyframes slide-rotateInRight {
	from { left: 100%; transform:rotate(360deg); }
	to { left: 0%; transform:rotate(0deg); }
}
.fancyslider-container .slide-rotateOutRight {
	animation-name: slide-rotateOutRight;
	animation-duration: 2s;
	left: 100%;
	transform:rotate(360deg);
}
@keyframes slide-rotateOutRight {
	from { left: 0%; transform:rotate(0deg); }
	to { left: 100%; transform:rotate(360deg); }
}

/* Captions */
.fancyslider-container .caption {
	color:white;
	white-space: nowrap;
	background-color: rgba(0,0,0,0.4);
	display: inline-block;
	position: absolute;
	padding: 0.4em;
	border-radius: 0.2em;
}
/* Caption positions */
.fancyslider-container .caption-top {
	top: 5%;
}
.fancyslider-container .caption-middle {
	transform: translateY(-50%);
	top: 50%;
}
.fancyslider-container .caption-bottom {
	bottom: 5%;
}
.fancyslider-container .caption-left {
	left: 5%;
}
.fancyslider-container .caption-center {
	transform: translateX(-50%);
	left: 50%;
}
.fancyslider-container .caption-right {
	right: 5%;
}
.fancyslider-container .caption-middle.caption-middle {
	transform: translate(-50%,-50%);
}
/* Caption animations */
.fancyslider-container .caption-slideUp {
	animation-name: caption-slideUp;
	animation-duration: 2s;
}
@keyframes caption-slideUp {
	from { top: 100%; }
}
.fancyslider-container .caption-slideDown {
	animation-name: caption-slideDown;
	animation-duration: 2s;
}
@keyframes caption-slideDown {
	from { top: 0%; }
}
.fancyslider-container .caption-fadeIn {
	animation-name: caption-fadeIn;
	animation-duration: 2s;
}
@keyframes caption-fadeIn {
	from { opacity: 0%; }
}