/*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}*/

#topicback {border-radius: 12px; display: table; margin: auto; padding: 10px 20px; background-color: #E8E8E8;}

#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: #9A2514; line-height: 1.3; 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 2px 12px; height: 40px;}
#topic div.showall aside {font-size: 21px;}

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

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

@media (max-width: 950px) and (min-width: 871px) {
#topic span {display: block;} #topic aside {display: inline-grid; place-content: center; padding: 8px 12px 11px 12px;}
#topichead {margin-top: 10px;}
}
@media (min-width: 871px) {#topic div {display: inline-block; margin: 4px 1px;}}
@media (max-width: 870px) and (min-width: 391px) {
#topic {display: grid; width: 340px; grid-template-columns: repeat(2, 1fr); gap: 5px;}
#topic label:first-child {grid-column: 1 / -1;}
#topic aside {display: table-cell; width: 1%;} #topichead {margin-top: 15px;}
}
@media (max-width: 530px) and (min-width: 391px) {#topic {width: 280px;} #topic span {display: block;} #topic aside {height: 55px;}}
@media (max-width: 390px) {#topic div {display: inline-block; margin: -3px 0;}}

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

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

/*Season buttons*/

#topicseaback {border-radius: 12px; display: table; margin: auto; padding: 10px 20px; background-color: #E8E8E8;}

#topicsea {margin: 0 auto; text-align: center;} #topicsea input {display: none; -webkit-appearance: none; appearance: none;}
#topicsea label, #topicsea input {-webkit-tap-highlight-color: transparent; outline: none;}
#topicsea label, #topicsea div {-webkit-user-select: none; user-select: none;} /*keep -webkit*/

#topicsea div {display: inline-block; text-align: center; border-radius: 5px; transition: .15s; border-radius: 8px; border: 2px solid #888; outline: 1px solid transparent;}
#topicsea aside {display: table-cell; cursor: pointer; vertical-align: middle; border-radius: 6px;}
#topicsea div.showall aside {font-size: 20px; line-height: 1px; height: 30px; padding: 0 5px; color: #B00000;}
#topicsea img {height: 30px; width: 30px; display: block; border-radius: 6px;}

#topicsea input:hover + div:not(input:checked + div) {filter: brightness(115%) saturate(120%);}
#topicsea input:checked + div {border: 2px solid #0063B1; outline: 1px solid #0063B1;}
#topicsea input:checked + div, #topicsea input:checked + div aside {cursor: text;}

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

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

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

/*Blog cards*/

@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: block;
  src: local(''), url('fonts/archivo-narrow-700.woff2') format('woff2'), url('fonts/archivo-narrow-700.woff') format('woff');
}

#cards {grid-auto-rows: auto; gap: 40px 35px; margin: 40px auto 80px auto; justify-content: center;}
#cards article {position: relative; border-radius: 14px; box-sizing: border-box; transition: .15s; border: 2px solid #0063B1; 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 h3 {padding: 5px 0 10px 0; font-family: 'Archivo', Arial, Helvetica, sans-serif; font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: .2px; color: #0063B1; margin: 0;}
#cards img {object-fit: cover; width: 700px; height: 700px; width: 100%; display: block; transition: .2s; object-position: 50% 100%; border-radius: 4px 4px 0 0;}

#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: 600; text-transform: uppercase; letter-spacing: .5px; 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 .topicsea {position: absolute; top: -57px; right: 0; height: 30px; width: 30px; border-radius: 6px 0 0 0;}

#cards .hvac .topic:before {content: "HVAC";} #cards .hvac .topic {background-color: #673AB7;}
#cards .heat .topic:before {content: "Heating";} #cards .heat .topic {background-color: #F44336;}
#cards .air .topic:before {content: "Air Conditioning";} #cards .air .topic {background-color: #2196F3;}
#cards .aq .topic:before {content: "Air Quality";} #cards .aq .topic {background-color: #68BA45;}
#cards .plumb .topic:before {content: "Plumbing";} #cards .plumb .topic {background-color: #7186A8;}
#cards .wh .topic:before {content: "Water Heaters";} #cards .wh .topic {background-color: #FF9000;}

#cards .topicsea {background-repeat: no-repeat; background-position: center; background-size: 30px 30px;}
/*#cards article.spring .topicsea, #cards article.summer .topicsea, #cards article.fall .topicsea, #cards article.winter .topicsea {border-top: 1px solid #E6E6E6; border-left: 1px solid #E6E6E6;} Do it this way, or it'll show border around empty .topicsea cards*/

#cards .spring .topicsea {background-image: url("blog/images/spring.png");} /*#cards .spring .topicsea {background-color: #95C221;}*/
#cards .summer .topicsea {background-image: url("blog/images/summer.png");} /*#cards .summer .topicsea {background-color: #FCD217;}*/
#cards .fall .topicsea {background-image: url("blog/images/fall.png");} /*#cards .fall .topicsea {background-color: #E96D1D;}*/
#cards .winter .topicsea {background-image: url("blog/images/winter.png");} /*#cards .winter .topicsea {background-color: #53B2D0;}*/

#cards .springfall .topicsea {top: -87px; background-size: 30px 60px; background-image: url("blog/images/springfall.png"); height: 60px; width: 30px;}

.cardtext {position: relative;}
.cardtext div {text-align: left; margin-top: 5px; font-size: 17px; line-height: 1.6; margin-bottom: 50px;} /*article descrip*/

@media (min-width: 1501px) {#cards {grid-template-columns: repeat(4, 1fr);} #cards img {height: 18vw; max-height: 300px;} .cardtext {padding: 15px 30px 20px 30px;}}
@media (max-width: 1500px) {
#cards {grid-template-columns: repeat(3, 1fr); gap: 35px;}
#cards img {height: 34vw; max-height: 320px; 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;} #cards article {border-top: 8px solid #0063B1;}}
@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: 40px;}
.cardtext {padding: 15px;}
#cards img {height: 75vw; max-height: 320px; object-position: 50% 50%; border-radius: 12px 12px 0 0;}
}
@media (min-width: 501px) {
#cards .readblog {position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-content: center; align-self: center; align-items: center; text-align: center; height: 40px; padding-top: 1px; font-size: .85em; font-weight: 500; color: #FFF; background-color: #0063B1; border-radius: 0 0 9px 9px; transition: .15s;}
}
@media (max-width: 500px) {
#cards article {background-color: #0063B1;} #cards img {max-height: 250px;} #cards h3 {color: #FFF;}
.cardtext div, .readblog {display: none;} .cardtext {margin-bottom: -5px;}
}

#cards article:hover {border: 2px solid #AE1819;}
#cards article:hover .readblog {font-size: .95em; background-color: #AE1819;}
#cards article:hover img {filter: brightness(115%) saturate(120%);}
@media (min-width: 751px) {#cards article:hover {border-top: 8px solid #AE1819;}}
@media (min-width: 501px) {#cards article:hover h3 {color: #AE1819;}}
@media (max-width: 500px) {#cards article:hover {background-color: #AE1819;}}

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

/*BLOG ARTICLES*/

#bread {font-size: 14px; line-height: 1.4; margin-bottom: 20px;}
@media (min-width: 1426px),(max-width: 1195px) {.bodyarea:not(.blogcards) {padding-top: 12px;}}
@media (max-width: 1425px) and (min-width: 1196px) {.bodyarea:not(.blogcards) {padding-top: 18px;}}

.hvac #blogtopic span:before {content: "HVAC";}
.heat #blogtopic span:before {content: "Heating";}
.air #blogtopic span:before {content: "Air Conditioning";}
.aq #blogtopic span:before {content: "Air Quality";}
.plumb #blogtopic span:before {content: "Plumbing";}
.wh #blogtopic span:before {content: "Water Heaters";}

.hvac #blogtopic {background-color: #D8C8F4; color: #47008F;}
.heat #blogtopic {background-color: #FFC6B8; color: #990A00;}
.air #blogtopic {background-color: #B3DDFF; color: #005194;}
.aq #blogtopic {background-color: #C4FBAC; color: #1F6600;}
.plumb #blogtopic {background-color: #D3DBE8; color: #395074;}
.wh #blogtopic {background-color: #FFC67A; color: #752F00;}

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

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

.hvac #moreblogs a:first-child span:before {content: "More HVAC Articles";}
.heat #moreblogs a:first-child span:before {content: "More Heating Articles";}
.air #moreblogs a:first-child span:before {content: "More Air Conditioning Articles";}
.aq #moreblogs a:first-child span:before {content: "More Air Quality Articles";}
.plumb #moreblogs a:first-child span:before {content: "More Plumbing Articles";}
.wh #moreblogs a:first-child span:before {content: "More Water Heaters Articles";}

.hvac #moreblogs a:first-child {background-color: #673AB7;}
.heat #moreblogs a:first-child {background-color: #F44336;}
.air #moreblogs a:first-child {background-color: #2196F3;}
.aq #moreblogs a:first-child {background-color: #68BA45;}
.plumb #moreblogs a:first-child {background-color: #7186A8;}
.wh #moreblogs a:first-child {background-color: #FF9000;}


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