#main {margin:8px auto; display: flex ; }
  .slidtex {margin-top: 80px ; order: 1; height:15% ; }
  .animacion {overflow:hidden ;  margin:2% 5% ; width:100% ;  order: 2 ; display:left ; }
  .animacion ul {display:flex ;  width:300% ; height:550px ; animation: cambio 10s infinite step-start;   }
  .animacion li {list-style:none ; width:100% ; background:#4682b4 ;  padding: 1%; margin-left: auto; margin-right: auto; } 
  .animacion img {width:100% ; height:99% ; }
  .ie10 .animacion li {width:33% ; padding: 1%;  }

@keyframes cambio {
       0% {margin-left: 0 ;}   
      30% {margin-left: 0 ;} 

      35% {margin-left: -100% ;}   
      65% {margin-left: -100% ;}

      70% {margin-left: -200% ;}   
      100% {margin-left: -200% ;}
    }

   .animacion .info {display:flex ; padding: 0 ; width:400% ; height:600px ; animation: cambioinfo 10s infinite step-start; }
   .animacion .info>li {list-style:none ; width:100% ; background:#4682b4 ;  padding: 10px; margin-left: auto; margin-right: auto; } 
   .animacion .info>li img {width:100% ; height:100% ; }
   .ie10 .animacion .info>li { width:25% ; padding: 1%;  }

@keyframes cambioinfo {
       0% {margin-left: 0 ;}   
      20% {margin-left: 0 ;} 

      25% {margin-left: -100% ;}   
      45% {margin-left: -100% ;}

      50% {margin-left: -200% ;}   
      70% {margin-left: -200% ;}

      75% {margin-left: -300% ;}   
      100% {margin-left: -300% ;}
    }

@media screen and (max-width: 900px) {
    .slidtex {margin:0 ; width:85% ; height:auto ;  }
    .animacion { margin:0 5px ;  width:98% ;  }
    .animacion li { height: 60%;}
    .animacion img {width:100% ; }

    .animacion .info { height:500px ; }
    .animacion .info>li { height: 60%;}
    .animacion .info>li img { width: 100%;}
 }