.slick-lightbox-close {
	right: 32px;
	top: 47px;
}

.gallery,
.slick-lightbox-inner {
	.slick-arrow {
		background: transparent;
		border-radius: 50%;
		border-style: solid;
		border-width: 2px;
		font: 0/0 a;
		height: 4rem;
		margin-top: calc((2.25rem - 17px) / 2);
		padding: 0;
		position: absolute;
		text-shadow: none;
		top: 50%;
		transform: translateY(-50%);
		transition: border 300ms ease;
		width: 4rem;
		z-index: 3;

		&:before {
			display: block;
			font-family: 'FontAwesome';
			font-size: 3rem;
			line-height: 1;
			position: absolute;
			text-rendering: auto;
			top: 47%;
			transform: translateY(-50%);
			transition: color 300ms ease;

			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&.slick-disabled { cursor: not-allowed; }

		&.slick-prev {
			&:before {
				content: '\f104';
				left: 1.1rem;
			}
		}

		&.slick-next {
			&:before {
				content: '\f105';
				left: 1.5rem;
			}
		}
	}
}

.gallery {
	.slick-dots:not(.dropdown-menu) {
		align-items: center;
		display: flex;
		flex-flow: row wrap;
		height: auto;
		justify-content: center;
		list-style: none;
		margin: 2rem 0 0;
		padding: 0;

		& > li {
			line-height: 1;
			padding: 5px;

			@include media('>=tablet') { padding: 0 7.5px; }

			& > button {
				background: transparent;
				border-style: solid;
				border-width: 1px;
				font: 0/0 a;
				height: 12px;
				transition: all 300ms ease-in-out;
				width: 4rem;

				@include media('>=tablet') { height: 6px; }
			}
		}
	}

	.slick-arrow {
		&.slick-prev { left: -4rem; }
		&.slick-next { right: -4rem; }
	}
}

.slick-lightbox-inner {
	.slick-arrow {
		opacity: .75;

		&:hover { opacity: 1; }
	}
}

.slick-lightbox-slick-caption { display: inline-block; }
