/*------------------------------------------------------------------
blog_feed.css
Last edited: 8/3/21
[Table of contents]

1. CARD
2. IMAGE LEFT TEXT RIGHT

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/

/* add mobile CSS here */

/*------------------------------------------------------------------
1. CARD
-------------------------------------------------------------------*/
.band-blog-feed .card {
    background-color: #fff;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.band-blog-feed .card:hover {
    background-color: #e5e5e5;
}
.band-blog-feed time {
    background-color: #143155;
    color: #fff;
    line-height: 1.2;
    padding: 10px 15px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.band-blog-feed .card:hover time {
    background-color: #e56736;
}
.band-blog-feed time span {
    display: block;
    font-size: 0.7em;
}
.band-blog-feed time span.day {
    font-size: 1.25em;
    font-weight: 700;
}
.band-blog-feed .card img {
    width: 100%;
}
.band-blog-feed .card-body {
    padding: 20px 30px 30px;
}
.band-blog-feed h3 {
    color: #231f20;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.band-blog-feed .card:hover h3 {
    color: #e56736;
}
.band-blog-feed .author {
    font-size: 0.75em;
    margin-bottom: 0.3em;
    /*margin: 0.9em;*/
    text-transform: uppercase;
}
.band-blog-feed .card-body p {
    margin-bottom: 0;
}
.band-blog-feed .col-4 h3 {
    font-size: 12px;
}
/*------------------------------------------------------------------
2. IMAGE LEFT TEXT RIGHT
-------------------------------------------------------------------*/
.band-blog-feed.image-with-text h3 {
    font-size: 0.9em;
}
.band-blog-feed.image-with-text h3:hover {
    color: #61811d;
}
.band-blog-feed.image-with-text .author {
    margin-bottom: 0;
}
/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {}

/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/

@media (min-width: 992px) {}
/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
    .band-blog-feed .gutter [class*="col-lg"] {
	margin-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
}	
}
/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
.band-blog-feed .gutter [class*="col-lg"] {
	margin-bottom: 50px;
    padding-left: 25px;
    padding-right: 25px;
}  
}