.allposts {display:flex; margin:0 auto 60px auto; width:auto; max-width:960px; flex-wrap:wrap; align-content:stretch; align-items:flex-left; justify-content:space-around; row-gap:20px;}
.allposts > div {display:block; padding-bottom:10px; width:300px; background-color:var(--light-blue); margin:4px;}
.allposts > div:hover {margin:0; background-color:var(--purple); border:4px solid #fff;}
.allposts > div a {color:#fff;}
.allposts > div a:hover {background-color:var(--purple);}
.allposts > div img {width:300px; height:300px;}
.allposts > div p {margin:0; padding:15px 10px 10px 10px; text-align:center; font-size:16px; line-height:1.3; font-weight:700;}
.allposts > div h6 {margin:0; padding:5px 10px; text-align:right; font-size:11px; color:var(--blue-txt); font-weight:400;}


.postlinks {display:flex; margin:30px auto 60px auto; width:960px; flex-wrap:no-wrap; align-content:flex-start; align-items:center; justify-content:space-between;}
.postlinks ul {margin:0; padding:0; list-style-type:none;}
.postlinks ul li {display:inline-block; margin-right:15px; padding:0; text-align:left; font-size:15px;}
.postlinks ul li a {padding:10px 10px 8px 10px; color:#c0c0c0; border-bottom:1px solid #c0c0c0;}
.postlinks ul li a:hover {color:#035f5c;}
.postlinks ul li a.active {color:#fff; padding-bottom:6px; border-bottom:0;}

.pagination {margin:15px auto; padding:0; width:90%; text-align:center; font-size:15px;}
.pagination a {display:inline-block; width:15px; margin:6px; padding:8px 10px; color:#fff; text-align:center; text-decoration:none; border:1px solid var(--light-blue); border-radius:50%; background-color:var(--light-blue);}
.pagination a:hover {color:#fff; border:1px solid var(--purple); background-color:var(--purple);}
.pagination a.active {color:var(--light-blue); border:1px solid var(--light-blue); background-color:transparent;}

.banner-blog {display:block; padding:50px 0 40px 0; text-align:center; background-color:#fff;}
.banner-blog h1 {margin:0 auto 15px auto; color:var(--light-blue); max-width:94%;}
.banner-blog h2 {color:var(--light-blue);}
.banner-blog hr.topline {color:var(--light-blue);}
.content-bcrumb {display:flex; margin:0 auto; width:96%; padding-bottom:30px; align-items:flex-start; align-content:flex-start; font-size:14px;}
.content-bcrumb a {color:var(--light-blue);}
.content-bcrumb a:hover {color:var(--purple);}

article {display:block; padding:50px 0; text-align:center; background-color:var(--light-blue);}

.content-blog {display:flex; margin:0 auto; width:auto; max-width:1100px; align-items:flex-start; align-content:flex-start; column-gap:60px; color:#fff;}
.content-blog ul {margin:60px; list-style:square;}
.content-blog ul li {padding-left:30px; margin-bottom:15px; text-align:left;}
.content-blog img {margin:10px auto 20px auto; width:auto; min-width:300px; height:auto; border:4px solid #fff;}
.content-blog a {color:var(--blue-txt); text-decoration:underline;}
.content-blog a:hover {color:#fff;}
.content-blog a.blink {display:block; margin:60px auto 0 auto; padding:20px 15px; width:270px; text-align:center; color:#fff; text-decoration:none; font-weight:600; background-color:var(--dark-green); border-radius:9px;}
.content-blog a.blink:hover {color:#fff;background-color:var(--purple);}
.content-blog h3 {margin:80px 0 30px 0; text-align:left; color:var(--blue-txt); font-size:21px; font-weight:600;}
.content-blog h4 {margin:30px 0 15px 30px; text-align:left; font-size:14px; color:var(--blue-txt); font-weight:400;}
.content-blog p.quote {margin-bottom:15px; text-align:center; font-size:15px; font-weight:400; font-style:italic;}

p.blog-main {font-size:22px; font-weight:600;}

.vidContainer {margin-bottom:40px; border:4px solid #fff;}

p.blog-caption {margin-top:-20px; margin-bottom:30px; text-align:center; font-size:13px; color:var(--blue-text); font-style:italic;}
.note {margin:40px auto; width:70%; padding:10px 30px; border-left:3px solid #035f5c;}
.note p {margin-bottom:20px; text-align:left; font-size:32px; font-style:italic; line-height:1.3;}

.row-white {display:block; padding:40px 0; text-align:center; background-color:#fff;}
.content-white {display:block; margin:0 auto; width:900px;}
.post-links {display:flex; padding-bottom:30px; width:100%; justify-content:space-between;}
.prev {text-align:left;}
.next {text-align:right;}
.post-links a {padding:5px; color:var(--light-blue); font-size:15px;}
.post-links a:hover {color:var(--purple);}
.share {display:block; margin:0 auto; text-align:center; padding:30px;}


.content-filters {display:flex; width:auto; max-width:90%; margin:0 auto; align-items:center; align-content:center; justify-content:space-around;}

.filter {display:inline-block; padding-bottom:45px;}
.search {display:inline-block; width:320px; padding-bottom:45px;}

#panel, #flip {display:inline-block; width:250px;
  padding: 10px;
  text-align:left;
  background-color:transparent;
  border: solid 1px var(--blue-txt);
}
#flip {background:transparent url('https://chiversplumbing.com.au/graphics/up-down.png') no-repeat center right;}
#flip:hover {background-color:var(--blue-txt);}

#panel {
  padding: 10px;
  display: none;
}
#panel a {display:block; margin-bottom:5px; padding:5px 5px 5px 15px; color:var(--purple); font-size:15px;}
#panel a:hover {color:#fff; background-color:var(--purple);}

input.srch {width:240px; padding:11px 10px; text-align:center; font-size:16px; background-color:transparent; border:1px solid var(--blue-txt); outline:none;}
input.s-btn {width:40px; height:40px; margin-top:2px; padding:15px 10px; text-align:center; background:url('https://chiversplumbing.com.au/graphics/s-icon.png') center center no-repeat; background-color:var(--blue-txt); border:0; outline:none; border-radius:5px; cursor:pointer;}
input.s-btn:hover {background-color:var(--purple);}
::placeholder {color:var(--blue-txt);}

p.fsrch {padding-top:30px; text-align:center; font-size:20px; font-weight:600; line-height:2.5;}

.map {width:100%; height:0; margin-top:40px; padding-bottom:50%;position:relative; overflow:hidden;}
.map iframe, .overlay{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.overlay {z-index:10;}

.moreposts-top {display:flex; margin:80px auto 0 auto; padding:40px 40px 0 40px; width:auto; max-width:880px; flex-wrap:wrap; align-content:stretch; align-items:center; justify-content:space-between; background-color:#16161b;}
.moreposts-top img {border-radius:9px; opacity:0.9;}
.moreposts-top img:hover {opacity:1;}
.moreposts {display:flex; margin:0 auto 80px auto; padding:20px 40px 40px 40px; width:auto; max-width:880px; flex-wrap:wrap; align-content:stretch; align-items:flex-left; justify-content:space-between; row-gap:15px; background-color:#16161b;}
.moreposts > div {display:block; width:270px; background-color:#fff; margin:4px;}
.moreposts > div:hover {margin:0; border:4px solid #fff;}
.moreposts > div a {color:#035f5c;}
.moreposts > div a:hover {color:var(--purple);}
.moreposts > div img {width:270px; height:270px;}
.moreposts > div p {margin:0; padding:10px; text-align:left; font-size:15px; font-weight:700;}

a.rss {display:block; width:120px; margin:50px auto 0 auto; padding-top:3px; text-align:center; background-color:#035f5c; border:2px solid #fff; border-radius:9px; opacity:0.8;}
a.rss:hover {opacity:1;}

.comment-btn {margin:20px auto; width:240px; padding:10px; text-align:center; color:#fff; background-color:var(--purple); border:2px solid #fff; border-radius:20px;}
.comment-btn:hover {background-color:#035f5c;}
.comment {display:none; width:80%; margin:30px auto; padding:40px 0; text-align:center; background-color:#161616; border-top:2px solid #800020; border-bottom:2px solid #800020;}

@media only screen and (max-width:1199px) {
.content-blog {max-width:96%;}
.content-filters {justify-content:space-between;}
}

@media only screen and (max-width:1000px) {
.content-white {width:90%;}
.allposts {width:100%; justify-content:space-around;}
.postlinks {width:100%;}
.moreposts {padding:40px 0; align-content:flex-start; align-items:center; justify-content:space-around;}
}

@media only screen and (max-width:840px) {
p.blog-main {text-align:center; font-size:21px; font-weight:600;}
.content-blog {padding:30px 0;}
.content-blog {flex-direction:column; align-items:center; align-content:center; justify-content:center; row-gap:40px;}
.postlinks {flex-wrap:wrap; align-content:center; align-items:center; justify-content:space-around;}	
/*input.srch {margin:60px 30px;}
.content-filters {display:flex; width:auto; max-width:90%; margin:0 auto; align-content:flex-start; align-items:stretch; justify-content:space-around;}*/
.note {width:90%;}
.pagination a {margin:10px;}

.content-blog table {width:90%;}
.content-blog table th, td {padding:15px 8px;text-align:left; font-size:14px;}

}
@media only screen and (max-width:768px) {
.content-filters {display:flex; flex-direction:column; align-items:flex-start; align-content:flex-start; justify-content:flex-start; row-gap:20px;}
.filter {padding-bottom:0;}
input.srch {width:250px;}
}
@media only screen and (max-width:640px) {
.content-blog img {min-width:260px; max-width:90%; border:3px solid #fff;}
}

@media only screen and (max-width:540px) {
.content-blog ul {margin:60px 15px 60px 30px;}
.content-blog ul li {padding-left:15px;}
.postlinks {align-content:flex-start; justify-content:flex-start;}
.postlinks ul {margin:0; padding:0; list-style-type:none;}
.postlinks ul li {display:block; margin-right:0; margin-bottom:20px; margin-left:30px; padding:0; text-align:left; font-size:15px;}
.postlinks ul li a {display:block; width:180px; padding:12px 10px 6px 10px;}

.comment {width:94%;}
.map {padding-bottom:75%;}
}
@media only screen and (max-width:360px) {

.filter {width:250px;}
#panel, #flip {width:246px;
input.srch {width:220px;}
}