/*GLOBALS*/
* { margin:0; padding:0; list-style:none; }
a { text-decoration:none;}

body, hmtl { background: #ecf0f1; font-family: 'Anton', sans-serif; }
#wrapper { width:410px; margin:50px auto; height:270px; position:relative; color:#fff; text-shadow:rgba(0, 0, 0, 0.1) 2px 2px 0px; }
#slider-wrap { width:410px; height:270px; position:relative; overflow:hidden; }
#slider-wrap ul#slider { width:100%; height:100%; position:absolute; top:0; left:0; }
#slider-wrap ul#slider li { float:left; position:relative; width:410px; height:270px; }
#slider-wrap ul#slider li > div { position:absolute; }
#slider-wrap ul#slider li > div h3 { font-size:36px; text-transform:uppercase; }
#slider-wrap ul#slider li > div span { font-family: Neucha, Arial, sans serif; font-size:12px; padding:10px; line-height:30px; }
#slider-wrap ul#slider li i { text-align:center; line-height:400px; display:block; width:100%; font-size:90px; }
/*btns*/
.btns { position:absolute; width:50px; height:60px; top:50%; margin-top:-30px; line-height:60px; text-align:center; cursor:pointer; background:rgba(0, 0, 0, 0.1); z-index:100; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; }
.btns:hover { background:rgba(0, 0, 0, 0.3); }
#next { right:-50px; border-radius:7px 0px 0px 7px; }
#previous { left:-50px; border-radius:0px 7px 7px 7px; }
#counter { top: 30px; right:35px; width:auto; position:absolute; }
#slider-wrap.active #next { right:0px; }
#slider-wrap.active #previous { left:0px; }
/*bar*/
#pagination-wrap { min-width:20px; margin-top:350px; margin-left: auto; margin-right: auto; height:15px; position:relative; text-align:center; }
#pagination-wrap ul { width:100%; }
#pagination-wrap ul li { margin: 0 4px; display: inline-block; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0.5; position:relative; top:0; }
#pagination-wrap ul li.active { width:12px; height:12px; top:3px; opacity:1; box-shadow:rgba(0, 0, 0, 0.1) 1px 1px 0px; }
/*Header*/
h1, h2 { text-shadow:none; text-align:center; }
h1 { color: #666; text-transform:uppercase; font-size:36px; }
h2 { color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px; }
/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li { -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1); transition: all 0.3s cubic-bezier(1, .01, .32, 1); }


.xw-k1{width: 100%; bottom: 0px; background-color:#000;opacity: 0.8;}
.left-tu-box{ width:410px; height:270px; }
.xw-zi{ font-size:12px; color:#fff;}