@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevT.ttf) format('truetype');
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype');
}

:root {
    /* --white: #ffffff;*/
    --white: #F4F3EE;
    --blue: #2C338E;
    --green: #6AC32F;
    --orange: #FC814A;
    --grey0: #f2f2f2;
    --grey1: #e6e8e6;
    --grey2: #96939b;
    --grey3: #605D65;
    --onyx: #171614;
    --not-black: #191918;
    --black: #000000;
    --red: #1571c1;

    --plyr-color-main: #DC143C;
    --plyr-tab-focus-color: #DC143C;
}


::-moz-selection { /* Code for Firefox */
    color: var(--white);
    background: var(--onyx);
}

:selection {
    color: var(--white);
    background: var(--onyx);
}

::-webkit-scrollbar {
   border-radius: 10px;
   width: 3px;
}
::-webkit-scrollbar:vertical {
    width: 12px;
}
::-webkit-scrollbar:horizontal {
    height: 5px;
}
::-webkit-scrollbar-track {
    background: none;
}
::-webkit-scrollbar-thumb {
    background: var(--grey2); 
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--grey3); 
}

body {
    margin: 0;
    background-color: var(--white);
}

body:after {
    background: linear-gradient(to right, var(--green) 10%, var(--blue) 10%, var(--blue) 20%, var(--white) 20%);
, var(--blue) 95%);
    position: absolute;
    content: '';
    height: .25em;
    right: 0;
    left: 0;
    top: 0;
}

pre {
    font-family: 'Source Code Pro', 'Lucida Console', monospace;
}

h1, h2, h3 {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-weight: bold;
    color: var(--not-black);
}

h2.endorse {
    background-color: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 2px;
    padding: 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 150%;
}

h2.construction {
    text-transform: uppercase;
    background-color: var(--orange);
    color: var(--white);
    border: none;
    border-radius: 2px;
    padding: 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

h1.ptitle {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-weight: bolder;
    color: var(--blue);
    font-size: 130%;
}

h2.psubtitle {
    text-align: center;
    color: var(--grey2);
    padding-top: 0;
    margin-top: 0;
    font-size: 140%
}

.cen {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.upper {
    text-transform: uppercase;
}

p {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    color: var(--not-black);
    font-size: 115%;
    line-height: 1.75em;
    word-wrap: break-word;
}

input, label {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-size: 115%;
    line-height: 1.75em;
    word-wrap: break-word;
    margin-right: 1em;
}

li {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-size: 110%;
    line-height: 1.75em;
}

p.date {
    margin-top: 0;
    font-size: 125%;
}

div.content-sep {
    margin: auto;
    text-align: center;
}

h1.pod-name {
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'one';
    font-size: 250%;
}



a:visited {
    color: var(--blue);
}

a:hover {
    color: var(--blue);
}

a:active {
    color: var(--blue);
} 

a.current {
    color: var(--green);
}

.tag-group {
    padding-bottom: 1.5em;
}

.wrap-element {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.wrap-element-post {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  width: 800px;
}

.wrapped-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


div.player {
    display: block;
}

article.podcast {
    padding-bottom: 3em;
}

article.podcast > h1 {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-size: 150%;
}

article.podcast > h1:hover {
    color: var(--blue);
}

article.podcast > p {
    margin-top: .5em;
    margin-right: 0;
    margin-bottom: .5em;
    margin-left: 0;
    display: block;
}

article.podcast > p.people {
    margin: 0;
    display: block;
}

article > h1, article > h2, article > h3 {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    padding-bottom: 0px;
    color: var(--blue);
}

article.header > h1 {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    padding-bottom: 0px;
    font-size: 180%;
}

article.header > h2, article.header > h3 {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    padding-bottom: 0px;
    font-size: 140%;
    color: var(--not-black);
}

.showmore {
    background-color: var(--grey1);
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    color: var(--onyx);
    border: none;
    border-radius: 2px;
    box-shadow: 2px 2px var(--grey2);
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 140%;
}

a.showmore {
    background-color: var(--grey1);
    color: var(--onyx);
    border: none;
    border-radius: 2px;
    box-shadow: 2px 2px var(--grey2);
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 140%;
}

a.pagination {
    background-color: var(--blue);
    color: var(--onyx);
    border: none;
    border-radius: 2px;
    box-shadow: 2px 2px var(--grey2);
    padding: .25em;
    margin-right: .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 140%;
}

span.continued {
    font-style: italic;
}

.tag {
    background-color: var(--grey1);
    color: var(--onyx);
    border: none;
    border-radius: 2px;
    box-shadow: 2px 2px var(--grey2);
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 105%;
}

a.tag { 
    background-color: var(--grey1);
    color: var(--onyx);
    border: none;
    border-radius: 2px;
    box-shadow: 2px 2px var(--grey2);
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 105%;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


img[src$='#center'] {
  display: block;
  margin: 1.0rem auto;
  max-width: 100%;
  height: auto;
}

.fa-bars {
    color: var(--blue);
}

.top-fa:hover, .top-fas:hover {
    color: var(--onyx);
    font-size: 160%;
}

.top-fa, .top-fas {
    color: var(--white);
    font-size: 160%;
}

.host-fa:hover, .host-fas:hover {
    color: var(--blue);
    font-size: 100%;
}

.host-fa, .host-fas {
    color: var(--onyx);
    font-size: 100%;
}

.gr-fa:hover, .gr-fas:hover {
    color: var(--blue);
    font-size: 100%;
}

.gr-fa, .gr-fas {
    color: var(--onyx);
    font-size: 100%;
}

.menu, .menu:hover {
    font-size: 90%;
}

a.active {
    color: var(--grey1);
}

.navbar .expand {
    display: none;
}

.navbar .item {
    display: inline;
    font-size: 103%;
}

.navbar .stickyitem {
    display: inline;
    font-size: 103%;
}

.navbar .logo {
    display: none;
}

.navbar .donate {
    background-color: var(--green);
    color: var(--white);
    border: none;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: .125em .25em;
    text-transform: uppercase;
}

a.bdonate {
    background-color: var(--green);
    color: var(--white);
    font-size: 300%;
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    border: none;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: .125em .25em;
    text-transform: uppercase;
}

#carousel {
    width: 600px;
    height: 600px;
    overflow: hidden;
    position: relative;
}
#carousel img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
#carousel img.active {
    opacity: 1;
}
#carousel .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}
#carousel .prev {
    left: 10px;
}
#carousel .next {
    right: 10px;
}

a.bdonate:hover {
    color: var(--blue);
}

ul {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    color: var(--not-black);
}

ul.navbar {
    list-style-type: none;
    padding-right: 2em;
    right: 2em;
}

.navlogo {
    text-align: right;
    min-height: 25%;
}

img.navbar {
    vertical-align: middle;
    text-align: left;
    height: 3em;
    left: 2em;
    position: absolute;
}

img.john-banner {
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

li.navbar {
}

li.navbar a.navbar {
    display: inline-block;
    color: var(--blue);
    text-align: right;
    padding: 5px 16px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}


li.navbar a.navbar:hover {
  color: var(--green);
}

.landing {
    text-align: center;
    background-color: var(--blue);
    border-color: var(--blue);
    border-width: 10px;
}

.banner {
    text-align: right;
}

.page-banner {
    background-color: var(--blue);
    vertical-align: middle;
    text-align: center;
}

.ribbon {
    text-align: right;
    letter-spacing: .25em;

    background-color: var(--blue);
    vertical-align: center;

    padding-top: .25em; 
    padding-bottom: .25em;
    padding-right: 2em;

    margin: 0;
}

img.right {
    float: right;
    margin-left: 1em;
}

img.left {
    float: left;
    margin-right: 1em;
}

img.banner {
    max-width: 100%;
    max-height: 450px;
}

h2.bio {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-size: 180%;
}

h2.drink {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-size: 180%;
}

h1.ptitle {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    text-align: left;
    font-size: 250%;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2.hsubtitle {
    text-align: center;
    color: var(--grey2);
    padding-top: 0;

    margin-top: 0;
    font-size: 150%
}

.frm-font {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    color: var(--not-black);
    line-height: 1.75em;
    word-wrap: break-word;
}

.frmbt {
    display: none;
}

.frm-error {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    color: var(--blue);
}

th.frm-th {
    font-weight: normal;
    text-align: left;
}

tr.frm {
    padding-top: 2em;
}

textarea.frm {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    font-size: 120%;
    width: 100%;
    height: 15vh;
    resize: none;
}

input.frm {
    margin: .25em;
}

.frm-table {
    padding-top: 2em;
}

.frm-submit {
    font-size: 180%;
    background-color: var(--green);
    color: var(--white);
    border: none;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: .125em .25em;
    text-transform: uppercase;
}

h1.cen, h2.cen, h3.cen {
    text-align: center;

}

.secondary-body {
    left: 0;
    bottom: 0;
    margin: auto;
    background-color: var(--grey1);
}

.content-inner-grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 'inner-content' 'inner-content';
}

.inner-container {
    grid-area: 'inner-content';
    padding-left: 2em;
    padding-right: 2em;
}

.content-body {
    grid-area: content;
    max-width: 900px;
    margin-top: 0em;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 4em;
    padding-right: 4em;
}
.content-grid-container {
    display: grid;
    grid-template-areas:
      'content';
    max-width: 1200px;
    padding-bottom: 2em;
    min-height: 100vh;

    margin: auto;
}

.content-grid-container {
    display: grid;
    grid-template-areas:
      'content';
    max-width: 1200px;
    padding-bottom: 2em;
    min-height: 100vh;

    margin: auto;
}

.landing-content-grid-container {
    border-color: var(--blue);
    border-top: 10px;
    display: grid;
    grid-template-areas:
      'content';
    max-width: 1200px;
    padding-bottom: 2em;
    min-height: fit-content;

    margin: auto;
}

.social-container {
    padding-top: 2em; 
    display: grid;
    grid-template-areas:
      'social-grid';
    max-width: 1200px;
   
}

.social-grid {
    padding-left: 2em;
    padding-right: 2em;
}

@media only screen and (max-width: 1050px) {
    li.navbar.stickyitem {
        display: none;
    }

    #carousel {
        width: 100%;
    }

}

/*@media only screen and (min-width: 925px) {
    li.navbar.stickyitem {
        display: inline;
    }
}
*/

@media only screen and (max-width: 1650px) {
    .content-inner-grid-container {
        display: grid;
        grid-template-columns: auto;
    }

    .content-body {
        padding-left: 1em;
        padding-right: 1em;
    }

    img.left, img.right {
        float: inherit
    }

    .patreon {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    img.bio {
        width: 80%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .content-grid-container {
        display: block;
         padding-top: 2em;
         padding-bottom: 2em;
    }

    .social-container {
        display: block;
    }

    .endorse-container {
        display: block;
    }

    .socal-body {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    li.navbar.expand {
        display: inline;
        padding-top: 1.5em;
        color: var(--white);
    }

    li.navbar.expand.responsive a.navbar.expand {
        display: inline;
        padding-top: 1.5em;
        color: var(--white);
    }

    a.navbar.expand {
        color: var(--white);
    }

    li.navbar.sticky {
        display: inline;
    }

    li.navbar.item {
        display: none;
    }

    li.linktree {
        margin-left: 0;
        margin-bottom: 1.5em;
    }

    img.john-sig {
        max-width: 70%;
    }

    p.footer {
        font-size: 80%;
    }

    ul.navbar.responsive  {
        position: fixed;
        padding-bottom: 100vh;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background-color: var(--blue);
        text-align: left;
        opacity: .9;
    }

    img.sitelogo.navbar.responsive {
        display: none;
    }

    li.navbar.responsive a.navbar.responsive {
        color: var(--white);
    }

    li.navbar.responsive:hover a.navbar.responsive:hover {
        color: var(--green);
    }

    li.navbar.item.responsive {
        display: block;
        color: var(--white);
        font-size: 120%;
        margin: auto;
    }

    li.navbar.stickyitem.responsive {
        display: block;
        color: var(--white);
        font-size: 120%;
        margin: auto;
    }

    li.navbar.expand.responsive {
        display: block;
        color: var(--white);
        font-size: 120%;
        margin: auto;
    }

    li.navbar.donate.responsive {
        margin-top: 1em;
        margin-left: 1em;
    }

    li.navbar.logo.responsive {
        padding-top: 0;
        display: inline;
    }

    img.responsive {
        max-height: 100px;
        padding-top: 3em;
        padding-bottom: 1em;
    }

    table.sched {
        font-size: 75%;
    }

    img.endorse {
        width: 90%;
    }

    .wrap-element-post {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%;
      width: 100%;
    }
}

@media only screen and (min-width: 925px) {
    .content-grid-container {
        display: block
    }
}

/* This let's externals have a link out warning SVG... not used.
a[href ^= 'http']:not([href *= 'yourdomain.']) {
   background: transparent url(arrow.svg) no-repeat center right;
   padding-right: 16px;
}
*/

.footer {
    left: 0;
    bottom: 0;
    color: var(--white);
    background-color: var(--blue);
    margin: auto;
}

div.footer-content {
    padding-top: 1.2em;
}

p.footer {
    font-family: 'Roboto', 'Lucida Sans Unicode', sans-serif;
    color: var(--white);
}

a.a-footer {
    color: var(--white);
}

a.a-footer:hover {
    color: var(--green);
}

.footer-fa {
    color: var(--white);
    padding-left: .25em;
    padding-right: .25em;
}

.footer-fa:hover {
    color: var(--green);
}

.footer-container {
    display: grid;
    grid-template-areas:
      'footer-grid footer-grid';
    padding: 1em;
}

.footer-grid {
    padding-left: 2em;
    padding-right: 2em;
}

.endorse-container {
    max-width: 1200px;
    display: grid;
    grid-template-areas:
      'endorse-grid endorse-grid';
    padding: 1em;
}

img.endorse {
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.endorse {
    padding-bottom: 1em;
}

div.endorse > h2 {
    font-size: 120%;
}

div.endorse > p {
    font-size: 90%;
}