.map text {
	font-family: 'Playfair Display';
	fill: white;
}

body {
	font-family: 'Roboto';
}

h1,h2,h3,h5,h4,h6 {
	margin: 0 !important;
	font-family: 'Playfair Display';

}
.map {
	font-weight: 450;
	font-size: 1.2em;
	color: white;
}


.title {
	font-size: larger;
  text-align: center;
}

.name {
}

.about {
	fill: #777;
	font-size: smaller;
}
.place-image {
	height: 150px;
}
.lifespan {
	fill: #2c5;
}

.link {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

@media screen and (max-width: 600px) {
  .mobile-title {
		display: block;
	}
	.desktop-title {
		display: none
	}
	.container {
    margin: 0 !important;
    max-width: 1280px;
    width: 100% !important;
}
}

@media screen and (min-width: 601px) {
  .mobile-title {
		display: none;
	}
	.desktop-title {
		display: block
	}
}

.node {
	fill: blue;
}

.map circle {
	cursor: pointer;
	fill: white;
}
.location {
	cursor: pointer;
}

path {
	fill: brown;
stroke: rosybrown;
}

.node circle {
  fill: black;
	cursor: pointer;
}

.map circle:hover {
	fill: white;
}
.node text {
  font: 10px sans-serif;
	fill: black;
	font-size: 1.1em;
	cursor: pointer;
}

.node text:hover {
  font: 10px sans-serif;
	fill: teal;
	font-size: 1.1em;
	cursor: pointer;
}

.place-name {
	text-align: center;
	font-size: 1.5em;
	font-weight: 600;
}

footer.page-footer {
    background-color: #263238;
		font-family: Roboto !important;
}

footer.page-footer .footer-copyright {
    background-color: black;
    text-align: center;
}

footer.page-footer ul:not(.browser-default)>li {
    list-style-type: none;
    margin-bottom: 1em;
}

.bold {
  font-weight: 600;
}

.node--internal circle {
  fill: black;
}
.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
	fill: none;
stroke: black;
stroke-opacity: 0.4;
stroke-width: 4;
}

@media only screen and (min-width: 993px){
	.container {
	    width: 95% !important;
	}
}

.social-icons .fab {
    font-size: 1.5em;
    color: black;
    padding-right: 1em;
}


.linage {
  fill: none;
  stroke: #000;
}

.marriage {
  fill: none;
  stroke: black;
}

.man {
  background-color: lightblue;
  border-style: solid;
  border-width: 1px;
}

.woman {
  background-color: pink;
  border-style: solid;
  border-width: 1px;
}

.emphasis {
  font-style: italic;
}

#tree text {
	fill: black !important;
	text-anchor:middle;
}

#tree rect {
	fill: blanchedalmond;;
}

#tree {
	height: auto;
}
.sibling {
    fill: none;
    stroke: pink;
		stroke-width: 4;
}

.sibling.brother {
    fill: none;
    stroke: none;
		stroke-dasharray: 4
}

.card {
	background: blanchedalmond !important;
	box-shadow: 0px 0px 150px -10px rgba(71,67,71,0.31) !important;
border-radius: 14px !important;
}

.modal p {
	font-family: Lora;
}