.demo-1 .sl-slider-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.sl-slider-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; }
.sl-slider h2,  .sl-slider blockquote { padding: 100px 30px 10px 30px; width: 80%; max-width: 960px; color: #fff; margin: 0 auto; position: relative; z-index: 100; border-left: 0px; }
.sl-slider h2 { font-size: 100px; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); }
.sl-slider blockquote { font-size: 28px; padding-top: 45px; font-weight: 300; text-shadow: 0 -1px 0 rgba(0,0,0,0.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; }
.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: 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); }
.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); }
.nav-dots span.nav-dot-current,  .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; }
.bg-img-1 { background: #005bac; }
.bg-img-2 { background: #d32c2c; }
.bg-img-3 { background: #eB6796; }
.bg-img-4 { background: url(../img/4.png); }
.bg-img-5 { background: url(../img/5.png); }
.slider-link { display: block; width: 100%; height: 90%; position: absolute; left: 0; top: 0; z-index: 101; }
/* 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; }
.sl-slider-wrapper { height: 500px; }
.sl-slider h2 { font-size: 36px; }
.sl-slider blockquote { font-size: 16px; }
}