.smart-slider {
	&__instance {
		position: relative;
		overflow: hidden;
		width: 100%;
		.sp-full-screen-button {
			right: 15px;
			color: $white;
		}
		.sp-selected-thumbnail {
			border: 4px solid;
		}
		.sp-bottom-thumbnails,
		.sp-top-thumbnail {
			.sp-thumbnail-container {
				margin-right: 5px;
				margin-left: 5px;
			}
		}
		.sp-arrow {
			width: 50px;
			height: 50px;
			&:before {
				font-size: 24px;
				position: relative;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 1em;
				height: 1em;
				margin: 13px;
				transform: none;
				background-color: transparent;
				@include material-icon();
			}
			&:after {
				display: none;
			}
			&.sp-previous-arrow {
				@include border-right-radius($border__radius);
			}
			&.sp-next-arrow {
				@include border-left-radius($border__radius);
			}
		}
		.sp-horizontal {
			.sp-previous-arrow {
				left: 0;
				&:before {
					content: 'keyboard_arrow_left';
				}
			}
			.sp-next-arrow {
				right: 0;
				&:before {
					content: 'keyboard_arrow_right';
				}
			}
		}
		.sp-vertical {
			.sp-arrows {
				margin-left: -25px;
			}
			.sp-previous-arrow {
				top: 0;
				&:before {
					content: 'keyboard_arrow_left';
				}
			}
			.sp-next-arrow {
				bottom: 0;
				&:before {
					content: 'keyboard_arrow_right';
				}
			}
		}
		.sp-buttons {
			position: absolute;
			bottom: 15%;
			padding: 0;
		}
		.sp-button {
			width: 15px;
			height: 15px;
			margin: 4px 15px;
			border-color: $white;
			&.sp-selected-button {
				background-color: $white;
			}
		}
		h2.sp-title {
			font-size: 20px;
			line-height: 1.2;
			overflow: hidden;

			@include media-breakpoint-up(sm) {
				font-size: 30px;
			}
			@include media-breakpoint-up(md) {
				font-size: 40px;
			}
			@include media-breakpoint-up(lg) {
				font-size: 60px;
			}
			@include media-breakpoint-up(xl) {
				font-size: 80px;
			}
			a {
				white-space: nowrap;
			}
		}
		.sp-slide {
			text-align: center;
			&.text-wrapped {
				h2.sp-title {
					font-size: 14px;
					line-height: 1.2;

					@include media-breakpoint-up(sm) {
						font-size: 18px;
					}
					@include media-breakpoint-up(md) {
						font-size: 22px;
					}
					@include media-breakpoint-up(lg) {
						font-size: 30px;
					}
					@include media-breakpoint-up(xl) {
						font-size: 40px;
					}
				}
			}
		}
		.sp-image-container:after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			content: '';
		}
	}
}

.sidebar {
	.smart-slider__instance {
		.sp-slide.text-wrapped {
			h2.sp-title {
				font-size: 25px;
				line-height: 1.2;
				text-align: center;
			}
		}
	}
}