:root {
	--min-width: 320px;
    --max-width: 1440px;

	--black: #000000;
	--blue: #255c99;
	--dkblue: #141b4d;
	--ltblue: #87BCDE;

	--white: #ffffff;
	--off-white: #f1f1f1;
	--red: #d91b00;
	--green: #609b4a;
	--drkgreen: #344d39;
	--btn-green: #319b42;
    --orange: #f38800;
    --orange-shade: #e3ae69;
	--yellow: #efbf41;

	--gray: #707070;
	--ltgray: #f0f0f0;
	--gray-text: #6d6d6d;

	--link: #dee6ef;
	--border-shading: #c0c0c0;
}

html, body {
    height:100%;
    margin: 0 auto;
    padding: 0;
    line-height:1.2;
    min-width:var(--min-width);
    max-width: var(--max-width);
    width: 100%;
	font-size: 14px;
	font-family: Poppins, sans-serif;
}
body { overflow-x:hidden; }

h1, h2, h3, h4, h5 { 
	padding: 0; 
	margin: 0; 
	font-size: inherit;
	text-align: inherit;
	color: inherit;
	font-weight: 600;
}

h1 { color: var(--green); text-align: center; }

sup { font-size: .5em; top: -1em; padding: 0 3px; }

.desktop { display: none !important; }
.center { text-align: center; }
.left { text-align: left; }
.inline { display: inline; }

.grid { 
    display: grid; 
	align-items: center;
    justify-content: space-evenly;
}

.grid.col1,
.grid.col2,
.grid.col3, 
.grid.col4 { grid-template-columns: repeat(1, auto); } 

.flex { display: flex; }

img { display: block; max-width: 100%; height: auto; }

img.responsive {
	width: 40vw;
	min-width: 300px;
	margin: 0 auto;
}

.tcpa { color: var(--gray-text); }

a,a:focus,a:hover, 
a:link, a:visited { 
	white-space: nowrap; 
	color: var(--blue); 
	text-decoration: none; 
	color: inherit; 
}

a.phone { 
	position: relative;
	font-weight: 900;
    display: inline-block;
	font-size: 2.5em;
    color: var(--green);
}

a.phone::before {
	content: '';
	display: inline-block;
	height: 25px;
	width: 25px;
	position: relative;
	-webkit-mask-image: url('../img/phone.svg');
	mask-image: url('../img/phone.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--btn-green);
	margin-right: 3px;
}

header, section, footer {
	min-width: var(--min-width);
	max-width: var(--max-width);
	width: 100%;
	margin: 0 auto;
}

header {
	background-color: var(--ltgray) !important;
    font-size: 13px;
    text-align: center;
	/*padding: 10px;*/
}

header div.inline strong { display: block; }
header.sticky div.inline {  display: none; }
header.sticky a.phone { margin: 5px auto; }

header img.logo {
	min-width: 190px;
	width: 60vw;
	max-width: 290px;
	margin: 0 auto;
}

header div.inline { 
	display: block;
	font-size: 1.5em;
	/* line-height: 1.4em;  */
	margin: 5px auto;
}

/* header a.phone { font-size: 2.5em; } */

header > .grid { margin: 0 10px; }

header sub {
	white-space: nowrap;
	font-weight: 600;
	line-height: normal;
    color: var(--blue);
    display: block;
    font-size: 1em;
}

ol.inline,
ul.inline { display: inline-block; margin-left: -25px; }

ol.inline > li,
ul.inline > li { 
	float: left; 
	margin: 0 25px;
	padding: 0;
}

.body-content { width: 100%; margin: 0 auto; }

section { 
	padding: 10px 10px; 
	text-align: left; 
	color: var(--dkblue);
}

section.hero .border.arrow img.hero {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

section.hero .content { width: 100%; }
section.hero a.phone { font-size: 2.3em; }

section > .margins {
	margin-left: 5px !important;
	margin-right: 5px !important;
}

section h2 { 
	color: var(--green); 
	text-align: center;
}

div.timer-container {
    position: relative;
    font-size: 1em;
    text-align: center;
    padding:12px;
    background-color: var(--red);
    color: var(--white);
}

div.timer-container div.timer { display:inline; font-weight:800; }

section.content > .grid > .desktop .logo {
	max-width: 50%;
	margin: 0 auto;
	margin-top: 80px;
}

section.content a.phone::before {
	width: 30px;
	height: 30px;
}

footer { 
	font-size: .5em;
	padding: 5px 0;
}

/* footer > div {
    margin: 0 auto;
    padding: 15px;
} */

footer .top {
	background-color: var(--blue);
	color: var(--white);
	text-align: center;
	width: 100%;
	margin: 0 auto;
	padding: 15px;
}

footer .top img.logo { 
	width: 80%;
	min-width: 256px;
	max-width: 384px;
	margin: 0 auto;
}

footer .top a { color: var(--link); }
footer .bottom {
	background-color: var(--ltgray);
	text-indent: -15px;
	padding: 15px 25px;
}

.thank-you { font-size: 1em; margin-top: 20px; }
.thank-you h2 {
	color: var(--drkgreen) !important;
	font-size: 1.5em;
	font-weight: 900 !important;
}

section.bugs > .margins {
	border-top: 2px solid;
	border-bottom: 2px solid;
	padding: 20px 0;
	/* padding: 50px 0; */
}

section.bugs .grid {
	grid-template-columns: repeat(auto-fit, minmax(350px, auto));
	/* grid-template-columns: repeat(auto-fit, minmax(200px, auto)); */
	/*justify-content: space-between;*/
	justify-content: center;
	justify-items: center;
}

section.bugs h2 { color: var(--drkgreen); font-size: 1.5em; }

section.bugs .bug {
	width:221px;height:239px;
	display:inline-block;
	position: relative;
	margin: 10px;
}

section.bugs .bug.ants { background:url('../img/sprite-bugs.png') 0px -0px; }
section.bugs .bug.mice { background:url('../img/sprite-bugs.png') -221px -0px; }
section.bugs .bug.roaches { background:url('../img/sprite-bugs.png') -442px -0px; }
section.bugs .bug.spiders { background:url('../img/sprite-bugs.png') -663px -0px; }

section.bugs .bug::after {
	position: absolute;
	bottom: -20px;
	text-align: center;
	color: var(--drkgreen);
	font-weight: 800;
	font-size: 1.2em;
	width: 100%;
}

section.bugs .bug.ants::after { content: 'Ants'; }
section.bugs .bug.mice::after { content: 'Rodents'; }
section.bugs .bug.roaches::after { content: 'Cockroaches'; }
section.bugs .bug.spiders::after { content: 'Spiders'; }

@media only screen and (min-width:320px) {
	body { font-size: calc(12px + 1vw); }
	div.timer-container { font-size: 4.4vw; }
}

@media only screen and (min-width:640px) {
    /*body { font-size: 25px; }*/

	.mobile { display: none !important; }
	.desktop { display: block !important; }
	.flex.desktop { display: flex !important; }
	.grid.desktop { display: grid !important; }

	.flex { flex-direction: row; }
	header.sticky div.inline { display: block; }
	header.sticky a.phone { margin: 0 auto; }
	header .grid { 
		justify-content: space-between; 
		grid-template-columns: repeat(2, auto) !important;
	}

	div.timer-container { font-size: 4vw; }
	.grid.col2 { grid-template-columns: repeat(2, 1fr); }
    .grid.col4 { grid-template-columns: repeat(2, 1fr); }
	
	section.hero > .grid { grid-auto-flow: dense; justify-items: end; }
	section.hero > .grid > .border { grid-column: 2; }
	section.hero > .grid > .content { grid-column: 1; }
	section.hero .border.arrow img.hero { 
        -webkit-clip-path: none;
        clip-path: none;
    }

    section.hero .border.border.arrow { filter: none; }

	section.bugs h2 { padding: 0 8vw; }
}

@media only screen and (min-width:767px) {
	header > .flex { text-align: right; }
}

@media only screen and (min-width:900px) {
	section > h2 { text-align: center; font-size: 1.3em; }
	section > * { max-width: none; }
	section.hero .content {
		grid-column: 1;
		font-size: 1em;
	}
	section.bugs h2 { padding: 0 18vw; }

	section.bugs .bug::after { font-size: .8em; }
}

@media only screen and (min-width:1000px) {
	section.bugs .grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media only screen and (min-width:1100px) {
	div.timer-container { font-size: 3.3em; }
}

@media only screen and (min-width:1400px) {
    body { font-size: 26px; }
    .grid.col3 { grid-template-columns: repeat(3, 1fr); }
    .grid.col4 { grid-template-columns: repeat(4, 1fr); }
    .grid.col4 p { font-size: .5em; }
	section.bugs h2 { padding: 0 360px; }
	section.bugs .grid { grid-template-columns: repeat(4, 1fr); }
}