html,body {   
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    }
    header {
        background-color: #1672f6;
    }
    label {
        display: block;    
    }
    .label1 {
        margin-bottom: 15px;
        display: block;
    }
    .label2,.label3,.label4 {
        margin-bottom: 15px;
        margin-top:25px;
        display: block;
    }
    #logo {
        max-width: 25%;
        min-width: 140px;
        padding-top:40px;           
    }  
    
    .header {
        background-image: url(https://image.digital.endesaclientes.com/lib/fe3c15707564047e701d71/m/2/cfa707e3-e969-4133-9c6f-f46558e040e4.png);    
        height: 560px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .container {
        margin-left: 5% !important;
    }
    .header-text {
        color: #ffffff;
        padding-top:145px;       
              
    }
    .header-text h1 {
        font-weight: bold;
        font-size: 60px;
    }
    #pad-top {margin-top: 20px;}
    .fixed-form {
        position: fixed;
        top: 200px;
        right: 0;
        background: #212e3e;
        box-sizing: border-box;
        max-width: calc(27% - 9px);
        padding: 15px;
        transition: right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.4);
        z-index: 10;
        background-color: #d3135a;
        border-radius: 10px;  
    }
    .fixed-form .open-form {
        opacity: 0;
        position: absolute;
    }
    
    .fixed-form .form-tipo1 .cuerpoform input:not([type*="submit"]) {
        border: 1px solid rgba(220, 220, 220, 0.7);
        font-family: "Mulish", "Arial", sans-serif;
        font-size: 0.875rem;
        background: #ffffff;
        box-sizing: border-box;
        color: #222222;
        outline: none;
        padding: 12px 25px;
        width: 100%;
    }
    .fixed-form:before,.fixed-form .caja-form {
        transition: all 100ms linear;
    }
    .fixed-form h5 {
        color: #ffffff;
    }
    .fixed-form p {
        color: #ffffff;
    }    
    .fixed-form .caja-form {
        height: 650px;
        opacity: 1;
        padding: 0 3%;
    }
    .fixed-form .caja-form1 {
        height: 7%;
        opacity: 1;
    }
    #text-obligatorio {
        font-size: 13px;
        color: #ffffff;
    }
    .fixed-form .close-form {
        position: absolute;
        top: 8px;
        right: 15px;
        box-sizing: border-box;
    }
    .fixed-form .close-form:before {
        color: #212e3e !important;    
    }
    .fixed-form .close-form {
        display: none;
    }    
    .fixed-form.off {
        padding: 26px;
        transition: right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.4);
        right: -380px;
        max-width: 500px;
        background-image: url(https://image.digital.endesaclientes.com/lib/fe3c15707564047e701d71/m/2/20d1ea86-4d0f-447f-bfe2-3ef1ddb1d604.png);
        background-repeat: no-repeat;
        background-position-x: 10%;
        background-position-y: center;
        border-radius: 12px;
    }
    .fixed-form.bottom{
        position: relative;
        top: -30px;
        background: #212e3e;
        box-sizing: border-box;
        max-width: calc(27% - 9px);
        padding: 15px;
        transition: right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.4);
        z-index: 10;
        background-color: #d3135a;
        border-radius: 10px;
    }
    .fixed-form.off .caja-form {
            transition-delay: 500ms;
        }
    .fixed-form.off .open-form {
        transition-delay: 500ms;
        cursor: pointer;
        display: block;
        opacity: 1;
        padding: 10px 15px;
        position: static;
    }
    .fixed-form.off .caja-form {
        height: 0;
        opacity: 0;
        pointer-events: none;
    }    
    #nombre-validacion,#apellidos-validacion,#email-validacion,#telefono-validacion {
        font-size: 13px;
        color: #0244C8;
        background-color: #ffffff;
        width: 53%;
        font-weight: bold;
    }
     footer {
        padding: 40px 40px;
        background-color: #eff2f7;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: auto;
               
    } 
     #footer-gracias {
        position:absolute;
        bottom:0;
     }
   
    footer ul.menu{
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    footer ul.menu li {
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        margin: 0;
    }
    footer ul.menu li a {
        color: #010101;
    }
    ul li {
        margin: 0 0 2.5rem 0;
        color: #4f4d4f;
    }
    footer ul.menu li.sep {
        color: #010101;
        margin: 0 8px;
    }

    a {
        color: #0047cc;
        outline: 0;
        text-decoration: none;
        transition: color 0.2s ease-in-out 0s;
    }
    #video {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%;
      
    }

    #video-responsive {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .container-video {
        position: relative;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 5%;
        overflow: hidden;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
      }
      
      .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: auto;
        border: none;
      }

    #texto-1 {
        width: 60%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 39.5px;
        margin: -115px 20% 0px 20%;
        padding: 0px 0 35px 0;    
    }

    #texto-1 div {
        width: 100%;
        height: auto;
        flex-grow: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 36px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.17;
        letter-spacing: -0.29px;
        text-align: center;
        color: #0e141a;
    }

    #texto-2 {
        width: 60%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 39.5px;
        margin: 20px 20% 0px 20%;
        padding: 0px 0 60px 0;  
    }
    #texto-2 div {
        width: 100%;
        height: auto;
        flex-grow: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 32px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.17;
        letter-spacing: -0.29px;
        text-align: center;
        color: #0e141a;
    }
    #texto-3 {
        width: 60%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 39.5px;
        margin: -9% 20% 0px 20%;
        padding: 0px 0 35px 0;   
    }
    #texto-3 div {
        width: 100%;
        height: auto;
        flex-grow: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 36px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.17;
        letter-spacing: -0.29px;
        text-align: center;
        color: #0e141a;
    }
    #texto-4 {
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 39.5px;
        margin: 14px 10% 0px 10%;
        padding: 0px 0 60px 0;
    }
    #texto-4 div {
        width: 100%;
        height: 26px;
        flex-grow: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }

     .box {
        display: flex;
        justify-content: space-between;
        background-color: rgb(255, 255, 255);
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 80px;
    }
    .primero,.segundo,.tercero {
        color: #000;
        width: 100%;
        padding: 0 2%;
    }
    .number {
        font-size: 48;
        color: #d3135a;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
    }
    .text-title {
        font-size: 27;
        font-weight: bold;
        height: calc(23% - 0.2vw);
        display: block;
    }
    hr:not([size]) {
    height: 2px !important;
    width: 65%;
    margin-left: 17.5%;
    margin-right: 17.5%;
    background-color: #667790;
    }
    @media (max-width: 1237px) {
      .text-title {      
        height: calc(30% - 0.2vw);
      }
    }
    @media (max-width: 1130px) {

      footer, footer ul.menu {
          flex-direction: column-reverse;

      }
      footer ul.menu li {
          margin-bottom: 15px;
      }
      footer ul.menu {
          margin-top: 30px;
      }
      footer ul.menu li.sep {
          display: none;
      }
      #texto-1 {
            margin-top: -70px;
        }
   }
   @media (max-width: 1088px) {
      #text-obligatorio {        
            position: absolute;
            bottom: 44px;
            left: 168px;
      }
   }
   @media (max-width: 1024px) {
      #footer-gracias {
           position:unset;
      }
   }
   
    @media (max-width: 1000px) {
        #text-obligatorio { 
            position: unset;
        }
        #width-custom {            
            max-width: unset !important;
            margin-left: unset !important;
        }
        .fixed-form{
            width: 100%;
            position: unset;
            max-width: 100%;
            margin:0 !important;  
            border-radius: unset;  
        } 
       
        .container {
            width: auto;
            text-align: center;
        }
        .fixed-form .form-tipo1 .cuerpoform input:not([type*="submit"]) {
            width: 67%;
        }
        #nombre-validacion, #apellidos-validacion, #email-validacion, #telefono-validacion {
            width: 34%;
        }
        .box {
            display: block;
            text-align: center;
        }
        .text-title {
            display: unset;
        }
        .segundo {
            padding-top:20px;
        }
        .tercero {
            padding-top: 20px;
        }
        #texto-1 {
            margin-top: -30px;
        }
        .header-text {width: 100% !important;}
     }
    
    @media (max-width: 520px) {
       
        .header-text h1 {
            font-size: 40px;
        }
        .container {
            margin-left: 0% !important;
        }
        #texto-1 {
            margin-top: 0px;
        }
        .header {
            height: 490px;
            background-repeat: no-repeat;
            background-size: cover;
        }
        #texto-3 {
           margin: 20px 15% 0px 15%;
           width: 70%;
       }
        #texto-1 div,#texto-3 div {
            font-size:23px;
        }
       .container-video {    
            width: 90%;
            margin-left: 5%;
            margin-right: 5%;
            margin-top: 8%;
       }
       #texto-4 {
            margin: 0px 10% 0px 10%;
       }
    }

    @media (max-width: 400px) {
        #texto-1 {
            width: 80%;
            margin-left: 10%;
            margin-right: 10%;
        }
        
        #texto-2 {
            width: 80%;
            margin-left: 10%;
            margin-right: 10%;
        }
        #texto-2 div {
            font-size:29px;
        }
        
    }