/* layout adjustments
 *
 * Use flexbox instead of the built-in layout so we can control the position
 * and action of the slide description more to our liking
 * note: npm postcss wp-content/themes/nursery-sparkle/css/slidegallery.css --use autoprefixer --no-map --replace
 */
.yeahslider .slides img {
	margin: 0 auto;
	width: auto;
}
.yeahslider .slides {
	display: flex;
	flex-wrap: nowrap;
	width: auto !important;
}
.yeahslider .slides li {
	display: block;
	min-width: 100%;
}
.yeahslider .slide-frame:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 480px; /* dynamically calculated later */
}
body:not(.fullscreen-slideshow) .yeahslider .slide-frame:first-child {
	max-height: 480px;
}
.yeahslider .slide-frame img {
	max-width: 100%;
	max-height: 100%;
}

/* visual styling overrides - generally not affecting postions and placement */
.site-content article.hentry .thumbnail-caption {
	position: relative;
	background: none;
	color: inherit;
	opacity: 1;
}
.yeahslider .slides li .slide-count {
	color: #fb4598;
	text-shadow: 0 0 3px #fff;
}
.site-content article.hentry .yeahslider .slides li .slide-count {
	text-shadow: 0 0 1px rgba(255,255,255,0.5);
}
.yeahslider .yeahslider-direction-nav span.nav-button i,
.yeahslider .yeahslider-pauseplay span.nav-button i {
	color: #fb4598;
}
.yeahslider.yeahslider .slides li .caption,
.yeahslider.yeahslider .yeahslider-direction-nav a > span.nav-button,
.yeahslider.yeahslider .yeahslider-pauseplay a > span.nav-button {
	background-color: white;
}
.yeahslider.hover .yeahslider-next {
	opacity: .7;
	right: 0;
}
.yeahslider.hover .yeahslider-prev {
	opacity: .7;
	left: 0;
}

/* Fullscreen Slideshow */
body > .yeahslider .yeahslider-viewport {
	/* when expanding the slider for full-screen viewing it's attached directly
	 * to the body element */
	height: 100% !important;
}
.yeahslider .fa-compress,
.yeahslider .fa-expand {
	position: absolute;
	padding: 5px;
	background: white;
}
.yeahslider .fa-expand {
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	margin: 0;
	cursor: pointer;
	cursor: zoom-in;
	opacity: 0;
}
.yeahslider:hover .fa-expand {
	opacity: .8;
}
.yeahslider .fa-compress {
	top: 0;
	right: 0;
	font-size: 24px;
	margin: 7px;
	cursor: pointer;
	cursor: zoom-out;
}
body.fullscreen-slideshow {
	overflow: hidden;
}
body.fullscreen-slideshow .yeahslider {
	position: fixed;
	top: 0;
	z-index: 99999;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .7);
	display: flex;
}
body.fullscreen-slideshow .yeahslider-viewport {
	height: 90% !important;
	width: calc(90% - 340px) !important;
	background-color: white;
	margin: auto;
	margin-right: 0;
}
body.fullscreen-slideshow .yeahslider .slides {
	height: 100%;
	align-items: center;
}
body.fullscreen-slideshow .sidebar {
	background: white;
	height: 90%;
	width: 340px;
	margin: auto;
	margin-left: 0;
	padding: 20px;
	display: flex;
	flex-direction: -webkit-column;
	flex-direction: column;
	justify-content: space-around;
}
body.fullscreen-slideshow .sidebar > * {
	margin: 0;
	padding: 0;
}
body.fullscreen-slideshow .sidebar h1 {
	font-size: 22px;
}
body.fullscreen-slideshow .sidebar .post-page-navigation {
	margin: 0;
}
.slide-share [data-channel] {
	cursor: pointer;
	border: 1px solid #eee;
	border-radius: 5px;
	padding: .5em .25em;
}
.slide-share [data-channel]:hover {
	border-color: #999;
}

.slide-share [data-channel] .fa {
	margin: 0;
}
.slide-share [data-channel] .fa:before {
	height: 57px;
	display: inline-block;
	border-radius: 12px;
	width: 58px;
}
.slide-share .fa-facebook:before,
.slide-share .fa-facebook-f:before,
.slide-share .fa-facebook-official:before,
.slide-share .fa-facebook-square:before { color: #3b5998; }
.slide-share .fa-twitter:before,
.slide-share .fa-twitter-square:before { color: #55acee; }
.slide-share .fa-pinterest:before,
.slide-share .fa-pinterest-p:before,
.slide-share .fa-pinterest-square:before { color: #e3262e; }

.yeahslider.yeahslider .slides .thumbnail-caption {
	right: 50%;
	bottom: 0;
	background: white;
	padding: 5px 10px;
	font-size: .8em;
	color: #000;
	opacity: .7;
	-webkit-transform: translateX(50%);
	        transform: translateX(50%);
	font-family: palatino;
	text-align: center;
}

.slides [class*="_button_pin"] {
	display: none;
}

@media only screen and (max-width:991px) {
	/**
	 * mobile styles for slideshos nav, hover only isn't very handy
	 */
	.yeahslider-direction-nav {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		border-top: .5em solid white;
	}

	.yeahslider .yeahslider-viewport {
		overflow: visible !important;
	}

	.yeahslider-pauseplay a,
	.yeahslider-direction-nav a {
		position: initial;
		opacity: 1;
		filter: alpha(opacity=1);
	}

	.yeahslider .yeahslider-direction-nav a > span.nav-button,
	.yeahslider .yeahslider-pauseplay a > span.nav-button {
		position: initial;
	}

	.yeahslider.yeahslider .slides li .caption,
	.yeahslider.yeahslider .yeahslider-direction-nav a > span.nav-button,
	.yeahslider.yeahslider .yeahslider-pauseplay a > span.nav-button {
		background-color: #fb4598;
	}

	.yeahslider .yeahslider-direction-nav span.nav-button i,
	.yeahslider .yeahslider-pauseplay span.nav-button i {
		color: white;
	}

	.slides [class*="_button_pin"] {
		display: block;
		position: absolute;
		bottom: -63px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}
}
