.demo-1 .sl-slider-wrapper {

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

}

.demo-2 .sl-slider-wrapper {

	width: 100%;

	/*height: 600px;*/

	height: 800px;

	overflow: hidden;

	position: relative;

}

.demo-2 .sl-slider h2, .demo-2 .sl-slider blockquote {

	padding: 130px 30px 10px 30px;

	/*padding: 170px 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: 50px;

	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);

	text-align:center;

}

.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);

	line-height:34px;

	text-align:center;

}

.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;

}

/* 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: 15%;*/
	
	/*bottom: 2%;*/
	
	bottom: 5%;

	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-0 {

	background-image: url(../images/0.jpg);

}

.demo-2 .bg-img-1 {

	background-image: url(../images/1.jpg);

}

.demo-2 .bg-img-2 {

	background-image: url(../images/2.jpg);

}

.demo-2 .bg-img-3 {

	background-image: url(../images/3.jpg);

}

.demo-2 .bg-img-4 {

	background-image: url(../images/4.jpg);

}

.demo-2 .bg-img-5 {

	background-image: url(../images/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: 630px;

}

.demo-2 .sl-slider h2 {

	font-size: 36px;

}

.demo-2 .sl-slider blockquote {

	font-size: 16px;

}

}