diff --git a/assets/css/main.css b/assets/css/main.css
index 807aeb9..17965f5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,3 +1,267 @@
+@media screen and (max-width: 1280px) {
+    .textMenu {
+
+        font-size: 65% !important;
+        top: 10% !important;
+    }
+
+    .contentModal {
+        width: 35% !important;
+        left: 33% !important;
+    }
+
+    .sectionContinue {
+        left: 10% !important;
+        width: 80% !important;
+    }
+
+
+    .headerTexto {
+        font-size: 10px !important;
+        top: 10% !important;
+    }
+
+    .headerInicioSesion .icono {
+        width: 25px !important;
+        height: 25px !important;
+    }
+
+    .headerInicioSesion .text {
+        font-size: 12px !important;
+        top: 0 !important;
+    }
+
+    .contentTableDates {
+        height: 85% !important;
+    }
+
+    .modalHeader {
+        height: 25% !important;
+    }
+
+}
+
+@media screen and (max-width: 980px) {
+    .headerTexto {
+        font-size: 8px !important;
+        top: 20% !important;
+        left: 25% !important;
+    }
+
+    .sectionContinue {
+        width: 90% !important;
+        left: 5% !important;
+
+    }
+
+    .contentModal {
+        width: 45% !important;
+        left: 27.5% !important;
+    }
+
+    .contentTableDates {
+
+        width: 50% !important;
+        left: 25% !important;
+    }
+
+    .contentMiddleMiddle {
+        width: 40% !important;
+        left: 37% !important;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .headerTexto {
+        display: none;
+    }
+
+    .contentModal {
+        width: 50% !important;
+        left: 25% !important;
+    }
+
+    .textMarco {
+        font: normal normal 600 20px/13px Spartan !important;
+    }
+
+    .textFinal {
+        font: normal normal normal 12px/25px Spartan !important;
+        top: 40% !important;
+    }
+
+    .contentMiddleContinue {
+        left: 5% !important;
+        width: 90% !important;
+    }
+
+    .headerInicioSesion .text {
+        display: none;
+    }
+
+    .headerInicioSesion .icono {
+        left: unset !important;
+        right: 25% !important;
+    }
+
+    .headerInicioSesion {
+        width: 7% !important;
+    }
+
+    .headerSoporte {
+        display: none;
+    }
+
+    .headerIcono2 {
+        right: 7% !important;
+    }
+
+    .textMenu {
+        display: none;
+    }
+
+    .headerMenu .headerIcono {
+        width: 35% !important;
+        padding-left: 30% !important;
+    }
+
+    .contentTableDates {
+        width: 80% !important;
+        left: 10% !important;
+    }
+
+    .contentMiddleMiddle {
+        left: 55% !important;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .headerInicioSesion {
+        display: none;
+    }
+
+
+    .contentModal {
+        width: 70% !important;
+        left: 15% !important;
+    }
+
+    .volver {
+        width: 40% !important;
+        margin-left: 25% !important;
+    }
+
+
+    .headerIcono2 {
+        right: 0 !important;
+    }
+
+    .contentContinue {
+        border: 0 !important;
+        border-radius: 0 !important;
+
+    }
+
+    .sectionContinue {
+        top: 23% !important;
+        height: 65% !important;
+    }
+
+    .subtext {
+        font: normal normal normal 12px/21px Spartan !important;
+    }
+
+    .textMarco {
+        font: normal normal 600 20px/30px Spartan !important;
+
+    }
+
+
+    .contentMiddleMiddle .text {
+        display: none;
+    }
+
+    .barra {
+        display: none;
+    }
+
+    .contentMiddleMiddle {
+        top: 20% !important;
+        left: 60% !important;
+    }
+
+    .headerMiddle {
+        height: 20% !important;
+
+    }
+
+    .contentTableDates {
+        top: 25% !important;
+    }
+
+    .contentTableDates {
+        width: 90% !important;
+        left: 5% !important;
+    }
+}
+
+@media screen and (max-width: 530px) {
+
+    .contentMiddleMiddle {
+        display: none;
+    }
+
+    .sectionContinue {
+        top: 15% !important;
+    }
+
+    .headerMenu {
+        display: none;
+    }
+
+    .contentModal {
+        width: 85% !important;
+        left: 8% !important;
+    }
+
+
+    .headerIcono1 {
+        left: 2% !important;
+    }
+
+    .headerMiddle {
+        width: 100% !important;
+        height: 15% !important;
+        top: 0 !important;
+        left: 0 !important;
+        border-radius: 0 !important;
+        border: 0 !important;
+    }
+
+    .headerMiddle .icono {
+        top: 20% !important;
+        left: 25% !important;
+    }
+
+    .contentTableDates {
+        width: 100% !important;
+        left: 0 !important;
+        right: 0 !important;
+        overflow: hidden !important;
+    }
+
+    .table {
+        border: 0 !important;
+        border-radius: 0 !important;
+    }
+
+}
+
+
+
+
+
+
 body {
     margin: 0;
 }
@@ -24,7 +288,7 @@ body {
 .headerMenu {
     top: 0;
     left: 0;
-    width: 10%;
+    width: 6%;
     height: 100%;
     background: #FFFFFF 0% 0% no-repeat padding-box;
     opacity: 1;
@@ -33,7 +297,7 @@ body {
 }
 
 .headerMenu .headerIcono {
-    width: 15%;
+    width: 20%;
     height: 100%;
     padding-left: 5%;
     padding-right: 5%;
@@ -51,7 +315,7 @@ body {
 
 .textMenu {
     top: 1%;
-    left: 3%;
+    left: 2%;
     width: auto;
     position: absolute;
     height: 100%;
@@ -66,7 +330,7 @@ body {
 
 .headerIcono1 {
     top: 0;
-    left: 12%;
+    left: 8%;
     width: auto;
     height: 100%;
     position: absolute;
@@ -75,7 +339,7 @@ body {
 
 .headerIcono2 {
     top: 0;
-    right: 32%;
+    right: 30%;
     width: auto;
     height: 100%;
     position: absolute;
@@ -85,7 +349,7 @@ body {
 .headerSoporte {
     top: 0;
     cursor: pointer;
-    width: 15%;
+    width: 13%;
     right: 15%;
     height: 100%;
     position: absolute;
@@ -94,21 +358,22 @@ body {
 
 .soporte {
 
-    width: auto;
-    height: auto;
+    width: 20px;
+    height: 20px;
     position: absolute;
     opacity: 1;
     top: 25%;
-    left: 5%;
+    left: 0%;
 }
 
 .headerTexto {
     width: auto;
     height: 100%;
+    top: 2%;
     position: absolute;
     font-family: 'Spartan';
     text-align: left;
-    left: 23%;
+    left: 18%;
     overflow: hidden;
     color: white;
     font-size: 13px;
@@ -132,8 +397,8 @@ body {
     height: 30px;
     position: absolute;
     opacity: 1;
-    top: 5px;
-    left: 15px;
+    top: 15%;
+    left: 5%;
 }
 
 .headerInicioSesion .text {
@@ -142,9 +407,9 @@ body {
     position: absolute;
     font-family: 'Spartan';
     text-align: left;
-    margin-left: 55px;
+    margin-left: 27%;
     color: white;
-    top: 2px;
+    top: 5%;
     font-size: 13px;
 }
 
diff --git a/main.html b/main.html
index 5d399ee..015f92a 100644
--- a/main.html
+++ b/main.html
@@ -8,9 +8,9 @@
     <title>Colpensiones</title>
     <link rel="stylesheet" href="assets/css/main.css">
     <link href='https://fonts.googleapis.com/css?family=Spartan' rel='stylesheet'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
 
 </head>
-
 <body>
     <section class="paginaCompleta">
         <section class="header">
@@ -240,6 +240,7 @@
     <script src="assets/js/continue.js"></script>
     <script src="assets/js/active.js"></script>
     <script src="assets/js/innerText.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file