/***********************************************************************
 * Front
 **********************************************************************/


/* slides */

.gpslider--front > ul {
	position: relative;
	overflow: hidden;
}

.gpslider--front > ul.slides > li {
	position: absolute;
	top: 0;
	width: 100%;

	pointer-events: none;

	opacity: 0;
	transition: all .5s ease-in-out;
}

.gpslider--front ul.slides > li.slide-before {
	left: -100%;
}

.gpslider--front ul.slides > li.slide-active {
	left: 0;
	pointer-events: all;
	opacity: 1;
}

.gpslider--front ul.slides > li.slide-after {
	left: 100%;
}

/* thumbnails */

.gpslider--front ul.thumbnails {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.gpslider--front ul.thumbnails > li {
	text-transform: uppercase;

	color: var(--color-bright-green);

	border-width: 2px;
	border-style: solid;
	border-color: var(--color-bright-green);

	flex-grow: 1;

	text-align: center;

	margin: 1em;
	padding: 0.5em;

	cursor: pointer;

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

.gpslider--front ul.thumbnails > li.slide-thumbnail-active {
	color: white;
	background-color: var(--color-bright-green);
}

/* Remove any potential header margins */
.gpslider--front ul.thumbnails > li > * {
	margin: 0;
}