/*BLOGS*/

/*====================================================*/

/*MAIN BLOG PAGE*/

/*Topic buttons*/

/*#topic {border: 1px solid black} #topicselect {border: 1px solid orange}
#topic div {border: 1px solid blue} #topic aside {border: 1px solid green} #topichead {border: 1px solid magenta}*/

#topic {margin: 5px auto 0 auto; text-align: center;} #topic input {display: none;}
#topic div {display: table; text-align: center; border-radius: 5px; background-color: #AE1819; line-height: 1.25; white-space: nowrap; transition: .15s; }
#topic aside {display: table-cell; font-size: 18px; font-weight: 500; cursor: pointer; color: #FFF; vertical-align: middle; padding: 0 12px; height: 40px;}
#topic div.showall aside {font-size: 21px;}

#topic input:hover + div {background-color: #F55656;}
#topic input:checked + div {background-color: #EF2E32;}
#topic input:checked + div,#topic input:checked + div aside {cursor: text;}

#topichead {display: table; text-align: center; margin: 0 auto;}
#topichead div {margin: 5px auto 0 auto; font-size: 1.2em; line-height: 1.4; font-weight: 500; text-transform: uppercase; color: #063D96;}

@media (max-width: 715px) and (min-width: 601px) {
#topic span {display: block;} #topic aside {display: inline-grid; place-content: center; padding: 10px 12px;}
#topichead {margin-top: 10px;}
}
@media (min-width: 601px) {#topic div {display: inline-block; margin: 4px 1px;}}
@media (max-width: 600px) {
#topic {display: grid; width: 340px; grid-template-columns: repeat(2, 1fr); gap: 5px; grid-gap: 5px;}
#topic aside {display: table-cell; width: 1%;} #topichead {margin-top: 15px;}
}
@media (max-width: 530px) {#topic {width: 230px;} #topic span {display: block;} #topic aside {height: 60px;}}

#topicselect {margin: 30px auto 0 auto; text-align: center; font-size: .85em; line-height: 1.4; font-weight: 500; font-style: italic; color: #000;}



/*Blog cards*/

#cards {grid-auto-rows: auto; grid-gap: 30px; gap: 30px; margin: 40px auto 80px auto; justify-content: center;}
#cards article {position: relative; border-radius: 14px; box-sizing: border-box; transition: .15s; border: 2px solid transparent; background-color: #E6E6E6;}

/*fade in with Javascript*/
#cards article {opacity: 1;} #cards article.hidden {display: none; opacity: 0;} #cards article.fade-in {animation: cardFadeIn .2s ease;}
@keyframes cardFadeIn {from {opacity: 0;} to {opacity: 1;}}

#cards a {color: #333; text-decoration: none;}

#cards .bloghead {position: relative; top: 0; left: 0; right: 0; text-align: center; padding: 8px 15px; background-color: #0D2957; border-radius: 12px 12px 0 0; z-index: 1; transition: .15s;}
#cards h3 {font-size: 20px; font-weight: 400; line-height: 1.3; color: #FFF;}
#cards aside {overflow: hidden; position: relative;}

#cards .blogpic1 {position: relative;}
#cards img {object-fit: cover; width: 700px; height: 320px; width: 100%; display: block; transition: .2s; object-position: 50% 100%;}

#cards .topic {position: absolute; top: -27px; right: 0; display: grid; align-items: center; height: 25px; padding: 1px 7px 0 9px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .7px; background-color: #FFF; color: #FFF; border-radius: 12px 0 0 0; white-space: nowrap; border-top: 1px solid #E6E6E6; border-left: 1px solid #E6E6E6;}

#cards .ww .topic:before {content: "Well Water";} #cards .ww .topic {background-color: #2C92B8;}
#cards .wt .topic:before {content: "Water Treatment";} #cards .wt .topic {background-color: #6CA128;}
#cards .ws .topic:before {content: "Well Systems";} #cards .ws .topic {background-color: #C37933;}

.cardtext {position: relative;}
.cardtext div {text-align: left; margin-top: 5px; font-size: 18px; line-height: 1.5;} /*details*/
.cardtext .readblog {display: block; padding-top: 20px; font-size: .85em; font-weight: 500; color: #0063B1;}

@media (min-width: 1501px) {#cards {grid-template-columns: repeat(4, 1fr);} #cards aside, #cards img {height: 18vw; max-height: 300px;} .cardtext {padding: 15px 30px 20px 30px;}}
@media (max-width: 1500px) {
#cards {grid-template-columns: repeat(3, 1fr); grid-gap: 20px; gap: 20px;}
 #cards aside, #cards img {height: 34vw; max-height: 320px;} #cards img {object-position: 50% 50%;}
.cardtext {padding: 15px 20px 18px 20px;}
}
@media (max-width: 1200px) {#cards {grid-template-columns: repeat(2, 1fr); max-width: 950px;} #cards img {object-position: 50% 60%;}}

@media (min-width: 751px) {#cards {display: grid;}}
@media (max-width: 750px) {
#cards {display: table; width: 98%; max-width: 500px;}
#cards article {width: 100%; transition: .15s;} #cards article:not(article:last-child) {margin-bottom: 30px;}
#cards a {margin: 0; width: 100%;} .cardtext {padding: 15px;}
#cards aside, #cards img {height: 75vw; max-height: 380px;}
#cards img {object-position: 50% 50%;}
}
@media (max-width: 500px) {
.cardtext div, .readblog {display: none !important;} .cardtext {margin-bottom: -30px;}
#cards aside, #cards img {border-radius: 0 0 12px 12px;}
#cards .topic {border-radius: 12px 0 12px 0;}
}

#cards article:hover {border: 2px solid #0063B1; background-color: #F2F2F2;}
#cards article:hover .bloghead {background-color: #AE1819;}
#cards a:hover img {filter: brightness(115%) saturate(120%);}

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

/*BLOG ARTICLES*/

.wt #blogtopic span:before {content: "Water Treatment";}
.ww #blogtopic span:before {content: "Well Water";}
.ws #blogtopic span:before {content: "Well Systems";}

.ww #blogtopic {background-color: #CAE7F2; color: #2780A0;}
.wt #blogtopic {background-color: #D2EEB3; color: #447816;}
.ws #blogtopic {background-color: #F3DAB4; color: #9B6533;}

#blogtopic {display: table; margin: 0 auto 30px auto; border-radius: 7px;}
#blogtopic span {display: table-cell; vertical-align: middle; text-align: center; font-size: .7em; line-height: 1; padding: 5px 7px 4px 7px; color: inherit; text-decoration: none; letter-spacing: .5px; font-weight: 500;}

.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;}}

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

/*More Blogs*/

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

.ww #moreblogs a:first-child span:before {content: "More Well Water Articles";}
.wt #moreblogs a:first-child span:before {content: "More Water Treatment Articles";}
.ws #moreblogs a:first-child span:before {content: "More Well Systems Articles";}

.ww #moreblogs a:first-child {background-color: #2C92B8;}
.wt #moreblogs a:first-child {background-color: #6CA128;}
.ws #moreblogs a:first-child {background-color: #C37933;}

#moreblogs a:first-child {position: relative; z-index: 0; text-decoration: none;} #moreblogs a:last-child {font-weight: 500;}
#moreblogs a:first-child::before {content: ""; position: absolute; inset: 0; background: inherit; border-radius: inherit; z-index: -1; transition: .1s;}
#moreblogs a:first-child:hover::before {filter: brightness(120%);}

#moreblogs a:first-child {display: table; border-radius: 7px;}
#moreblogs a:first-child span {display: table-cell; vertical-align: middle; text-align: center; line-height: 1.4; padding: 10px 14px 10px 14px; color: #FFF; text-decoration: none;}
#moreblogs a:last-child {text-decoration: underline;}