/* 87pestspray Stylesheet */
/* Responsive mobile and desktop */
/* Colors
#262626; Dark Gray Text = Almost Black
#008000; Dark Green
#8cd9b3; Flat Light Green
*/
*{ /* General Format */
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans', sans-serif, arial;
	font-size: 16px; /* best min size for Apple */
	color: #262626; /* Almost Black */
}
body {
	background: none;
}
.wrapper { /* page container */
	border: solid black 1px; /* Body Border */
	width: 350px;
	padding: 5px;
	margin-bottom: 10px;
}
header {
	/* border: solid red 1px;  Header Border */
	background: none;
}
main {
	/* border: solid red 1px;  Main Border */
	background: none;
}
nav {
	/* border: solid blue 1px;  Nav Border */
}
nav ul {
	list-style-type:none;
	border: solid black 1px; /* Mobile UL Border */
	background: white;
	width: 240px;
	margin:0;
	margin-top: 10px;
	padding: 0;
	padding: 2px 0px 2px 2px;
    position: absolute; /* postion in relation to parent */
	z-index: 5; /* Menu Floats Above Page */
}
nav li {
	float: left;
    margin-right: 1px;
}
nav li a{
	border: solid black 1px; /* Navigation Button Border */
	display: block;
	margin: 2px;
	width: 230px;
    height: 35px;
	padding: 1px;
    text-align: center;
    line-height: 35px;
	background: #008000; /* Green #206040;Dark Nav Button */
	color: white;
    text-decoration: none;
}
nav li a:hover{
	background: #009900; /* #2d8659; Light Green button */
	color: #0d261a; /* Dark Green Hover Text */
}
section {
	border: solid black 1px;  /* Section Borders */
	 /* background: #fff2cc; Light Yellow-Orange */
	position: relative;
	margin-top: 2px;
	padding-top: 7px;
	height: 165px; /* Was 160px */
	overflow: hidden;
}
section a { /* Section URL Links */
	text-decoration: none;
	background: #fff2cc;  /* Section links back Yellow-Orange #e6e6e6;-Gray */
	color: #003300; /* Very Dark Green */
}
section a:hover {
	background: #ff6600; /* Dark Orange URL Hover */
	color: white; /* Hover text - white */
}
section h3 {
	font-size: 1.2rem;
}
section p {
	text-align: justify;
	margin-left: 5px;
	margin-right: 3px;
}
section a .btnDiv {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 12px;
	font-weight: bold;
	padding-top: 3px;
	padding-bottom: 4px;
}
section a .btnDiv:hover {
	background-color: #ff8533; /* Hover Dark Orange */
	color: white;
}
section a .btnDiv:focus {
	background-color: #ff8533; /* Hover Dark Orange */
	color: white;
}
/* Class Items */
.btnDiv {/* a div that looks like a button */
    display:inline-block;
	background: #e6e6e6; /* #dddddd; gray */
	border: 1px solid #999999; /* #CCC; gray */
	border-radius: 3px;
	padding: 2px 5px 2px 5px;
	text-align:	center;
	cursor: pointer;
    /* Div looks like a Button
	color: #262626;      /  Almost Black  /
	vertical-align:middle;
	max-width: 100px;
	box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
	Fake Button */
}
.btnDiv:hover {
	background-color: #ff8533; /* Hover Dark Orange */
	color: white;
}
.btnDiv:focus {
	background-color: #ff8533; /* Hover Dark Orange */
	color: white;
}
.callme {
	width: 99.5%; /* 344px; */
	border: solid black 1px; /* Call My Number Border */
	margin-top: 2px;
	margin-bottom: 3px;
	background: #ff6600; /* Call Me: Background Dark Orange */
	line-height: 23px;
	display: inline-block;
}
.callme span {
	display: none;
}
.callme a {
	text-decoration: none;
	color: #ffffff;
}
.callme a:hover {
	background-color: #ff8533; /* Hover Call Me Light Orange */
	color: #003300; /* Extra Dark Green Text */
}
.copyright {
	/* border: solid black 1px;  Copyright Border */
	/* background: #e6e6e6;  Light Gray Background */
	padding-bottom: 4px;
	margin-bottom: 3px;
}
.copyright a {
	text-decoration: none;
	color: #003300; /* Extra Dark Green Text */
	font-size: 75%;
}
.copyright a:hover {
	color: #008000; /* Green Hover Text */
	font-weight: bold;
}
/* About Page */
.imglocal {
	 background-color: #f2f2f2;
	/* border: 1px solid black; */
	width: 311px;
	height: 79px;
}
.imglocal > a {
	background-color: #f2f2f2;
}
.imglocal > a > img{
	width: 74px;
	height: 75px;
}
.imglocal > a:hover {
	background-color: #ecf9f2;
}
.imglocal > a > img:hover {
	background-color: #b3e6cc;
}
/* FAQ Page */
.Qah3 {
	display: inline-block;
	margin-bottom: 4px;
}
.QaImgDiv {
	position: absolute;
	display: inline-block;
	width: 40px;
	height: 36px;
	top: 0px;
	left: 5px;
}
.QaImgDiv  > img {
	height: 37px;
	width: 35px;
}
.coupondiv {
	background-color: #ccffcc; /* very Light Green */
	border-radius: 5px;
	border: black 1px dashed;
	margin-left: 2px;
	margin-right: 2px;
}
.coupondiv:hover {
	background: lightgray; /* hover coupon background */
	color: Blue; /* Hover Dark Orange */
}
.coupondiv h3 {
	font-size: 21px;
	font-weight: bold;
	margin-top: 3px;
}
.coupondiv  h4 {
	font-size: 18px;
	font-weight: normal;
	font-stretch: condensed; /* Makes Arial Narrow */
	margin: 2px 0 2px 0;
}
.coupondiv  img {
	width: 335px;
	height: 100px;
}
.coupondiv  img:hover {
	background-color: #99ff99; /*#ccffcc; /* #cccc00;  Grayish Yellow was lightgray */
}
.coupondiv .btnDiv {
	position: absolute;
	bottom: 7px;
	right: 9px;
	font-size: 12px;
	font-weight: bold;
	padding-top: 3px;
	padding-bottom: 4px;
}
.coupondiv .couponTerms {
	/* border: 1px solid black; */
	position: absolute;
	text-align: left;
	bottom: 22px;
	right: 10px;
	width: 228px;
	font-family: serif;
	font-size: 12px;
	font-style: italic;
}
.socialdiv {
	/*border: 1px solid black;  Social Media Border */
	padding: 1px;
}
.socialimg {
	width: 92%;
}
/* Contact Form */
.h3contact {
	font-size: 20px;
	font-weight: bold;
	color: #262626; /* Almost Black */
	padding: 5px;
	padding-top: none;
	padding-bottom: 5px;
}
.divcontact {
	/* border: 1px solid black; for Layout */
	/* background-color: yellow; */
	position: relative;
	width: 99%;
	margin-top: 2px;
	padding-top: 3px;
	overflow: hidden;
}
.divcontact > div {
	border: 1px solid black;
	border-radius: 5px;
	background-color: darkgreen;
	width: 315px;
	height: 500px;
	display: inline-grid;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-bottom: 3px;
}
.fakeForm { /* Fake Clone Form Container */
	/* border: 2px groove black; */
	background-color: #b3e5cd; /* Flat Light Green */
	color: #262626; /* Almost Black */
	display: initial;
	padding: 7px;
	padding-left: 5px;
	padding-right: 5px;
}
.fakeForm > h3 {
	font-size: 20px;
	font-weight: bold;
	color: #262626; /* Almost Black */
	padding: 5px;
	padding-top: none;
	padding-bottom: 8px;
}
.frmRequired {
	/* background-color: yellow;  for layout */
	color: red; /* All Fields Required */
	font-size: 14px;
	font-weight: bold;
	padding-top: 7px;
	padding-bottom: 7px;
}
.frmContact { /* Form Container */
	/* border: 2px groove black; */
	background-color: #b3e5cd; /* Flat Light Green */
	display: initial;
	padding: 7px;
}
.frmContact > label { /* Input Labels */
	color: #262626; /* Almost Black */
	display: block;
	padding: 5px;
}
.txtContact { /* Form input box */
	width: 272px;
	height: 25px;
	border-radius: 5px;
}
.txtContact:focus {  /* Form input box */
	background-color: #ffffcc;
}
.txtContact:hover {  /* Form input box */
	background-color: #ffffcc;
}
.selContact { /* Select Dropdown box */
	border-top: 2px inset #f5f5f0;
	border-left: 2px inset #f5f5f0;
	width: 272px;
	height: 30px;
	border-radius: 5px;
}
.selContact:focus {  /* Select Dropdown box */
	background-color: #ffffcc;
}
.selContact:hover {  /* Select Dropdown box */
	background-color: #ffffcc;
}
.humantest {
	position: relative;
	display: block;
	width: 250px;
	height: 35px;
	padding-top: 3px;
}
.humantest > img { /* Dice Picture */
	height: 33px;
	position: relative;
	display: inline-block;
	left: -15px;
}
.addDice { /* Dice Input */
	width: 60px;
	height: 30px;
	border-radius: 5px;
	position: relative;
	display: inline-block;
	top: -12px;
	right: -15px;
}
.addDice:focus {  /* Select Dropdown box */
	background-color: #ffffcc;
}
.addDice:hover {  /* Select Dropdown box */
	background-color: #ffffcc;
}
.callus > a > img {
	width: 280px;
}
.callus {
	width: 281px;
	color: #262626; /* Almost Black */
	font-size: 18px;
	font-weight: bold;
}
.callus :hover {
	background-color: #ccff99; /* Light Green */
}
.callus :focus {
	background-color: #ccff99; /* Light Green */
}
.contactlogo {
	width: 281px;
	color: #262626; /* Almost Black */
	font-size: 22px;
	font-weight: bold;
	padding-top: 10px;
}
.contactlogo > a > img {
	height: 50px;
}
.contactlogo > a:hover {
	background-color: #ffffcc; /* Light Yellow */
}
.contactlogo > a:focus {
	background-color: #ffffcc; /* Light Yellow */
}
/* Contact By Social Media */
.contactsocial {
	/* background-color: yellow; for Layout */
	width: 279px;
	text-align: left;
}
.contactsocial > a > img {
	width: 273px;
	border: 3px solid black;
}
.contactsocial > a:hover {
	background-color: #ccff99; /* Light Green */
}
.contactsocial > a:focus {
	background-color: #ccff99; /* Light Green */
}
.mail2us {
	width: 281px;
	color: #262626; /* Almost Black */
	font-size: 18px;
	font-weight: bold;
}
.mail2us > img {
	width: 280px;
}
#errmsg {
	color: red;
	font-weight: bold;
}
/* Message Page */
.divmessage {
	/* border: 1px solid black;for Layout */
	/* background-color: yellow; for Layout */
	position: relative;
	width: 98%;
	margin-top: 2px;
	padding: 2px;
	overflow: hidden;
}
.divmessage > div {
	border: 1px solid black;
	border-radius: 5px;
	background-color: darkgreen;
	width: 99%;
	height: 500px;
	display: inline-grid;
	padding-top: 7px;
	padding-bottom: 7px;
}
.msgdisplay {
	/* border: 2px groove black; */
	background-color: #b3e5cd; /* Flat Light Green */
	color: #262626; /* Almost Black */
	display: initial;
	width: 92%;
	padding: 5px;
	padding-top: 15px;
}
.msgdisplay > h3 {
	font-size: 20px;
	font-weight: bold;
	color: #262626; /* Almost Black */
	padding: 5px;
	padding-top: none;
	padding-bottom: 13px;
}
.msgdisplay > div > a {
	text-decoration: none;
}
.msgdisplay > div > h3 {
	/* background-color: yellow; For Layout */
	border-bottom: 3px solid black;
	font-size: 20px;
	font-weight: bold;
	color: #262626; /* Almost Black */
	width: 120px;
	padding: 2px;
	padding-bottom: 1px;
	margin-bottom: 20px;
}
.btnMessage { /* Message Page Link Buttons */
	border: 3px solid black;
	background-color: #ff6600; /* Dark Orange */
	font-weight: bold;
	color:#262626; /* Almost Black */
	width: 230px;
	padding-top: 7px;
	padding-bottom: 7px;
}
.btnMessage:hover {
	background-color: #ff8533; /* Hover Call Me Light Orange */
}
.btnMessage:focus {
	background-color: #ff8533; /* Hover Call Me Light Orange */
}
#idmessage {
	border: 1px solid black;
	background-color: #ffffcc; /* Light Orange Yellow */
	border-radius: 5px;
	width: 90%;
	max-width: 420px;
	height: 100px;
	padding: 5px;
	padding-top: 10px;
	overflow: hidden;
}
/* Navigation Pest Menu Page */
.divNaviMap { /* Navigation Menu Containers */
	/* border: 1px solid black;  Remove Borders */
	/* background-color: #ffffcc;  Light Orange Yellow */
	text-align: left;
	overflow: hidden;
	position: realtive;
	width: 330px;
	height: 108px;
}
.divNaviMap > ul { /* Unordered List on Menu Nav Page */
	/* border: 1px solid black;  Remove Borders */
	background-color: #ffffff; /* white */
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-top: 3px;
	padding-left: 3px;
	width: 226px;
	height: 98px;
	position: absolute;
	display: inline-block;
	top: 33px;
	left: 103px;
}
.divNaviMap > ul > li {
	border: 2px solid black; /* Keep - Border around Menu Button */
	background-color: #ff6600; /* Dark Orange */
	width: 93%;
	text-align: center;
	margin-bottom: 3px;
}
.divNaviMap > ul > li > a {
	background-color: #ff6600; /* Dark Orange */
	display: inline-block;
	width: 99.5%;
	font-size: 15px;
	color: white;
}
.divNaviMap > ul > li > a:hover {
	background-color: #ff8533; /* Hover Call Me Light Orange */
	color: #262626; /* Almost Black */
	font-size: 16px;
}
.divNaviMap > ul > li > a:focus {
	background-color: #ff8533; /* Hover Call Me Light Orange */
	color: #262626; /* Almost Black */
	font-size: 16px;
}
.divNaviPest { /* maybe image ?? */
	/* border: 1px solid black;  Remove Borders */
	/* background-color: yellow;  yellow #ffffff; white */
	width: 85px;
	height: 90px;
	overflow: hidden;
	position: absolute;
	display: inline-block;
	top: 33px;
	left: 13px;
	padding-top: 10px;
}
.divNaviPest:hover {
	background-color: #ff8533; /* Hover Call Me Light Orange */
}
.divNaviPest:focus {
	background-color: #ff8533; /* Hover Call Me Light Orange */
}
.divNaviPest > img {
	/* border: 1px solid black;  Remove Borders */
	width: 82px;
}
.divNaviPest > img:hover {
	background-color: #ff8533; /* Hover Call Me Light Orange */
}
.divNaviPest > img:focus {
	background-color: #ff8533; /* Hover Call Me Light Orange */
}
.divLogo { /* Container for Logo Image */
	/* background: #f2f2f2; Super Light Gray @ Logo */
	width: 145px;
	height: 52px;
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 4px;
	z-index: -1;
}
.divLogo img { /* Actual Logo Image */
	width: 143px;
	height: 44px;
}
.footerNav {
	border: solid black 1px;  /* Footer Nav Buttons Border */
	/* background: #f2f2f2; Super Light Gray; */
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 2px;
	display: flex; /* Footer Nav Links */
	flex-direction: row; /* Footer Nav Links */
}
.footerNav a {
	text-decoration: none;
}
.footBtn {
	background: #008000; /* Green #206040; Dark Footer Nav Buttons */
	color: white; /* Footer Button text */
	width: 90px;
	padding: 5px;
	margin-right: 5px;
}
.footBtn:hover {
	background: #00b300; /*#b3e5cd; /*#2d8659; #009900; Light Green Hover Nav Buttons */
	color: #0d261a; /* Dark Green Button Text on Hover */
}
.footBtn:focus {
	background: #00b300; /* Lighter Green Hover Nav Buttons (#009900;) */
	color: #0d261a; /* Dark Green Button Text on Hover */
}
.hbmenu { /* container for Hamburger Icon */
	border: solid black 1px; /* Menu Button Container */
	background: #008000; /* Green #206040; Dark Background Menu Bar */
	position: relative;
	text-align: left;
}
.hbmenu div label {
	font-family: system-ui, sans-serif;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
}
.navHead {
	/* background: lightgray; */
	height: 60px;
	position: relative;
	padding-right: 2px;
	white-space: nowrap;
}
.navHead h1 { /* Primary H01 Heading */
	/* background: #f2f2f2;    H01 Background Super Light Gray */
	width: 200px;
	font-size: 1.5rem;
	font-stretch: condensed; /* Makes Arial Narrow */
	padding: 4px 0 3px 0;
	position:absolute;
	top: 0;
	left: 0;
	/* overflow: hidden; */
	white-space: nowrap;
}
.navHead h2 { /* Secondary H02 Heading */
	/* background: #f2f2f2;  H02 Background Super Light Gray */
	width: 200px;
	font-size: 1.0rem;
	font-stretch: semi-condensed; /* Makes Arial Narrow */
	font-weight: bold;
	padding: 1px 0 3px 0;
	position:absolute;
	bottom: 0;
	left: 0;
	/* overflow: hidden; */
	white-space: nowrap;
}
.timeDisplay {
	background: black;
	color: red;
	padding: 5px;
}
/* ID # Items */
#ulMenu { /* Mobile Screen starts with Menu Hidden */
	display: none;
}
#chkToggle { /* the checkbox is barely visible */
	margin-right: 25px;
	opacity: 0.2; /* prob really want 0.05 */
}
#chkToggle:checked + #ulMenu {
		display: block; /* Checkbox toggles menu on mobile screen */
}
/* Desktop Styles when the screen width exceeds 650px */
@media only screen and (min-width: 650px) {             /* Desktop */
	.wrapper { /* Site Wrapper Container - Desktop */
		max-width: 662px;
		min-width: 660px;             /* Desktop */
	}
	main { /* Main Container for Sections - Desktop */
		display: flex; /* Sections in Main */
		flex-direction: row; /* Sections in Main */
		flex-wrap: wrap; /* Sections in Main */
		height: 530px;
	}
	nav ul { /* Menu orientation -> inline Across - Desktop*/
		width: 98.1%;
		border: none;
		border-top: solid black 2px; /* Desktop UL Border */
		border-bottom: solid black 2px; /* Desktop UL Border */
		position: relative;
		margin: auto;
		padding: 2px 5px 2px 1px;
		z-index: auto;
		/* display: flex; **See ID Below **/
	}
	nav ul li a{  /* Menu Buttons on Full Size - Desktop */
		width: 101px;
		border: solid black 1px; /* Navigation Border */
		margin: 0;
		padding: 0;
	}
	section {  /* Section Containers for Main - Desktop */
		width: 320px;
		height: 160px;
	}
	section img {
		width: 320px;             /* Desktop */
	}
	section img:hover {
		background: #009900; /* Light Green Hover */
	}
	section p {       /* Paragraph in Section - Desktop */
		font-size: 93%;
	}
	/* Class Items */
	.btnDiv:hover {
		background-color: #ff8533; /* Hover Dark Orange */
		color: white;             /* Desktop */
	}
	.btnDiv:focus {
		background-color: #ff8533; /* Hover Dark Orange */
		color: white;
	}
	.callme {             /* Desktop */
		width: 98.2%;
		border: solid black 2px; /* Call Me Border */
		margin-bottom: 2px;
	}
	.callme span {
		display: initial;             /* Desktop */
	}
	.coupondiv  img {
		width: 310px;             /* Desktop */
		height: 93px;
	}
	.coupondiv .btnDiv {
		bottom: 11px;             /* Desktop */
		right: 5px;
	}
	.coupondiv .couponTerms {
		/* border: 1px solid black; */
		bottom: 28px;
		right: 4px;             /* Desktop */
		width: 213px;
	}
/* Contact Bid Form Page */
	.divcontact {
		height: 517px; /* Mobile **this** will need to be double height */
	}
	.divcontact > div {
		margin-bottom: 0px;             /* Desktop */
	}
/* Message Page */
	.divmessage { /* Yellow Testing */
		/* background-color: yellow;  for Layout */
		padding-bottom: 0px;
	}
	.msgdisplay { /* Flat Light Green */
		width: 95%;             /* Desktop */
	}
/* Menu Navigation Page */
	.divNaviMap { /* Navigation Menu Containers */
		width: 312px;
		height: 108px;             /* Desktop */
	}
	.divNaviMap > ul {
		width: 216px;
		top: 33px;             /* Desktop */
		left: 90px;
	}
	.divNaviPest { /* maybe image ?? */
		width: 80px;
		height: 90px;             /* Desktop */
		top: 33px;
		left: 6px;
		padding-top: 10px;
	}
	.divNaviPest > img {
		width: 78px;             /* Desktop */
	}
/* Logo Image - desktop */
	.divLogo {  /* Container for Logo Image -Desktop */
		width: 344px;
		height: 100px;             /* Desktop */
		padding-top: 1px;
	}
	.divLogo img {      /* Actual Logo Image - Desktop*/
		width: 340px;
		height: 94px;             /* Desktop */
	}
	.hbmenu { /* Menu container **HB Icon** */
		border: solid white 1px; /* Menu Button Container */
		background: white;
	}
	.navHead {  /* Heading & Nav Container - Desktop */
		height: 101px;
	}
	.navHead h1 {     /* Primary H01 Heading - Desktop*/
		width: 310px;
		font-size: 2.3rem;
		padding: 10px 0 5px 0;             /* Desktop */
	}
	.navHead h2 { /* Secondary H02 Heading */
		width: 310px;
		font-size: 1.5rem;             /* Desktop */
		padding: 6px 0 6px 0;
	}
	.socialimg {
		width: 99%;             /* Desktop */
	}
	/* ID # Items */
	/* Hide the menu icon & checkbox label */
	#chkToggle, #btnToggle { /* hide the Button, Hamburger, and Checkbox */
		display: none;              /* Desktop */
	}
	#ulMenu { /* Display the Desktop Menu */
		display: flex;             /* Desktop */
		flex-direction: row;
	}
} /* End of Media Desktop Screen */