.nav {
  border: 0;
  border-left: 1px solid rgba(161, 161, 161, 0.3);
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0.25em;
  margin: 0;
  padding: 0 1.5em;
  text-transform: uppercase;
}
.flyout-menu {
  background-color: #fff;
  border-left: 1px solid rgba(161, 161, 161, 0.3);
  height: 100%;
  margin-top: 3.5em;
  overflow-y: auto;
  padding: 0;
  position: fixed;
  top: 0;
  transition: 0.35s ease-in-out;
  z-index: 20;
}
.flyout-menu.active {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  right: 0 !important;
}
.flyout-menu.active a {
  border-left: 0;
}
.flyout-menu h1 {
  font-size: 1em;
}
.link {
  border-bottom: 1px dotted rgba(161, 161, 161, 0.7);
  display: block;
  flex-basis: 100%;
  order: 2;
}
.link:hover {
  border-bottom: 1px dotted rgba(161, 161, 161, 0.7);
}
@media (min-width: 1024px) {
  .link {
    border-bottom: none;
    display: inline;
    order: 0;
 }
  .link:hover {
    border-bottom: 0;
 }
  .link:first-of-type {
    border: 0;
 }
}
.nav-title {
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-grow: 1;
  margin: 0;
}
.nav-title a {
  border: 0;
  font-size: 0.35em;
  font-weight: 800;
  margin-left: 1.5em;
  opacity: 1;
  padding: 0;
}
.nav-title a img {
  height: 4.8em;
  width: 12.6em;
}
@media (min-width: 1024px) {
  .nav-title {
    flex-grow: 0;
 }
  .nav-title::after {
    background: rgba(161, 161, 161, 0.3);
    content: "";
    display: block;
    height: 56px;
    margin-left: 1.5em;
    width: 1px;
 }
  .nav-title a {
    min-width: 12.5em;
 }
  .nav-title a img {
    margin-top: -0.2em;
 }
}
.share-toggle, .search-toggle {
  display: none;
}
@media (min-width: 425px) {
  .share-toggle, .search-toggle {
    display: block;
    text-align: center;
    width: 61px;
 }
  .share-toggle i, .search-toggle i {
    vertical-align: middle;
 }
}
.nav-toggle {
  text-align: center;
  width: 61px;
}
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
 }
}
.nav-toggle i {
  vertical-align: middle;
}
.search-input {
  background-color: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  height: 0px;
  opacity: 0;
  transition: 0.35s ease-in-out;
  width: 300px;
  z-index: -1;
}
.search-input.active {
  opacity: 1;
  height: 50px;
  z-index: 0;
}
.search-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  opacity: 0;
  line-height: 1.75em;
  transition: 0.35s ease-in-out;
  z-index: -1;
  flex-direction: column;
  align-items: center;
  max-height: calc(100vh - 9.4em);
  overflow-y: auto;
  margin-top: 1em;
  padding-bottom: 1em;
  width: 100%;
}
.search-results.active {
  opacity: 1;
  z-index: 0;
}
.search-results .mini-post {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  width: 90%;
}
@media (min-width: 425px) {
  .search-results .mini-post {
    width: 75%;
 }
}
@media (min-width: 768px) {
  .search-results .mini-post {
    width: 50%;
 }
}
.search-results .mini-post a {
  border-bottom: 0;
}
.search-results .mini-post a:hover {
  color: inherit;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .search-results .mini-post header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(161, 161, 161, 0.3);
 }
  .search-results .mini-post header h2 {
    flex-grow: 1;
    font-size: 1em;
 }
}
.search-results .mini-post main {
  padding: 0 1.25em 0.1em;
}
.mini-post {
  background: #fff;
  border: 1px solid rgba(161, 161, 161, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
  width: 100%;
}
@media (min-width: 768px) {
  .mini-post {
    width: 49%;
 }
}
@media (min-width: 1024px) {
  .mini-post {
    width: 100%;
 }
}
.mini-post header {
  min-height: 4em;
  padding: 0.5em 1.25em;
  position: relative;
}
@media (min-width: 768px) {
  .mini-post header {
    border-top: 1px solid rgba(161, 161, 161, 0.3);
 }
}
@media (min-width: 1024px) {
  .mini-post header {
    border: 0;
 }
}
.mini-post header h2 {
  font-size: 0.7em;
}
.mini-post header time {
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.6em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.mini-post .image {
  margin: 0;
}
.count {
  float: right;
}
.copyright {
  color: #ababab;
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
}
.socnet-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 0;
}
.socnet-icons li {
  margin: 0 0.5em;
  min-width: 20px;
  list-style-type: none;
}
.socnet-icons li a {
  opacity: 0.6;
  border: none;
}
/* ========================================================================== IDs and Grid ========================================================================== */
#site-header {
  background-color: #fff;
  border-bottom: 1px solid rgba(161, 161, 161, 0.3);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  height: 3.5em;
  line-height: 3.5em;
  position: fixed;
  margin-bottom: 3.5em;
  top: 0;
  width: 100%;
  z-index: 10000;
}
#site-nav {
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
#site-nav .flyout-menu {
  right: -200px;
  width: 200px;
}
@media (min-width: 1024px) {
  #site-nav .flyout-menu {
    background-color: unset;
    border: none;
    flex-grow: 1;
    height: auto;
    margin: 0;
    overflow: auto;
    position: static;
    transition: none;
    white-space: nowrap;
 }
  #site-nav .flyout-menu::-webkit-scrollbar {
    height: 0.25em;
 }
  #site-nav .flyout-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
  #site-nav .flyout-menu::-webkit-scrollbar-thumb {
    background-color: #ababab;
    outline: 1px solid #6f8090;
 }
}
#site-nav .flyout-menu.active {
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  #site-nav .flyout-menu.active {
    box-shadow: none;
 }
}
#site-nav .flyout-menu .search-toggle {
  display: inline-flex;
  flex-basis: 100%;
  order: 1;
}
#site-nav .flyout-menu .share-toggle, #site-nav .flyout-menu .search-toggle {
  display: block;
  flex-basis: 100%;
  order: 3;
}
@media (min-width: 425px) {
  #site-nav .flyout-menu .share-toggle, #site-nav .flyout-menu .search-toggle {
    display: none;
 }
}
#search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0;
}
#lang-menu.flyout-menu {
  right: -177px;
  width: 177px;
}
#lang-menu.flyout-menu a {
  border-left: 0;
}
#lang-menu.flyout-menu .link {
  border-bottom: 1px dotted rgba(161, 161, 161, 0.7);
  display: block;
}
#lang-menu.flyout-menu .no-lang {
  cursor: not-allowed;
  opacity: 0.25;
}
#lang-menu.flyout-menu .no-lang span:hover {
  box-shadow: none;
}
#share-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}
#share-menu.flyout-menu {
  width: 177px;
  right: -177px;
  padding: 1em;
}
#share-menu.flyout-menu h1 {
  font-size: 0.9em;
}
#share-menu.flyout-menu h1, #share-menu.flyout-menu a {
  margin: 0.25em 0.25em;
}
@media (min-height: 600px) {
  #share-menu.flyout-menu h1, #share-menu.flyout-menu a {
    margin: 0 0.25em 0.75em 0;
 }
}
#share-menu.flyout-menu a p {
  visibility: hidden;
}
#share-menu.flyout-menu .share-btn {
  height: 50px;
}
#share-menu.flyout-menu .share-btn i {
  font-size: 1.5em;
}
#site-intro {
  grid-area: intro;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  padding: 1em;
  text-align: center;
}
#site-intro a {
  border: 0;
}
#site-intro p {
  opacity: 0.6;
}
#site-intro header h1 {
  font-size: 1.25em;
  margin-bottom: 0;
}
#site-intro main p {
  font-size: 0.7em;
  letter-spacing: 0.25em;
  line-height: 2.5;
  margin-bottom: 0;
  text-transform: uppercase;
}
#site-sidebar {
  grid-area: sidebar;
}
#site-sidebar header h1 {
  font-size: 1em;
}
#site-sidebar > * {
  border-top: 1px solid rgba(161, 161, 161, 0.3);
  margin: 3em 2em 0 2em;
  padding-top: 3em;
}
@media (min-width: 1024px) {
  #site-sidebar > *:first-child {
    margin-top: 0;
 }
}
#site-sidebar ul {
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.9em;
  letter-spacing: 0.25em;
  line-height: 1.65;
  text-transform: uppercase;
  list-style: none;
  padding: 0;
}
#site-sidebar footer {
  margin: auto;
  width: max-content;
}
#recent-posts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#recent-posts > header {
  -webkit-box-flex: 1;
  flex: 1 1 100%;
}
#mini-bio p {
  opacity: 0.65;
  font-size: 0.9em;
  padding: 0;
}
#site-main {
  grid-area: main;
}
#site-footer {
  grid-area: footer;
  border-top: 1px solid rgba(161, 161, 161, 0.3);
  margin: 3em 2em;
  padding-top: 3em;
}
#back-to-top {
  bottom: 15px;
  color: #ababab;
  display: none;
  position: fixed;
  right: 15px;
  border: 0;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
#back-to-top:hover {
  color: #2eb8ac;
  transform: translateY(-10px);
}
#socnet-share {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 1em 0 0;
}
@media (min-width: 768px) {
  #socnet-share {
    justify-content: flex-start;
 }
}
#socnet-share a {
  margin-bottom: 0.5em;
  padding: 0.5em;
  width: 4em;
}
@media (min-width: 768px) {
  #socnet-share a {
    margin-right: 0.25em;
 }
}
#socnet-share a i {
  font-size: 1em;
}
#socnet-share p {
  display: none;
}
#wrapper {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "intro" "main" "sidebar" "footer";
  grid-template-rows: auto 1fr auto auto;
  margin: 0 auto;
  max-width: 90em;
  min-height: 100vh;
  transition: opacity 0.35s ease-in-out;
}
@media (min-width: 1024px) {
  #wrapper {
    grid-template-areas: "intro main" "sidebar main" "footer main" "blank main";
    grid-template-columns: 22em 1fr;
    grid-template-rows: auto auto auto 1fr;
    padding: 0 2.5em;
 }
}
#wrapper.overlay {
  opacity: 0.25;
}
#TableOfContents {
  border: 1px dotted rgba(161, 161, 161, 0.7);
}
#TableOfContents ul {
  list-style-type: none;
  padding-inline-start: 1.5em;
}
/* ========================================================================== Add-Ons ========================================================================== */
/* reCaptcha */
.g-recaptcha {
  transform: scale(0.955);
  transform-origin: 0 0;
  margin: -0.25em 0 0.25em 0;
  width: 0;
}
/* Staticman Comments - Form */
.new-comment.loading {
  opacity: 0.5;
}
.new-comment .reply-notice .comment-avatar {
  width: 2em;
  height: 2em;
  margin: 0 0.6em;
}
.new-comment .reply-notice .reply-close-btn {
  padding: unset;
  border: none;
  vertical-align: top;
  font-size: 1em;
  line-height: 0;
  height: 0;
}
.new-comment .reply-notice .reply-close-btn:hover {
  border: none;
}
.new-comment .reply-notice .reply-name {
  vertical-align: middle;
}
.new-comment .reply-notice .reply-name::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3e5";
  margin-right: 0.5em;
  width: 20px;
}
.submit-success {
  border: 1px solid #2eb8ac;
  background: rgba(46, 184, 172, 0.25);
}
.submit-failed {
  border: 1px solid #b82e6e;
  background: rgba(184, 46, 110, 0.25);
}
/* Staticman Comments - Content */
.comment header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #ededed;
  align-items: center;
  border-radius: 50px 0 0 50px;
}
@media (min-width: 375px) {
  .comment header {
    border-radius: 0;
 }
}
.comment header div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
}
@media (min-width: 375px) {
  .comment header div {
    flex-direction: row;
 }
}
.comment.comment-reply {
  margin-left: 1.875em;
}
@media (min-width: 375px) {
  .comment.comment-reply {
    margin-left: 3.75em;
 }
}
.comment-author-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 375px) {
  .comment-author-container {
    align-items: flex-start;
    flex-grow: 1;
 }
}
@media (min-width: 768px) {
  .comment-author-container {
    flex-direction: row;
    align-items: center;
 }
}
.comment-avatar {
  margin: 0 0 0 1em;
  width: 3.75em;
  height: 3.75em;
  flex-grow: 0;
}
@media (min-width: 375px) {
  .comment-avatar {
    margin: 0 0.5em 0 0;
 }
  .comment-avatar.circle {
    clip-path: none;
 }
}
.comment-author {
  font-size: 0.9em;
  margin: 0;
}
@media (min-width: 768px) {
  .comment-author {
    margin-right: 0.5em;
    padding-right: 0.5em;
    border-right: 1px solid rgba(161, 161, 161, 0.3);
 }
}
.comment-reply-btn {
  border: 0;
}
.comment-reply-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3e5";
  margin-right: 0.5em;
  width: 20px;
}
@media (min-width: 375px) {
  .comment-reply-btn {
    margin-right: 1.5em;
 }
}
.comment-content {
  margin: 1em;
}
/* TODO: Assess Value .reply-target {
  font-size: 0.9em;
  border: 0;
  &::before {
    font-family: $fa-free-font;
    font-weight: 900;
    content: "\f3e5";
    margin-right: .5em;
    width: 20px;
 }
}
*/
/* Image Masks */
.triangle {
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
.trapezoid {
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.parallelogram {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.rhombus {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.heptagon {
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.octagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.nonagon {
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
.decagon {
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
.bevel {
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.rabbet {
  clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.left-arrow {
  clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
.right-arrow {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.left-point {
  clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}
.right-point {
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.left-cheveron {
  clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.right-cheveron {
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cross {
  clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
}
.message {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.close {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.circle {
  clip-path: circle(50% at 50% 50%);
}
.vertical-ellipse {
  clip-path: ellipse(25% 40% at 50% 50%);
}
.horizontal-ellipse {
  clip-path: ellipse(40% 25% at 50% 50%);
}
/* Share Button */
.share-btn {
  font-size: 1.5em;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  letter-spacing: 0;
  color: #fff;
  text-align: center;
  transition: background-color 0.2s ease-in-out;
}
.share-btn:active {
  position: relative;
  top: 2px;
  box-shadow: none;
  color: #e6e6e6;
}
.share-btn:hover {
  color: #fff;
}
/* Share Branding */
.twitter {
  background-color: #00acf0;
}
.twitter:hover {
  background-color: #0087bd;
}
.twitter::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f099";
}
.facebook {
  background-color: #3b5897;
}
.facebook:hover {
  background-color: #2c4272;
}
.facebook::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f09a";
}
.linkedin {
  background-color: #0074b3;
}
.linkedin:hover {
  background-color: #005380;
}
.linkedin::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f08c";
}
.pinterest {
  background-color: #c7232b;
}
.pinterest:hover {
  background-color: #9c1c22;
}
.pinterest::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f0d2";
}
.reddit {
  background-color: #f50;
}
.reddit:hover {
  background-color: #c40;
}
.reddit::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f281";
}
.vk {
  background-color: #5181b8;
}
.vk:hover {
  background-color: #3e6898;
}
.vk::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f189";
}
.email {
  background-color: #454545;
  font-weight: 900;
}
.email:hover {
  background-color: #2b2b2b;
}
.email::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
}
/* Hide Single Column */
.hidden-single-column {
  display: none;
}
@media (min-width: 768px) {
  .hidden-single-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
 }
}
/* ========================================================================== Helper classes ========================================================================== */
/* * Hide visually and from screen readers */
.hidden, [hidden] {
  display: none !important;
}
/* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
 /* 1 */
}
/* * Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */
.sr-only.focusable:active, .sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
/* * Hide visually and from screen readers, but maintain layout */
.invisible {
  visibility: hidden;
}
/* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.clearfix::before, .clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}
/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 35em) {
 /* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
 /* Style adjustments for high resolution devices */
}
/* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print {
 /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */
 /* * Printing Tables: * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables */
  *, *::before, *::after {
    background: #fff !important;
    color: #000 !important;
   /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
 }
  a, a:visited {
    text-decoration: underline;
 }
  a[href]::after {
    content: " (" attr(href) ")";
 }
  abbr[title]::after {
    content: " (" attr(title) ")";
 }
  a[href^="#"]::after, a[href^="javascript:"]::after {
    content: "";
 }
  pre {
    white-space: pre-wrap !important;
 }
  pre, blockquote {
    border: 1px solid rgba(161, 161, 161, 0.3);
    page-break-inside: avoid;
 }
  thead {
    display: table-header-group;
 }
  tr, img {
    page-break-inside: avoid;
 }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
 }
  h2, h3 {
    page-break-after: avoid;
 }
}