/**
 * Main frontend CSS for Ssslider
 *
 * @author René Schulze
 * @package Ssslider
 **/

/*
--- Structure ---
	• General
-----------------
*/

/* General
------------------------------------------------------------------------------*/

.ssslider {

	margin-right: -2.617924em;
	margin-bottom: 2em;
	margin-left: -2.617924em;

}

.ssslider + .ssslider {

	margin-top: -2em;

}

.ssslider .slider-list {

	margin: 0;
	list-style-type: none;

}

.ssslider .slide {

	min-height: 500px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: flex-end;
	align-items: center;

	position: relative;

}

@media (max-width: 568px) {

	.ssslider .slide {

		min-height: 0;
		justify-content: center;

	}

}

.ssslider .slide.darkend::before {

	content: '';

	background-color: rgba(0,0,0,.3);

	display: block;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;

}

.ssslider .slide.no-image {

	min-height: 0;

}

.ssslider .slide.no-image::before {

	display: none;

}

.ssslider .slide .slide-link {

	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: flex-end;
	align-items: center;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;

}

@media (max-width: 568px) {

	.ssslider .slide .slide-link {

		position: static;

	}

}

.ssslider .slide-content {

	max-width: 40%;
	margin: 3em 5% 3em 0;

	text-align: center;

	position: relative;
	z-index: 2;

}

@media (max-width: 568px) {

	.ssslider .slide-content {

		max-width: none;
		margin: 2em;

	}

}

.ssslider .slide.no-image .slide-content {

	width: 100%;
	max-width: none;

	flex: 1 1 100%;

	margin: 2em;

}

.ssslider .slide-content,
.ssslider .slide-content h2,
.ssslider .slide-content p {

	color: #fff;
	font-size: 24px;
	text-shadow: 1px 1px 0 rgba(0,0,0,.2);

}

.ssslider .slide.no-image .slide-content,
.ssslider .slide.no-image .slide-content h2,
.ssslider .slide.no-image .slide-content p {

	color: #3e3e3e;
	text-shadow: none;

}

@media (max-width: 568px) {

	.ssslider .slide-content,
	.ssslider .slide-content h2,
	.ssslider .slide-content p {

		font-size: 20px;

	}

}

.ssslider .slide-content h2 {

	font-weight: 700;
	font-style: normal;
	line-height: 1em;

	margin-bottom: .2em;

}

.ssslider .slide-content p {

	font-weight: 300;
	line-height: 1.2em;

}

.ssslider .slick-dots {

	bottom: 10px;
	z-index: 100;

}

.slick-dots li button::before,
.slick-dots li.slick-active button::before,
.ssslider .slick-dots button {

	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0,.8);

}

.ssslider .slide-image {

	visibility: hidden;

}