.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%;
}
.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: #323232; font-size:30px; background:rgba(0,0,0,.7); padding:15px 30px; border-radius:7px; color:#fff;

}
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 22%;
  left: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header01 {
  bottom: 0%;
  right: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header02 {
  bottom: 5%;
  left: 10%;

}

.responsive-slider .slides ul li .slide-body .caption.header h2 {margin:0px; padding:0px; line-height:30px;
  font-size: 24px; font-family:DINWeb-Light, sans-serif; text-transform:none; color:#fff;
}


.responsive-slider .slides ul li .slide-body .caption.header h3 { margin:0px; padding:0px;
  font-size: 48px; font-family:DINWeb-Bold, sans-serif; text-transform:uppercase;  color: #323232; font-weight:bold;
}
.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: 13%;
  left: 16%;

}
.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: 1%;
  left: 25%;

}
.responsive-slider .slides ul li .slide-body .caption.img-css3 img {
  max-width: 100%;
}

.responsive-slider .slides ul li .slide-body .caption.img-css3a {
  top: 35%;
  left: 20%;

}
.responsive-slider .slides ul li .slide-body .caption.img-css3a img {
  max-width: 100%;
}


.responsive-slider .slides ul li .slide-body .caption.img-css3b {
  top: 56%;
  left: 40%;

}
.responsive-slider .slides ul li .slide-body .caption.img-css3b img {
  max-width: 100%;
}

.responsive-slider .slides ul li .slide-body .caption.img-css3c {
  top: 49%;
  right: 5%;

}
.responsive-slider .slides ul li .slide-body .caption.img-css3c img {
  max-width: 100%;
}




.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 65%; line-height:30px; font-family:DINWeb-Light, sans-serif;  color:#f7dfa9;
  left: 8.5%;
}
.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: #fff;
  top: 50%;

  padding:5px 10px 10px 10px;
}
.responsive-slider .slider-control.left {
  left: 0;
  padding-left: 5px;
  -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: 5px;
  -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: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.responsive-slider .pages .page {
  display: inline-block;
  color: transparent;
  width: 15px;
  height: 15px;
  border: 3px solid #c08b20;
  border-radius: 50%;
  opacity: 0.5;
}
.responsive-slider .pages .page.active {
  opacity: 1;
}


@media (max-width:1045px)

{
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 20%;
  left: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header01 {
  bottom: 0%;
  right: 2%;

}
.header01 img{ width:400px; height:438px;}
.header02 img{ width:280px; height:127px;}
.responsive-slider .slides ul li .slide-body .caption.header02 {
  bottom: 3%;
  left: 10%;

}

.responsive-slider .slides ul li .slide-body .caption.header h2 {margin:0px; padding:0px; line-height:27px;
  font-size: 20px; font-family:DINWeb-Light, sans-serif; text-transform:none; color:#fff;
}

.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 80%; line-height:25px; font-family:DINWeb-Light, sans-serif; font-size:19px; color:#f7dfa9;
  left: 8.5%;
}

	}

@media only screen and (min-width: 768px) and (max-width: 995px) 

{
	
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 18%;
  left: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header01 {
  bottom: 0%;
  right: 2%;

}
.header01 img{ width:300px; height:329px;}
.header02 img{ width:200px; height:90px;}
.responsive-slider .slides ul li .slide-body .caption.header02 {
  bottom: 3%;
  left: 10%;

}

.responsive-slider .slides ul li .slide-body .caption.header h2 {margin:0px; padding:0px; line-height:22px;
  font-size: 17px; font-family:DINWeb-Light, sans-serif; text-transform:none; color:#fff;
}

.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 75%; line-height:21px; font-family:DINWeb-Light, sans-serif; font-size:15px; color:#f7dfa9;
  left: 8.5%;
}	
	
	

	}


@media only screen and (min-width: 640px) and (max-width: 767px)
{
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 18%;
  left: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header01 {
  bottom: 0%;
  right: 2%;

}
.header01 img{ width:240px; height:263px;}
.header02 img{ width:150px; height:68px;}
.responsive-slider .slides ul li .slide-body .caption.header02 {
  bottom: 3%;
  left: 10%;

}

.responsive-slider .slides ul li .slide-body .caption.header h2 {margin:0px; padding:0px; line-height:20px;
  font-size: 14px; font-family:DINWeb-Light, sans-serif; text-transform:none; color:#fff;
}

.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 46%; line-height:18px; font-family:DINWeb-Light, sans-serif; font-size:12px; color:#f7dfa9;
  left: 8.5%;
}

.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 75%; line-height:21px; font-family:DINWeb-Light, sans-serif; font-size:15px; color:#f7dfa9;
  left: 8.5%;
}

	}

@media only screen and (min-width: 480px) and (max-width: 639px)

{
	
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 18%;
  left: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header01 {
  bottom: 0%;
  right: 2%;

}
.header01 img{ width:180px; height:197px;}
.header02 img{ width:66px; height:30px;}
.responsive-slider .slides ul li .slide-body .caption.header02 {
  bottom: 3%;
  left: 10%;

}

.responsive-slider .slides ul li .slide-body .caption.header h2 {margin:0px; padding:0px; line-height:18px;
  font-size: 12px; font-family:DINWeb-Light, sans-serif; text-transform:none; color:#fff;
}

.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 75%; line-height:15px; font-family:DINWeb-Light, sans-serif; font-size:11px; color:#f7dfa9;
  left: 8.5%;
}


}


@media only screen and (min-width: 320px) and (max-width: 479px)

{
.responsive-slider .slides ul li .slide-body .caption.header {
  top: 18%;
  left: 8%;

}
.responsive-slider .slides ul li .slide-body .caption.header01 {
  bottom: 0%;
  right: 2%;

}
.header01 img{ width:120px; height:132px;}
.header02 img{ width:66px; height:30px;}
.responsive-slider .slides ul li .slide-body .caption.header02 {
  bottom: 3%;
  left: 10%;

}

.responsive-slider .slides ul li .slide-body .caption.header h2 {margin:0px; padding:0px; line-height:18px;
  font-size: 11px; font-family:DINWeb-Light, sans-serif; text-transform:none; color:#fff;
}

.responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
  top: 70%; line-height:15px; font-family:DINWeb-Light, sans-serif; font-size:11px; color:#f7dfa9;
  left: 2%;
}	
		
	}

@media only screen and (min-width: 240px) and (max-width: 319px)

{
	

	
	}



@font-face {font-family:DINWeb-Black; 
src: url("../fonts/DINWeb-Black.eot");
	src: url('../fonts/DINWeb-Black.woff') format('woff'), url('../fonts/DINWeb-Black.ttf') format('truetype'), url('../fonts/DINWeb-Black.svg') format('svg');

}



@font-face {font-family:DINWeb-Light; 
src: url("../fonts/DINWeb-Light.eot");
	src: url('../fonts/DINWeb-Light.woff') format('woff'), url('../fonts/DINWeb-Light.ttf') format('truetype'), url('../fonts/DINWeb-Light.svg') format('svg');

}

@font-face {font-family:DINWeb-Medium; 
src: url("../fonts/DINWeb-Medium.eot");
	src:url('../fonts/DINWeb-Medium.woff') format('woff'), url('../fonts/DINWeb-Medium.ttf') format('truetype'), url('../ms_and_me/en/fonts/DINWeb-Medium.svg') format('svg');
	
}

@font-face {font-family:DINWeb; 
src: url("../fonts/DINWeb.eot");
	src:url('../fonts/DINWeb.woff') format('woff'), url('../fonts/DINWeb.ttf') format('truetype'), url('../fonts/DINWeb.svg') format('svg');
}

@font-face {font-family:DINWeb-Bold; 
src: url("../fonts/DINWeb-Bold.eot");
	src:url('../fonts/DINWeb-Bold.woff') format('woff'), url('../fonts/DINWeb-Bold.ttf') format('truetype'), url('../fonts/DINWeb-Bold.svg') format('svg');
}