.slider-pro { 
	position: relative; 
	margin: 0 auto; 
	box-sizing: content-box; 
	margin-bottom: 20px; 
	background-size: 100%;
	background: #fff;
}
.sp-slides-container { position: relative;}
.sp-mask { position: relative; overflow: hidden;}
.sp-slides { position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}
.sp-slide { position: absolute;}
.sp-caption { top:20px; position: absolute;}
.sp-caption-container a { color: #fff;}
.sp-caption-container { overflow: hidden;}
.sp-image { position: relative;	display: block;	border: none;}
.sp-no-js {	overflow: hidden; max-width: 100%;}

/* Thumbnails */
.sp-thumbnails-container { position: relative; overflow: hidden;}
.sp-top-thumbnails, .sp-bottom-thumbnails  { left: 0; margin: 0 auto;}
.sp-top-thumbnails { position: absolute; top: 0; margin-bottom: 4px;}
.sp-bottom-thumbnails { margin-top: 4px;}
.sp-left-thumbnails, .sp-right-thumbnails { position: absolute;	top: 0;}
.sp-right-thumbnails { right: 0; margin-left: 4px;}
.sp-left-thumbnails { left: 0; margin-right: 4px;}
.sp-thumbnails { position: relative;}
.sp-thumbnail { border: none;}
.sp-thumbnail-container { position: relative; display: block; overflow: hidden; float: left; box-sizing: border-box;}

/* Vertical thumbnails */
.sp-left-thumbnails .sp-thumbnail-container, .sp-right-thumbnails .sp-thumbnail-container { margin-bottom: 0; border-bottom: 1px solid #ccc;}
.sp-left-thumbnails .sp-thumbnail-container:first-child, .sp-right-thumbnails .sp-thumbnail-container:first-child {	margin-top: 0;}
.sp-left-thumbnails .sp-thumbnail-container:last-child, .sp-right-thumbnails .sp-thumbnail-container:last-child { margin-bottom: 0;}

/* Right thumbnails with pointer */
.sp-right-thumbnails.sp-has-pointer { margin-left: 0;}
.sp-right-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute;	left: 5px; background: #fff; margin-left: 0 !important;}
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {	
	content: ''; 
	position: absolute; 
	height: 100%; 
	border: 5px solid #d35614;
	left: 0; 
	top: 0; 
	margin-left: 0;
}

/* Layers */
.sp-layer { 
	position: absolute; 
	margin: 0; 
	box-sizing: border-box;
	-webkit-font-smoothing: subpixel-antialiased; 
	-webkit-backface-visibility: hidden;
}
.sp-black { color: #fff; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7);}
.sp-white { color: #000; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.7);}
.sp-rounded { border-radius: 10px;}
.sp-padding { padding: 10px;}

/* Touch Swipe */
.sp-grab { cursor: url(../images/openhand.cur), move;}
.sp-grabbing { cursor: url(../images/closedhand.cur), move;}
.sp-selectable { cursor: default;}

/* Caption */
.sp-caption-container { 
	position: absolute; 
	bottom: 0px;
	z-index: 999;
	color: #fff;
	background: rgb(0,0,0);
	background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 30%);
}

/* Full Screen */
.sp-full-screen { margin: 0 !important; background-color: #000;}
.sp-full-screen-button {
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transform: rotate(45deg);
}
.sp-full-screen-button:before { content: '\2195';}
.sp-fade-full-screen { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;}
.slider-pro:hover .sp-fade-full-screen { opacity: 1;}

/* Buttons */
.sp-buttons { position: relative; width: 100%; text-align: center; padding-top: 10px;}
.sp-button {
	width: 10px;
	height: 10px;
	border: 2px solid #000;
	border-radius: 50%;
	margin: 4px;
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
}
.sp-selected-button { background-color: #000;}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.sp-button { width: 14px; height: 14px;}
}

@media only screen and (min-width: 568px) and (max-width: 768px) {
	.sp-button { width: 16px; height: 16px;}
}

@media only screen and (min-width: 320px) and (max-width: 568px) {
	.sp-button { width: 18px; height: 18px;}
}

/* Arrows */
.sp-arrows { position: absolute;}
.sp-fade-arrows { opacity: 0; transition: opacity 0.5s;}
.sp-slides-container:hover .sp-fade-arrows { opacity: 1;}
.sp-horizontal .sp-arrows { width: 100%; left: 0; top: 50%; margin-top: -15px;}
.sp-vertical .sp-arrows { height: 100%; left: 50%; top: 0; margin-left: -10px;}
.sp-arrow { position: absolute; display: block; width: 20px; height: 30px; cursor: pointer;}
.sp-vertical .sp-arrow { transform: rotate(90deg);}
.sp-horizontal .sp-previous-arrow { left: 20px;}
.sp-horizontal .sp-next-arrow { right: 20px;}
.sp-vertical .sp-previous-arrow { top: 20px;}
.sp-vertical .sp-next-arrow { bottom: 20px;}
.sp-previous-arrow:before, 
.sp-previous-arrow:after, 
.sp-next-arrow:before, 
.sp-next-arrow:after { 
	content: ''; 
	position: absolute; 
	width: 50%; 
	height: 50%; 
	background-color: #fff;
}
.sp-previous-arrow:before { left: 30%; top: 0; transform: skew(145deg, 0deg);}
.sp-previous-arrow:after { left: 30%; top: 50%; transform: skew(-145deg, 0deg);}
.sp-next-arrow:before { right: 30%; top: 0; transform: skew(35deg, 0deg);}

.sp-next-arrow:after { right: 30%; top: 50%; transform: skew(-35deg, 0deg);}
.ie8 .sp-arrow, .ie7 .sp-arrow { width: 0; height: 0;}
.ie8 .sp-arrow:before, .ie8 .sp-arrow:after, .ie7 .sp-arrow:before, .ie7 .sp-arrow:after { content: none;}
.ie8.sp-horizontal .sp-previous-arrow, 
.ie7.sp-horizontal .sp-previous-arrow {
	border-right: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
.ie8.sp-horizontal .sp-next-arrow,
.ie7.sp-horizontal .sp-next-arrow {
	border-left: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
.ie8.sp-vertical .sp-previous-arrow,
.ie7.sp-vertical .sp-previous-arrow {
	border-bottom: 20px solid #fff;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
.ie8.sp-vertical .sp-next-arrow,
.ie7.sp-vertical .sp-next-arrow {
	border-top: 20px solid #fff;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}

/* Thumbnail Arrows */
.sp-thumbnail-arrows { position: absolute;}
.sp-fade-thumbnail-arrows { opacity: 0; transition: opacity 0.5s;}
.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows { opacity: 1;}
.sp-top-thumbnails .sp-thumbnail-arrows,
.sp-bottom-thumbnails .sp-thumbnail-arrows {
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -12px;
}
.sp-left-thumbnails .sp-thumbnail-arrows,
.sp-right-thumbnails .sp-thumbnail-arrows {
	height: 100%;
	top: 0;
	left: 50%;
	margin-left: -7px;
}
.sp-thumbnail-arrow {
	position: absolute;
	display: block;
	width: 15px;
	height: 25px;
	cursor: pointer;
}
.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,
.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow {	transform: rotate(90deg);}
.sp-top-thumbnails .sp-previous-thumbnail-arrow,
.sp-bottom-thumbnails .sp-previous-thumbnail-arrow { left: 0px;}
.sp-top-thumbnails .sp-next-thumbnail-arrow,
.sp-bottom-thumbnails .sp-next-thumbnail-arrow { right: 0px;}
.sp-left-thumbnails .sp-previous-thumbnail-arrow,
.sp-right-thumbnails .sp-previous-thumbnail-arrow { top: 0px;}
.sp-left-thumbnails .sp-next-thumbnail-arrow,
.sp-right-thumbnails .sp-next-thumbnail-arrow { bottom: 0px;}
.sp-previous-thumbnail-arrow:before,
.sp-previous-thumbnail-arrow:after,
.sp-next-thumbnail-arrow:before,
.sp-next-thumbnail-arrow:after {
	content: '';
	position: absolute;
	width: 50%;
	height: 50%;
	background-color: #fff;
}
.sp-previous-thumbnail-arrow:before { left: 30%; top: 0; transform: skew(145deg, 0deg);}
.sp-previous-thumbnail-arrow:after { left: 30%; top: 50%; transform: skew(-145deg, 0deg);}
.sp-next-thumbnail-arrow:before { right: 30%; top: 0; transform: skew(35deg, 0deg);}
.sp-next-thumbnail-arrow:after { right: 30%; top: 50%; transform: skew(-35deg, 0deg);}
.ie8 .sp-thumbnail-arrow,
.ie7 .sp-thumbnail-arrow { width: 0; height: 0;}
.ie8 .sp-thumbnail-arrow:before,
.ie8 .sp-thumbnail-arrow:after,
.ie7 .sp-thumbnail-arrow:before,
.ie7 .sp-thumbnail-arrow:after { content: none;}
.ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
	border-right: 12px solid #fff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}
.ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow {
	border-left: 12px solid #fff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}
.ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow {
	border-bottom: 12px solid #fff;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
}
.ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow {
	border-top: 12px solid #fff;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
}

/* Video */
a.sp-video { text-decoration: none;}
a.sp-video img { -webkit-backface-visibility: hidden; border: none;}
a.sp-video:after {
	content: '\25B6';
	position: absolute;
	width: 45px;
	padding-left: 5px;
	height: 50px;
	border: 2px solid #fff;
	text-align: center;
	font-size: 30px;
	border-radius: 30px;
	top: 0;
	color: #fff;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.2);
	margin: auto;
	line-height: 52px;
}

/* Example */
#example .sp-thumbnail-image-container { width: 100px; height: 80px; overflow: hidden; float: left;}
#example .sp-thumbnail-image { height: 100%;}
#example .sp-thumbnail-text { float: right; background-color: #fff; box-sizing: border-box;}
#example .sp-thumbnail-title { margin-bottom: 5px; color: #333;}
#example .sp-thumbnail-description { font-size: 14px; color: #333;}

@media (max-width: 425px) {
	#example .sp-thumbnail { text-align: center;}
	#example .sp-thumbnail-image-container { display: none;}
	#example .sp-thumbnail-text { width: 120px;}
	#example .sp-thumbnail-title { font-size: 12px;}
	#example .sp-thumbnail-description { display: none;}
	.sl-title {padding: 15px 20px 10px;}
}

@media screen and (min-width: 426px) and (max-width: 768px) {
	.sp-caption-container { width: 100%;}
	.sl-title {padding: 25px 20px 15px;}
}

@media screen and (min-width:769px) and (max-width: 1024px) {
	.sp-caption-container { width: 66.4%;}
	#example .sp-thumbnail-text { width: 130px; height: 80px; padding: 3px 0 3px 3px;}
	#example .sp-thumbnail-title { font-size: 12px;}
	.sl-title {padding: 25px 20px 15px;}
}

@media screen and (min-width: 1200px) {
	.sp-caption-container { width: 66.8%;}
	#example .sp-thumbnail-text { width: 172px; height: 80px; padding: 4px 0 4px 4px;}
	#example .sp-thumbnail-title { font-size: 12px;}
	.sl-title {padding: 25px 20px 15px;}
}