body {
    margin: 0;
    font-family: "SamsungOne","Noto Sans","Oxygen-Sans","Cantarell",Verdana,"Century Gothic","AppleGothic",sans-serif;
    font-size: 18px;
    text-align: justify;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    color: #333333;
}

li {text-align:left}

.banner {
    font-family: 'Merriweather','Garamond',Times,serif;
    color: floralwhite;
    font-size: xx-large;
    text-shadow: 2px 2px 4px #b2b8ba;
    margin: 0em 0em 0em 0em;
    padding: 0.25em 0.25em 0.25em 0.25em;
    background-color: #1f5951;
}

.banner,
footer {
    box-sizing: border-box;
    max-width: 100%;
}

.prow {
    content: "";
    display: table;
    clear: both;
    width: 100%;
    text-align:center;
}

.pcard {
    content: "";
    display: table;
    clear: both;
    display: inline-block;
    width: auto;
    vertical-align: central;
    align-content: center;
    text-align: center;
    border-color: #6b7572 !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    margin-bottom: 1em;
}

    .pcard:link {
        text-decoration: none;
        font-size: smaller;
        color: #1f5951;
    }

    .pcard:visited {
        text-decoration: none;
        font-size: smaller;
        color: #444444;
    }

    .pcard:hover {
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
    }

    .pcard-thumbnail {
        display: inline-block;
        max-width: 98%;
        height: auto;
        vertical-align: middle;
        border: 1px solid #ccc !important;
        border-radius: 4px;
        color: inherit;
        background-color: transparent;
        object-fit: cover;
    }

pcard-description {
    font-size: smaller;
    background-color: transparent;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
}


footer {
    width: 100%;
    color: floralwhite;
    text-align: center;
    font-size: small;
    margin: 2em 0 0 0;
    padding: 2em 1em 1em 1em;
    background-color: #1f5951;
}

.bar {
    display: flex;
    flex-wrap: wrap;                  /* allow multi-line menu, as you like */
    justify-content: center;          /* centre menu items on wider screens */

    width: 100%;
    max-width: 100%;                  /* never exceed viewport width */
    box-sizing: border-box;           /* padding included in width */

    padding: 0.25em 0.5em;
    margin: 0 0 1em 0;                /* simple block margin, no float tricks */
    border: none;
    background-color: #1f5951;
    font-size: smaller;
}


.bar-item {
    color: floralwhite;
    border: none;
    display: inline-block;        /* fine inside flex, or you can use block */
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;          /* keep each label on one line */
    padding: 0.25em 0.66em;
    box-sizing: border-box;
}


    .bar-item:hover {
        display: inline-block;
        background-color: floralwhite;
        color: #1f5951;
    }

h1 {
    text-align:left;
    color: #1f5951;
    font-family: Georgia;
    transform: scaleY(1.1);
    line-height: 1.1;
}

h2 {
    text-align: left;
    color: #1f5951;
    font-family: Georgia;
    transform: scaleY(1.1);
    padding-top: 1em;
    padding-bottom: 0em;
}

h3 {
    text-align: left;
    color: #1f5951;
    font-family: Georgia;
    transform: scaleY(1.1);
    padding-top: 0.5em;
    padding-bottom: 0em;
}

article {
    margin: auto;
    hyphens: auto;
    padding-left: 1em;
    padding-right: 1em;
    content: "";
    display: table;
    clear: both;
}

figcaption {
    font-size: smaller;
    color: #38413f;
}

@media (min-width:0px) {
    article {
        max-width: 480px;
    }

    .pcard {
        width: 99%
    }
}

@media (min-width:480px) {
    article {
        max-width: 600px;
    }

    .pcard {
        width: 49%
    }
}

@media (min-width:768px) {
    article {
        max-width: 768px;
    }

    .pcard {
        width: 24%
    }
}

@media (min-width:992px) {
    article {
        max-width: 880px;
    }

    .pcard {
        width: 24%
    }
}

@media (min-width:1200px) {
    article {
        max-width: 980px;
    }

    .pcard {
        width: 24%
    }
}

.pBannerImage {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    text-align: center;
}

.pWriterBlock {
    display: block;
    margin-top: auto;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    min-height: 110px;
}

.pWriterThumbnail {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    border: 1px solid #ccc !important;
    text-align: left;
    border-radius: 50%;
    float: left;
    margin-top: 2pt;
    filter: grayscale(100%) sepia(90%) opacity(90%);
}

.pWriterName {
    font-size: 18px !important;
    margin: 0.5em 0 0 0;
    line-height: 150%;
}

.pWriterTagline {
    font-size: 12px !important;
    text-align: left;
    margin: 0;
    line-height: 150%;
    max-width: 480px;
    hyphens: none;
}

.pFooter {
    width: 100%;
    overflow: hidden;
    border: none;
    display: block;
    background-color: #1f5951;
    font-size: small;
    text-align: center;
}

.pFunFactBox {
    border-radius: 1em;
    max-width: 70%;
    margin: 1em auto 2em auto;
    font-size: larger;
    padding: 1em 2em 1em 2em;
    text-align: left;
    line-height: 1.4;
    font-family: Georgia;
}

.pImage {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 1px solid #ccc !important;
    border-radius: 0px;
    text-align: center;
}

/* Standard Color Palette */
.pcolor-1  {color: #1f5951 !important;background-color: #ffffff !important}
.pcolor-1r {color: floralwhite !important;background-color: #1f5951 !important}
.pcolor-2  {color: #38413f !important;background-color: #ffffff !important}
.pcolor-2r {color: #ffffff !important;background-color: #38413f !important}
.pcolor-3  {color: #6b7572 !important;background-color: #ffffff !important}
.pcolor-3r {color: #ffffff !important;background-color: #6b7572 !important}
.pcolor-4  {color: coral !important;background-color: #ffffff !important}
.pcolor-4r {color: floralwhite !important;background-color: coral !important}
.pcolor-5  {color: crimson !important;background-color: #ffffff !important}
.pcolor-5r {color: floralwhite !important;background-color: crimson !important}


/* Magazine Specific */
p.eai {
    font-family:"SamsungOne","Noto Sans","Oxygen-Sans","Cantarell",Verdana,"Century Gothic","AppleGothic",sans-serif;
    font-size: small;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    letter-spacing: 3px;
    text-align: center;
    color: #f1f1f1;
}