/* Last updated Apr 11 2023 */

 /* Fonts */

 @font-face {
    font-family: 'Heliotrope 3';
    src: url('/fonts/heliotrope-3-regular-webfont.eot');
    src: url('/fonts/heliotrope-3-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/heliotrope-3-regular-webfont.woff2') format('woff2'),
         url('/fonts/heliotrope-3-regular-webfont.woff') format('woff'),
         url('/fonts/heliotrope-3-regular-webfont.svg#heliotrope_3regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'Concourse 4 Caps';
    src: url('/fonts/concourse-4-caps-regular-webfont.eot');
    src: url('/fonts/concourse-4-caps-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/concourse-4-caps-regular-webfont.woff2') format('woff2'),
         url('/fonts/concourse-4-caps-regular-webfont.woff') format('woff'),
         url('/fonts/concourse-4-caps-regular-webfont.svg#concourse_4_capsregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Concourse 4';
    src: url('/fonts/concourse_4_regular-webfont.eot');
    src: url('/fonts/concourse_4_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/concourse_4_regular-webfont.woff2') format('woff2'),
         url('/fonts/concourse_4_regular-webfont.woff') format('woff'),
         url('/fonts/concourse_4_regular-webfont.svg#concourse_4regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heliotrope 3';
    src: url('/fonts/heliotrope-3-italic-webfont.eot');
    src: url('/fonts/heliotrope-3-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/heliotrope-3-italic-webfont.woff2') format('woff2'),
         url('/fonts/heliotrope-3-italic-webfont.woff') format('woff'),
         url('/fonts/heliotrope-3-italic-webfont.svg#heliotrope_3italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'valkyrie_b';
    src: url('/fonts/valkyrie_b_regular-webfont.eot');
    src: url('/fonts/valkyrie_b_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/valkyrie_b_regular-webfont.woff2') format('woff2'),
         url('/fonts/valkyrie_b_regular-webfont.woff') format('woff'),
         url('/fonts/valkyrie_b_regular-webfont.svg#heliotrope_3italic') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'valkyrie_b';
    src: url('/fonts/valkyrie_b_italic-webfont.eot');
    src: url('/fonts/valkyrie_b_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/valkyrie_b_italic-webfont.woff2') format('woff2'),
         url('/fonts/valkyrie_b_italic-webfont.woff') format('woff'),
         url('/fonts/valkyrie_b_italic-webfont.svg#heliotrope_3italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}



 /* Global Settings */

 :root {
	 --caps: 'Concourse 4 Caps';
	 --sagetitle: 'Heliotrope 3';
	 --prose: 'valkyrie_b';
	 --didactic: 'Concourse 4';
   --sagered: #be4c3b;
   --sagered20: #A44132;
   --sagered30: #89372A;
   --white-10: #ffffff;
   --white: #fcfcfc;
   --cream-10: #F3F0EF;
   --cream: #e6e1df;
   --cream15: #dad5d2;
   --cream20: #D8D0CD;
   --cream30: #BCAEA9;
   --gold: #bdb4af;
   --gold20: #A59891;
   --gold-20: #CBC3BF;
   --black: #2d343a;
   --black-20: #3f444c;
   --black-30: #6F7785;
   --grey: #8D94A0;
   --grey-20: #B7BBC3;
   --blue: #078cb5;
   --xxsm: 7px;
   --xsm: 9px;
   --sm: 12px;
   --m: 17px;
   --l: 20px;
   --xl: 30px;
   --xxl: 40px;
   --xxxl: 5px;
   --xxxxl: 71px;
   --lh-2xsm: 1.7;
   --lh-xsm: 1.6;
   --lh-sm: 1.5;
   --lh-m:1.4;
   --lh-l: 30px;
   --lk-2xl: 1.1;
   --card-radius: 25px;
   --button-radius: 12px;
   --img-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   --ultrawide: 100%;
   --wide: 1024px;
   --medium: 860px;
   --narrow: 720px;
   --tight: 512px;
   --space: 10px;
   --margin: calc(3 * var(--space));
 }

html {
  /* 62.5% of 16px browser font size is 10px */
  font-size: 17px;
  line-height: 1.2;
}

html, html[data-theme="light"] {
  --link-color: var(--sagered);
  --bkg-color: var(--cream);
  --cardboard-bkg-color: var(--cream20);
  --text-color: var(--black);
  --menu-text-color: var(--black);
  --menu-patron-text-color: var(--sagered);
  --block-color: var(--cream20);
  --foto-border-color: var(--sagered);
}

html[data-theme="dark"] {
  --link-color: var(--gold);
  --bkg-color: var(--black);
  --cardboard-bkg-color: var(--black-20);
  --text-color: var(--white);
  --menu-text-color: var(--white);
  --menu-patron-text-color: var(--gold);
  --block-color: var(--black-20);
  --foto-border-color: transparent;
}


@media (prefers-color-scheme: dark) {
    html, html[data-theme="dark"] {
      --link-color: var(--gold);
      --bkg-color: var(--black);
      --cardboard-bkg-color: var(--black-20);
      --text-color: var(--white);
      --menu-text-color: var(--white);
      --menu-patron-text-color: var(--gold);
      --block-color: var(--black-20);
      --foto-border-color: transparent;
    }

    html[data-theme="light"] {
  --link-color: var(--sagered);
  --bkg-color: var(--cream);
  --cardboard-bkg-color: var(--cream20);
  --text-color: var(--black);
  --menu-text-color: var(--black);
  --menu-patron-text-color: var(--sagered);
  --block-color: var(--cream20);
  --foto-border-color: var(--sagered);
  }
}



/* Body */

body {background-color: var(--bkg-color); font-size: 1rem; font-family: var(--caps); color: var(--text-color); font-weight: normal; text-transform: uppercase; margin: 0px;}

body.cardboard {background-color: var(--cardboard-bkg-color); font-size: 1rem; font-family: var(--caps); color: var(--text-color); font-weight: normal; text-transform: uppercase; margin: 0px;}

h1  {font-family: var(--didactic), sans-serif; color: var(--text-color);  font-weight: normal; font-size: 3rem; text-transform: capitalize;}

h2 {font-family: var(--didactic), sans-serif; font-size: 1.5rem; text-transform: none; font-weight: normal;}

h3 {font-family: var(--caps), sans-serif; text-transform: uppercase; font-weight: normal; font-size: 1.2rem;}

h4 {font-family: var(--caps), sans-serif; text-transform: uppercase; font-weight: normal;font-size: 1rem;}

h5 {font-family: var(--caps), sans-serif; text-transform: uppercase; font-weight: normal;font-size: 0.9rem;}

h6 {font-family: var(--caps), sans-serif; text-transform: uppercase; font-weight: normal; font-size: 0.8rem;}

p  {font-family: var(--prose), sans-serif; color: var(--text-color); font-weight: normal;font-size: var(--l) !important; text-transform: none; line-height: var(--lh-l); text-align: justify; hyphens: auto; -webkit-hyphens:auto;}

a {font-family: var(--caps), sans-serif; color: var(--link-color);text-transform: uppercase; padding: 4px; font-size: 1rem; transition: all 0.3s ease-in-out;}

a:link {font-family: var(--caps), sans-serif; color: var(--link-color);text-transform: uppercase; text-decoration: none;transition: all 0.3s ease-in-out;}

a:hover {font-family: var(--caps), sans-serif; color: #fcfcfc;text-transform: uppercase; background-color: #bdb4af; border-radius: 5px;}

i  {font-family: var(--prose), serif; color: var(--text-color); font-weight: normal;font-size: var(--l); text-transform: none; line-height: var(--lh-l); font-style: italic;}

time {color: #BDB4AF;}


.quote {display: block; font-family: var(--prose), serif; font-weight: normal; font-style: italic; font-size: 1.6rem; text-transform: none; line-height: 1.5; padding: 30px 60px 30px 60px;}

.quote-author {display: block; text-align: right; padding: 0px 60px 0px 60px;}

.quote-date {display: block; text-align: right; font-family: var(--prose), serif; color: var(--text-color); text-transform: none; font-weight: normal; font-size: 0.9rem; font-style: italic; padding: 5px 70px 30px 60px;}

p.techne {font-family: Avenir, 'Avenir Next LT Pro', 'Avenir Next World', 'Avenir Next', Helvetica, 'Helvetica Neue', Geneva, sans-serif; font-size: 1rem; font-style: normal; font-weight: normal;}

p.more {font-family: var(--prose); font-style: italic; font-size: 1.4rem !important;}

.left { text-align:left; float:left;}
.right {float:right; text-align:right;}
.centered {text-align:center;}





/* Progress & Notifications Bars */

.notifications {display: block /* when on set to 'block' when off set to 'none' */; padding: 10px 10px 10px 10px; background-color: var(--block-color); border-radius: 0px; margin: 0px; text-align: center; font-size: 0.7rem !important;}
.notifications-link {font-size: 0.7rem !important;}
.notifications-link a {font-size: 0.7rem !important;}

/* Site Header & Navigation */

.site-header {height: 75px; margin-top: 0px; margin-bottom: 120px; position: sticky; top: 0; background-color: var(--bkg-color); padding: 15px 10px 15px 0px; z-index: 99998;}

.site-header-cardboard {height: 75px; margin-top: 0px; margin-bottom: 120px; position: sticky; top: 0; background-color: var(--cardboard-bkg-color); padding: 15px 10px 15px 0px; z-index: 99998;}

/* Logo */

.logo {float: left; text-align: center; display: inline-block; padding: 0px 0px 0px 30px; width: 75px;/* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; line-height: 0;}
.logo:hover {transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */background-color: transparent; border-radius: 0px;}

.logo a {float: left; text-align: center; display: inline-block; padding: 0px 0px 0px 30px; width: 75px;/* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;line-height: 0;}

.logo a:hover {transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */background-color: transparent; border-radius: 0px;}

/* Navigation Menu */
nav {color: var(--text-color); float: right; padding: 30px 30px 30px 30px;}

.nav-menu {font-size: 0.9rem; vertical-align: middle; padding: 0px; display: inline-block;}
.nav-menu a {font-size: 0.9rem; text-decoration: none; padding: 0px 3px 0px 3px; color: var(--menu-text-color); transition: all 0.1s ease-in-out;}
.nav-menu a:hover {background-color: transparent; color: #bdb4af;}

.nav-menu-sm {font-size: 0.9rem; vertical-align: middle; padding: 0px; display:none;}
.nav-menu-sm a {font-size: 0.9rem; text-decoration: none; padding: 0px 3px 0px 3px; color: var(--menu-text-color); transition: all 0.1s ease-in-out;}
.nav-menu-sm a:hover {background-color: transparent; color: #bdb4af;}

/* Menu Button */
.menu-button {font-size: 1.4rem; color: var(--menu-text-color); border: 0px; border-radius: 25px; padding: 5px; cursor: pointer; transition: all 0.3s ease-in-out; margin-left: 5px;}
.menu-button:hover {color: #bdb4af;}

/* Become a Patron Menu Button */

.patron {color: var(--menu-patron-text-color); background-color: var(--block-color); border: 0px; border-radius: var(--button-radius); padding: 10px 15px 10px 15px; cursor: pointer; transition: all 0.3s ease-in-out; margin-left: 5px;}
.patron:hover {color: #fcfcfc; background-color: #be4c3b;}

/* Navigation Overlay */

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: #be4c3b;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 2rem;
  color: #fcfcfc;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #BDB4AF;
  background-color: transparent;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
/* Button that Grows */

.button-grow-example {
  color: #65b5f6;
  background-color: var(--block-color);
  border: 0px;
  border-radius: 10px;
  padding: 10px 5px 10px 15px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-grow-example:hover {
  transform: scale(1.1);
  background-color: #be4c3b;
}


/* Home Page */

.home-container-main {
  text-align: center;
  color: var( --text-color );
  font-family: var(--sagetitle), Sans-serif;
  font-size: 4rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1em;
  width: 100%;
  padding: 60px 0px 120px 0px;
  }

.home-container {
  text-align: justify;
  color: var( --text-color );
  font-family: var(--sagetitle), Sans-serif;
  font-size: 4vw;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1em;
  width: 100%;
  }

  .home-container a {text-align: justify;
    color: var( --text-color );
    font-family: var(--sagetitle), Sans-serif;
    font-size: 4vw;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
    width: 100%;
    }

    .home-container a:link {text-align: justify;
    color: var( --text-color );
    font-family: var(--sagetitle), Sans-serif;
    font-size: 4vw;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
    width: 100%;
    }

    .home-container a:hover {text-align: justify;
      color: #be4c3b;
      font-family: var(--sagetitle), Sans-serif;
      font-size: 4vw;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1em;
      width: 100%;
      background-color: transparent;
      }
/* Page Content */

.page-content {margin: 0px 60px 60px 60px;}

header {margin-top: 30px; margin-bottom: 30px;}




	/* Main Item */

main {display: block; margin-left: auto; margin-right: auto; max-width: 1010px; padding: 0px 30px 30px 30px;}
main.tmpl-home {display: block; margin-left: auto; margin-right: auto; max-width: 720px; padding: 0px 30px 30px 30px;}
main.tmpl-canvas {display: block; margin-left: auto; margin-right: auto; max-width: 75%; padding: 0px 30px 30px 30px;}
main.tmpl-tool {display: block; margin-left: auto; margin-right: auto; max-width: 720px; padding: 0px 0px 0px 0px; background-color: var(--block-color); border-radius: 15px 15px 0px 15px;}
main.tmpl-work {display: block; margin-left: auto; margin-right: auto; max-width: 720px; padding: 90px 30px 30px 30px;}
main.tmpl-worksmain {display: block; margin-left: auto; margin-right: auto; max-width: 720px; padding: 0px 30px 30px 30px;}

main.tmpl-fallacy {display: block; margin-left: auto; margin-right: auto; max-width: 720px; padding: 90px 30px 30px 30px;}

.submain-homepage {display:block; margin-left: auto; margin-right: auto; max-width: 720px;}


/* Article */

/* Column Containers */
.container2 {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-gap: 10px;
}
.box2 {
padding: 10px;
  text-align: left;
}

.container3 {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  grid-gap: 5px;
}
.box3 {
padding: 2px;
  text-align: center;
}

.container5 {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-gap: 3px;
  max-width: 720px;
}
.box5 {
padding: 2px;
  text-align: center;
}


/* Title */
h1.tool   {font-family: var(--didactic), serif; color: var(--text-color);  font-weight: normal; font-size: 2.5rem; text-align: left; text-transform: none; margin-bottom: 10px; }

h1.home   {font-family: var(--didactic), serif; color: var(--text-color);  font-weight: normal; font-size: var(--xxxl); text-align: left; text-transform: capitalize; margin-bottom: 10px; }

h1.ways   {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: 2.5rem; text-align: left; text-transform: none; margin-bottom: 10px; }

h2.ways {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: 1.6rem; text-align: left; text-transform: none; margin-bottom: 10px; }


h1.title   {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: var(--xxxl); text-align: center; text-transform: uppercase; margin-bottom: 10px; /* eventually add text-wrap: balance; */}
h1.titleleft   {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: 3rem; text-align: left; text-transform: uppercase; margin-bottom: 30px; /* eventually add text-wrap: balance; */}

h1.pagetitle   {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: 4rem;text-align: left; text-transform: capitalize; margin-bottom: 10px; letter-spacing: -2.5px;}

h1.chapter   {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: 4rem;text-align: center; text-transform: capitalize; margin-bottom: 10px; letter-spacing: -2.5px;}

h1.fallacy  {font-family: var(--sagetitle), serif; color: var(--text-color);  font-weight: normal; font-size: 4rem;text-align: center; text-transform: none; margin-bottom: 10px; letter-spacing: -2px;}

h2.subtitle {font-family: var(--caps); color: var(--menu-patron-text-color); font-size: 0.9rem; text-align: center; text-transform: uppercase;}

h2.mainpage {font-family: var(--prose), sans-serif; font-size: 1.5rem; text-transform: none; font-weight: normal; font-style: italic;}

h2.mainpage a {font-style: normal;}

h2.sageintro {font-family: var(--prose), sans-serif; font-size: 1.5rem; text-transform: none; font-weight: normal; font-style: italic; line-height: 1.3 !important;}

h2.sageintro a {font-style: normal; font-size: 1.1rem !important;}

h2.sageintrosm {font-family: var(--prose), sans-serif; font-size: 1rem; text-transform: none; font-weight: normal; font-style: italic; line-height: 1.4 !important; margin-bottom: 30px;}

h2.sageintrosm a {font-style: normal; font-size: 0.8rem !important;}

h1.tag {font-family: var(--caps), serif;  display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: 2em; /* 12px /16 */ padding: 0.03em 0.5em; /* 1px 4px /12 */ margin-top: 0.5em; /* 6px /12 */ margin-bottom: 0.5em; /* 6px /12 */ color: var(--menu-patron-text-color); border: 0px solid var(--gray); border-radius: 0.25em; /* 3px /12 */ line-height: 1.8; background-color: var(--block-color);
}

h2.introduction  {font-family: var(--didactic), sans-serif; color: var(--text-color);  font-weight: normal; font-size: 1.6rem;text-transform: none;}

h3.listintro {font-family: var(--caps), sans-serif; text-transform: uppercase; font-weight: normal; font-size: 1.0rem !important;}

.breadcrumb-tool-block {display: block; margin-left: auto; margin-right: auto; max-width: 800px; padding: 0px 0px 60px 0px;}

.breadcrumb-ways {font-family: var(--didactic), serif; color: var(--text-color);  font-weight: normal; font-size: 1.8rem; text-align: left; text-transform: capitalize; margin-bottom: 10px; padding: 0px 0px 0px 0px;}

.breadcrumb-ways a {font-family: var(--didactic), serif; color: var(--text-color);  font-weight: normal; font-size: 1.8rem; text-align: left; text-transform: capitalize; margin-bottom: 10px;}

.breadcrumb-ways a:hover {background-color: transparent;}

main.tmpl-fallacy p  {font-family: var(--prose), serif; color: var(--text-color); font-weight: normal;font-size: 1.2rem; text-transform: none; line-height: 1.4;}
main.tmpl-work p  {font-family: var(--prose), serif; color: var(--text-color); font-weight: normal;font-size: var(--l); text-transform: none; line-height: var(--lh-l);}
time.post {color: #BDB4AF; font-size: 0.8em; vertical-align: middle;}


img.workico { display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 55px;}

  /* Style that first letter! */
.drop-cap::first-letter {
  -webkit-initial-letter: 3;
          initial-letter: 3;
  color: var(--text-color); font-weight: normal; margin-right: .75em;
}

		/* Subeading Blocks */




    div.subheading-block {text-align: center; margin-top: 0px; margin-bottom: 90px; align-items: center; align-content: center;  vertical-align: middle; padding: 0px 0px 200px 0px}

    span.subheading-excerpt{font-family: var(--caps), sans-serif; color: var(--text-color); text-transform: uppercase; font-weight: normal; font-size: .85rem; text-align: center; display: inline;  padding: 2px; line-height: 0;}

    h2.subheading-source{font-family: var(--sagetitle), serif; color: #be4c3b; text-transform: uppercase; font-weight: normal; font-size: 1.1rem; text-align: center; display: inline; vertical-align: middle; padding: 2px;line-height: 0;}

    h2.subheading-source a{font-family: var(--sagetitle), serif; color: #be4c3b; text-transform: uppercase; font-weight: normal; font-size: 1.1rem; text-align: center; display: inline; vertical-align: middle;line-height: 0;}

    h2.subheading-source a:hover{font-family: var(--sagetitle), serif; color: #bdb4af; text-transform: uppercase; font-weight: normal; font-size: 1.1rem; text-align: center; display: inline; vertical-align: middle; background-color: transparent;line-height: 0;}

    div.subheading-contra-block {text-align: center; margin-top: 0px; margin-bottom: 90px; align-items: center; align-content: center; vertical-align: middle; padding: 0px 0px 200px 0px;}

    span.subheading-ratherthan{font-family: var(--caps), sans-serif; color: var(--text-color); text-transform: uppercase; font-weight: normal; font-size: .8rem; text-align: center; display: inline; padding: 2px; line-height: 0;}


    h2.subheading-contra{font-family: var(--sagetitle), serif; color: #be4c3b; text-transform: none; font-weight: normal; font-size: 1.1rem; text-align: center; display: inline; vertical-align: middle; padding: 2px;line-height: 0;}

    h2.subheading-contra a{font-family: var(--sagetitle), serif; color: #be4c3b; text-transform: none; font-weight: normal; font-size: 1.1rem; text-align: center; display: inline; vertical-align: middle;line-height: 0;}

    h2.subheading-contra a:hover{font-family: var(--sagetitle), serif; color: #bdb4af; text-transform: none; font-weight: normal; font-size: 1.1rem; text-align: center; display: inline; vertical-align: middle; background-color: transparent;line-height: 0;}

/* Article Featured Image */

.featured-img-block {display: block; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 20px; max-width: 1010px;}

.featured-img {margin-top: 0px; margin-left: auto; margin-right: auto; width: 90%; display: block; border-radius: 30px; padding: 15px; /* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;}

.featured-img:hover {transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}

.featured-img-50-block {display: block; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 20px; max-width: 1010px;}

.featured-img-50 {margin-top: 0px; margin-left: auto; margin-right: auto; width: 50%; display: block; border-radius: 30px; padding: 15px; /* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;}

.featured-img-50:hover {transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}

figcaption {font-family: var(--caps), sans-serif; color: var(--text-color); text-align: center; font-size: 0.80rem; text-transform: uppercase; padding: 0px 20px 20px 20px;}

/* Article Image */


.centerimg
{
 text-align:center;
 display:block;
 border-radius: 15px;
 width: 100%;
  /* Animation */ top:-50px; left:-35px; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;
}

.centerimg a {background-color: transparent; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.centerimg a:hover {background-color: transparent; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.centerimg:hover {background-color: transparent;transform: scale(1.1);}

.fotoimg {border-radius: 15px;text-align:center;
  display:block;
  border-radius: 15px;
  width: 100%;
margin: 0px 0px 0px 0px;
box-shadow: var(--img-shadow);}

/* Posts List */

.postlist {
  list-style: none;
  padding: 0;
}
.postlist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  counter-increment: start-from -1;
  line-height: 1.8em;
}
.postlist-item:before {
  display: inline-block;
  pointer-events: none;
  content: "" counter(start-from, decimal-leading-zero) ". ";
  line-height: 100%;
  text-align: right;
}
.postlist-date,
.postlist-item:before {
  font-size: 0.7em; /* 13px /16 */
  color: #BDB4AF;
}
.postlist-date {
  word-spacing: -0.5px;
}
.postlist-link {
  font-family: var(--didactic),sans-serif;
  color: var(--text-color);
  padding-left: .3em;
  padding-right: .3em;
  text-underline-position: from-font;
  text-underline-offset: 0;
   font-size: 1em; /* 19px /16 */
    transition: all 0.1s ease-in-out;

}

.postlist-link:hover {
 font-family: var(--didactic),sans-serif;
   color: #be4c3b;
   background-color: transparent;
 text-transform: none;

  }

.postlist-item-active .postlist-link {

}
.tmpl-home .postlist-link {
 font-family: var(--didactic),sans-serif;
   color: var(--text-color);
 text-transform: none;
  transition: all 0.1s ease-in-out;

}

.tmpl-home .postlist-link:hover {
 font-family: var(--didactic),sans-serif;
   color: #be4c3b;
   background-color: transparent;
 text-transform: none;

}

.tmpl-tool .postlist-link {
 font-family: var(--didactic),sans-serif;
   color: var(--text-color);
 text-transform: none;
  transition: all 0.1s ease-in-out;

}

.tmpl-tool .postlist-link:hover {
 font-family: var(--didactic),sans-serif;
   color: #be4c3b;
   background-color: transparent;
 text-transform: none;

}

.tmpl-work .postlist-link {
 font-family: var(--sagetitle),serif;
   color: var(--text-color);
 text-transform: uppercase;
  transition: all 0.1s ease-in-out;

}

.tmpl-work .postlist-link:hover {
 font-family: var(--sagetitle),serif;
   color: #be4c3b;
   background-color: transparent;
 text-transform: uppercase;
  font-size: 1em; /* 19px /16 */

}

.tmpl-worksmain .postlist-link {
  font-family: var(--sagetitle),serif;
    color: var(--text-color);
  text-transform: capitalize;
   transition: all 0.1s ease-in-out;
   font-size: 1.2rem;
   letter-spacing: -0.75px;

 }
 .tmpl-worksmain .postlist-item:before {display: none;}
 .tmpl-worksmain .postlist-link:hover {
  font-family: var(--sagetitle),serif;
    color: #be4c3b;
    background-color: transparent;
  text-transform: capitalize;
   font-size: 1.2rem; /* 19px /16 */
   letter-spacing: -0.75px;

 }

 .tmpl-canvas .postlist-link {
  font-family: var(--sagetitle),serif;
    color: var(--text-color);
  text-transform: capitalize;
   transition: all 0.1s ease-in-out;
   font-size: 1.2rem;
   letter-spacing: -0.75px;

 }
 .tmpl-canvas .postlist-item:before {display: inline;}
 .tmpl-canvas .postlist-link:hover {
  font-family: var(--sagetitle),serif;
    color: #be4c3b;
    background-color: transparent;
  text-transform: capitalize;
   font-size: 1.2rem; /* 19px /16 */
   letter-spacing: -0.75px;

 }


.tmpl-fallacy .postlist-link {
 font-family: var(--sagetitle),serif;
   color: var(--text-color);
 text-transform: capitalize;
  transition: all 0.1s ease-in-out;

}

.tmpl-fallacy .postlist-link:hover {
 font-family: var(--sagetitle),serif;
   color: #be4c3b;
   background-color: transparent;
 text-transform: capitalize;


}


/* Tags */
.post-tag {
font-family: var(--caps);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.7em; /* 12px /16 */
  padding: 0.25em 0.55em; /* 1px 4px /12 */
  margin-left: 0.6666666666667em; /* 8px /12 */
  margin-top: 0.5em; /* 6px /12 */
  margin-bottom: 0.5em; /* 6px /12 */
  color: var(--menu-patron-text-color);
  border: 0px solid var(--gray);
  border-radius: 0.5em; /* 3px /12 */

  line-height: 1.8;
  background-color: var(--block-color);
}
a.post-tag,
a.post-tag:visited {
  color: var(--menu-patron-text-color);
}
a.post-tag:hover,
a.post-tag:focus {
  color: #fcfcfc;
  background-color: var(--link-color);
}
.postlist-item > .post-tag {
  align-self: center;
}

.tool-tag {
  font-family: var(--caps);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.7em; /* 12px /16 */
    padding: 0.25em 0.55em; /* 1px 4px /12 */
    margin-left: 0.6666666666667em; /* 8px /12 */
    margin-top: 0.5em; /* 6px /12 */
    margin-bottom: 0.5em; /* 6px /12 */
    color: var(--menu-patron-text-color);
    border: 0px solid var(--gray);
    border-radius: 0.5em; /* 3px /12 */

    line-height: 1.8;
    background-color: var(--bkg-color);
  }
  a.tool-tag,
  a.tool-tag:visited {
    color: var(--menu-patron-text-color);
  }
  a.tool-tag:hover,
  a.tool-tag:focus {
    color: #fcfcfc;
    background-color: var(--link-color);
  }
  .postlist-item > .tool-tag {
    align-self: center;
  }

/* Aside */

aside {}

.toolbase{display: block; margin-left: auto; margin-right: auto; margin-top: 60px; margin-bottom: 60px; max-width: 840px;}

.other-posts {display: block; margin-left: auto; margin-right: auto; margin-top: 60px; margin-bottom: 60px; max-width: 1010px; padding: 30px;}

.affiliate-notice {display: block; margin-left: auto; margin-right: auto; margin-top: 60px; margin-bottom: 60px; max-width: 720px; background-color: #be4c3b; border-radius: 15px 15px 0px 15px; padding: 30px; box-shadow: var(--img-shadow);}

.affiliate-notice a {background-color: transparent; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.affiliate-notice a:hover {background-color: transparent; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

.affiliate-notice p {font-family: var(--prose); font-style: italic; font-size: 0.9rem !important; color:#fcfcfc !important;}
.affiliate-notice span {font-family: var(--caps); font-size: .8rem; font-style: normal; text-transform: uppercase; color:#fcfcfc !important;}
.affiliate-img { max-width: 150px; border: 3px dotted var(--foto-border-color); border-radius: 15px; float: left; margin: 0px 30px 0px 0px;/* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;}
.affiliate-img:hover {transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}

	/* Related Content */

	/* Affiliate Notice */

	/* Subscribe */

		/* Subscribe Form */
	/* Style the form element with a border around it */
form {
  border: 0px; max-width: 1010px; display: block; margin-left: auto; margin-right: auto; margin-top: 60px; margin-bottom: 60px; max-width: 1010px; padding: 30px 30px 60px 30px; background-color: var(--block-color); border-radius: var(--card-radius);
}

form.footersubscribe {
  border: 3px solid #bdb4af; max-width: 720px; display: block; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; max-width: 720px; padding: 30px 30px 60px 30px; background-color: transparent; border-radius: var(--button-radius);
}

form.footersubscribesimple {
  border: 0px; max-width: 720px; display: block; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; max-width: 720px; padding: 30px 30px 60px 30px; background-color: transparent; border-radius: var(--button-radius);
}
/* Add some padding and a grey background color to containers */
.subscribe-container {
  display: block; margin-left: auto; margin-right: auto; padding: 7px; background-color: transparent; text-align: center;
}
.subscribe-container p {font-family: var(--prose); font-style: italic; font-size: 0.9rem !important;}
.subscribe-container a {font-style: normal; font-size: 0.8rem !important;}

textarea.contact-textarea {max-width: 600px; width: 100%; height: 200px; background-color: var(--bkg-color); color: var(--text-color); padding: 20px; border: 0px solid;margin-left: auto; margin-right: auto; font-size: 1.2rem; font-family: var(--didactic); border-radius: var(--button-radius); display: inline-block; box-sizing: border-box;}

/* Style the input elements and the submit button */
input[type=text], input[type=submit] {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  margin: 0px 0;
  display: inline-block;
  border: 0px solid #ccc;
  border-radius: var(--button-radius);
  box-sizing: border-box;
  background-color: var(--bkg-color);
  font-size: 1.2rem;
font-family: var(--didactic); color: var(--text-color);
}

input[type=email] {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  margin: 0px 0;
  display: inline-block;
  border: 0px solid #ccc;
  border-radius: var(--button-radius);
  box-sizing: border-box;
  background-color: var(--bkg-color);
  font-size: 1.2rem;
font-family: var(--didactic); color: var(--text-color);
}

/* Add margins to the checkbox */
input[type=checkbox] {
  margin-top: 16px;
}

/* Style the submit button */
input[type=submit] {
  background-color: #be4c3b;
  font-family: var(--caps);
  text-transform: uppercase;
color: #fcfcfc;
  border: 3px solid #bdb4af;
  border-radius: var(--button-radius);
  padding: 10px;
  -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;
}

input[type=submit]:hover {
  transform: scale(1.1);
}





/* Sharing */


/* Footer */

.footer-start {height: 595px;
  width: 100%;
  left: 0;
  background: url(/imgs/footer-start-1920c.webp) bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}

.cardboard-footer-start {height: 150px;
  width: 100%;
  left: 0;
  background: url(/imgs/cardboard-footer-start-1920c.webp) bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}

.footer-content {height: auto; width: auto; background-color: #be4c3b; padding: 60px; text-align: center;}

.footer-content p {font-family: var(--prose); font-style: italic; color: #fcfcfc; font-size: 0.9rem !important; line-height: 1.3 !important; text-transform: none; text-align: justify; hyphens: auto; -webkit-hyphens:auto;}

.footer-content a {font-family: var(--caps); font-style: normal; color: #BDB4AF; font-size: 0.8rem !important; text-transform: uppercase;}

.footer-content a:hover{color: #fcfcfc;}

.footer-content h2{color: #fcfcfc;}
.footer-content h3{font-family: var(--didactic); font-size: 1.3rem; text-transform: none; color: #fcfcfc; padding-left: 30px; padding-right: 30px; max-width: 600px; margin-right: auto; margin-left: auto;}
p.copyright {font-family: var(--caps); font-style: normal; color: #fcfcfc; margin-top: 60px; text-align: center;}
p.misc {font-family: var(--caps); font-style: normal; color: var(--bkg-color); margin-top: 10px; text-align: center;}
p.thanks {font-family: var(--prose); font-style: italic; color: var(--white); margin-top: 10px; text-align: center;}


/* Footer 3 Column Grid */

.footer-content-container {display: grid;
  grid-template-columns: repeat(3, 33.333%);
  grid-gap: 2px;
  padding: 0px 30px 30px 30px;
}

  .footer-box {
  background: transparent;
  color: #fcfcfc;
  padding: 30px;
  text-align: center;
  border-radius: 15px;
  max-width: 500px;
  justify-self: center;
  -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;
}


.footer-box a {}
.footer-box a:hover {color: #fcfcfc; background-color: #BDB4AF;}

/* Back Matter Logo */

.back-matter-logo {margin-left: auto; margin-right: auto; text-align: center; vertical-align: middle; padding: 10px; /* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;}
.back-matter-logo:hover {max-width: 300px; background-color: transparent; transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}
.back-matter-logo a {margin-left: auto; margin-right: auto; text-align: center; vertical-align: middle; padding: 10px; /* Animation */ top:-50px; left:-35px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease;}

.back-matter-logo a:hover {transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */background-color: transparent; border-radius: 0px;}


/* Social Sharing Floating Sidebar */

#share {
    top: 40%;
    left: 0;
    position: fixed;
    z-index: 9999;
}
#share a {
    text-decoration: none;
    width: 15px;
    height: 15px;
    display: block;
    padding: 13px  0px 10px 10px;
    margin-top: 8px;
    margin-left: 7px;
    font-size: 18px;
    color: #BDB4AF;
    opacity: 1;
    transition: opacity 0.15s linear;
       border-radius:100%;
       background: transparent;
}

#share a:hover {
    opacity: 2;
    color: var(--text-color);
}

#share i {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translatey(-50%);
    -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
}

/* Dark Mode Side Toggle attached to theme-toggle Javascript ID in sage.js */

.dark-mode-side-toggle {
  text-decoration: none;
  width: 15px;
  height: 15px;
  display: block;
  padding: 13px  0px 10px 10px;
  margin-top: 8px;
  margin-left: 7px;
  font-size: 18px;
  color: #BDB4AF;
  opacity: 1;
  transition: opacity 0.15s linear;
     border-radius:100%;
     background: transparent;
}


/* Social Sharing Icons */


.facebook {
}

.twitter {
}

.googleplus {
}

.linkedin {
}

.pinterest {
}



/* Mobile Changes */

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
  .page-content {margin: 5px 30px 30px 30px;}
  .logo {text-align: center; vertical-align: middle; padding: 0px 0px 0px 15px; height: 73px; width: 75px;/* Animation */ top:-50px; left:-35px; display:inline-block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; line-height: 0;}
  h1.title {font-size: 2.5rem; line-height: 2.5rem;}
  h1.chapter {font-size: 2.5rem; line-height: 2.5rem;}
  h1.fallacy {font-size: 2.5rem; line-height: 2.5rem;}
  h1.tool {font-size: 2.5rem; line-height: 2.5rem;}
  .site-header {margin-bottom: 60px; height: 60px;}
  .featured-img {padding: 5px; margin-bottom: 15px;}
  .featured-img-50 {width: 90%}
  .notifications {display: block;}
  #share {display:none;}
  nav {padding: 20px 15px 15px 15px;}
  .nav-menu {display:none;}
  .nav-menu-sm {display:inline-block;}
  .footer-content-container {grid-template-columns: 1fr;}
  .footer-box {padding: 10px;}
  .footer-content {padding: 30px;}
   .overlay a {font-size: 2rem}
  .overlay .closebtn {font-size: 40px;top: 15px; right: 35px;}
  main {padding: 0px 15px 15px 15px;}
  main.tmpl-home{padding: 0px 15px 15px 15px; max-width: 90%;}
  main.tmpl-canvas{padding: 0px 15px 15px 15px;}
  main.tmpl-tool{padding: 30px 30px 30px 30px;}
  main.tmpl-work{padding: 0px 15px 15px 15px;}
  main.tmpl-worksmain{padding: 0px 15px 15px 15px;}
  main.tmpl-fallacy{padding: 0px 15px 15px 15px;}
  .home-container{font-size: 6vw;}
  .home-container a {font-size: 6vw;}
  .home-container a:link {font-size: 6vw;}
  .home-container a:hover {font-size: 6vw;}
  .postlist-date {display:none;}
  .other-posts {padding: 15px;}
}


@media screen and (min-width: 601px) and (max-width: 840px) {
    .nav-menu {display:none;}
  .nav-menu-sm {display:block;}
  .footer-content-container {grid-template-columns: 50% 50%;}
  .footer-box {padding: 15px;}
  .footer-content {padding: 30px;}
  .page-content {margin: 5px 30px 30px 30px;}
   #share {display:none;}
   main {padding: 0px 15px 15px 15px;}
   main.tmpl-home{padding: 0px 15px 15px 15px; max-width: 90%;}
   main.tmpl-canvas{padding: 0px 15px 15px 15px;}
   main.tmpl-tool{padding: 30px 30px 30px 30px;}
   main.tmpl-work{padding: 0px 15px 15px 15px;}
   main.tmpl-worksmain{padding: 0px 15px 15px 15px;}
   main.tmpl-fallacy{padding: 0px 15px 15px 15px;}
   .home-container{font-size: 6vw;}
   .home-container a {font-size: 6vw;}
   .home-container a:link {font-size: 6vw;}
   .home-container a:hover {font-size: 6vw;}
   postlist-date {display:none;}
   .other-posts {padding: 15px;}

}



/* Icons */
@font-face {
  font-family: 'icomoon';
  src:  url('/fonts/icomoon.eot?5wl9uc');
  src:  url('/fonts/icomoon.eot?5wl9uc#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.ttf?5wl9uc') format('truetype'),
    url('/fonts/icomoon.woff?5wl9uc') format('woff'),
    url('/fonts/icomoon.svg?5wl9uc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-menu-grid:before {
  content: "\e900";
}
.icon-menu:before {
  content: "\e901";
}

.icon-pencil:before {
  content: "\e905";
}
.icon-image:before {
  content: "\e90d";
}
.icon-play:before {
  content: "\e912";
}
.icon-mic:before {
  content: "\e91e";
}
.icon-book:before {
  content: "\e91f";
}
.icon-file-text:before {
  content: "\e922";
}
.icon-price-tags:before {
  content: "\e936";
}
.icon-credit-card:before {
  content: "\e93f";
}
.icon-location:before {
  content: "\e947";
}
.icon-clock:before {
  content: "\e94e";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-cog:before {
  content: "\e994";
}
.icon-tree:before {
  content: "\e9bc";
}
.icon-bookmark:before {
  content: "\e9d2";
}
.icon-sun:before {
  content: "\e9d4";
}
.icon-contrast:before {
  content: "\e9d5";
}
.icon-heart:before {
  content: "\e9da";
}
.icon-warning:before {
  content: "\ea07";
}
.icon-checkbox-checked:before {
  content: "\ea52";
}
.icon-checkbox-unchecked:before {
  content: "\ea53";
}
.icon-radio-checked:before {
  content: "\ea54";
}
.icon-radio-unchecked:before {
  content: "\ea56";
}
.icon-embed2:before {
  content: "\ea80";
}
.icon-share2:before {
  content: "\ea82";
}
.icon-amazon:before {
  content: "\ea87";
}
.icon-google:before {
  content: "\ea88";
}
.icon-google-drive:before {
  content: "\ea8f";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-vimeo:before {
  content: "\eaa0";
}
.icon-dropbox:before {
  content: "\eaae";
}
.icon-onedrive:before {
  content: "\eaaf";
}
.icon-github:before {
  content: "\eab0";
}
.icon-wordpress:before {
  content: "\eab4";
}
.icon-tumblr:before {
  content: "\eab9";
}
.icon-appleinc:before {
  content: "\eabe";
}
.icon-android:before {
  content: "\eac0";
}
.icon-windows:before {
  content: "\eac1";
}
.icon-soundcloud:before {
  content: "\eac3";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-pinterest:before {
  content: "\ead1";
}
.icon-paypal:before {
  content: "\ead8";
}
.icon-firefox:before {
  content: "\eada";
}
.icon-safari:before {
  content: "\eadd";
}
.icon-html-five:before {
  content: "\eae4";
}

.icon-linkedin2:before {
  content: "\eaca";
}