.tree {
    white-space: nowrap;
    overflow: auto;

  }

   /*Now the CSS*/

   * {
    margin: 0;
    padding: 0;
  }
  /*added*/
  .tree ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    padding-left: 0px !important;
  }

  .tree .li-node {
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*added for long names*/

    float: none;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    margin: 0 -2px 0 -2px;
  }
  /*We will use ::before and ::after to draw the connectors*/
  .tree .ul-node:first-child:before {
    height: 0px;
}
  .tree .li-node::before,
  .tree .li-node::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ff0404;
    width: 50%;
    height: 20px;
  }

  .tree .li-node::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #ff0404;
  }
  /*We need to remove left-right connectors from elements without
  any siblings*/

  .tree .li-node:only-child::after,
  .tree .li-node:only-child::before {
    display: none;
  }
  /*Remove space from the top of single children*/

  .tree .li-node:only-child {
    padding-top: 0;
  }
  /*Remove left connector from first child and
  right connector from last child*/

  .tree .li-node:first-child::before,
  .tree .li-node:last-child::after {
    border: 0 none;
  }
  /*Adding back the vertical connector to the last nodes*/

  .tree .li-node:last-child::before {
    border-right: 2px solid #ff0404;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
  }

  .tree .li-node:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
  }
  /*Time to add downward connectors from parents*/

  .tree .ul-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ff0404;
    width: 0;
    height: 20px;

  }

  .tree .li-node .node {
    border: 1px solid #bdbdbd;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 14px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    width: 150px;
  }




  .husband {
    float: left;
  }


  .wife::before {
    /* pseudo CSS, will need to be modified */

    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ff0404;
    width: 50%;
    height: 20px;
  }

  .tree-name {
      display: inline-table;
  }
  .tree-name a{
      text-decoration: none;
  }
  .line-couple {
      font-size: 40px;
  }