/*************************************************************************
 * direction arrows
 ************************************************************************/

.gpslider-default {
	position: relative;
}

.gpslider-default .slide-arrows .slide-arrows-prev,
.gpslider-default .slide-arrows .slide-arrows-next {
	position: absolute;
	display: block;

	z-index: 50;	/* somewhere above everything */

	width: 50px;
	height: 50px;

	top: 50%;
	margin-top: -25px;

	opacity: 0.75;

	transition: all .2s ease-in-out;

	cursor: pointer;
}

.gpslider-default .slide-arrows .slide-arrows-prev:hover,
.gpslider-default .slide-arrows .slide-arrows-next:hover {
	opacity: 1;
}

.gpslider-default .slide-arrows .slide-arrows-prev {
	left: 10px;
	background: transparent url(../images/arrow-prev.png);
}

.gpslider-default .slide-arrows .slide-arrows-next {
	right: 10px;
	background: transparent url(../images/arrow-next.png);
}

.gpslider .slide-arrows .slide-arrows-hidden {
	display: none;
}

/*************************************************************************
 * slide reset
 ************************************************************************/

.gpslider > ul,
.gpslider > ul > li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/*************************************************************************
 * slide positioning & animation
 ************************************************************************/

.gpslider-default ul.slides {
	position: relative;

	overflow: hidden;

	perspective: 1000px;
	perspective-origin: center center;
}

.gpslider-default ul.slides li {
	position: absolute;
	top: 0;
	left: 0;

	z-index: 0;

	display: block;
	width: 100%;

	transition: all 0.5s ease-in-out;
}

.gpslider-default ul.slides li.slide-hidden {
	display: none;
}

.gpslider-default ul.slides li.slide-active {
	z-index: 5;
	transform: translate3d(0, 0, -200px) rotate3d(0,1,0,0deg);
}

/* This inelegant piece of css is here to make sure that the stacking order
 * on the right side is correct.
 */
.gpslider-default ul.slides li.slide-active + li {
	z-index: 3;
}

.gpslider-default ul.slides li.slide-active + li + li {
	z-index: 2;
}

.gpslider-default ul.slides li.slide-active + li + li + li {
	z-index: 1;
}

/* stacking order here is automatic */
.gpslider-default ul.slides li.slide-before {
	transform: translate3d(-110%, 0, -600px) rotate3d(0,1,0,45deg);
}

.gpslider-default ul.slides li.slide-after {
	transform: translate3d(110%, 0, -600px) rotate3d(0,1,0,-45deg);
}

/*************************************************************************
 * Thumbnails
 ************************************************************************/

.gpslider ul.thumbnails,
.gpslider ul.thumbnails li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.gpslider-default ul.thumbnails {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.gpslider-default ul.thumbnails li {
	padding: 0.5em 1em;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

.gpslider-default ul.thumbnails li.slide-thumbnail-active {
	border-color: #0f0;
}