.demo-1 .sl-slider-wrapper{position:absolute;width:100%;height:100%;top:0;left:0;}
.demo-2 .sl-slider-wrapper{width:100%;height:600px;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:100px;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%;background-size:cover;background-position:center center;}
.nav-arrows span{position:absolute;z-index:2000;top:50%;width:40px;height:40px;border:4px solid rgba(255,255,255,0.4);text-indent:-90000px;margin-top:-40px;cursor:pointer;transform:rotate(45deg);}
.nav-arrows span:hover{border-color:rgba(255,255,255,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;}
.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(0,0,0,0.25);cursor:pointer;}
.demo-2 .nav-dots span{background:rgba(0,0,0,0.1);margin:6px;transition:all 0.2s;}
.nav-dots span.nav-dot-current:after{content:"";position:absolute;width:16px;height:16px;top:0px;left:0px;border-radius:50%;background:rgba(255,255,255,0.8);}
.demo-1 .deco{width:260px;height:260px;border:2px dashed #ddd;border:2px dashed rgba(0,0,0,0.25);border-radius:50%;position:absolute;bottom:50%;left:50%;margin:0 0 0 -130px;}
.demo-1 [data-icon]:after{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:#fff;padding:20px;position:relative;font-size:38pt;font-weight:bold;width:550px;left:50%;text-align:left;line-height:50px;margin-top:100px;margin-left:-450px;margin-bottom:0px;text-shadow:0px 0px 10px rgba(0,0,0,0.2);}
.demo-1 .sl-slide blockquote, .demo-1 .sl-slide p{position:relative;width:550px;text-align:left;left:50%;font-weight:400;font-size:13pt;line-height:24px;color:#fff;z-index:2;margin-top:0px;margin-left:-450px;padding:0px 20px;font-family:'Raleway', sans-serif;text-shadow:0px 0px 10px rgba(0,0,0,0.6);}
.demo-1 .sl-slide a{display:inline-block;color:#fff;font-family:'Raleway', sans-serif;padding:10px 20px;text-decoration:none;background:transparent;position:relative;margin-top:20px;text-shadow:none;font-size:14pt;border:1px solid rgba(255,255,255,0.3);margin-right:10px;}
.demo-1 .sl-slide a:hover{background:#F05304;}
.sl-trans-elems .deco{animation:roll 1s ease-out both, fadeIn 1s ease-out both;}
.sl-trans-elems h2{animation:moveUp 1s ease-in-out both;}
.sl-trans-elems blockquote{animation:fadeIn 0.5s linear 0.5s both;}
.sl-trans-back-elems .deco{animation:scaleDown 1s ease-in-out both;}
.sl-trans-back-elems h2{animation:fadeOut 1s ease-in-out both;}
.sl-trans-back-elems blockquote{animation:fadeOut 1s linear both;}
@keyframes roll{0%{transform:translateX(500px) rotate(360deg);opacity:0;}
100%{transform:translateX(0px) rotate(0deg);opacity:1;}
}
@keyframes moveUp{0%{transform:translateY(40px);}
100%{transform:translateY(0px);}
}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes scaleDown{0%{transform:scale(1);}
100%{transform:scale(0.5);}
}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@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;}
}