@keyframes fadeInOpacity {
    0% {
        opacity: .1;
    }
    100% {
        opacity: .25;
    }
}

@media (min-width: 1400px) {
    .blog-hero {
        background-size: 100% auto;
        height: 450px;
        min-height: 350px;
    }
    .blog-details {
        padding: 8% 10% 4% 10%;
        height: 450px;
    }
    .blog-hero .blog-title {
        font-size: 3em;
        margin-bottom: .75em;
        padding-bottom: .5em;
        border-bottom: 2px solid whitesmoke;
    }
    .blog-content-container {
        padding: 2% 10% 2% 10%;
        margin-top: 400px;
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    .blog-publish-details .blog-tags {
        max-width: 100%;
    }
    .blog-content-container .sharing-links a {
        font-size: 2.5em;
    }
    .blog-content-container .blog-sidebar-right {
        min-width: 20%;
        margin-left: 5%;
    }
}
@media (max-width: 1399px) {
    .blog-hero {
        background-size: 100% auto;
        height: 350px;
        min-height: 250px;
    }
    .blog-details {
        padding: 7% 5% 2% 5%;
        height: 350px;
    }
    .blog-hero .blog-title {
        font-size: 2em;
        margin-bottom: .75em;
        padding-bottom: .5em;
        border-bottom: 2px solid whitesmoke;
    }
    .blog-content-container {
        padding: 2%;
        margin-top: 300px;
        margin-left: 3%;
        margin-right: 1%;
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    .blog-publish-details .blog-tags {
        max-width: 100%;
    }
    .blog-content-container .sharing-links a {
        font-size: 2em;
    }
    .blog-content-container .blog-sidebar-right {
        max-width: 25%;
        margin-left: 5%;
    }
    .card-body {
        padding: .8rem !important;
    }
}
@media (max-width: 800px) {
    .blog-hero {
        background-size: 120% auto;
        height: 300px;
        min-height: 250px;
    }
    .blog-details {
        padding: 7% 5% 2% 5%;
        height: 300px;
    }
    .blog-hero .blog-title {
        font-size: 1.75em;
        margin-top: 4%;
        margin-bottom: .75em;
        padding-bottom: .5em;
        border-bottom: 2px solid whitesmoke;
    }
    .blog-content-container {
        padding: 2%;
        margin-top: 250px;
        margin-left: 3%;
        margin-right: 1%;
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    .blog-publish-details .blog-tags {
        max-width: 100%;
    }
    .blog-content-container .sharing-links a {
        font-size: 1.5em;
    }
    .blog-content-container .blog-sidebar-right {
        display: none;
        max-width: 15%;
        margin-left: 5%;
        font-size: .7em;
    }
    .sharing-links .blog-sidebar-xs {
        display: inline-block;
    }
    .card-body {
        padding: 1rem !important;
    }
}
@media (max-width: 600px) {
    .blog-hero {
        background-size: 300% auto;
        height: 300px;
        min-height: 250px;
    }
    .blog-details {
        padding: 7% 5% 2% 5%;
        height: 300px;
    }
    .blog-hero .blog-title {
        font-size: 1.5em;
        margin-top: 10%;
        margin-bottom: .75em;
        padding-bottom: .5em;
        border-bottom: 2px solid whitesmoke;
    }
    .blog-content-container {
        padding: 2%;
        margin-top: 250px;
        margin-left: 3%;
        margin-right: 1%;
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    .blog-publish-details .blog-tags {
        max-width: 100%;
    }
    .blog-content-container .sharing-links a {
        font-size: 1.5em;
    }
    .blog-content-container .blog-sidebar-right {
        display: none;
        max-width: 20%;
        margin-left: 5%;
        font-size: .7em;
    }
    .sharing-links .blog-sidebar-xs {
        display: inline-block;
    }
    .card-body {
        padding: 1rem !important;
    }
}

.blog-sidebar-xs {
    display: none;
}
.blog-hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-image: none;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #636b6f;
    font-weight: 800;
    text-align: left;
}
.blog-hero p,
.blog-hero h1,
.blog-hero h2,
.blog-hero h3,
.blog-hero h4,
.blog-hero h5,
.blog-hero h6 {
    color: whitesmoke;
}

.blog-details {
    background-color: rgba(0,0,0,.35);
}
.blog-details:after {
    background-color: #4e555b;
}
.blog-hero .blog-author img {
    padding: .25em;
    background-color: whitesmoke;
    height: 4em;
    width: 4em;
    margin-right: .5em;
    border-radius: .25em;
}
.blog-hero .blog-author {
    float: left;
    font-weight: 400;
}
.blog-hero .blog-publish-details {
    float: right;
    text-align: right;
    max-width: 50%;
}
.blog-hero path {
    color: whitesmoke;
    width: 1em;
}
.blog-hero svg {
    margin-right: .25em;
}

.blog-publish-details .blog-date,
.blog-publish-details .blog-tags {
    color: whitesmoke;
    font-weight: 400;
    padding-top: .5em;
}
.blog-publish-details .blog-tags {
    float: right;
}

.blog-content-container .sharing-link-icons {
    text-align: center;
}
.blog-content-container .sharing-links {
    float: left;
    padding-right: 2em;
}
.blog-content-container .sharing-links a {
    display: block;
    text-decoration: none;
    margin-bottom: .25em;
    color: #636b6f;
}
.blog-content-container .sharing-links a:hover {
    text-decoration: none;
    color: dodgerblue;
}
.blog-content-container .blog-copy {
    width: 100%;
}
.blog-sidebar-right .sidebar-links a {
    display: inline-block;
    font-size: 1.2em;
    text-decoration: none;
    margin-bottom: .25em;
    color: #636b6f;
    width: 100%;
}
.blog-sidebar-right .sidebar-links a:hover,
.blog-sidebar-right .sidebar-links a:hover path {
    color: dodgerblue;
}
.blog-sidebar-right .sidebar-links svg {
    margin-right: .25em;
    width: 1.5em;
}
.blog-sidebar-right .sidebar-links path {
    color: #636b6f;
    width: 1em;
}
.floating-on-scroll,
.floating-on-scroll-always {
    position: relative;
}
.blog-author-text {
    display: inline-block;
    color: whitesmoke;
    vertical-align: middle;
}
.blog-author-text em {
    font-size: .8em;
}
a.btn.btn-outline-primary {
    position: static !important;
    clear: both;
}

.remove-author-search,
.remove-tag-search {
    text-decoration: none;
    color: #636b6f;
}
.remove-author-search:hover,
.remove-tag-search:hover {
    text-decoration: none;
    color: red;
}
.author-search,
.tag-search {
    display: inline-block;
}
div.tag {
    display: inline;
}
a.tag,
a.author {
    color: whitesmoke;
    text-decoration: none;
}
a.tag:hover,
a.author:hover {
    color: dodgerblue;
    text-decoration: none;
}
.card:hover .card-body-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    animation: fadeInOpacity .5s forwards;
    background-size: cover;
}
.card-body-bg:nth-of-type(0) {
    animation-delay: .5s;
}
.card-body-bg:nth-of-type(1) {
    animation-delay: 1s;
}
.card-body-bg:nth-of-type(2) {
    animation-delay: 1.5s;
}
.card-body-bg:nth-of-type(3) {
    animation-delay: 2s;
}
.card-body-bg:nth-of-type(4) {
    animation-delay: 2.5s;
}
.card-body {
    z-index: 100;
}
.gallery-item {
    margin: .5em 1em;
}
a.force-right-card-nav {
    position: absolute;
    bottom: 4.5em;
    right: 1.5em;
}
.start-author-search-parent,
.start-tag-search-parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
}
.start-author-search-parent a,
.start-tag-search-parent a {
    padding-right: .5em;
}
.index-blog-tags {
    font-size: .8em;
}
.card-text > p {
    padding-left: 15px;
}
.author-search,
.tag-search {
    width: 100%;
}

.disclosure {
    -webkit-border-radius: 1%;
    -moz-border-radius: 1%;
    border-radius: 1%;
    font-size: .9em;
    opacity: .7;
    padding: 1.5em 1em 1em 2em;
}
.disclosure em,
.disclosure p {
    margin-left: 2.5em;
    display: block;
    color: inherit;
}
.disclosure svg {
    position: absolute;
    font-size: 2em;
}
blockquote.smaller {
    font-size: 14px;
}
blockquote.smaller h4 {
    font-size: 14px;
}