/*
BASELINE

A Typographic Scale
=========================
16, 20, 24, 28, 32, 40

1rem (root em) = 1 x the :root elements value
Our root element has a value of 100%
This 100% is equal to the font-size set in a user's web browser
By default, most browsers are set to 16px
1rem is "assumed" to equal 16px
Basing our values around this 1 root means that when a user's font-size setting changes, all content will change proportionally

Calculating REMS/PX
===================
1rem / 16px = 1 / 16 = 0.0625
0.0625rem = 1px

If we need to calculate a REM fallback value (for IE), or convert our PX scale to REMS we just multiply:

An H1 of 40px = 2.5rem
An H2 of 32px = 2rem
An H3 of 28px = 1.75rem
An H4 of 24px = 1.5rem
An H5 of 20px = 1.25rem
An H6 of 16px = 1rem
A P of 16px = 1rem
A P of 14px = 0.875rem

*/

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin: 0 0 0.5rem;
    /* font-family: inherit; */
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

p {
    margin: 0 0 1rem;
}

h1, .h1 {
    font-size: 40px;
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 32px;
    font-size: 2rem;
}

h3, .h3 {
    font-size: 28px;
    font-size: 1.75rem;
}

h4, .h4 {
    font-size: 24px;
    font-size: 1.5rem;
}

h5, .h5, .intro {
    font-size: 20px;
    font-size: 1.25rem;
}

h6, .h6,
p, .p {
    font-size: 16px;
    font-size: 1rem;
}

small, .small {
    font-size: 14px;
    font-size: 0.875rem;
}

ul, ol, dl {
    margin: 0 0 1rem;
}

ul ul, ul ol, ul dl,
ol ol, ol ul, ol dl,
dl dl, dl ul, dl ol {
    margin-bottom: 0;
}

ol, ul {
    list-style-position: inside;
    padding-left: 1rem;
}

figure {
    margin: 0 0 1rem 1rem;
}

blockquote {
    margin: 0 0 1rem 1rem;
}

blockquote footer {
    display: block;
    font-size: 0.9em;
    color: #6c757d;
}

blockquote footer::before {
    content: "\2014 \00A0";
}

blockquote cite {
    font-style: normal;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 0 0.5rem 0;
}

table {
    border-collapse: collapse;
}

caption {
    padding: 0.5rem 0 1rem;
    color: #6c7275;
    text-align: left;
    caption-side: bottom;
}

th {
    text-align: inherit;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

form {
    margin: 0 0 1rem;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.25rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

textarea {
    overflow: auto;
    resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button, input {
    overflow: visible;
}