@charset "UTF-8";
/*  # VARIABLES FOR BLAZES
	----------------------------------------------------------------------------

	Refer to variables.md for extensive documentation. */
/*  # Typographical settings
	----------------------------------------------------------------------------
	All specified fonts begin with f_ to make life easier. You can add more font
	types, but don't remove sans, serif, mono and display. */
/*  # Breakpoints for progressive enhancement
	----------------------------------------------------------------------------
	Blazes uses rems pretty exclusively; this ensures all measurements are
	responsive to the screen size without being wildly unpredictable. Obviously
	breakpoints should not be set based on some assumed pixel values (if this is
	not obvious, google until it is); they should be set based on the actual
	content being displayed. So these values are likely to change between
	different designs. Mostly we won't use $mobile, since the site is originally
	designed to the minimum screen size; however it can be useful for shameful
	overrides. Tallscreen is handy for adjusting landing pages when you know the
	fold is unusually far down. Mostly we use $laptop and $widescreen for
	adjustments to text size, navigation display etc. */
/*  # Images
	----------------------------------------------------------------------------
	This defines images we're likely to use often, like logos and other CI.
	The _r suffix indicates reversed items (light on dark). */
/*

# NORMALIZE AND/OR RESET ALL ELEMENTS TO USEFUL CLEAN STATES
  --------------------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
span,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline !important;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

::-moz-selection,
::-moz-selection {
  background: #b81600;
  color: white;
}

::-moz-selection,
::selection {
  background: #b81600;
  color: white;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

abbr,
dfn {
  cursor: text;
  font-style: normal;
  text-decoration: none;
}

abbr[title],
dfn[title] {
  cursor: help;
  outline: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
  margin: 0;
  overflow: auto;
  padding: 0;
}

audio,
canvas,
img,
video {
  vertical-align: middle;
}

audio,
canvas,
video {
  display: inline-block;
}

button,
input,
select,
textarea {
  color: white;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

svg:not(:root) {
  overflow: hidden;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5rem;
}

sub {
  bottom: -0.25rem;
}

textarea {
  overflow: auto;
  resize: vertical;
  vertical-align: top;
}

/**
 * Animations (and animation-like events)
 */
/**
 * Pure CSS tooltips for abbreviations and definitions.
 *
 * We need this mainly for mobile browsers, since they don't display title
 * attributes as tooltips. We need a tabindex on the tag for this to work,
 * since we're using :focus; this is achieved in javascript using
 * makeDefinitionsAccessible() in scripts/async.php. 
 */
main abbr[title],
main dfn[title] {
  background: #eee;
  border: 0;
  border-radius: 2px;
  color: black;
  padding: 0 .2rem;
  position: relative;
  -webkit-transition: background .2s;
  transition: background .2s;
}

main abbr[title]::after,
main dfn[title]::after {
  -webkit-transform: translateX(-50%);
  bottom: 1.2rem;
  content: attr(title);
  cursor: default;
  font: normal 0.75rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  height: 0;
  left: 50%;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-transform: initial;
  transform: translateX(-50%);
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  width: 10rem;
  will-change: opacity;
}

main abbr[title]:hover,
main dfn[title]:hover {
  background: #dfdfdf;
  -webkit-transition: background .2s;
  transition: background .2s;
}

main abbr[title]:focus,
main dfn[title]:focus {
  -webkit-animation: a_pulse .5s 1;
          animation: a_pulse .5s 1;
  will-change: box-shadow;
  border-style: solid;
  text-shadow: none;
  -webkit-transition: background .2s;
  transition: background .2s;
}

@-webkit-keyframes a_pulse {
  0% {
    -webkit-box-shadow: 0 0 0 2px #ddd;
            box-shadow: 0 0 0 2px #ddd;
  }
  10% {
    -webkit-box-shadow: 0 0 0 8px #ddd;
            box-shadow: 0 0 0 8px #ddd;
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px transparent;
            box-shadow: 0 0 0 20px transparent;
  }
}

@keyframes a_pulse {
  0% {
    -webkit-box-shadow: 0 0 0 2px #ddd;
            box-shadow: 0 0 0 2px #ddd;
  }
  10% {
    -webkit-box-shadow: 0 0 0 8px #ddd;
            box-shadow: 0 0 0 8px #ddd;
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px transparent;
            box-shadow: 0 0 0 20px transparent;
  }
}

main abbr[title]:focus::after,
main dfn[title]:focus::after {
  -webkit-transform: translateX(-50%);
  background: white;
  border: 1px solid white;
  border-radius: 1px;
  -webkit-box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.35);
          box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.35);
  color: black;
  height: auto;
  opacity: 1;
  padding: 0.75rem;
  transform: translateX(-50%);
  -webkit-transition: opacity .75s;
  transition: opacity .75s;
  z-index: 1;
}

main dfn[lang] {
  font-style: italic;
}

/* # FORM ADJUSTMENTS
--------------------- */
form {
  margin: 0 auto;
}

main form {
  background: white;
  border: 0.1rem solid #e8e3da;
  -webkit-box-shadow: 0.75rem 0.75rem 0.1rem rgba(0, 0, 0, 0.05);
          box-shadow: 0.75rem 0.75rem 0.1rem rgba(0, 0, 0, 0.05);
  margin: 1.5rem 0;
  max-width: 100vw;
  padding: 0.1rem 3rem 1.5rem;
  /**
	 * Dodging labels
	 */
}

@media (max-width: 43.75rem) {
  main form {
    padding: 0.1rem 1rem 0;
  }
}

main form h3 {
  line-height: 1.3 !important;
}

main form label {
  background: transparent;
  color: #444;
  cursor: text;
  display: block;
  font: 400 0.9rem/1.4rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  height: 1rem;
  pointer-events: none;
  -webkit-transform: translate(0.7rem, -1.75rem);
          transform: translate(0.7rem, -1.75rem);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

main form label i.fas,
main form label i.fab {
  margin-right: 0.1rem;
}

main form input:not(:placeholder-shown) + label,
main form input:focus + label {
  color: #01466a;
  font-size: .75rem;
  height: 1rem;
  -webkit-transform: translate(0, -3.5rem);
          transform: translate(0, -3.5rem);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

main form input,
main form input:hover,
main form input:focus {
  -webkit-transition: all .3s;
  transition: all .3s;
}

main form input[type='email'],
main form input[type='password'],
main form input[type='text'],
main form input[type='url'] {
  border: 0.15rem solid #777;
  border-radius: .2rem;
  -webkit-box-shadow: 0.3rem 0.3rem 0.1rem #eee, 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.05) inset;
          box-shadow: 0.3rem 0.3rem 0.1rem #eee, 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.05) inset;
  color: #222;
  display: inline-block;
  font: 400 0.9rem/1.4rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  height: 2.2rem;
  min-width: 25ex;
  padding: 0.375rem;
  text-shadow: 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1);
  width: 35ex;
}

main form input[type='email']:hover,
main form input[type='password']:hover,
main form input[type='text']:hover,
main form input[type='url']:hover {
  border-color: rgba(0, 110, 167, 0.7);
}

main form input[type='email']:focus,
main form input[type='password']:focus,
main form input[type='text']:focus,
main form input[type='url']:focus {
  border-color: #016ea7;
  -webkit-box-shadow: 0.3rem 0.3rem 0.1rem #eee, 0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1) inset;
          box-shadow: 0.3rem 0.3rem 0.1rem #eee, 0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1) inset;
  width: 45ex;
  max-width: calc(100% - 1rem);
}

main form textarea {
  height: 5rem;
  -webkit-transition: height .6s;
  transition: height .6s;
  will-change: height;
}

main form textarea:focus {
  height: 10rem;
  -webkit-transition: height .2s;
  transition: height .2s;
  will-change: height;
}

/*

# VIDEO ADJUSTMENTS
------------------- */
.video {
  border: .15rem solid #333;
  border-radius: .2rem;
  -webkit-box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.15);
          box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.15);
  left: 50%;
  margin: 1.5rem auto 3rem;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  position: relative;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 52rem;
}

.video .video__iframe-wrapper {
  height: 0;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 56.25% !important;
  padding-top: 0 !important;
  position: relative !important;
  -webkit-transition: all .15s ease-in;
  transition: all .15s ease-in;
  z-index: 2;
}

.video .video__iframe-wrapper:hover {
  -webkit-transition: -webkit-box-shadow .15s ease-in;
  transition: -webkit-box-shadow .15s ease-in;
  transition: box-shadow .15s ease-in;
  transition: box-shadow .15s ease-in, -webkit-box-shadow .15s ease-in;
}

.video .video__iframe-wrapper iframe,
.video .video__iframe-wrapper object,
.video .video__iframe-wrapper embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

#exposable-video-wrapper {
  /*  Elements containing videos that are initially hidden, and expand to display
    and play the video when invoked. */
  height: 0;
  overflow: hidden;
  -webkit-transition: height .5s;
  transition: height .5s;
}

#exposable-video-wrapper .video__border {
  border-width: 0;
}

#exposable-video-wrapper.exposed {
  height: auto;
  margin: 3rem auto;
  -webkit-transition: height .5s;
  transition: height .5s;
}

#exposable-video-wrapper.exposed .video__border {
  border-width: .5rem;
}

#expose-and-play button {
  margin: 0 0 0.375rem 0;
}

#expose-and-play small {
  display: block;
}

#expose-and-play.hidden {
  display: none;
}

/*

# IMAGE ADJUSTMENTS
------------------- */
img.thumbnail {
  height: auto;
}

img {
  display: block;
  margin: 0;
  max-width: 100%;
}

li {
  list-style-position: outside;
  margin-left: 1rem;
  padding: 0.75rem 0 0.75rem 0.75rem;
  position: relative;
}

li:nth-of-type(even), li:nth-of-type(odd) {
  background: transparent;
  border: 0;
}

li:last-of-type {
  padding-bottom: 0;
}

ol,
ul {
  margin: 0.75rem auto;
}

ol.lower-alpha {
  list-style: lower-alpha;
}

ol.lower-roman {
  list-style: lower-roman;
}

ol.upper-alpha {
  list-style: upper-alpha;
}

ol.upper-roman {
  list-style: upper-roman;
}

ol.plain {
  list-style: decimal;
}

ul li {
  list-style: none;
  margin-left: 0.75rem;
}

.bullets--none li {
  margin-left: 0;
  padding-left: 0;
}

.condensed li,
.tight li {
  padding-bottom: 0.375rem;
  padding-top: 0.375rem;
}

.condensed li::before,
.tight li::before {
  top: .5rem;
}

.advanced::before,
.advanced li::before {
  background: #598231;
  content: '\f19d';
}

.audio::before,
audio li::before {
  background: #016ea7;
  content: '\f028';
}

.blue::before,
.blue li::before {
  background: #016ea7;
}

.bright-idea::before,
.bright-idea li::before {
  background: #598231;
  content: '\f0eb';
}

.dollar::before {
  background: #598231;
  content: '\f155';
}

.example::before {
  content: '\f06b';
}

.exercise::before,
.homework::before {
  background: #f97500;
  content: '\f040';
}

.help::before {
  background: #016ea7;
  content: '\f1cd';
}

.info::before {
  content: '\f05a';
}

.lightning::before {
  background: #fff0af;
  color: #016ea7;
  content: '\f0e7';
  text-shadow: none;
}

.note,
.notice {
  background: #fff0af;
  border: 1px solid #ffe500;
}

.note::before,
.notice::before {
  background: #fff0af;
  border: 1px solid #f2d879;
  color: #016ea7;
  content: '\f05a';
  text-shadow: none;
}

.notes::before {
  background: #fff0af;
  border: 1px solid #f2d879;
  color: #016ea7;
  content: "\f249";
  text-shadow: none;
}

.question::before,
.questions li::before {
  background: #016ea7;
  content: '\f059';
}

.red::before {
  background: #970000;
}

.secret-sauce:before {
  background: #598231;
  content: '\f0d0';
}

.system::before {
  background: #016ea7;
  content: '\f013';
}

.tick::before,
.ticks li::before {
  content: '\f14a';
}

.tool::before,
.tools::before {
  background: #f97500;
  content: '\f0ad';
}

.trophy::before {
  background: #598231;
  content: '\f0a3';
}

.warning::before {
  background: #970000;
  content: '\f071';
}

.blur,
.blurred,
.is-blurred {
  -webkit-filter: blur(6px);
          filter: blur(6px);
}

main form input[type='submit'],
main form button, a.button {
  background: #016ea7;
  border: .2rem solid white;
  border-radius: .1rem;
  -webkit-box-shadow: 0 0 2rem inset rgba(0, 0, 0, 0.3), 0 0.15rem 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 2rem inset rgba(0, 0, 0, 0.3), 0 0.15rem 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
  color: white;
  font: bold 1rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin: 0 0 1.5rem 0;
  padding: 1.5rem 3rem;
  text-transform: uppercase;
  -webkit-transition: all .25s;
  transition: all .25s;
}

main form input:hover[type='submit'],
main form button:hover, a.button:hover {
  -webkit-box-shadow: 0 0 2.5rem inset rgba(0, 0, 0, 0.45), 0 0.2rem 0.5rem 0.2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 2.5rem inset rgba(0, 0, 0, 0.45), 0 0.2rem 0.5rem 0.2rem rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
  -webkit-transition: all .5s;
  transition: all .5s;
  will-change: box-shadow;
}

main form input:focus[type='submit'],
main form button:focus, a.button:focus {
  -webkit-box-shadow: 0 0 6rem inset rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 6rem inset rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.95) translateY(0.2rem);
          transform: scale(0.95) translateY(0.2rem);
  -webkit-transition: all .2s;
  transition: all .2s;
}

a.cta,
a.disabled-cta {
  background: url("https://images.informationhighwayman.com/western/cta-bg.png") 0 -15em no-repeat #ea7e00;
  background-size: 100% auto;
  border: .4rem solid #fff;
  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 40px rgba(138, 23, 0, 0.7) inset;
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 40px rgba(138, 23, 0, 0.7) inset;
  color: #fff !important;
  display: block;
  font: 700 1.2rem/1 "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin: 1.4rem auto;
  padding: 0;
  position: relative;
  text-decoration: none !important;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
  white-space: normal;
  max-height: 291px;
  max-width: 28rem;
}

a.secondary-cta {
  background: url("https://images.informationhighwayman.com/western/cta-bg.png") 0 -15em no-repeat #598231;
  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 40px rgba(30, 95, 40, 0.7) inset;
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 40px rgba(30, 95, 40, 0.7) inset;
}

@media all and (min-width: 52rem) {
  a.cta:link,
  a.disabled-cta:link {
    font-size: 1.4rem;
  }
}

a.cta:hover {
  background: url("https://images.informationhighwayman.com/western/cta-bg.png") 0 200px no-repeat #0085cc;
  background-size: 100% auto;
  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 2.8rem rgba(16, 29, 40, 0.7) inset;
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 2.8rem rgba(16, 29, 40, 0.7) inset;
  text-decoration: underline;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-transition: all 1s;
  transition: all 1s;
}

a.cta span i {
  -webkit-transition: all 1s;
  transition: all 1s;
}

a.cta:hover span i {
  -webkit-transform: rotateX(1080deg);
  transform: rotateX(1080deg);
  -webkit-transition: all 2s;
  transition: all 2s;
}

a.cta:active {
  -webkit-box-shadow: -2px -2px 0 10px rgba(0, 0, 0, 0.1), 8px 8px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 55px rgba(0, 0, 0, 0.2) inset;
          box-shadow: -2px -2px 0 10px rgba(0, 0, 0, 0.1), 8px 8px 0 rgba(0, 0, 0, 0.1), 0 -6px 0 2px rgba(0, 23, 138, 0.15) inset, 0 6px 0 0 rgba(255, 255, 255, 0.35) inset, 0 0 55px rgba(0, 0, 0, 0.2) inset;
  -webkit-transform: translate(2px, 2px);
          transform: translate(2px, 2px);
  -webkit-transition: all .1s;
  transition: all .1s;
}

a.cta span,
a.disabled-cta span,
a.cta small,
a.disabled-cta small {
  clear: both;
  display: inline-block;
  margin: 0;
  padding: 1.4rem;
  width: 100%;
}

a.cta small,
a.disabled-cta small {
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  display: block;
  font: 400 70% "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin-top: -1rem;
  padding: .7rem 1rem 1.4rem;
}

a.cta small {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}

a.disabled-cta {
  background: #aaa;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #bbb !important;
  cursor: not-allowed;
  text-shadow: none !important;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.cc i:before {
  /* credit card icons */
  margin: 0 .1rem;
  text-shadow: 0.2rem 0.25rem 0.1rem rgba(0, 0, 0, 0.09);
}

a.monkeyfist:link,
a.monkeyfist:visited {
  background: #fff;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  -webkit-box-shadow: 7px 7px 2px rgba(0, 0, 0, 0.05), 0 -1.4rem 80px rgba(80, 60, 40, 0.1) inset;
          box-shadow: 7px 7px 2px rgba(0, 0, 0, 0.05), 0 -1.4rem 80px rgba(80, 60, 40, 0.1) inset;
  display: inline-block;
  margin: 1.4rem 1.4rem 0;
  padding: 1.4rem 1.4rem 1.4rem 2rem;
  text-decoration: none;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 #fff;
}

a.monkeyfist:last-of-type {
  margin-bottom: 1.4rem;
}

a.monkeyfist i.fa-2x {
  border-radius: 2rem;
  -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);
  display: block;
  height: 4rem;
  margin: -3rem auto 0;
  padding: 1.4rem;
  text-align: center;
  width: 4rem;
}

a.monkeyfist:hover {
  background: #555;
  -webkit-box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -1.4rem 3rem rgba(0, 0, 0, 0.1) inset;
          box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1), 0 -1.4rem 3rem rgba(0, 0, 0, 0.1) inset;
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.9), 1px 1px 0 rgba(255, 255, 255, 0.1);
}

a.monkeyfist:hover i.fa-2x,
a.monkeyfist:hover i.pin {
  -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1), 0 -1.4rem 20px rgba(0, 0, 0, 0.1) inset, 0 1.4rem 20px rgba(255, 255, 255, 0.1) inset;
          box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1), 0 -1.4rem 20px rgba(0, 0, 0, 0.1) inset, 0 1.4rem 20px rgba(255, 255, 255, 0.1) inset;
}

a.button-anchor:link, a.button-anchor:visited {
  border: .1rem solid #016ea7;
  border-radius: .15rem;
  color: #016ea7;
  display: inline-block;
  padding: .5rem;
}

a.button-anchor:link:hover, a.button-anchor:visited:hover {
  color: white;
}

a.button-anchor:link:focus, a.button-anchor:visited:focus {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.hero-shot {
  border: 3px solid #fff;
  border-radius: 3px;
  border-bottom-right-radius: 0;
  -webkit-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.05);
  display: none;
  float: right;
  margin: .5rem -.5rem auto 1rem;
  overflow: hidden;
  width: 25%;
  max-width: 284px;
}

@media all and (min-width: 52rem) {
  .hero-shot {
    display: block;
  }
}

@media all and (min-width: 72rem) {
  .hero-shot {
    margin-right: -5rem;
  }
}

.hero-shot__wrapper {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: visible;
}

.hero-shot__photo {
  margin: 5%;
  max-width: 91%;
}

.hero-shot__description {
  border-top: 1px solid #ddd;
  font: 300 italic 18px "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin-top: -.3rem;
  padding: 0 5%;
  text-align: center;
  text-indent: -1.5em;
}

.hero-shot__description::before {
  color: #fff;
  content: '\f0d8';
  font: 2rem 'FontAwesome';
  left: 55%;
  position: relative;
  text-shadow: 0 -1px 0 #ccc;
  top: -1.3rem;
}

.hero-shot__description img {
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 1.4rem auto;
  width: 100%;
  max-width: 100%;
}

.callout {
  background: #fff;
  border: 2px solid #e8e3da;
  border-radius: 3px;
  margin-top: 3rem;
  overflow: visible;
  padding: 0 1rem 1rem;
  max-width: 100vw;
}

@media all and (min-width: 52rem) {
  .callout {
    padding: 0 2rem 2rem;
  }
}

.callout::before,
.resource::before {
  background: #777;
  border-radius: 2.8rem;
  -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1), 0 -1.4rem 20px rgba(0, 0, 0, 0.1) inset, 0 1.4rem 20px rgba(255, 255, 255, 0.1) inset;
          box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1), 0 -1.4rem 20px rgba(0, 0, 0, 0.1) inset, 0 1.4rem 20px rgba(255, 255, 255, 0.1) inset;
  color: #fff;
  display: block;
  font: bold 1.2rem/2.9rem 'Font Awesome 5 Pro';
  height: 2.8rem;
  margin: -2.8rem auto 1.4rem;
  position: relative;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
  width: 2.8rem;
}

.fancyheader {
  margin-top: 8.4rem;
  padding-top: 0;
}

.fancyheader h2 {
  border: .25rem double #fff;
  border-radius: 7rem;
  -webkit-box-shadow: 0 8px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 8px 0 rgba(0, 0, 0, 0.05);
  display: block;
  height: 6.8rem;
  margin: -7rem auto 3rem;
  padding: 2.4rem 0 0;
  position: relative;
  text-align: center;
  width: 7rem;
}

.fancyheader h2.text-figure {
  line-height: 1.1;
}

.fancyheader h2 + h3 {
  background: #fff0ad;
  border: 2px solid #e8e3da;
  -webkit-box-shadow: 0 0.6rem 0 -0.3rem rgba(0, 0, 0, 0.05);
          box-shadow: 0 0.6rem 0 -0.3rem rgba(0, 0, 0, 0.05);
  color: #333;
  display: block;
  font: bold 1rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin: -4.3rem auto 2.8rem;
  padding: 1rem .5rem .9rem;
  text-align: center;
  max-width: 90%;
}

.fancyheader--small {
  margin-top: 4.2rem;
  padding-top: 0;
}

.fancyheader--small h2 {
  border: .25rem double #fff;
  border-radius: 3.5rem;
  -webkit-box-shadow: 0 8px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 8px 0 rgba(0, 0, 0, 0.05);
  display: block;
  height: 3.4rem;
  margin: -3.5rem auto 1.5rem;
  padding: .85rem 0 0;
  position: relative;
  text-align: center;
  width: 3.5rem;
}

table .fancyheader--small h2 {
  margin-top: 0;
}

.reassuring {
  /* light blue callout boxes */
  background: rgba(0, 110, 167, 0.05);
  border-color: #64a2c1;
}

.reassuring h2 + h3 {
  background: #fff;
  border-color: #64a2c1;
}

.resource {
  /* helpful items in course content */
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #e8e3da;
  border-left: 0;
  border-right: 0;
  font: 0.9rem/1.5rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin: 2.8rem 0;
  overflow: visible;
  padding: 1.4rem 0;
  position: relative;
}

.resource::before {
  background: #016ea7;
  -webkit-box-shadow: 0 -1.4rem 20px rgba(0, 0, 0, 0.05) inset, 0 1.4rem 20px rgba(255, 255, 255, 0.05) inset;
          box-shadow: 0 -1.4rem 20px rgba(0, 0, 0, 0.05) inset, 0 1.4rem 20px rgba(255, 255, 255, 0.05) inset;
}

.resource abbr {
  font-family: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  font-style: inherit;
  text-transform: initial;
}

.resource blockquote {
  font: 300 italic 0.88rem/1.4rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin: 1.4rem .5rem 0 2.8rem;
}

.resource blockquote::before {
  color: #444;
  content: '\f10d';
  font: 1.4rem 'FontAwesome';
  margin: -3px 0 0 -55px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.resource h2,
.resource h3,
.resource h4 {
  font-family: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}

.resource.advanced::before {
  background: #598231;
  content: '\f19d';
}

.resource.audio::before {
  background: #016ea7;
  content: '\f028';
}

.resource.blue::before {
  background: #016ea7;
}

.resource.bright-idea::before {
  background: #598231;
  content: '\f0eb';
}

.resource.dollar::before {
  background: #598231;
  content: '\f155';
}

.resource.example::before {
  content: '\f06b';
}

.resource.exercise::before, .resource.homework::before {
  background: #f97500;
  content: '\f040';
}

.resource.help::before {
  background: #016ea7;
  content: '\f1cd';
}

.resource.info::before {
  content: '\f05a';
}

.resource.lightning::before {
  background: #fff0af;
  color: #016ea7;
  content: '\f0e7';
  text-shadow: none;
}

.resource.note, .resource.notice {
  background: #fff0af;
  border: 1px solid #ffe500;
}

.resource.note::before, .resource.notice::before {
  background: #fff0af;
  border: 1px solid #f2d879;
  color: #016ea7;
  content: '\f05a';
  text-shadow: none;
}

.resource.notes::before {
  background: #fff0af;
  border: 1px solid #f2d879;
  color: #016ea7;
  content: "\f249";
  text-shadow: none;
}

.resource.question::before {
  background: #016ea7;
  content: '\f059';
}

.resource.red::before {
  background: #970000;
}

.resource.secret-sauce:before {
  background: #598231;
  content: '\f0d0';
}

.resource.system::before {
  background: #016ea7;
  content: '\f013';
}

.resource.tool::before, .resource.tools::before {
  background: #f97500;
  content: '\f0ad';
}

.resource.trophy::before {
  background: #598231;
  content: '\f0a3';
}

.resource.warning::before {
  background: #970000;
  content: '\f071';
}

/**
 * Different types of tables
 */
table {
  border-collapse: collapse;
  font: 400 0.85rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin: 3rem auto 1.5rem;
  max-width: 42rem;
  padding: 2rem;
  width: 100%;
}

tr:nth-of-type(even) {
  background: rgba(0, 110, 167, 0.05);
}

th {
  border-bottom: 1px solid #bbb;
}

td {
  padding: .35rem .7rem;
}

table.timeline {
  border-collapse: collapse;
}

table.timeline th {
  border-bottom: 1px solid #e8e3da;
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .05rem;
  padding: .7rem;
  text-transform: uppercase;
}

table.timeline tr {
  border-bottom: 1px dotted #e8e3da;
}

table.timeline tr:nth-of-type(even) {
  background: transparent;
}

table.timeline td {
  font-size: 90%;
  padding: 1.4rem .7rem;
  vertical-align: middle !important;
}

table.timeline td.large-text {
  font-size: 100%;
}

table.timeline td + td {
  border-left: 1px solid #e8e3da;
  position: relative;
}

table.timeline td + td::before {
  bottom: 50%;
  background: #e8e3da;
  border-radius: 50%;
  content: '';
  height: .46rem;
  left: -.23rem;
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: .46rem;
}

table.timeline p {
  padding: 0;
}

table.timeline small {
  color: #016ea7;
  display: inline-block;
  line-height: 1rem;
  margin-top: 1rem;
}

.comparison td {
  min-width: 6rem;
}

.comparison tr {
  border-bottom: 0.1rem solid lightgray;
}

.comparison dfn[title] {
  background: transparent;
  border-bottom: 1px dotted;
  border-radius: 0;
  color: inherit;
}

.comparison dfn[title]:hover, .comparison dfn[title]:focus {
  background: transparent;
}

.comparison--against {
  background: rgba(184, 22, 0, 0.1);
  color: #b81600;
  font-size: .9rem;
  padding: 0;
}

.comparison--depends {
  background: rgba(211, 211, 211, 0.3);
  color: #666;
  font-size: .9rem;
  padding: 0;
}

.comparison--for {
  background: rgba(1, 110, 167, 0.2);
  color: #016ea7;
  font-size: .9rem;
  padding: 0;
}

.buybox,
.callout.buybox {
  /* green callout boxes */
  background-color: rgba(89, 130, 49, 0.1);
  border-color: #9daa8f;
}

.buybox h2,
.buybox h2.glyph,
.callout.buybox h2,
.callout.buybox h2.glyph {
  color: #fff;
  font-size: 3rem;
  font-style: normal;
  line-height: 1.75 !important;
  padding-top: .5rem;
}

.buybox h2,
.callout.buybox h2 {
  background: #598231;
}

.buybox h2 + h3,
.callout.buybox h2 + h3 {
  background: #fff;
  border-color: #9daa8f;
}

.buybox table,
.callout.buybox table {
  /* product comparison table */
  border: 0;
  font: 0.9rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
}

.buybox th,
.callout.buybox th {
  background: #fff;
  color: #598231;
  font-size: 1rem;
  letter-spacing: -.03rem;
  padding: 3rem 1rem .35rem;
  text-align: center;
}

.buybox th i,
.callout.buybox th i {
  background: inherit;
  border-radius: 1.5rem;
  display: block;
  font-size: 2rem;
  height: 3rem;
  line-height: 3rem;
  margin: -4.5rem auto 0;
  position: relative;
  width: 3rem;
}

.buybox tr,
.callout.buybox tr {
  background: #fff;
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgba(89, 130, 49, 0.3);
}

.buybox tr:nth-of-type(even),
.callout.buybox tr:nth-of-type(even) {
  background: rgba(255, 255, 255, 0.5);
}

.buybox tr.price,
.callout.buybox tr.price {
  background: rgba(89, 130, 49, 0.9);
  color: #fff;
  font: 700 1rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
}

.buybox tr.price ins,
.callout.buybox tr.price ins {
  background: transparent;
}

.buybox tr .empty,
.callout.buybox tr .empty {
  background: transparent;
}

.buybox td,
.callout.buybox td {
  padding: .7rem;
}

.buybox td + td,
.buybox td + td + td,
.callout.buybox td + td,
.callout.buybox td + td + td {
  text-align: center;
  width: 20%;
}

.popup-cta {
  bottom: -4rem;
  position: fixed;
  right: 12px;
  -webkit-transition: all ease-out 1.25s;
  transition: all ease-out 1.25s;
}

.popup-cta a {
  background: #e25703;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 -0.8rem 0 -0.4rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 -0.8rem 0 -0.4rem rgba(0, 0, 0, 0.1);
  color: #fff;
  display: inline-block;
  font: 400 0.9rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  padding: 12px 20px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.popup-cta a:hover {
  background: #3D8ECC;
  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.15);
  text-decoration: underline;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.popup-cta.is-exposed {
  bottom: -1px;
  -webkit-transition: all ease-in .85s;
  transition: all ease-in .85s;
}

.modal {
  background: #fff;
  border: 2px solid #666;
  border-radius: 3px;
  -webkit-box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1), 0 2rem 7rem rgba(0, 0, 0, 0.3);
          box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1), 0 2rem 7rem rgba(0, 0, 0, 0.3);
  display: block;
  left: 50%;
  margin: 0;
  max-height: 100vh;
  max-width: 100vw;
  padding: 0 1rem 1rem;
  position: fixed;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media all and (min-width: 52rem) {
  .modal {
    padding: 0 2rem 2rem;
  }
}

@media (max-width: 43.75rem) {
  .modal {
    overflow: scroll;
  }
}

.modal:not([open]) {
  display: none;
}

.modal::-webkit-backdrop,
.modal + .backdrop {
  background: rgba(255, 255, 255, 0.35);
  -webkit-transition: background .25s;
  transition: background .25s;
  will-change: background;
}

.modal::backdrop,
.modal + .backdrop {
  background: rgba(255, 255, 255, 0.35);
  -webkit-transition: background .25s;
  transition: background .25s;
  will-change: background;
}

.modal .modal__close {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: transparent;
  border: 0;
  color: #444;
  height: 3rem;
  line-height: 3.4rem;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
}

.modal .modal__close:hover {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: black;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.modal .modal__close:focus {
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

.modal .modal__close i.fa-times {
  font-size: 1.5rem;
}

/**
 * Typography
 *
 * This covers root typesetting plus everything inside the main element. Anything
 * outside that element is not considered typography, per se, since it doesn't deal
 * with the typesetting of primary content, so those font styles are handled in the
 * stylesheets for their major elements (footer, masthead etc). Quibble all you
 * like, but that's the distinction I've made. 
 */
:root {
  /*
	The font size is calculated fluidly, but I've forgotten what all these
	numbers mean... */
  font-family: "Questa", Georgia, Times, serif;
  font-size: calc(1rem + ((1vw - 0.25rem) * 0.8511));
  line-height: 1.5;
  scroll-behavior: smooth;
}

@media (min-width: 80rem) {
  :root {
    font-size: 1.5rem;
  }
}

:root body {
  color: #222;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: slashed-zero;
  -webkit-font-feature-settings: "liga" 1, "onum" 1, "zero" 1;
          font-feature-settings: "liga" 1, "onum" 1, "zero" 1;
  position: relative;
  text-rendering: optimizeLegibility;
}

a:link,
a:visited,
a:hover,
a:focus {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration: none;
}

a:link abbr,
a:link dfn,
a:visited abbr,
a:visited dfn,
a:hover abbr,
a:hover dfn,
a:focus abbr,
a:focus dfn {
  cursor: pointer;
}

main a:link,
main a:visited,
dialog a:link,
dialog a:visited {
  color: #016ea7;
  text-decoration: underline;
}

main a:visited,
dialog a:visited {
  color: #777;
}

main a:hover,
dialog a:hover {
  background: #016ea7;
  border-radius: 0.1rem;
  -webkit-box-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 0 .05rem;
  text-decoration: none;
}

main a[href*="youtube.com"]::before,
main a[href*="you.tube"]::before,
main a[href*="youtu.be"]::before,
dialog a[href*="youtube.com"]::before,
dialog a[href*="you.tube"]::before,
dialog a[href*="youtu.be"]::before {
  content: '\f167';
  font-family: "Font Awesome 5 Brands";
}

main h1,
dialog h1 {
  font: 400 180%/1 "Questa", Georgia, Times, serif;
  letter-spacing: -.05rem;
  margin: 3rem auto 1.5rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 80rem) {
  main h1,
  dialog h1 {
    font-size: 250%;
  }
}

main h2,
main h3,
main h4,
dialog h2,
dialog h3,
dialog h4 {
  color: #b81600;
  line-height: 1.1 !important;
  position: relative;
}

main h2,
dialog h2 {
  color: #555;
  font: bold 1.75rem "Questa", Georgia, Times, serif;
  letter-spacing: -.05rem;
  margin-top: 3rem;
}

main h2 abbr[title],
main h2 dfn[title],
dialog h2 abbr[title],
dialog h2 dfn[title] {
  padding: 0 0.375rem;
}

main h2 abbr[title]::after,
main h2 dfn[title]::after,
dialog h2 abbr[title]::after,
dialog h2 dfn[title]::after {
  bottom: 2.2rem;
  text-shadow: none;
}


main h3,
dialog h3 {
  font: italic 1.1rem "Questa", Georgia, Times, serif;
}


main h4,
dialog h4 {
  color: #222;
  font: italic 1.1rem "Questa", Georgia, Times, serif;
}

aside {
  border: 0.5rem solid rgba(1, 150, 228, 0.75);
  float: right;
  font-size: .85rem;
  font-style: italic;
  margin: .5rem 0 .5rem .5rem;
  max-width: 38%;
  padding: 1rem;
}

blockquote,
p, address,
dl {
  margin: 1.5rem auto 0;
  max-width: 42rem;
}

main a[href*="youtube.com"]::before,
main a[href*="you.tube"]::before,
main a[href*="youtu.be"]::before,
dialog a[href*="youtube.com"]::before,
dialog a[href*="you.tube"]::before,
dialog a[href*="youtu.be"]::before {
  background: #016ea7;
  border-radius: 50%;
  color: white;
  display: inline-block;
  font: 0.75rem/1.25rem "Font Awesome 5";
  height: 1.25rem;
  line-height: 1.1rem;
  margin-right: 0.1rem;
  padding: 0.1rem 0.2rem;
  text-align: center;
  text-decoration: none !important;
  width: 1.25rem;
}

.lede::first-letter {
  float: left;
  font: 700 3.5rem/2.2rem "Questa", Georgia, Times, serif;
  margin: 0.375rem 0.375rem -0.5rem 0;
  text-transform: uppercase;
}

h1, h2, h3, h4,
h5,
h6 {
  margin: 1.5rem auto;
  max-width: 42rem;
  word-break: break-word;
}

h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr {
  font-style: inherit;
  font-family: inherit;
  text-transform: initial;
}

.sc {
  font-family: "Questa SC", Georgia, Times, serif;
  -webkit-font-feature-settings: normal !important;
          font-feature-settings: normal !important;
  -webkit-font-variant-ligatures: none !important;
          font-variant-ligatures: none !important;
  text-transform: lowercase;
}

blockquote {
  font: 0.9rem/1.5rem "Questa", Georgia, Times, serif;
  margin-left: 2.3rem;
  padding: 0 1rem;
}

blockquote::before {
  color: lightgray;
  content: '“';
  float: left;
  font: bold 5rem/3.75rem "Questa", Georgia, Times, serif;
  height: 2.75rem;
  margin-left: -3.49rem;
  margin-top: 0;
  text-align: center;
  width: 2.5rem;
}

blockquote abbr[title],
blockquote dfn[title] {
  color: #b81600;
}

h4.sans {
  font-style: normal;
}

ul + h4 {
  margin-top: 2.5rem;
}

address dd,
dl dd {
  border-bottom: .1rem solid lightgray;
  padding-bottom: 1.5rem;
}

address dt,
dl dt {
  font: bold 105% "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  margin-top: 1.5rem;
}

code,
kbd,
var {
  background: lightgray;
  border-radius: 0.1rem;
  font-family: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
  font-size: 79%;
  padding: 0 0.1rem;
}

del {
  text-decoration: line-through;
}

abbr {
  font-family: "Questa SC", Georgia, Times, serif;
  text-transform: lowercase;
}

hr {
  border: 0;
  border-top: 1px solid #e8e3da;
  height: 1px;
  margin: 1.5rem -3rem;
  overflow: visible;
  position: relative;
}

ins {
  background: #ffee68;
  border-bottom: 1px dotted #aaa;
  color: #222;
  text-decoration: none;
}

kbd {
  background: rgba(137, 187, 187, 0.2);
  border: 1px solid #89bbbb;
  border-radius: 0.1rem;
  padding: 0.1rem;
}

mark {
  -webkit-box-decoration-break: clone;
  background: #ffee68;
  box-decoration-break: clone;
  color: #000;
  padding: .25rem;
}

pre {
  font-family: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  white-space: pre-wrap;
  max-width: 42rem;
}

pre * {
  font-family: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
  margin: 0;
  padding: 0;
}

q {
  font: italic 100% "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  quotes: none;
}

q::before {
  content: '“';
}

q::after {
  content: '”';
}

/*	# Classes
----------------------------------------------------------------------------- */
.fineprint {
  line-height: 1;
}

.flourish {
  font-family: Nymphette;
  font-size: 150%;
  line-height: 0;
}

.sans {
  font-family: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif !important;
}

.sans abbr {
  font-family: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  font-style: inherit;
  text-transform: initial;
}

.serif {
  font-family: 'Questa', serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.text--centered {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.text--left {
  text-align: left;
}

.text--lowercase {
  text-transform: lowercase;
}

.text--uppercase {
  text-transform: uppercase;
}

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: initial;
  }
}

/*

# TYPEFACE DECLARATIONS
----------------------- */
@font-face {
  font-family: 'Questa';
  src: url("//fonts.informationhighwayman.com/2-Questa_Regular-webfont.woff2") format("woff2"), url("//fonts.informationhighwayman.com/2-Questa_Regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Questa';
  src: url("//fonts.informationhighwayman.com/4-Questa_Bold-webfont.woff2") format("woff2"), url("//fonts.informationhighwayman.com/4-Questa_Bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Questa';
  src: url("//fonts.informationhighwayman.com/2-Questa_Regular_Italic-webfont.woff2") format("woff2"), url("//fonts.informationhighwayman.com/2-Questa_Regular_Italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Questa';
  src: url("//fonts.informationhighwayman.com/4-Questa_Bold_Italic-webfont.woff2") format("woff2"), url("//fonts.informationhighwayman.com/4-Questa_Bold_Italic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Questa SC';
  src: url("//fonts.informationhighwayman.com/2-questa_sc-webfont.woff2") format("woff2"), url("//fonts.informationhighwayman.com/2-questa_sc-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nymphette';
  src: url("//fonts.informationhighwayman.com/nymphette-webfont.woff2") format("woff2"), url("//fonts.informationhighwayman.com/nymphette-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(250, 200, 100, 0.1)), color-stop(22rem, white)), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzkiCiAgIHZlcnNpb249IjEuMSIKICAgaGVpZ2h0PSIzMDAiCiAgIHdpZHRoPSIzMDAiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTMiIC8+CiAgPGZpbHRlcgogICAgIHk9IjAiCiAgICAgeD0iMCIKICAgICBpZD0ibiI+CiAgICA8ZmVUdXJidWxlbmNlCiAgICAgICBpZD0iZmVUdXJidWxlbmNlMiIKICAgICAgIHN0aXRjaFRpbGVzPSJzdGl0Y2giCiAgICAgICBiYXNlRnJlcXVlbmN5PSIwLjgiCiAgICAgICB0eXBlPSJmcmFjdGFsTm9pc2UiIC8+CiAgPC9maWx0ZXI+CiAgPHJlY3QKICAgICBzdHlsZT0ib3BhY2l0eTowLjg7ZmlsdGVyOnVybCgjbikiCiAgICAgeT0iLTI0LjI2OTM0NCIKICAgICB4PSItMjcuODY0ODA1IgogICAgIGlkPSJyZWN0NyIKICAgICBoZWlnaHQ9IjMwMCIKICAgICB3aWR0aD0iMzAwIiAvPgo8L3N2Zz4K");
  background: linear-gradient(to bottom, rgba(250, 200, 100, 0.1) 0, white 22rem), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzkiCiAgIHZlcnNpb249IjEuMSIKICAgaGVpZ2h0PSIzMDAiCiAgIHdpZHRoPSIzMDAiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTMiIC8+CiAgPGZpbHRlcgogICAgIHk9IjAiCiAgICAgeD0iMCIKICAgICBpZD0ibiI+CiAgICA8ZmVUdXJidWxlbmNlCiAgICAgICBpZD0iZmVUdXJidWxlbmNlMiIKICAgICAgIHN0aXRjaFRpbGVzPSJzdGl0Y2giCiAgICAgICBiYXNlRnJlcXVlbmN5PSIwLjgiCiAgICAgICB0eXBlPSJmcmFjdGFsTm9pc2UiIC8+CiAgPC9maWx0ZXI+CiAgPHJlY3QKICAgICBzdHlsZT0ib3BhY2l0eTowLjg7ZmlsdGVyOnVybCgjbikiCiAgICAgeT0iLTI0LjI2OTM0NCIKICAgICB4PSItMjcuODY0ODA1IgogICAgIGlkPSJyZWN0NyIKICAgICBoZWlnaHQ9IjMwMCIKICAgICB3aWR0aD0iMzAwIiAvPgo8L3N2Zz4K");
  border-top: 0.75rem solid #b81600;
  display: -ms-grid;
  display: grid;
  grid-gap: 0;
      grid-template-areas: "masthead" "main" "footer";
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 10rem 1fr 10rem;
      grid-template-rows: 10rem 1fr 10rem;
  margin: 0 !important;
}

@media (max-width: 43.75rem) {
  body {
    background: white;
    -ms-grid-rows: 7rem 1fr 10rem;
        grid-template-rows: 7rem 1fr 10rem;
  }
}

.masthead {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  border-bottom: 1px solid lightgray;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: masthead;
  overflow: hidden;
  height: 10rem;
  text-align: center;
}

@media (max-width: 43.75rem) {
  .masthead {
    height: 7rem;
  }
}

.masthead__logo {
  margin: 0 auto;
  overflow: hidden;
}

.masthead__logo a:link,
.masthead__logo a:visited,
.masthead__logo a:hover,
.masthead__logo a:focus {
  background: url("images/logo-web.min.svg") top center no-repeat;
  background-size: 3rem;
  color: #b81600;
  display: inline-block;
  font-family: "Abril Fatface", Georgia, serif;
  font-size: 1.55rem;
  font-weight: normal;
  line-height: .8;
  margin-top: .5rem;
  padding-top: 3.5rem;
  text-shadow: 1px 1px 2px rgba(50, 0, 0, 0.2);
  text-transform: uppercase;
  width: 14rem;
}

.masthead__tagline {
  font-size: .8rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 auto;
  width: 20rem;
}

@media (max-width: 43.75rem) {
  .masthead__tagline {
    display: none;
  }
}

footer[role='contentinfo'] {
  background: url("https://images.informationhighwayman.com/western/separator-small.png") center 1rem no-repeat #fff;
  border-top: 2px dotted #e8e3da;
  -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05) inset;
          box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05) inset;
  font: 300 0.75rem/1.2rem "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: footer;
  padding: 2rem 0 1rem;
  text-align: center;
}

footer[role='contentinfo'] a:link {
  color: #222;
}

footer[role='contentinfo'] a:visited {
  color: #666;
}

footer[role='contentinfo'] a:hover {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #016ea7;
  text-decoration: underline;
}

main {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: main;
  margin: 0 auto;
  outline: 0;
  overflow: visible;
  max-width: 42rem;
  /* images */
}

@media (max-width: 43.75rem) {
  main {
    padding: 0 .7rem;
    max-width: 100vw;
  }
}

main img {
  margin: 1.4rem 0;
  max-width: 100%;
}

/* CLASSES */
main,
dialog {
  /* icons to "pin" links, callouts etc */
  /* column stuff */
}

main a.blue:link,
main a.blue:visited,
dialog a.blue:link,
dialog a.blue:visited {
  border-color: #016ea7;
  color: #016ea7;
}

main a.blue:hover,
main a.blue i.fa-2x,
main .blue i.pin,
dialog a.blue:hover,
dialog a.blue i.fa-2x,
dialog .blue i.pin {
  background: #016ea7;
  color: #fff;
}

main a.gray:link,
main a.gray:visited,
dialog a.gray:link,
dialog a.gray:visited {
  border-color: #555;
  color: #222;
}

main a.green:link,
main a.green:visited,
dialog a.green:link,
dialog a.green:visited {
  border-color: #5a7716;
  color: #5a7716;
}

main a.green:hover,
main a.green i.fa-2x,
main .green i.pin,
dialog a.green:hover,
dialog a.green i.fa-2x,
dialog .green i.pin {
  background: #5a7716;
  color: #fff;
}

main a.red:link,
main a.red:visited,
dialog a.red:link,
dialog a.red:visited {
  border-color: #970000;
  color: #970000;
}

main a.red:hover,
main a.red i.fa-2x,
main .red i.pin,
dialog a.red:hover,
dialog a.red i.fa-2x,
dialog .red i.pin {
  background: #970000;
  color: #fff;
}

main .blue-text,
main li.blue-li:before,
dialog .blue-text,
dialog li.blue-li:before {
  color: #016ea7 !important;
}

main .green-text,
main li.green-li:before,
dialog .green-text,
dialog li.green-li:before {
  color: #5a7716 !important;
}

main .bold,
dialog .bold {
  font-weight: bold;
}

main .red-text,
main li.red-li:before,
dialog .red-text,
dialog li.red-li:before {
  color: #970000 !important;
}

main .centered-text,
dialog .centered-text {
  text-align: center !important;
}

main .left-text,
dialog .left-text {
  text-align: left !important;
}

main .snug,
dialog .snug {
  margin-top: 0 !important;
}

main .white-bg,
dialog .white-bg {
  background: #fff;
}

main .icon-blue,
main .blue-bg,
main .icon-green,
main .green-bg,
main .icon-orange,
main .orange-bg,
main .icon-red,
main .red-bg,
dialog .icon-blue,
dialog .blue-bg,
dialog .icon-green,
dialog .green-bg,
dialog .icon-orange,
dialog .orange-bg,
dialog .icon-red,
dialog .red-bg {
  color: #fff;
}

main .icon-blue,
main .blue-bg,
dialog .icon-blue,
dialog .blue-bg {
  background: #016ea7;
}

main .icon-green,
main .green-bg,
dialog .icon-green,
dialog .green-bg {
  background: #598231;
}

main .icon-orange,
main .orange-bg,
dialog .icon-orange,
dialog .orange-bg {
  background: #f97500;
}

main .icon-red,
main .red-bg,
dialog .icon-red,
dialog .red-bg {
  background: #970000;
}

main .icon-yellow,
main .yellow-bg,
dialog .icon-yellow,
dialog .yellow-bg {
  background: #fff0af;
}

main i.on-the-side,
dialog i.on-the-side {
  float: left;
  font-size: 200%;
  margin: -.6rem auto auto -2.2rem;
}

@media all and (min-width: 52rem) {
  main i.on-the-side,
  dialog i.on-the-side {
    margin-left: -3.5rem;
  }
}

main i.pin,
dialog i.pin {
  border-radius: 25px;
  -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);
  display: block;
  float: left;
  height: 50px;
  margin: -11px 15px -15px -70px;
  padding: 14px 0 0;
  text-align: center;
  text-shadow: none;
  width: 50px;
}

main .full-width,
dialog .full-width {
  width: 100%;
}

main .half-width,
dialog .half-width {
  float: left;
  margin: 0 1% 0 0;
  width: 48%;
}

main .half-width:last-of-type,
dialog .half-width:last-of-type {
  margin: 0 0 0 1%;
}

main .vertical-standout,
dialog .vertical-standout {
  /* mostly used for wrapping CTAs, choice links etc, to prevent them being crammed into the elements above/below */
  margin: 2.8rem 0;
}

main .hilight,
dialog .hilight {
  background: #fff0af;
}

main .lowercase,
dialog .lowercase {
  text-transform: lowercase;
}

main .reversed,
dialog .reversed {
  background: #555;
  border-radius: .1rem;
  color: #fff;
  padding: .35rem .7rem;
}

main .sig,
dialog .sig {
  background: url("https://images.informationhighwayman.com/western/sig.png") 4.5rem 0 no-repeat;
  background-size: 6rem;
  color: #1e394d;
  font: italic 1.1rem/1.4rem 'IM Fell English', serif;
  height: 9rem;
  margin-bottom: 2.8rem;
  padding: 1.4rem 0 1.4rem 12rem;
  text-align: left;
}

@media (max-width: 43.75rem) {
  main .sig,
  dialog .sig {
    background-position: 1.5rem 0;
    background-size: 4rem;
    padding: 1rem 0 1rem 7rem;
  }
}

main strong.weak,
dialog strong.weak {
  font-weight: 400;
}

main .unstyled,
dialog .unstyled {
  margin: 0;
  padding: 0;
}

main .underline,
dialog .underline {
  text-decoration: underline;
}