:root {
 --deep-blue: #2949a8;
 --medium-blue: #717fa8;
 --light-blue: #dce3f8;
}
html {
 position: relative;
 min-height: 100%;
}
body {
 font-family: sans-serif;
 background-color: #fbfbfb;
}
body > .container {
  /* Margin bottom by footer height */
 margin-bottom: 60px;
 padding: 90px 15px 0;
 height: 100%;
}
h2.haplogroup {
 background-color: #ccd1d4;
 position: relative;
 top: -60px;
 padding: 60px 0 1rem 0;
 font-family: "Gill Sans","Gill Sans MT","Futura",sans-serif;
}
.gill {
 font-family: "Gill Sans","Gill Sans MT","Futura",sans-serif;
}
.card {
 margin: 1ex;
}
.div-center{
 margin-left: auto;
 margin-right: auto;
 width: 90%;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
  z-index: 3;
}
.i {
 height: 1em;
 width: 1em;
 vertical-align: middle;
}
.tab-content {
 padding-top: 1rem;
}
a.nav-link.active {
 font-weight: bold;
}
tr {
 transition: background-color 1s ease 0.1s;
}

/* Styles for the About page */
.left-fold{
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 min-height: 0;
 width: 50vw;
 padding-bottom: 0;
 overflow: hidden;
 z-index: 2;
}
.left-fold .left-fold-bg{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 min-height: 0;
 width: 100%;
 height: 100%;
 background-color: #343a40;
 opacity: 0.8;
 transform-origin: top right;
}
.bg1 {
 animation: skew 5s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
 z-index: -1;
}
.bg2{
 animation-direction: alternate-reverse;
 animation-duration: 7s;
 opacity: 0.5;
}
.bg3{
 animation-duration: 9s;
 opacity: 1;
}
@keyframes skew {
 0% {
  transform:skewX(-8deg);
 }
 100% {
  transform:skewX(0deg);
 }
}
.left-fold .left-content{
 padding-left: 3rem;
 padding-right: 10rem;
}
.left-content img {
 width: 25vw;
}
.right-fold{
 position: absolute;
 top: 0;
 bottom: 0;
 height: 100%;
 margin-left: 50%;
}
#links{
 background-color: #fff;
 }
.boxed {
 display: block;
}
.boxed-caption{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 width: 100%;
 height: 100%;
 position: absolute;
 bottom: 0;
 opacity: 0;
 background: rgba(52, 58, 64, 0.9);
 transition: opacity 0.25s ease;
 text-align: center;
}
.boxed-caption:hover{
 opacity: 1;
}
.boxed-title{
 font-size: 0.85rem;
 font-weight: 600;
 text-align: center;
}
.boxed-desc{
 font-size: 1rem;
 text-align: center;
 color: #fff;
}
.text-white-50 {
 color: rgba(255, 255, 255, 0.5) !important;
}
/* End of Styles for the About page */