.slider11 {
            width:100%;
  max-width: 1000px;
  height: 600px;
  padding:5%;
  margin:auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(../img/xm300/26.png) no-repeat center;
  width: 100%;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(../img/xm300/27.png) no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../img/xm300/28.png) no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}


@media screen and (min-width: 1200px) {

  .slider11 {
  width:90%;
  
  margin:auto;
  padding:5%;
  left:-12%;
  position: relative;
}

.slide1 {
  background: url(../img/xm300/29.png) no-repeat center;
  width: 100%;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(../img/xm300/30.png) no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../img/xm300/31.png) no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}

}

@media screen and (min-width: 992px) and (max-width: 1200px) {
 .slider11 {
  width:100%;
  max-width: 600px;
  height: 450px;
  padding:5%;
  left:-8%;
  padding-top:20%;
  position: relative;
}

.slide1 {
  background: url(../img/xm300/26.png) no-repeat center;
  width: 100%;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(../img/xm300/27.png) no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../img/xm300/28.png) no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
}

@media screen and (min-width: 768px) and (max-width: 992px) {

   .slider11 {
  width:80%;
  height: 600px;
  padding:5%;
  left:-12%;
  position: relative;
}

.slide1 {
  background: url(../img/xm300/26.png) no-repeat center;
  width: 100%;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(../img/xm300/27.png) no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../img/xm300/28.png) no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}

}


@media screen and (min-width:418px ) and (max-width: 768px) {
 .slider11 {
  width:80%;
  height: 420px;
  
  padding:5%;
  left:0%;
  padding-top:0%;
  position: relative;
}

.slide1 {
  background: url(../img/xm300/26.png) no-repeat center;
  width: 100%;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(../img/xm300/27.png) no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../img/xm300/28.png) no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}

}


@media screen and (max-width: 418px) {
 .slider11 {
  width:80%;
  height: 220px;
  
  padding:5%;
  left:0%;
  padding-top:0%;
  position: relative;
}

.slide1 {
  background: url(../img/xm300/26.png) no-repeat center;
  width: 100%;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;


} 
.slide2 {
  background: url(../img/xm300/27.png) no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../img/xm300/28.png) no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}

}