diff --git a/src/app/modules/cancelar-compra/cancelar-compra.component.ts b/src/app/modules/cancelar-compra/cancelar-compra.component.ts
index ba00fd8..5bfabea 100644
--- a/src/app/modules/cancelar-compra/cancelar-compra.component.ts
+++ b/src/app/modules/cancelar-compra/cancelar-compra.component.ts
@@ -20,9 +20,8 @@ export class CancelarCompraComponent implements OnInit {
     setTimeout(() => {
       this.limpiarCarritoYvolver();
     }, 90000);
-    if ($("body").hasClass("lash")) {
-      $("#cancelImg,#cancelCard").addClass("lash");
-    }
+    this.mediaPantalla();
+    
   }
 
   volverPreviousPage() {
@@ -33,4 +32,10 @@ export class CancelarCompraComponent implements OnInit {
     this.articuloService.carrito = undefined;
     this.router.navigate(['/']);
   }
+
+  mediaPantalla(){
+    if ($("body").hasClass("lash")) {
+      $("#cancelImg,#cancelCard").addClass("lash");
+    }
+  }
 }
diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html
index f501c81..43e2fd7 100644
--- a/src/app/modules/carrito/carrito.component.html
+++ b/src/app/modules/carrito/carrito.component.html
@@ -13,14 +13,14 @@
     </div>
 
     <!-- CARRITO -->
-    <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
+    <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible" id="carrito">
       <!-- MENSAJE DE ADVERTENCIA -->
       <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
         <p class="h5 text-center">No hay artículos en el carrito</p>
       </div>
       <!-- ARTICULOS -->
       <div
-        class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
+        class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" [ngClass]="{'lash':flagPantalla == true}" id="art-carrito"
         *ngFor="let articulo of articuloService.carrito; let i = index;"
         @EnterLeave>
         <!-- ARTICULO -->
diff --git a/src/app/modules/carrito/carrito.component.scss b/src/app/modules/carrito/carrito.component.scss
index 136aa08..0de3bcf 100644
--- a/src/app/modules/carrito/carrito.component.scss
+++ b/src/app/modules/carrito/carrito.component.scss
@@ -2,3 +2,11 @@
     width: 75px;
     border-radius: 1.5rem;
   }
+
+  #art-carrito.lash{
+    min-height: 130px !important;
+}
+
+#carrito.lash{
+  max-height: 60% !important;
+}
\ No newline at end of file
diff --git a/src/app/modules/carrito/carrito.component.ts b/src/app/modules/carrito/carrito.component.ts
index 5a766cb..6cde46e 100644
--- a/src/app/modules/carrito/carrito.component.ts
+++ b/src/app/modules/carrito/carrito.component.ts
@@ -26,7 +26,7 @@ import { Router } from '@angular/router';
 export class CarritoComponent implements OnInit {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   maxCantidad = 50;
-
+  flagPantalla:boolean = false;
   constructor(
     public articuloService: ArticuloService,
     private location: Location,
@@ -38,6 +38,7 @@ export class CarritoComponent implements OnInit {
       this.router.navigate(['']);
       return;
     }
+    this.mediaPantalla()
   }
 
   deleteArticulo(index: number) {
@@ -60,5 +61,10 @@ export class CarritoComponent implements OnInit {
   goBack() {
     this.location.back();
   }
-
+  mediaPantalla(){
+    if ($("body").hasClass("lash")) {
+      $("#carrito").addClass("lash");
+      this.flagPantalla = true;
+    }
+  }
 }
diff --git a/src/app/modules/forma-pago/forma-pago.component.html b/src/app/modules/forma-pago/forma-pago.component.html
index afc9869..9545bcd 100644
--- a/src/app/modules/forma-pago/forma-pago.component.html
+++ b/src/app/modules/forma-pago/forma-pago.component.html
@@ -18,7 +18,7 @@
       </div>
     </div>
     <!-- OPCION PAGO ELECTRONICO -->
-    <div class="row mt-5 h-auto justify-content-center mx-0">
+    <div class="row mt-5 h-auto justify-content-center mx-0"  id="card1">
       <div class="col-auto px-0 h-auto align-self-start">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
@@ -46,7 +46,7 @@
       </div>
     </div>
     <!-- OPCION PAGO CON TARJETA -->
-    <div class="row mt-5 h-auto justify-content-center mx-0">
+    <div class="row mt-5 h-auto justify-content-center mx-0"  id="card2">
       <div class="col-auto px-0 h-auto align-self-start">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
@@ -60,7 +60,7 @@
                 class="p-1 icon-50"
                 src="assets/img/icono-take-away.svg">
             </div>
-            <div class="col-auto align-self-center text-white">Pago con tarjeta</div>
+            <div class="col-auto align-self-center text-white" id="">Pago con tarjeta</div>
             <div class="col-auto align-self-center p-0">
               <img
                 draggable="false"
diff --git a/src/app/modules/forma-pago/forma-pago.component.scss b/src/app/modules/forma-pago/forma-pago.component.scss
index e69de29..bf9831c 100644
--- a/src/app/modules/forma-pago/forma-pago.component.scss
+++ b/src/app/modules/forma-pago/forma-pago.component.scss
@@ -0,0 +1,19 @@
+#card1.lash{
+    position: absolute;
+    bottom: 150px;
+    -webkit-box-flex: 0;
+      flex: 0 0 41.6666666667%;
+      max-width: 41.6666666667%;
+    left: 10%;
+    margin-left: 0 !important;
+  }
+  
+  #card2.lash{
+    position: absolute;
+    bottom: 150px;
+    -webkit-box-flex: 0;
+      flex: 0 0 41.6666666667%;
+      max-width: 41.6666666667%;
+    right: 10%;
+    margin-right: 0 !important;
+  }
\ No newline at end of file
diff --git a/src/app/modules/forma-pago/forma-pago.component.ts b/src/app/modules/forma-pago/forma-pago.component.ts
index fc8cbb0..aa8c6fa 100644
--- a/src/app/modules/forma-pago/forma-pago.component.ts
+++ b/src/app/modules/forma-pago/forma-pago.component.ts
@@ -19,6 +19,8 @@ export class FormaPagoComponent implements OnInit {
       this.router.navigate(['']);
       return;
     }
+    this.mediaPantalla();
+
   }
 
   medioPago(medioPago: number) {
@@ -32,5 +34,9 @@ export class FormaPagoComponent implements OnInit {
         break;
     }
   }
-
+  mediaPantalla(){
+    if ($("body").hasClass("lash")) {
+      $("#card1,#card2").addClass("lash");
+    }
+  }
 }
diff --git a/src/app/modules/info-formas-pago/info-formas-pago.component.ts b/src/app/modules/info-formas-pago/info-formas-pago.component.ts
index 31a17e5..e71013d 100644
--- a/src/app/modules/info-formas-pago/info-formas-pago.component.ts
+++ b/src/app/modules/info-formas-pago/info-formas-pago.component.ts
@@ -9,7 +9,10 @@ export class InfoFormasPagoComponent implements OnInit {
   constructor() {}
 
   ngOnInit() {
+    this.mediaPantalla();
+  }
 
+  mediaPantalla(){
     if ($("body").hasClass("lash")) {
       $("#card1,#card2").addClass("lash");
     }
diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.ts b/src/app/modules/opcion-pedido/opcion-pedido.component.ts
index 256b255..899043e 100644
--- a/src/app/modules/opcion-pedido/opcion-pedido.component.ts
+++ b/src/app/modules/opcion-pedido/opcion-pedido.component.ts
@@ -13,9 +13,7 @@ export class OpcionPedidoComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    if ($("body").hasClass("lash")) {
-      $("#card1,#card2").addClass("lash");
-    }
+    this.mediaPantalla();
   }
 
   goTo(path) {
@@ -25,4 +23,9 @@ export class OpcionPedidoComponent implements OnInit {
   seleccionPedido(lugar) {
     localStorage.setItem('pedidoPara', lugar);
   }
+  mediaPantalla(){
+    if ($("body").hasClass("lash")) {
+      $("#card1,#card2").addClass("lash");
+    }
+  }
 }
diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.html b/src/app/modules/pago-tarjeta/pago-tarjeta.component.html
index 1a76642..52bb10d 100644
--- a/src/app/modules/pago-tarjeta/pago-tarjeta.component.html
+++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.html
@@ -11,7 +11,7 @@
   </div>
   <div class="h-85">
     <div class="row h-50 mx-0 justify-content-center text-center">
-      <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
+      <div class="col-7 p-5 mt-5 h-auto align-self-end border border-secondary rounded">
         <img
           draggable="false"
           ondragstart="return false;"
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index a3d74da..3ac103f 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -35,9 +35,9 @@
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                 <div
-                  class="row mx-4 mb-2 h-32 justify-content-center tab"
+                  class="row mx-4 mb-2 h-32 justify-content-center tab catContent"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
-                  (click)="selectCategoria(-1, 0)" id="catContent">
+                  (click)="selectCategoria(-1, 0)" id="">
                   <img
                     draggable="false"
                     ondragstart="return false;"
@@ -47,10 +47,10 @@
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
-                  class="row mx-4 mb-2 h-32 justify-content-center tab"
-                  [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
+                  class="row mx-4 mb-2 h-32 justify-content-center tab catContent"
+                  [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected, 'lash':mpActive }"
                   (click)="selectCategoria(i, categoria.id)"
-                  *ngFor="let categoria of categorias; let i = index;">
+                  *ngFor="let categoria of categorias; let i = index;" id="">
                   <img
                     draggable="false"
                     ondragstart="return false;"
@@ -133,7 +133,7 @@
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
-      <div class="col-12 h-75 px-0 border border-primary rounded">
+      <div class="h-75 px-0 border border-primary rounded" #boxCarrito [ngClass]="boxCarrito.classList.contains('lash') && articuloService.carrito.length  ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
@@ -194,8 +194,10 @@
       </div>
       <!-- VER CARRITO Y TOTAL-->
       <div
-        class="col-auto p-0 mt-2 ml-auto h-20"
-        *ngIf="articuloService.carrito.length">
+        class=" p-0 mt-2 ml-auto h-20"
+        *ngIf="articuloService.carrito.length"
+        [ngClass]="boxCarrito.classList.contains('col-8') ? 'col-4' : 'col-auto'"
+        id="bagsCarrito">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
           [routerLink]="['/carrito']">
@@ -204,8 +206,10 @@
             <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
               <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
             </div>
-            <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
-            <div class="col-auto p-0 bg-primary d-none d-sm-block">
+            <div class="col-auto align-self-center text-primary ml-2 bg-light" 
+            [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="ver-car">VER CARRITO</div>
+            <div class="col-auto p-0 bg-primary d-none d-sm-block" 
+            [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="img-car">
               <img
                 draggable="false"
                 ondragstart="return false;"
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
index 0ceaff2..0e8bd90 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
@@ -48,11 +48,11 @@ $primary: #aa006b;
   max-height: 60% !important;
 }
 
-#catContent.lash{
+.catContent.lash{
   margin: 1.3rem 0.9rem !important;
   height: 60% !important;
 }
 
 .cat-btn.lash{
   height: 7% !important;
-}
\ No newline at end of file
+}
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index 8251a8d..821d242 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -26,17 +26,16 @@ export class SeleccionArticulosComponent implements OnInit {
   allActive = true;
   modalRef: BsModalRef;
   total: number = 0;
-
+  mpActive:boolean = false;
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
   ) { }
 
+
   ngOnInit() {
     this.getCategorias();
-    if ($("body").hasClass("lash")) {
-      $("#catContent,#content,#headerPub,#headerPad,.cat-btn").addClass("lash");
-    }
+    this.mediaPantalla();
   }
 
   getCategorias() {
@@ -152,4 +151,13 @@ export class SeleccionArticulosComponent implements OnInit {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
+
+  mediaPantalla(){
+    if ($("body").hasClass("lash")) {
+      $(".catContent,#content,#headerPub,#headerPad,.cat-btn,#boxCarrito").addClass("lash");
+      this.mpActive=true;
+    }
+  }
+
 }
+
diff --git a/src/app/shared/footer/footer.component.ts b/src/app/shared/footer/footer.component.ts
index 6dee36c..fe753be 100644
--- a/src/app/shared/footer/footer.component.ts
+++ b/src/app/shared/footer/footer.component.ts
@@ -11,12 +11,7 @@ export class FooterComponent implements OnInit {
   
   
   constructor(private location: Location) {
-    $(document).ready(function(){
-      $("#test").click(function(){
-        $("body,#card1,#card2,#content,#catContent,#headerPub,#headerPad,.cat-btn,#cancelImg,#cancelCard").toggleClass("lash");
-      });
-    });
-
+    this.mediaPantalla();
   }
 
   ngOnInit() {}
@@ -24,4 +19,13 @@ export class FooterComponent implements OnInit {
   goBack() {
     this.location.back();
   }
+  mediaPantalla(){
+    $(document).ready(function(){
+      $("#test").click(function(){
+        $("body,#card1,#card2,#content,.catContent,#headerPub,#headerPad,.cat-btn,#boxCarrito,#cancelImg,#cancelCard,#carrito,#art-carrito").toggleClass("lash");
+        $("#bagsCarrito").toggleClass(["col-auto","col-4"]);
+        $("#ver-car,#img-car").toggleClass("mt-4");
+      });     
+    });
+  }
 }