/*BLOGS*/

/*---------------------------------------*/

/*Blog Index Page*/

#cards {grid-template-columns: repeat(auto-fit, 350px); grid-auto-rows: auto; grid-gap: 40px 30px; gap: 40px 30px; margin: 40px auto 80px auto; justify-content: center;}
#cards img {object-fit: cover; width: 700px; height: 280px; width: 100%; display: block; border-radius: 4px 4px 0 0; transition: .2s;}
#cards article {position: relative; display: inline-block; border-radius: 6px; box-sizing: border-box; transition: .2s; border: 2px solid transparent; background-color: #EAEAEA;}
#cards a {color: #333; text-decoration: none;} .cardtext {padding: 25px 30px 25px 30px;}
.cardtext h3 {font-size: 24px; line-height: 1.3; font-weight: 600; color: #0063B1;}

#cards article:hover {border: 2px solid #0063B1; background-color: #F2F2F2;}
#cards a:hover img {-webkit-filter: brightness(105%) saturate(110%);}
#cards a:hover h3 {color: #C12F15}

.cardtext div:nth-child(2) {text-align: left; margin-top: 20px; font-size: 16px; line-height: 1.6;} /*details*/

@media (max-width: 1370px) {
#cards {grid-template-columns: repeat(auto-fit, 280px); grid-gap: 35px 25px; gap: 35px 25px; margin: 40px auto 30px auto;}
.cardtext {padding: 25px;} #cards img {height: 230px;}
}
@media (max-width: 1125px) {
#cards {grid-template-columns: repeat(auto-fit, 240px); grid-gap: 30px 20px; gap: 30px 20px;} .cardtext h3 {font-size: 22px;}
.cardtext {padding: 20px;} #cards img {height: 200px;}
}
@media (max-width: 980px) {#cards {grid-template-columns: repeat(auto-fit, 300px); grid-gap: 30px 20px; gap: 30px 20px;}}
@media (max-width: 810px) {#cards {grid-template-columns: repeat(auto-fit, 240px); grid-gap: 25px 20px; gap: 25px 20px;}}
@media (min-width: 661px) {#cards {display: grid;}}
@media (max-width: 660px) {
#cards {display: table; width: 98%; max-width: 450px;}
#cards article {width: 100%; transition: .1s;} #cards article:not(article:last-child) {margin-bottom: 30px;}
#cards a {margin: 0; width: 100%;} .cardtext {padding: 15px;} #cards img {height: 45vw; max-height: 200px;}
}
@media (max-width: 500px) {
.cardtext div:nth-child(2) {visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0;} .cardtext h3 {padding: 5px 10px;}
}

/*---------------------------------------*/

/*Individual Blog Pages*/

.bodyhead {margin-bottom: 30px !important;}
.socialshare {text-align: center; margin: 30px auto auto auto; font-weight: 600;}
.a2a_kit {display: inline-block; margin-top: 5px;}

.blogpic {float: right; margin: 10px 0 10px 35px; max-width: 500px;}
.blogpic img {width: 500px; height: 500px; width: 100%; height: auto; display: block; border-radius: 5px;}
@media (max-width: 1050px) and (min-width: 901px) {.blogpic {max-width: 420px;}}
@media (max-width: 900px) {.blogpic {text-align: center; float: none; margin: 25px auto 35px auto;}}

#moreblogs {margin: 20px auto 0 auto; text-align: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .1em;}