fieldset{
    width: 500px;
    height: 390px;
    margin: auto;
    
    margin-top: 1rem; 
    background-color: white;
   
    /*color: firebrick;
    border-color: darkgoldenrod;
    border: 9px groove (internal value);
    border-radius: 2px;*/

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 1px -1px 17px 0px rgba(0, 0, 0, 0.75);

    padding: 20px 40px;

}

.box h1{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

.box input{
    width: 300px;
    height: 20px;
    margin: 4px;
}
.box textarea{
    resize: none;
    width: 500px;
    margin: 4px;
}
.box button{
    margin-left: 8rem;
    background-color: #063bdb;
    border: 0px;
    padding: 10px 40px;
    color: white;
    font-size: 1rem;
    outline: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}



/* MODAL */

#modal::backdrop {
    background-color: rgba(0,0,0,.55);
}


#modal {
    width:  600px;
    height: 400px;
    max-width: 750px;

    margin-block-end: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;

    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);

    max-inline-size: min(90vw, var(--size-content-3));
    max-block-size: min(80vh, 100%);
    max-block-size: min(80dvb, 100%);
    overflow: hidden;

    position: fixed;
    margin: auto;
    padding: 0;
    inset: 0;
    z-index: var(--layer-important);
    
    /*ocultarlo*/
    /*top: 10px;*/
    /*border-radius: 10px;*/
    border: 0px;
    background-color: rgba(0,0,0,.0001)
}


/*  begin REDES SOCIALES LATERAL
-------------------------------- */

.social01 {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    right: 0; /* Establecemos la barra en la izquierda */
    top: 55%; /* Bajamos la barra 200px de arriba a abajo */
    z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
  }
   
    .social01 ul {
      list-style: none;
    }
   
    .social01 ul li a {
      width: 50px;
      display: inline-block;
      color:#fff;
      background: #000;
      padding: 10px 15px;
      text-decoration: none;
      -webkit-transition:all 500ms ease;
      -o-transition:all 500ms ease;
      transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
    }
   
    .social01 ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
    .social01 ul li .icon-twitter {background: #00abf0;}
    .social01 ul li .icon-linkedin {background: #1878B9;}
    .social01 ul li .icon-mail {background: #ae181f;}
   
    .social01 ul li a:hover {
      background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
      padding: 10px 00px 10px 5px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
    }
  
  /*  end REDES SOCIALES LATERAL
  -------------------------------- */