Uecko_Web/fullscreenSlider/custom.css

.sliderR .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; background: #2e3740; color: #fff;}.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; font-weight: 100 !important;}.demo-2 .sl-slider h2 {font-size: 100px; text-shadow: 0 -1px 0 rgba(0,0,0, 1); font-weight: 100;}.demo-2 .sl-slider blockquote {font-size: 28px; padding-top: 10px; font-weight: 100; text-shadow: 0 -1px 0 rgba(0,0,0, 1);}.demo-2 .sl-slider blockquote cite {font-size: 16px; font-weight: 100; font-style: normal; text-transform: uppercase; letter-spacing: 5px; padding-top: 30px; display: inline-block;}.demo-2 .bg-img {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center;}.sliderR .bg-1 .sl-slide-inner, .sliderR .bg-1 .sl-content-slic, .sliderR .bg-2 .sl-slide-inner, .sliderR .bg-2 .sl-content-slic,.sliderR .bg-3 .sl-slide-inner, .sliderR .bg-3 .sl-content-slic,.sliderR .bg-4 .sl-slide-inner, .sliderR .bg-4 .sl-content-slic,.sliderR .bg-5 .sl-slide-inner, .sliderR .bg-5 .sl-content-slic {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center;}.nav-arrows span {position: absolute; z-index: 2000; top: 50%; width: 50px; height: 50px; border: 2px solid #ddd; border: 2px solid rgba(255,255,255,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 {font-weight: 100; border-color: rgba(255,255,255,0.9);}.nav-arrows span.nav-arrow-prev {left: 5%; border-right: none; border-top: none; opacity: 0;}.nav-arrows span.nav-arrow-prev:hover {opacity: 1;}.nav-arrows span.nav-arrow-next {right: 5%; border-left: none; border-bottom: none; opacity: 0;}.nav-arrows span.nav-arrow-next:hover {opacity: 1;}.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);}.sliderR .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;}.sliderR [data-icon]:after {content: attr(data-icon); 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%;}.sliderR .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;}.sliderR .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;}.sliderR .sl-slide blockquote p{margin: 0 auto; width: 60%; max-width: 400px; position: relative;}.sliderR .sl-slide blockquote p:before {color: #f0f0f0; color: rgba(244,244,244,0.65); position: absolute; line-height: 60px; width: 75px; height: 75px; font-size: 200px; z-index: -1; left: -80px; top: 35px; content: '\201C';}.sliderR .sl-slide blockquote cite {font-size: 10px; padding-top: 10px; display: inline-block; font-style: normal; text-transform: uppercase; letter-spacing: 4px;}.sliderR .bg-1 .sl-slide-inner,.sliderR .bg-1 .sl-content-slice {background-image: url(../img/images/1.jpg);}.sliderR .bg-2 .sl-slide-inner,.sliderR .bg-2 .sl-content-slice {background-image: url(../img/images/2.jpg); width: 100%; height: 100%;}.sliderR .bg-2 [data-icon]:after,.sliderR .bg-2 h2 {color: #fff;}.sliderR .bg-2 blockquote:before {color: #222;}.sliderR .bg-3 .sl-slide-inner,.sliderR .bg-3 .sl-content-slice {background-image: url(../img/images/3.jpg); width: 100%; height: 100%;}.sliderR .bg-3 .deco {border-color: #fff; border-color: rgba(255,255,255,0.5);}.sliderR .bg-3 [data-icon]:after {color: #fff; text-shadow: 0 0 1px #fff; box-shadow: inset 0 0 0 10px #b55381;}.sliderR .bg-3 h2,.sliderR .bg-3 blockquote{color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3);}.sliderR .bg-3 blockquote:before {color: #c46c96;}.sliderR .bg-4 .sl-slide-inner,.sliderR .bg-4 .sl-content-slice {background-image: url(../img/images/4.jpg); width: 100%; height: 100%;}.sliderR .bg-4 .deco {border-color: #379eaa;}.sliderR .bg-4 [data-icon]:after {text-shadow: 0 0 1px #277d87; color: #277d87;}.sliderR .bg-4 h2,.sliderR .bg-4 blockquote{color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2);}.sliderR .bg-4 blockquote:before {color: #379eaa;}.sliderR .bg-5 .sl-slide-inner,.sliderR .bg-5 .sl-content-slice {background-image: url(../img/images/5.jpg); width: 100%; height: 100%;}.sliderR .bg-5 .deco {border-color: #ECD82C;}.sliderR .bg-5 .deco:after {color: #000; text-shadow: 0 0 1px #000;}.sliderR .bg-5 h2,.sliderR .bg-5 blockquote{color: #000; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}.sliderR .bg-5 blockquote:before {color: #ecd82c;}.demo-2 .bg-img-1 {background-image: url(../img/images/1.jpg);}.demo-2 .bg-img-2 {background-image: url(../img/images/2.jpg);}.demo-2 .bg-img-3 {background-image: url(../img/images/3.jpg);}.demo-2 .bg-img-4 {background-image: url(../img/images/4.jpg);}.demo-2 .bg-img-5 {background-image: url(../img/images/5.jpg);}.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 screen and (max-width: 660px) {.sliderR .deco {width: 130px; height: 130px; margin-left: -65px; margin-bottom: 50px;} .sliderR [data-icon]:after {width: 110px; height: 110px; line-height: 110px; font-size: 40px; margin: -55px 0 0 -55px;} .sliderR .sl-slide blockquote {margin-bottom: -120px;} .sliderR .sl-slide h2 {line-height: 22px; font-size: 18px; margin-bottom: -40px; letter-spacing: 8px;} .sliderR .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;}}