/*start used on multiple pages*/
*{padding: 0; margin: 0; position: relative; box-sizing: border-box; float: left;}
body{width: 100vw; min-height: 100vh;}
.body{width: 100vw; min-height: calc(100vh - 250px);background-repeat: no-repeat; background-size: cover; background-position: right right; background-attachment: fixed;}
header{width: 100%; min-height: 200px; background-image: url("images/sebastian-morelli-peyton-pipes.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right right; background-attachment: fixed;}
#header{width: 100%; padding-top: 25px; background-color: rgba(150,45,45,.0);}

#brand{width: 100%; min-height: 100px; padding-bottom: 25px;}
#brand img{width: auto; height: 140px;}

nav{width: 100%; min-height: 20px; color: white; background-color:rgba(0,0,0,.0);}
nav li{width: calc(25% - 2px); min-width: 174.5px; min-height: 60px; padding: 10px; border: solid black 1px; text-align: center; background-color: #962D2D; list-style-type: none;}
nav li a{width: 100%; color: inherit; text-decoration: none;}
nav li:hover{background-color: #3D9AE2;}
.activeNavLi{background-color: peru;}

#areas{width: 100%; min-height: 50px; padding: 25px; background-color: #939598; color: white; text-align:center;}

section{width: 100%; min-height: 100px;}


.row{width: 100%; min-height: 200px; display: flex; flex-direction: row; flex-wrap: wrap;}
.rowCol1{display: flex; flex-direction: row; justify-content: center; align-items: center;}
.rowCol2{width: 50%; min-width: 340px; min-height: 200px; padding: 50px; 
    background-image: linear-gradient(90deg, rgb(150,45,45, .2), rgba(208,132,75,.5)); color: white;}
.flexWrap{flex-wrap: wrap;}

.col1{display: flex; flex-direction: column; justify-content: center; align-items: center;}

.srvIcon{width: 100px; height: 100px; padding: 5px; margin: 5px;}
.srvIcon img{width: auto; height: 100%;}

footer{width: 100%; min-height: 50px; padding: 25px; text-align: center; background-color: #962d2d; color: white;}
/*end used on multiple pages*/


.paddedSection25{padding: 25px;}
.paddedSection50{padding: 50px; background-color: #3D9AE2;}
.rowCol2Style1{background-color: white; color: black; background-image: none;}


.fullSpan h4, .fullSpan h3, .fullSpan p{width: 100%; text-align: center; background-color: ;}
.fullSpan{background-color: white;}
.fullSpan h4, .fullSpan h3{margin-bottom: 20px;}
#srvSummaryH{font-size: 16pt;}
.srvSummary{color: #962d2d; font-weight: 600; font-size: 18pt;}
.row h3{text-align: center; font-family: sans-serif;}


/*-----------------------------------------------*/
/*start page home about*/
#homeBody{background-image: url("images/sebastian-morelli-peyton-pipes.jpg");}
#meetsSection{color: #fff;}
#meetsSection h3{margin-bottom: 20px;}
/*end page home about*/

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

/*start page residential and commercial services*/
#rcsBody{background-image: url("images/converted/IMG_2268.jpg"); background-attachment: scroll; background-position: center;}

.srvsCol{width: 100%; column-count: ; list-style-type: none; display: ; flex-direction: ; justify-content:; flex-wrap: ;}
.srvsCol li {width: calc(50% - 10px); height:48px; margin: 5px 5px; padding: 5px; background-color:; float: left;}

.srvIcons{max-width: 330px; display: flex; margin: 25px calc((100% - 330px) / 2); flex-direction: row; justify-content: center; flex-wrap: wrap; list-style-type: none; background-color: ;}

#srvIconsRcs .srvIcon{background-color: #939598;}
#srvIconsCrs .srvIcon{border: 5px solid #939598; background-color: none;}

.addOnSrvs{width: 260px; height: ; padding: 10px; margin: 25px 25px 0 25px; display: flex; flex-direction: column; align-items: center;}
.addOnSrvs h4{width: 100%; margin-bottom: 12.5px; text-align: center; color: #939598; text-shadow: 2px 2px 9.5px rgba(0,0,0,.752);}
.addOnSrvs p{margin-top: 10px; text-align: center;}
.addOnsIcons{width: 200px; height: 200px;}
.addOnsIcons div{padding: 5px;}
.addOnsIcons div img{width: 100%; height: auto;}
.addOnTopLeftIcon{width: 100px; height: 100px; border-right: 2px solid black; border-bottom: 2px solid black;}
.addOnTopRightIcon{width: 100px; height: 100px; border-left: 2px solid black; border-bottom: 2px solid black;}
.addOnBottomLeftIcon{width: 100px; height: 100px; border-top: 2px solid black; border-right: 2px solid black;}
.addOnBottomRightIcon{width: 100px; height: 100px; border-top: 2px solid black; border-left: 2px solid black;}

#gallerySection{background-color: white;}
.works{width: 100%; list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.works li{width: 300px; height: 300px; margin: 10px; background-color: #939598; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.752);}
.works li:hover{background-color: peru;}
.workPicsInput{display: none;}
.workPics{width: 240px; height: 240px; margin: 30px; overflow: hidden;}
.workPics img{width: 100%; height: auto;}

/*end page residential and commercial services*/
/*-----------------------------------------------*/
/*start page preventative and emergency*/
#pesBody{background-image: url("images/converted/IMG_2255.jpg");}

#ptsH1, .ptsH{margin-top: 25px; margin-bottom: 25px;}
.ptsH{border: 1px solid black; border-radius: 5px; padding: 10px; clear: both;}
.ptsH:hover{background-color: rgba(208,132,75,.5);}
#tipPlusH3, #tipPlusH2{width: 30px; height: 30px; border: 1px solid black; border-radius: 5px; padding: 1px;  margin-left: 10px; float: right; margin-bottom: 0;
  -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg); transform: rotate(180deg);
    display: flex; flex-direction: row; justify-content: center;
    background-color: peru; color: white;
}

.ptsHInputs{clear: both; display: none;}
.ptsHInfo{display: none;}
#ptsH2:checked ~ #ptsH2Info{display: block;}
#ptsH2:checked ~ #ptsH2label{border: 0px; border-radius: 0; border-bottom: 1px solid black;}
#ptsH2:checked ~ #ptsH2label #tipPlusH2{
  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg); transform: rotate(0deg);
}
#ptsH3:checked ~ #ptsH3Info{display: block;}
#ptsH3:checked ~ #ptsH3label{border: 0px; border-radius: 0; border-bottom: 1px solid black;}
#ptsH3:checked ~ #ptsH3label #tipPlusH3{
  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg); transform: rotate(0deg);
}

.subLiTip{margin-left: 50px;}
#tipDisclaimer{color: #962d2d;}

.srvIconsPes{max-width: 220px; display: flex; margin: 25px calc((100% - 220px) / 2); flex-direction: row; justify-content: center; flex-wrap: wrap; list-style-type: none; background-color: ;}
/*end page preventative and emergency*/
/*-----------------------------------------------*/
/*start page contact and faqs*/
#cfBody{background-image: url("images/converted/IMG_2267.jpg");}

#contactInfoSection{background-color: white; color: #3D9AE2;}

.businessCardContactInfo{
	width: 250px;
	min-height: 50px;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center; background-color:;
}
.businessCardContactInfo *{
    padding: ;
	display: flex;
	flex-direction: row;
	align-items: center; }
.businessCardContactInfo img{width: 50px; height: auto;}
.businessCardContactInfo p{width: calc(100% - 56px); height: 50px; padding-left: 10px; margin-left: 5px; border-left: 2px solid #3D9AE2; background-color:;}
.opTimes{width: 100%; text-align: center; padding: 10px;} #erTimes{color: #962d2d;}

#vcf{
	min-width: 100px;
	height: 50px;
	padding: 10px;
	margin-top: 20px;
}
#vcf a{color: inherit; text-decoration: none;}
#vcf a:active{text-decoration:underline;}

#formRowCol2{display: flex; flex-direction: column; align-items: center;}

form{width: 100%; min-width: 300px; max-width: 460px; display: flex; flex-direction: column; justify-content: center; text-align: center; border: 5px solid #962d2d; padding: 5px; background-color: #962d2d;}
form label{width: 150px; padding: 10px; color: white; text-align: left;}
form input[type=text]{width: 100%; padding: 10px; margin-bottom: 10px;}
messageLabel{width: 100%; min-width: 300px; text-align: center; margin-top: 5px;}
form textarea{width: 100%; min-width: 100%; max-width: 460px; min-height: 100px; max-height: 300px; margin-bottom: 10px; padding: 10px;}
#contact-antispam-label{margin:;}
#sendForm{width: 100%; min-width: 300px; text-align: center; padding: 10px; margin-top: 5px;}

.faqs{width: 100%; list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.faqs li{width: 300px; height: 300px; margin: 10px; background-color: #939598; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.752);}
.faqs li:hover{background-color: peru;}
.faqsQ, .faqsA{width: 100%; height: 100%; padding: 25px; display: flex; flex-direction: column; justify-content: center; text-align: center;}
.faqsA{display: none; background-color: #962d2d; text-align: left; justify-content: flex-start; color: white; font-size: 15pt;}
.faqsQInput{display: none;}
#faqsSection{background-color: white;}
#faqsSection h3{width: 100%; padding: 25px; text-align: center; background-color: ;}
#faqs1:checked ~ #faqsQ1{display: none;}
#faqs1:checked ~ #faqsA1{display: flex;}
#faqs2:checked ~ #faqsQ2{display: none;}
#faqs2:checked ~ #faqsA2{display: flex;}
#faqs3:checked ~ #faqsQ3{display: none;}
#faqs3:checked ~ #faqsA3{display: flex;}
#faqs4:checked ~ #faqsQ4{display: none;}
#faqs4:checked ~ #faqsA4{display: flex;}
#faqs5:checked ~ #faqsQ5{display: none;}
#faqs5:checked ~ #faqsA5{display: flex;}
#faqs6:checked ~ #faqsQ6{display: none;}
#faqs6:checked ~ #faqsA6{display: flex;}
/*end page contact and faqs*/

/*start responsive tablet and mobile queries*/
@media screen and (max-width: 713px) {

  nav li{width: calc(50% - 2px); min-width: 174.5px; min-height: 30px; margin:0; border:black 1px solid;}

  .fullSpan .srvSummary{text-align:; padding-left:15.0px; padding-right:15.0px;}
}

@media screen and (max-width: 679px) {
   {
    color: lightgreen;
  }
  nav li{width: calc(50% - 2px); min-width: 174.5px; min-height: 30px; margin:0; border:black 1px solid;}
  
  
  .rowCol2{width:100%;}
  .rowCol2divider::before{content: ''; position: absolute; bottom: 0px;
left: 37.5%; border-bottom: 2px solid black; width: 25.0%;}
}

@media screen and (max-width: 569px) {

  nav li{width: calc(100% - 2px); min-width: 174.5px; min-height: 30px; margin:0; border:black 1px solid;}
  
    .fullSpan .srvSummary{text-align:; padding-left:17.0px; padding-right:17.0px;}
  
}

/*end responsive tablet and mobile queries*/