html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: auto;
    background: transparent;
}

img{
    height: auto !important;
    max-width: 100%;
}
.snappy-wrapper
{
    /*background-color: magenta;*/
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.blog-title
{
    font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    letter-spacing: -0.02em;
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    text-align: center;
}
.post-list-preview
{
    position: relative;
    width: 100%;
}

.post-list-preview .post-card-preview
{
    position: relative;
    width: 90%;
    margin: 40px auto;
    background-color: white;
    border: 1px solid rgba(211, 211, 211, 0.82);
    -webkit-box-shadow: 0 0 2px 0 #B8B8B8;
    box-shadow: 0 0 2px 0 #B8B8B8;
}
.post-card-preview .media-cover
{
    height: 300px;
    position: relative;
}
.post-card-preview .media-cover .media-picture
{
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
}
.post-card-preview .media-cover .media-filter
{
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background-color: rgba(10, 10, 10, 0.1);
}
.post-card-preview .post-title
{
    padding: 5px 30px;
}
.post-card-preview .post-title a
{
    color: black;
    text-decoration: none;
    font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
}
.post-card-preview .date
{
    position: absolute;
    top:5px;
    right: 5px;
    color: rgb(163, 163, 163);
}
.post-card-preview .post-content
{
    margin: 5px 0 10px 0;
    padding: 5px 30px;
}

.post-card-preview .card-footer
{
    padding: 0px 30px;
    height: 30px;
    border-top: 1px solid rgba(211, 211, 211, 0.82);
}

.post-card-preview .card-footer .tags
{
    text-align: right;
    padding: 5px 0;
}

.post-card-preview .card-footer .tags a
{
    color: lightgray;
    text-decoration: none;
    padding: 4px;
}
.post-card-preview .card-footer .tags a:hover
{
    color: white;
    background-color: lightgray;
}
@media (min-width: 900px) {
   .post-card-preview .media-cover{
        height: 400px;
    }
}

@media (max-width: 300px) {
    .blog-title{
        font-size: 20px;
    }
    .post-card-preview .media-cover
    {
        height: 200px;
    }
    .post-card-preview .media-cover .media-picture
    {
        background-position: top;
    }
    .post-card-preview .post-title {
        padding: 5px 10px;
    }
    .post-card-preview .post-content {
        margin: 5px 0 10px 0;
        padding: 5px 10px;
    }
    .post-card-preview .post-title a
    {
        font-size: 20px;
    }
}

.media-pad-viewport  .post-card-preview .media-cover{
    height: 400px;
}


.media-phone-viewport .blog-title{
    font-size: 20px;
}
.media-phone-viewport .post-card-preview .media-cover
{
    height: 200px;
}
.media-phone-viewport .post-card-preview .media-cover .media-picture
{
    background-position: top;
}
.media-phone-viewport .post-card-preview .post-title {
    padding: 5px 10px;
}
.media-phone-viewport .post-card-preview .post-content {
    margin: 5px 0 10px 0;
    padding: 5px 10px;
}
.media-phone-viewport .post-card-preview .post-title a
{
    font-size: 20px;
}


.btn.blog-back-btn
{
    margin-top: 10px;
}