body {
	color: hsl(184, 100%, 8%);
}

.brand {
	color: inherit;
}

header {
	color: white;
	background: linear-gradient(
		135deg, hsl(184, 100%, 34%) 38%, hsl(183, 41%, 59%) 100%
	);
	margin-bottom: 5rem;
}

@media screen and (max-width: 1024px) {
	header {
		margin-bottom: 3rem;
	}
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0.02em;
}

.jumbotron .h1, .jumbotron .h2, .jumbotron .h3, .jumbotron .h4, .jumbotron .h5,
.jumbotron .h6,
.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron h5,
.jumbotron h6 {
	/* The increased spacing from above looks too wide on the jumbotron's
	 * grey background. So reduce it a little: */
	letter-spacing: 0.01em;
}

/* Allow wrapping of code in <pre>: */
pre {
	overflow-x: auto;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

a {
	color: hsl(185, 100%, 28%);
}

a:hover {
	color: hsl(187, 100%, 22%);
}

.badge-warning a {
	color: hsl(184, 100%, 8%);
}

.badge-top {
	position: relative;
	top: -1.5ex;
	font-size: 60%;
}

.btn {
	border-radius: 0;
	font-weight: 500;
	box-shadow: inset 1px 1px 0 hsla(255, 0%, 100%, .5),
	            inset -1px -1px 0 hsla(0, 0%, 0%, .5);
	border: none;
}

.btn svg.icon {
	/* Mimic .btn's color transition: */
	transition: fill 0.15s ease-in-out;
	margin-left: .1ex;
}

.btn:not(:disabled):not(.disabled):active {
	box-shadow: inset -1px -1px 0 hsla(255, 0%, 100%, .5),
	            inset 1px 1px 0 hsla(0, 0%, 0%, .5) !important;
}

.btn-primary {
	background-color: hsl(185, 100%, 31%) !important;
}

.btn-primary:hover {
	background-color: hsl(186, 100%, 25%) !important;
}

.btn-primary:focus {
	box-shadow: 0 0 0 .2rem hsla(186, 100%, 25%, 0.5);
}

.btn-primary svg.icon {
	fill: white;
}

.btn-light {
	background-color: white;
	color: hsl(186, 100%, 35%);
}

.btn-light svg.icon {
	fill: hsl(186, 100%, 35%);
}

.btn-light:hover {
	color: hsl(186, 100%, 13%);
	background-color: hsl(186, 16%, 93%);
}

.btn-light:hover svg.icon {
	fill: hsl(186, 100%, 13%);
}

.btn-goup-lg > .btn, .btn-lg {
	padding: .6rem 1.25rem;
}

.btn-lg svg.icon {
	width: 10px;
	height: 10px;
}

.btn-xl {
    padding: .5rem 1.5rem;
    font-size: 1.75rem;
    line-height: 1.5;
	font-weight: 400;
}

.warning {
	color: rgb(255, 193, 7);
}

.container {
	max-width: 960px;
}

.jumbotron {
	background-color: hsl(180, 22%, 91%);
	border-top: 1px solid hsl(180, 22%, 89%);
	border-bottom: 1px solid hsl(180, 22%, 89%);
}

#features .row {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

@media screen and (max-width: 500px) {
	#features .row {
		margin-top: 3rem;
	}
}

h2 {
	margin-bottom: .75rem;
}

.screenshot {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	max-width: 100%;
}

.screenshot img {
	max-width: 100%;
}

ul.nobullet, .doc-nav ul ul.nobullet {
	list-style-type: none;
}

table.list {
	margin-top: 0;
	margin-bottom: 1rem;
	margin-left: 5%;
	width: 100%;
}
table.list tr td:first-of-type {
	display: list-item;
}
table.list tr.level-2 td:first-of-type {
	margin-left: 10%;
	list-style-type: circle;
}
table.list tr.level-3 td:first-of-type {
	margin-left: 20%;
	list-style-type: square;
}
table.list tr.level-4 td:first-of-type {
	margin-left: 30%;
	list-style-type: square;
}
table.list td.mirror-list {
	padding-left: 10%;
}
table.list td.mirror-list::after {
	display: list-item;
	content: " ";
	float: left;
}
table.list tr.level-4 td.mirror-list::after {
	list-style-type: square;
}
table.list tr.level-2 td.mirror-list::after {
	list-style-type: circle;
}

.doc-nav ul ul.less-indent {
	padding-left: 23px;
}

.doc-nav ul {
	list-style-type: none;
	font-size: 15px;
}

.doc-nav ul li {
	margin-bottom: 5px;
}

.doc-nav ul ul {
	list-style-type: initial;
	font-size: 14px;
}

.doc-nav ul ul li {
	margin-bottom: 0;
}

.docs-section .btn {
	min-width: 120px;
}

.doc-body * + .h2, .doc-body * + h2,
.doc-body * + .h3, .doc-body * + h3 ,
.doc-body * + .h4, .doc-body * + h4,
.doc-body * + .h5, .doc-body * + h5,
.doc-body * + h6 {
	margin-top: 30px;
}

.doc-body h4 + h4 {
	margin-top: 0;
}

header.image-flanked-title .left-image,
header.image-flanked-title .right-image {
	text-align: center;
}

header.image-flanked-title .title {
	margin: auto;
	text-align: center;
}

.title h1 {
	font-size: 48px;
}

.title .lead {
	font-size: 1.4rem;
}

header.image-flanked-title .title h1 {
	font-size: 56px;
}

@media screen and (max-width: 400px) {
	header.image-flanked-title .title h1 {
		font-size: 32px;
	}
}

header.image-flanked-title .title .lead {
	font-size: 1.5rem;
}

header.image-flanked-title img {
	max-height: 250px;
	max-width: 100%;
}

.embed-responsive-21by9.shadow-sm {
	/* Get rid of ugly white top and bottom borders around embed: */
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15),inset 0 0 10px rgba(100,100,100,.3) !important;
}

.pro ul.benefits {
	list-style-type: none;
}

.pro ul.benefits li {
	padding-left: .7em;
	text-indent: -.7em;
}

.pro ul.benefits li .badge {
	padding: .25em .4em;
	text-indent: 0;
}

.pro ul.benefits li::before {
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	content: "\f0fe";
	color: rgb(255, 193, 7);
	margin-right: 5px;
}

.pro .card {
	font-weight: 300;
	font-size: 18px;
}

.pro .card .card-header small {
	font-weight: 300;
}

.pro-refund-policy {
	margin-top: 5rem;
}

.pro-refund-policy img {
	max-width: 120px;
}

.pro-faq {
	margin-top: 6rem;
}

.book-endorsement {
	margin-top: 5rem;
}

.book-story .row {
	margin-top: 5rem;
}

.book-story .row:last-of-type {
	margin-bottom: 3rem;
}

@media screen and (max-width: 500px) {
	.book-story .row {
		margin-top: 3rem;
	}
	.book-story .row:first-of-type {
		margin-top: 4rem;
	}
}

.faq {
	margin-top: 8rem;
}

.faq-header {
	padding-bottom: .75rem;
}

.faq-row {
	border-top: 1px solid hsl(0, 0%, 87%);
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	line-height: 1.75;
}

@media (max-width: 575.98px) {
	.faq-header {
		padding-bottom: 0;
	}
	.faq-row {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
	}
}

.faq-qn {
	font-weight: bold;
}

.btn-xl-captioned {
	line-height: 1;
	padding: 1.5rem 2rem;
}

.btn-xl-captioned small {
	font-weight: 300;
	font-size: 60%;
}

/*
 * The video is off-center. Correct for this:
 */
#book-upsell-video {
	margin-left: -20px;
}
@media (max-width: 450px) {
	#book-upsell-video {
		margin-left: -10px;
	}
}
@media (max-width: 450px) {
	#book-upsell-video {
		margin-left: 0;
	}
}

@media (min-width: 992px) {
	.book-upsell-features {
		margin-top: 6rem !important;
	}
	.book-upsell-features .row {
		margin-top: 5rem;
	}
	.book-upsell-features .row:first-of-type {
		margin-top: 0;
	}
	.book-upsell-features .row:last-of-type {
		margin-top: 4rem !important;
	}
}

.lead.book-upsell-lead {
	font-size: 1.75rem;
	border-bottom: 4px solid hsl(185, 100%, 31%);
	padding-bottom: .3rem;
}

.book-upsell-screenshot {
	max-width: 100%;
	-webkit-box-shadow: 1px 1px 2px 0px rgba(155,155,155,1);
	-moz-box-shadow: 1px 1px 2px 0px rgba(155,155,155,1);
	box-shadow: 1px 1px 2px 0px rgba(155,155,155,1);
}

.blockquote {
	font-size: 1.4rem;
}

.quotation-mark {
	/* Be the anchor for .quotation-mark-left/-right: */
	position: relative;
}

.quotation-mark-left, .quotation-mark-right {
	position: absolute;
    color: hsl(185, 70%, 40%);
    font-size: 4rem;
    line-height: 1rem;
}

.quotation-mark-left {
	left: -.5em;
}

.quotation-mark-right {
	bottom: -1ex;
	right: -.5em;
}

@media (max-width: 650px) {
	.quotation-mark {
		position: inherit;
		display: block;
		line-height: 1;
	}
	.quotation-mark-left, .quotation-mark-right {
		position: inherit;
		display: block;
		line-height: 1;
		margin-top: .5ex;
		margin-bottom: -.5ex;
		left: 50%;
	}
}

.blockquote.text-center .blockquote-footer:before {
	content: none;
}

.blockquote-footer {
	font-size: 85%;
	margin-top: 2.5rem;
}

#footer {
	background-color: hsl(186, 27%, 97%);
	border-top: 1px solid hsl(225, 8%, 91%);
	padding: 1rem;
}

.footer-white #footer {
	background-color: inherit;
	border-top: none;
	padding: 2rem;
}

html.footer-at-bottom {
	height: 100%;
	box-sizing: border-box;
}

.footer-at-bottom *,
.footer-at-bottom *:before,
.footer-at-bottom *:after {
	box-sizing: inherit;
}

.footer-at-bottom body {
	position: relative;
	margin: 0;
	padding-bottom: 10rem;
	min-height: 100%;
}

.footer-at-bottom.footer-white body {
	padding-bottom: 5.5rem;
}

@media (max-width: 575.98px) {
	/* The footer collapses into multiple rows at the smallest screen size. */
	/* Account for this so it doesn't overlap <body>: */
	.footer-at-bottom body {
		padding-bottom: 16rem;
	}
	.footer-at-bottom.footer-white body {
		padding-bottom: 12rem;
	}
}

.footer-at-bottom #footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}