@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:600');

.heading-bar {
    display: block;
	padding: 6px 8px;
    width: 99.5%;
}
    .heading-bar.dark {
        color: #FFF;
        background: var(--brand-color);
    }
.heading-bar.light {
	color: #000;
	background: #DCE5ED;
}


.bttn,
button.bttn {
    color: #fff;
    padding: 10px;
}
.bttn.accent1,
button.bttn.accent1 {
    color: #fff;
    background-color: var(--accent1);
    border: 4px solid var(--accent1);
}

.bttn.brand,
button.bttn.brand {
    color: #fff;
    background-color: var(--brand-color);
    border: 4px solid var(--brand-color);
}

.bttn.gray,
button.bttn.gray {
    color: #000;
    background-color: silver;
    border: 4px solid silver;
}

.bttn.accent3,
button.bttn.accent3 {
    color: #000;
    background-color: var(--accent3);
    border: 4px solid var(--accent3);
}

.bttn.four,
button.bttn.four {
    color: #FFF;
    background-color: var(--accent4);
    border: 4px solid var(--accent4);
}
body .bttn:hover, body .bttn:active, body .bttn:focus,
body button.bttn:hover, body button.bttn:active, body button.bttn:focus {
    background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

   
figure.pull-quote {
    display: block;
    background-color: #e5e7f5;
    padding: 30px;
    margin: 25px auto;
    width: 85%;
}

.pull-quote blockquote {
    color: #0d1358;
    font-size: 1.4em;
    line-height: 1.4em;
    font-weight: 700;
    text-align: center;
}

.pull-quote figcaption {
    display: block;
    background-color: #e5e7f5;
    color: #0d1358;
    font-size: 1.125em;
    margin: 0;
    padding: 0;
    text-align: center;
}

.epi-contentfragment {
    border: 1px solid gray;
    padding: 10px;
    border-radius: 4px;
    background-color: #eee;
    margin: 0.75em auto 1.25em auto;
}

    .epi-contentfragment:after {
        content: "block";
        display: inline-block;
        width: 20%;
        text-align: right;
        position: absolute;
        right: 30px;
        font-weight: bold;
    }

figure.width10,
.pull-quote.width10,
.width10 {
    width: 9.5%;
}

figure.width20,
.pull-quote.width20,
.width20 {
    width: 19.5%;
}

figure.width25,
.pull-quote.width25,
.width25 {
    width: 24.5%;
}

figure.width30,
.pull-quote.width30,
.width30 {
    width: 29.5%;
}

figure.width40,
.pull-quote.width40,
.width40 {
    width: 39.5%;
}

figure.width50,
.pull-quote.width50,
.width50 {
    width: 49.5%;
}

figure.width60,
.pull-quote.width60,
.width60 {
    width: 59.5%;
}

figure.width70,
.pull-quote.width70,
.width70 {
    width: 69.5%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

figure.width75,
.pull-quote.width75,
.width75 {
    width: 74.5%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

figure.width80,
.pull-quote.width80,
.width80 {
    width: 79.5%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

figure.width90,
.pull-quote.width90,
.width90 {
    width: 89.5%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

figure.width100,
.pull-quote.width100,
.width100 {
    width: 99.5%;
    margin-left: 0;
    margin-right: 0;
    float: none;
}

figure.width70,
figure.width75,
figure.width80,
figure.width90,
figure.width100,
.pull-quote.width70,
.pull-quote.width75,
.pull-quote.width80,
.pull-quote.width90,
.pull-quote.width100 {
    margin-left: 0;
    margin-right: 0;
    float: none;
}

.large {
    font-size: 1.175em;
    line-height: 1.6em;
}

.larger {
    font-size: 1.275em;
    line-height: 1.6em;
}

.largest {
    font-size: 1.375em;
    line-height: 1.6em;
}