.nav {
  overflow: hidden;
}
.nav a {
  float: left;
  margin: 10px;
  display: block;
}
.nav #menu-toggle {
    display: none;
}
@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a#menu-toggle {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .nav.nav--open {
    position: relative;
  }
  .nav.nav--open #menu-toggle {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.nav--open a {
    float: none;
    display: block;
    text-align: left;
  }
}
.menu-toggle__bar1, .menu-toggle__bar2, .menu-toggle__bar3 {
   width: 21px;
   height: 3px;
   background-color: #000000;
   margin: 4px 0;
   transition: 0.3s;
}
.menu-toggle--open .menu-toggle__bar1 {
  transform: translate(0, 7px) rotate(-45deg);
}
.menu-toggle--open .menu-toggle__bar2 {
  opacity: 0;
}
.menu-toggle--open .menu-toggle__bar3 {
  transform: translate(0, -7px) rotate(45deg);
}

@media (max-width: 1200px) {
  /*By default, containers are only full-width on xs screens. 
  This makes them full-width om sm screens as well*/
  .container {
    margin-left: 0;
    margin-right: 0;
    max-width: 100% !important;
  }
}

.btn {
  margin-bottom: 2px;
}

.btn-sm {
  padding: 0 3px;
}

.pere {
  width: 40px;
}

caption {
  font-size: 1.4em;
}

label {
  margin-bottom: 10px;
}

.input-group {
  margin-bottom: 10px;
}

.input-group-text {
  width: 150px;
}

.footer {
  clear: both;
}


/*arbre généalogique début*/
.tree {
  white-space: nowrap;
  clear: both;
  border-top: 2px dashed #a1c6f7;
}

.legende {
  white-space: nowrap;
  clear: both;
  border-top: 0px;
}

.tree ul {
  padding-top: 20px;
  display: flex;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.legende ul {
  margin-top: -10px;
  margin-left: -20px;
  padding-top: 0px;
}

.tree li {
  float: left; 
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 5px 5px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
 
/*We will use ::before and ::after to draw the connectors*/
 


.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}
 
/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}
 
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
 
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
}
 
/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}
 
.tree li a{
  border: 2px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
 
  border-radius: 5px;

  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.male {
  border-color: cornflowerblue !important;
}

.femelle {
  border-color: pink !important;
}

.present {
  background-color: #baffc1;
}

.mort {
  background-color: #c6c6c6;
}

.boucherie {
  background-color: lightcoral;
}
 
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
  background: #a1c6f7; color: #000; border: 2px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}
 
/*arbre généalogique fin*/

.card {
  margin: 10px 0;
}