.responsive-slider { width: 100%; position: relative; margin: 0 auto; top:-128px; }
.responsive-slider [data-animate] { opacity: 0; }
.responsive-slider .slides { position: relative; overflow: hidden; }
.responsive-slider .slides ul { list-style-type: none; padding: 0; margin: 0; white-space: nowrap; font-size: 0; }
.responsive-slider .slides ul li { display: inline-block; max-width: 100%; }
.responsive-slider .slides ul li .slide-body { display: inline-block; position: relative; max-width: 100%; font-size: 14px; }
.responsive-slider .slides ul li .slide-body img { max-width: 100%; }
.responsive-slider .slides ul li .slide-body .caption { position: absolute; color: #fff; }
.responsive-slider .slides ul li .slide-body .caption.header { top: 25%; left: 8%; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.responsive-slider .slides ul li .slide-body .caption.header2 { top: 10%; left: 0%; text-align:center;}

.responsive-slider .slides ul li .slide-body .caption.header .sd_nb2 {position:relative;left:40%; z-index:999; top:-100px}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb3 {position:relative;left:40%; z-index:999; top:100px}
.responsive-slider .slides ul li .slide-body .caption.header h2 {position:absolute; top:20px; left:50%; transform:translateX(-50%); width:1200px}
.responsive-slider .slides ul li .slide-body .caption.header h2 i { font-size: 35px; }
.responsive-slider .slides ul li .slide-body .caption.sub { font-weight: bold; position:absolute; top:300px; left: 50%;transform:translateX(-50%); font-size:36px; color: #fff; line-height: 40px; width:1200px}
.responsive-slider .slides ul li .slide-body .caption.img01 { top: 60%; left: 20%; }
.responsive-slider .slides ul li .slide-body .caption.img02 { top: 60%; left: 0; right: 0; text-align: center }
.responsive-slider .slides ul li .slide-body .caption.img03 { top: 60%; right: 20%; }
.responsive-slider .slides ul li .slide-body .caption.img-html5 img { max-width: 100%; }
.responsive-slider .slides ul li .slide-body .caption.img-css3 { top: 57%; right: 12%; width: 10%; }
.responsive-slider .slides ul li .slide-body .caption.img-css3 img { max-width: 100%; }
.responsive-slider .slides ul li .slide-body .caption.img-bootstrap { top: 48%; right: 12%; width: 11%; }
.responsive-slider .slides ul li .slide-body .caption.img-bootstrap img { max-width: 100%; }
.responsive-slider .slides ul li .slide-body .caption.img-twitter { top: 19%; right: 12%; width: 11%; }
.responsive-slider .slides ul li .slide-body .caption.img-twitter img { max-width: 100%; }
.responsive-slider .slides ul li .slide-body .caption.img-jquery { top: 66%; right: 12%; width: 33%; }
.responsive-slider .slides ul li .slide-body .caption.img-jquery img { max-width: 100%; }
.responsive-slider .slider-control { position: absolute; font-size: 20px; color: #000; top: 40%; background-color: #fff; padding: 10px; display: none }
.responsive-slider .slider-control.left { left: 0; padding-left: 0; -webkit-border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px; }
.responsive-slider .slider-control.left:hover { text-decoration: none; padding-left: 10px; }
.responsive-slider .slider-control.right { right: 0; padding-right: 0; -webkit-border-radius: 6px 0px 0px 6px; border-radius: 6px 0px 0px 6px; }
.responsive-slider .slider-control.right:hover { text-decoration: none; padding-right: 10px; }
.responsive-slider .pages { position: absolute; bottom: 2%; left: 50%; /*margin:0 0 0 -30%;*/ width: 100%; text-align: left; }
.responsive-slider .pages .page { display: inline-block; margin: 0.1em; color: transparent; width: 15px; height: 15px; background:#fff; border-radius:10px; }
.responsive-slider .pages .page.active { opacity: 1; background:#fd0000 }



/*mobile
 @media all and (max-width:510px) {
.mob_height { height: 400px; }
.responsive-slider .slides ul li .slide-body .caption.header { top: 10%; }
.responsive-slider .slides ul li .slide-body .caption.header h2 { font-size: 25px; line-height: 40px; }
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb { margin-left: 7%; }
.responsive-slider .slides ul li .slide-body .caption.sub { font-size: 16px; line-height: 25px; }
}

 @media all and (max-width:767px) {
.mob_height { height: 220px; }
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb { font-size: 30px; width: 35px; height: 45px; }
.responsive-slider .slides ul li .slide-body .caption.header { top: 8%; }
.responsive-slider .slides ul li .slide-body .caption.header h2 { font-size: 2.5em ;text-align:center; margin:0 auto; line-height:1}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb {font-size:1.3em; text-align:center }
.responsive-slider .slides ul li .slide-body .caption.sub { font-size: 14px; line-height: 20px; margin:0 auto; position:relative; text-align:center; left:0}
.responsive-slider .pages .page{width:50px;}
.responsive-slider .pages{bottom:10%; margin:0 0 0 -20%;}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb{width:auto; margin:0 auto; height:auto}
}
*/


 @media all and (min-width:750px) and (max-width:1024px) {

.responsive-slider .slides ul li .slide-body .caption.header h2 { font-size: 5em; margin:0 auto; text-align:center; left:0; transform:none; top:60px }
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb{left:0}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb2,
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb3{width:60%;}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb3{top:0;}
.responsive-slider .slides ul li .slide-body .caption.sub{position:relative; left:0; text-align:center}
.responsive-slider .slides ul li .slide-body .caption.img01,  .responsive-slider .slides ul li .slide-body .caption.img02,  .responsive-slider .slides ul li .slide-body .caption.img03 { width: 30%; }
.responsive-slider .slides ul li .slide-body .caption.img01 { left: 0; }
.responsive-slider .slides ul li .slide-body .caption.img02 { left: 35%; }
.responsive-slider .slides ul li .slide-body .caption.img03 { right: 0; }
.mob_height { height: 460px; }
.responsive-slider .slides ul li .slide-body .caption.header { top: 17%; }
.responsive-slider .pages{left:0; margin:0; text-align:center; }
}
/*
 @media all and (min-width:500px) and (max-width:749px) {

.responsive-slider .slides ul li .slide-body .caption.header h2 { font-size: 5em; margin:0 auto; text-align:center }
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb{/*margin:0 auto; text-align:center;x font-size:3em}
.responsive-slider .slides ul li .slide-body .caption.sub{position:relative; left:0; text-align:center}
.responsive-slider .slides ul li .slide-body .caption.img01,  .responsive-slider .slides ul li .slide-body .caption.img02,  .responsive-slider .slides ul li .slide-body .caption.img03 { width: 30%; }
.responsive-slider .slides ul li .slide-body .caption.img01 { left: 0; }
.responsive-slider .slides ul li .slide-body .caption.img02 { left: 35%; }
.responsive-slider .slides ul li .slide-body .caption.img03 { right: 0; }
.mob_height { height: 300px; width:100%;}
.responsive-slider .slides ul li .slide-body .caption.header { top: 17%; }
.responsive-slider .pages{left:0; margin:0; text-align:center; width:50%; }
}*/

 @media all and (min-width:300px) and (max-width:769px) {

.responsive-slider .slides ul li .slide-body .caption.header h2 { font-size: 5em; margin:0 auto; text-align:center; width:50%}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb{margin-left:0%; margin-top:0; text-align:center; font-size:3em; width:50%}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb2,
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb3{left:0; top:120px; width:70%;}
.responsive-slider .slides ul li .slide-body .caption.header .sd_nb img {width:80%;}
.responsive-slider .slides ul li .slide-body .caption.sub{position:relative; left:0; text-align:center}
.responsive-slider .slides ul li .slide-body .caption.img01,  .responsive-slider .slides ul li .slide-body .caption.img02,  .responsive-slider .slides ul li .slide-body .caption.img03 { width: 30%; }
.responsive-slider .slides ul li .slide-body .caption.img01 { left: 0; }
.responsive-slider .slides ul li .slide-body .caption.img02 { left: 35%; }
.responsive-slider .slides ul li .slide-body .caption.img03 { right: 0; }
.mob_height { height: 350px; width:100%;}
.responsive-slider .slides ul li .slide-body .caption.header { top: 10%; }
.responsive-slider .pages{left:0; margin:0; text-align:center; }

.responsive-slider .slides ul li .slide-body .caption.header3 {    text-align: right; left:40%;    right: 0%;}
.responsive-slider .slides ul li .slide-body .caption.header3 .sd_nb  {margin-left:15%;}
}