﻿/*========================================
    General
========================================*/

.blogUL {
    list-style: none;
    padding-left: 0;
}
.blogUL li {
    position: relative;
    padding-left: 20px;
    background:url('/images/wheel.png') no-repeat left 9px / 10px auto;
}

.blogImg img {
    max-height: 40em;
    margin-top: 2em;
}
.blogH1 {
    font-size: 2em;
    line-height: 1.2;
    color: #8e161f;
    text-transform: none !important;
    padding-top: 0 !important;
}
.blogH2 a {
    font-size: .8em;
    color: #ffffff;
    text-transform: none;
    font-weight: 600;
    text-decoration: none;
    margin: .3em 0; }

.blogH3 {
    font-size: 1em;
    text-transform: none !important;
}
/*========================================
    Blog List
========================================*/
.blogAuthor, .pubDate {
    color: #ffffff;
}
.blogAuthor {
    margin-top: .2em;
}
.blogAuthEntry, .pubDateEntry {
    color: #282626;
}
.pubDate {
    margin: .5em 0;
} 
.blogList {
    display: flex;
    flex-wrap: wrap;
    flex-basis: auto;
    justify-content: flex-start;
    padding: 0;
}

.blogList li{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 50%;
    margin:1em 0;
    padding:0 2em;
}

.blogList a {
    display:block;
    position: relative;
    padding: 1.5em 2em;
    height: 30em;
    width:100%;
    text-decoration: none !important;
    color:#ffffff;
}

.blogList h2{
    text-transform:none !important;
    font-size:2.08em;
}

/*--to make background images dark--*/
.blogList a > * 
{ 
    position: relative;
    z-index: 2;
}
.blogList a::after {
    background-color: rgba(000, 000, 000, 0.7);
    position: absolute;
    display: block;
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}
/*========================================
    Blog Entry
========================================*/
.blogEntry .colRowFlex {
    padding: 0;
}
.blogEntry .col-flex {
    margin: 0;
}
.blogEntryDeets {
    padding: 0 8em !important;
    margin-top: 2em !important;
}


/*========================================
    Hover Effects
========================================*/

    .blogList a:hover {
        color:#ffffff !important;
        transform: scale(1.02);
        transition: all .2s ease-in-out;
    }