/*BLOG PAGE*/

.bodyarea {padding-top: 40px;}

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

/*Main Blog Page*/

#cards {grid-template-columns: repeat(auto-fit, 350px); grid-auto-rows: auto; grid-gap: 40px 30px; gap: 40px 30px; margin: 50px 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: 1.25em; line-height: 1.4; font-weight: 500; color: #181897;}

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

.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, 300px); grid-gap: 30px 25px; gap: 30px 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: 1200px) {#cards {grid-template-columns: repeat(auto-fit, 400px); grid-gap: 25px 20px; gap: 25px 20px;}}
@media (max-width: 1040px) {#cards {grid-template-columns: repeat(auto-fit, 320px);}}
@media (min-width: 876px) {#cards {display: grid;}}
@media (max-width: 875px) {
#cards {display: table; width: 98%; max-width: 500px;}
#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: 250px;}
}
@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;}
}

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

.bodyarea {line-height: 1.6;}
.blogpic {float: right; margin: 10px 0 15px 40px; 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;}}

.socialshare {text-align: center; margin: 30px auto auto auto; font-weight: 500;} .a2a_kit {display: inline-block; margin-top: 5px;}
#moreblogs {margin: 20px auto 0 auto; text-align: center;}