.responsive-slider {
  width: 100%;
  position: relative;
}
.responsive-slider .touch-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.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%;
  text-align: center;
    width: 100% !important;
}
.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;

  font-size:18px
}
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 65%;
  left: 10%;
  right:10%
}
.responsive-slider .slides ul li .slide-body .caption.lefting {
  top: 28%;
  left: 10%;
  text-align:left
}
.responsive-slider .slides ul li .slide-body .caption.header h2 {
  font-size: 24px;
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  background:rgba(14,142,69,0.8);
  padding:12px 20px;
  float:left;
  margin:25px 0px
}
.responsive-slider .slides ul li .slide-body .caption.header span { background:rgba(19,185,215,0.8); padding:20px 30px; display:table; white-space:normal; font-size:14px; text-align:left}
.responsive-slider .slides ul li .slide-body .caption.header h4 {
  font-size: 46px;
  color:#fff;
  font-family: 'pf_beausans_probold';
  border:none
 
}
.responsive-slider .slides ul li .slide-body .caption.header h2 i {
  font-size: 35px;
}

.responsive-slider .slides ul li .slide-body .caption.img-html5 {
  top: 30%;
  right: 25%;
  width: 30%;
}
.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: 0%;
  right: 0%;
  
}
.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: 48%;
  left:25%
  
}
.responsive-slider .slides ul li .slide-body .caption.img-jquery img {
  max-width: 100%;
}
.responsive-slider .slider-control {
  position: absolute;
  font-size: 24px;
  color: #fff;
  top: 55%;
  background:rgba(47,47,47,0.8);
  padding:10px 16px;
}
.responsive-slider .slider-control.left {


		 margin:0 auto;
		 text-align:center;
		 left:45%
}
.responsive-slider .slider-control.left:hover {
  text-decoration: none;
  padding-left: 18px;

}
.responsive-slider .slider-control.right {

		 margin:0 auto;
		 text-align:center;
		 left:49%
}
.responsive-slider .slider-control.right:hover {
  text-decoration: none;
  padding-right: 18px;
}
@media (max-width: 991px) {
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 30%;

}
.responsive-slider .slides ul li .slide-body .caption.header span { display:none}
.responsive-slider .slider-control { top:45%}
.responsive-slider .slider-control.left { left:0px}
.responsive-slider .slider-control.right { right:0px; width:auto; left:inherit}
.responsive-slider .slides ul li .slide-body .caption.lefting {
  top: 15%;
  left: 10%;
  text-align:left
}	
	 }
@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider .slides ul li .slide-body .caption.header h2 {
    font-size: 25px;
  }
    .responsive-slider .slides ul li .slide-body .caption.header h4 {
    font-size: 24px;
  }
  .responsive-slider .slides ul li .slide-body .caption.header h2 i {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .responsive-slider .slides ul li .slide-body .caption.header h2 {
    font-size: 16px;
  }
    .responsive-slider .slides ul li .slide-body .caption.header h4 {
    font-size: 16px;
  }
  .responsive-slider .slides ul li .slide-body .caption.header h2 i {
    font-size: 14px;
  }
  .responsive-slider .slides ul li .slide-body .caption {
	  font-size:14px
  }
}
.responsive-slider .slides ul li .slide-body .caption.sub {
 width:100%
 
  
}
@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider .slides ul li .slide-body .caption.sub {
    font-size: 14px;
    bottom: -40px;
    right: 0px;
  }
  .responsive-slider .slides ul li .slide-body .caption.header {
  top: 28%;
  left: 25%;
}
}
@media (max-width: 480px) {
  .responsive-slider .slides ul li .slide-body .caption.sub {
    font-size: 10px;
    bottom: -30px;
    right: 0;
	left:0%
  }
    .responsive-slider .slides ul li .slide-body .caption.header {
  top: 28%;
  left: 3%;
}
}
@media (max-width: 767px) {
  .responsive-slider .slider-control.left,
  .responsive-slider .slider-control.right, .responsive-slider .slides ul li .slide-body .caption.header {
    display: none;
  }
}
.responsive-slider .pages {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.responsive-slider .pages .page {
  display: inline-block;
  color: transparent;
  width: 5px;
  height: 5px;
  border: 3px solid #fff;
  border-radius: 50%;
  opacity: 0.5;
}
.responsive-slider .pages .page.active {
  opacity: 1;
}
