/* app styles */

h1 {
  font-weight: 400;
}

h2 {
	font-size: 1.2rem;
  font-weight: 700;
}

.pure-button,
span.button-marker {
	background-color: #2196F3;
	color: #fff;
}

sub {
	vertical-align: sub;
	font-size: .5rem;
}

span.button-marker {
	padding: 0 .5rem;
	border-radius: 2px;
}

.toggles > button {
	background: none;
	border: 0;
	color: #2196F3;
	padding: .25rem .5rem;
}

.toggles > button.active,
.toggles > button:hover {
	border-bottom: .25rem solid #2196F3;
}

form label {
	font-weight: bold;
	display: block;
}

form.pure-form fieldset {
	display: block;
	padding: 0;
}

form.pure-form fieldset.inline {
	display: inline-block;
}

form.pure-form fieldset.inline:not(.left) {
	margin-left: 1rem;
}

form.configure {
	margin-bottom: 1.5rem;
}

form.configure fieldset:first-child > *:first-child,
p.procreate {
	margin-top: 0;
}

.lightbox-overlay {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.75);
}

.lightbox-outer {
	width: 60%;
	max-width: 60rem;
	position: fixed;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	background: #fff;
	overflow-y: auto;
}

.lightbox-inner {
	padding: 1.5rem 3rem;
}

.parent {
	margin: 0 auto;
	text-align: center;
}

.parent p {
	font-weight: bold;
}

table {
	background: #fff;
	width: 100%;
}

figure {
  margin: 0;
}

.kids {
	text-align: center;
}

	.kids .kid:nth-child(2) {
		-webkit-animation-delay: .1s;
		animation-delay: .1s;
	}

	.kids .kid:nth-child(3) {
		-webkit-animation-delay: .2s;
		animation-delay: .2s;
	}

	.kids .kid:nth-child(4) {
		-webkit-animation-delay: .3s;
		animation-delay: .3s;
	}

		.kids .kid > img,
		.parent > img {
			text-align: center;
			display: block;
			margin: 0 auto;
			max-width: 4.5rem;
		}

		.kids .kid .kid-genes {
			display: inline-block;
			font-weight: bold;
			background: #fff;
			padding: .25rem 1rem;
			border-radius: 3px;
			border: 1px solid rgb(204,204,204);
			margin: .25rem 0;
		}

		.kids .kid .kid-label {
			font-weight: bold;
			margin: .25rem 0;
		}