.demo-1 .sl-slider-wrapper {	position: absolute;	width: 100%;	height: 100%;	top: 0;	left: 0;}.slide-caption{width:100%;position:absolute;bottom:120px;}.demo-2 {  margin-top:88px;}.demo-2 .sl-slider-wrapper {	width: 100%;	height: 800px;	overflow: hidden;	position: relative; }
.demo-2 .sl-slider h2,.demo-2 .sl-slider blockquote {	padding: 100px 30px 10px 30px;	width: 80%;	max-width: 960px;	color: #fff;	margin: 0 auto;	position: relative;	z-index: 100;}
.demo-2 .sl-slider h2 {	font-size: 60px;	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);}
.demo-2 .sl-slider blockquote {	font-size: 28px;	padding-top: 10px;	font-weight: 300;	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);}
.demo-2 .sl-slider blockquote cite {	font-size: 16px;	font-weight: 700;	font-style: normal;	text-transform: uppercase;	letter-spacing: 5px;	padding-top: 30px;	display: inline-block;}
.demo-2 .bg-img {	/* padding: 200px; */	-webkit-box-sizing: content-box;	-moz-box-sizing: content-box;	box-sizing: content-box;	position: absolute;	/* top: -200px; */	/* left: -200px; */	width: 100%;	height: 100%;	-webkit-background-size: cover;	-moz-background-size: cover;	background-size: cover;	background-position: center center;	left: 0;	right: 0;	top: 0;	bottom: 0;}
/* Custom navigation arrows */
.nav-arrows span {	position: absolute;	z-index: 2000;	top: 50%;	width: 40px;	height: 40px;	border: 8px solid #ddd;	border: 8px solid rgba(150,150,150,0.4);	text-indent: -90000px;	margin-top: -40px;	cursor: pointer;		-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	-o-transform: rotate(45deg);	-ms-transform: rotate(45deg);	transform: rotate(45deg);}
.nav-arrows span:hover {	border-color: rgba(150,150,150,0.9);}
.nav-arrows span.nav-arrow-prev {	left: 5%;	border-right: none;	border-top: none;}
.nav-arrows span.nav-arrow-next {	right: 5%;	border-left: none;	border-bottom: none;}
/* Custom navigation dots */
.nav-dots {	text-align: center;	position: absolute;	bottom: 2%;	height: 30px;	width: 100%;	left: 0;	z-index: 1000;}
.nav-dots span {	display: inline-block;	position: relative;	width: 16px;	height: 16px;	border-radius: 50%;	margin: 3px;	background: #ddd;	background: rgba(150,150,150,0.4);	cursor: pointer;	box-shadow: 		0 1px 1px rgba(255,255,255,0.4), 		inset 0 1px 1px rgba(0,0,0,0.1);}
.demo-2 .nav-dots span {	background: rgba(150,150,150,0.1);	margin: 6px;	-webkit-transition: all 0.2s;	-moz-transition: all 0.2s;	-ms-transition: all 0.2s;	-o-transition: all 0.2s;	transition: all 0.2s;	box-shadow: 		0 1px 1px rgba(255,255,255,0.4), 		inset 0 1px 1px rgba(0,0,0,0.1),		0 0 0 2px rgba(255,255,255,0.5);}
.demo-2 .nav-dots span.nav-dot-current,.demo-2 .nav-dots span:hover {	box-shadow: 		0 1px 1px rgba(255,255,255,0.4), 		inset 0 1px 1px rgba(0,0,0,0.1),		0 0 0 5px rgba(255,255,255,0.5);}
.nav-dots span.nav-dot-current:after {	content: "";	position: absolute;	width: 10px;	height: 10px;	top: 3px;	left: 3px;	border-radius: 50%;	background: rgba(255,255,255,0.8);}
/* Content elements */
.demo-1 .deco {	width: 260px;	height: 260px;	border: 2px dashed #ddd;	border: 2px dashed rgba(150,150,150,0.4);	border-radius: 50%;	position: absolute;	bottom: 50%;	left: 50%;	margin: 0 0 0 -130px;}
.demo-1 [data-icon]:after {    content: attr(data-icon);    font-family: 'AnimalsNormal';	color: #999;	text-shadow: 0 0 1px #999;	position: absolute;	width: 220px;	height: 220px;	line-height: 220px;	text-align: center;	font-size: 100px;	top: 50%;	left: 50%;	margin: -110px 0 0 -110px;	box-shadow: inset 0 0 0 10px #f7f7f7;	border-radius: 50%;}
.demo-1 .sl-slide h2 {	color: #000;	text-shadow: 0 0 1px #000;	padding: 20px;	position: absolute;	font-size: 34px;	font-weight: 700;	letter-spacing: 13px;	text-transform: uppercase;	width: 80%;	left: 10%;	text-align: center;	line-height: 50px;	bottom: 50%;	margin: 0 0 -120px 0;}
.demo-1 .sl-slide blockquote {	position: absolute;	width: 100%;	text-align: center;	left: 0;	font-weight: 400;	font-size: 14px;	line-height: 20px;	height: 70px;	color: #8b8b8b;	z-index: 2;	bottom: 50%;	margin: 0 0 -200px 0;	padding: 0;}
.demo-1 .sl-slide blockquote p{	margin: 0 auto;	width: 60%;	max-width: 400px;	position: relative;}
.demo-1 .sl-slide blockquote p:before {	color: #f0f0f0;	color: rgba(244,244,244,0.65);	font-family: "Bookman Old Style", Bookman, Garamond, serif;	position: absolute;	line-height: 60px;	width: 75px;	height: 75px;	font-size: 200px;	z-index: -1;	left: -80px;	top: 35px;	content: '\201C';}
.demo-1 .sl-slide blockquote cite {	font-size: 10px;	padding-top: 10px;	display: inline-block;	font-style: normal;	text-transform: uppercase;	letter-spacing: 4px;}
/* Custom background colors for slides in first demo */
/* First Slide */.demo-1 .bg-1 .sl-slide-inner,.demo-1 .bg-1 .sl-content-slice {	background: #fff;}
/* Second Slide */.demo-1 .bg-2 .sl-slide-inner,.demo-1 .bg-2 .sl-content-slice {	background: #000;}
.demo-1 .bg-2 [data-icon]:after,.demo-1 .bg-2 h2 {	color: #fff;}
.demo-1 .bg-2 blockquote:before {	color: #222;}
/* Third Slide */.demo-1 .bg-3 .sl-slide-inner,.demo-1 .bg-3 .sl-content-slice {	background: #db84ad;}
.demo-1 .bg-3 .deco {	border-color: #fff;	border-color: rgba(255,255,255,0.5);}
.demo-1 .bg-3 [data-icon]:after {	color: #fff;	text-shadow: 0 0 1px #fff;	box-shadow: inset 0 0 0 10px #b55381;}
.demo-1 .bg-3 h2,.demo-1 .bg-3 blockquote{	color: #fff;	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);}
.demo-1 .bg-3 blockquote:before {	color: #c46c96;}
/* Forth Slide */.demo-1 .bg-4 .sl-slide-inner,.demo-1 .bg-4 .sl-content-slice {	background: #5bc2ce;}
.demo-1 .bg-4 .deco {	border-color: #379eaa;}
.demo-1 .bg-4 [data-icon]:after {	text-shadow: 0 0 1px #277d87;	color: #277d87;}
.demo-1 .bg-4 h2,.demo-1 .bg-4 blockquote{	color: #fff;	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);}
.demo-1 .bg-4 blockquote:before {	color: #379eaa;}
/* Fifth Slide */.demo-1 .bg-5 .sl-slide-inner,.demo-1 .bg-5 .sl-content-slice {	background: #ffeb41;}
.demo-1 .bg-5 .deco {	border-color: #ECD82C;}
.demo-1 .bg-5 .deco:after {	color: #000;	text-shadow: 0 0 1px #000;}
.demo-1 .bg-5 h2,.demo-1 .bg-5 blockquote{	color: #000;	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.demo-1 .bg-5 blockquote:before {	color: #ecd82c;}
.demo-2 .bg-img-1 {	background-image: url(../images/banner/1.jpg);}.demo-2 .bg-img-2 {	background-image: url(../images/banner/2.jpg);}.demo-2 .bg-img-3 {	background-image: url(../images/banner/3.jpg);}.demo-2 .bg-img-4 {	background-image: url(../images/banner/4.jpg);}.demo-2 .bg-img-5 {	background-image: url(../images/banner/5.jpg);}
/* Animations for content elements */
.sl-trans-elems .deco{	-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;	-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;	-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;	-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;	animation: roll 1s ease-out both, fadeIn 1s ease-out both;}.sl-trans-elems h2{	-webkit-animation: moveUp 1s ease-in-out both;	-moz-animation: moveUp 1s ease-in-out both;	-o-animation: moveUp 1s ease-in-out both;	-ms-animation: moveUp 1s ease-in-out both;	animation: moveUp 1s ease-in-out both;}.sl-trans-elems blockquote{	-webkit-animation: fadeIn 0.5s linear 0.5s both;	-moz-animation: fadeIn 0.5s linear 0.5s both;	-o-animation: fadeIn 0.5s linear 0.5s both;	-ms-animation: fadeIn 0.5s linear 0.5s both;	animation: fadeIn 0.5s linear 0.5s both;}.sl-trans-back-elems .deco{	-webkit-animation: scaleDown 1s ease-in-out both;	-moz-animation: scaleDown 1s ease-in-out both;	-o-animation: scaleDown 1s ease-in-out both;	-ms-animation: scaleDown 1s ease-in-out both;	animation: scaleDown 1s ease-in-out both;}.sl-trans-back-elems h2{	-webkit-animation: fadeOut 1s ease-in-out both;	-moz-animation: fadeOut 1s ease-in-out both;	-o-animation: fadeOut 1s ease-in-out both;	-ms-animation: fadeOut 1s ease-in-out both;	animation: fadeOut 1s ease-in-out both;}.sl-trans-back-elems blockquote{	-webkit-animation: fadeOut 1s linear both;	-moz-animation: fadeOut 1s linear both;	-o-animation: fadeOut 1s linear both;	-ms-animation: fadeOut 1s linear both;	animation: fadeOut 1s linear both;}@-webkit-keyframes roll{	0% {-webkit-transform: translateX(500px) rotate(360deg);}	100% {-webkit-transform: translateX(0px) rotate(0deg);}}@-moz-keyframes roll{	0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}}@-o-keyframes roll{	0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}}@-ms-keyframes roll{	0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}}@keyframes roll{	0% {transform: translateX(500px) rotate(360deg); opacity: 0;}	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}}@-webkit-keyframes moveUp{	0% {-webkit-transform: translateY(40px);}	100% {-webkit-transform: translateY(0px);}}@-moz-keyframes moveUp{	0% {-moz-transform: translateY(40px);}	100% {-moz-transform: translateY(0px);}}@-o-keyframes moveUp{	0% {-o-transform: translateY(40px);}	100% {-o-transform: translateY(0px);}}@-ms-keyframes moveUp{	0% {-ms-transform: translateY(40px);}	100% {-ms-transform: translateY(0px);}}@keyframes moveUp{	0% {transform: translateY(40px);}	100% {transform: translateY(0px);}}@-webkit-keyframes fadeIn{	0% {opacity: 0;}	100% {opacity: 1;}}@-moz-keyframes fadeIn{	0% {opacity: 0;}	100% {opacity: 1;}}@-o-keyframes fadeIn{	0% {opacity: 0;}	100% {opacity: 1;}}@-ms-keyframes fadeIn{	0% {opacity: 0;}	100% {opacity: 1;}}@keyframes fadeIn{	0% {opacity: 0;}	100% {opacity: 1;}}@-webkit-keyframes scaleDown{	0% {-webkit-transform: scale(1);}	100% {-webkit-transform: scale(0.5);}}@-moz-keyframes scaleDown{	0% {-moz-transform: scale(1);}	100% {-moz-transform: scale(0.5);}}@-o-keyframes scaleDown{	0% {-o-transform: scale(1);}	100% {-o-transform: scale(0.5);}}@-ms-keyframes scaleDown{	0% {-ms-transform: scale(1);}	100% {-ms-transform: scale(0.5);}}@keyframes scaleDown{	0% {transform: scale(1);}	100% {transform: scale(0.5);}}@-webkit-keyframes fadeOut{	0% {opacity: 1;}	100% {opacity: 0;}}@-moz-keyframes fadeOut{	0% {opacity: 1;}	100% {opacity: 0;}}@-o-keyframes fadeOut{	0% {opacity: 1;}	100% {opacity: 0;}}@-ms-keyframes fadeOut{	0% {opacity: 1;}	100% {opacity: 0;}}@keyframes fadeOut{	0% {opacity: 1;}	100% {opacity: 0;}}

/* Media Queries for custom slider */
@media screen and (max-width: 660px) {	.demo-1 .deco {		width: 130px;		height: 130px;		margin-left: -65px;		margin-bottom: 50px;	}
	.demo-1 [data-icon]:after {		width: 110px;		height: 110px;		line-height: 110px;		font-size: 40px;		margin: -55px 0 0 -55px;	}
	.demo-1 .sl-slide blockquote {		margin-bottom: -120px;	}
	.demo-1 .sl-slide h2 {		line-height: 22px;		font-size: 18px;		margin-bottom: -40px;		letter-spacing: 8px;	}
	.demo-1 .sl-slide blockquote p:before {		line-height: 10px;		width: 40px;		height: 40px;		font-size: 120px;		left: -45px;	}
	.demo-2 .sl-slider-wrapper {		height: 500px;	}
	.demo-2 .sl-slider h2 {		font-size: 36px;	}
	.demo-2 .sl-slider blockquote {		font-size: 16px;	}
}