@charset "utf-8";
/* CSS Document */


/* GLOBAL PROPERTIES */

* {
	box-sizing: border-box;
}

/* LAYOUT */

html, body {
	overflow-x: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: transparent;
}

section {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

.width-container {
	display: grid;
	max-width: 1224px;
	height: inherit;
	margin: 0 auto;
	padding: 0 48px;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-column-gap: 24px;
	grid-auto-rows: max-content;
	grid-row-gap: 0px;
	position: relative;
}

.full-col {
	position: relative;
	height: inherit;
	width: 100%;
	grid-column: 1 / -1;
}

.left-col {
	position: relative;
	height: inherit;
	width: 100%;
	grid-column: 1 / 7;
}

.right-col {
	position: relative;
	height: inherit;
	width: 100%;
	grid-column: 7 / -1;
}

/* TEXT PROPORTIONS */

h1, h2, h3, h4, p, a, label, input, .nav-button p, li, figcaption, tr, th, td {
	font-family: myriad-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin: 0;
}

h1.special {
	font-size: 5.625em;
	line-height: 97.77777777777778%;
}

h1.xl {
	font-size: 4em;
	line-height: 100%;
}

h1 {
	font-size: 2.8125em;
	line-height: 106.6666666%;
}

h2 {
	font-size: 2em;
	line-height: 125%;
}

h3 {
	font-size: 1.5em;
	line-height: 133.333333333%;
}

p {
	font-size: 1em;
	line-height: 150%;
}

p.caption {
	font-size: .75em;
	line-height: 133.3333333333%;
}

h3 a {
	display: inline;
	text-decoration: underline;
	color: inherit;
}

/* TEXT POSITIONING */

.heading-top {
	margin: 14px auto 0 auto;
	text-align: center;
}

.subheading-top {
	margin: 13px auto 0 auto;
	text-align: center;
}

/* COLOR VARIABLES */

:root {
	--abra-black: #292F33;
}

:root {
	--abra-gray: #8f989f;
}

:root {
	--abra-light-gray: #dae0e6;
}

:root {
	--abra-primary: #005b9f;
}

:root {
	--abra-primary-hover: #00467a;
}

:root {
	--abra-primary-light: #d9edff;
}

:root {
	--abra-primary-white: #f2f9ff;
}

:root {
	--abra-secondary: #d2232a;
}

:root {
	--abra-secondary-hover: #a31b21;
}

/* SECTION TYPES */

.full-hero {
	height: 720px;
	width: 100%;
}

.half-hero {
	height: 360px;
	width: 100%;
}

.flexible-hero {
	height: auto;
	width: 100%;
}

/* BUTTONS */

.button-red {
	background-color: var(--abra-secondary);
	border: none;
	color: var(--abra-light-gray);
	border-radius: 4px;
	box-shadow: 0px 3px 6px #00000080;
	cursor: pointer;
}

.button-red:hover, .button-red:active {
	background-color: var(--abra-secondary-hover);
	color: white;
}

.schedule-now-button {
	width: 136px;
	height: 44px;
	position: fixed;
	z-index: 9999999;
	bottom: 24px;
	right: 24px;
}

.schedule-now-button p, .call-us-button p {
	text-align: center;
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
}

.call-us-button {
	display: none;
}

/* NAV BAR */

header {
	background-color: var(--abra-primary);
	height: 80px;
	width: 100%;
	color: var(--abra-primary-white);
	box-shadow: 0px 3px 6px #00000080;
}

.logo {
	height: 64px;
	width: auto;
	grid-column: 1 / 3;
	position: relative;
	top: 16px;
}

ul {
	list-style: none;
	padding: 0;
}


.nav {
	display: flex;
}

.page-nav {
	grid-column: 3 / 9;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

a {
	display: block;
	text-decoration: none;
}

ul.page-nav li a {
	margin-right: 64px;
	color: var(--abra-light-gray);
	text-align: center;
}

ul.page-nav li a:hover, ul.page-nav li a:active  {
	color: white;
}

.social-nav {
	grid-column: 9 / 11;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	margin-right: 8px;
	padding: 0;
}

a i {
	display: block;
}

ul.social-nav i {
	font-size: 1.5em;
	margin: 0 16px 0 16px;
	color: var(--abra-light-gray);
}

ul.social-nav i:hover, ul.social-nav i:active {
	color: white;
}

.nav-button {
	grid-column: 11 / 13;
	background-color: var(--abra-secondary);
	border: none;
	color: var(--abra-light-gray);
	width: 100%;
	margin: 18px auto;
	height: 44px;
	border-radius: 4px;
	box-shadow: 0px 3px 6px #00000080;
	cursor: pointer;
}

.nav-button:hover, .nav-button:active {
	background-color: var(--abra-secondary-hover);
	color: white;
}

.nav-button p {
	float: left;
	font-size: 16px;
	margin-left: 16px;
	margin-top: 8px;
}

.nav-button i {
	float: left;
	font-size: 24px;
	margin-left: 20px;
	margin-top: 8px;
}

#burger-menu {
	display: none;
	cursor: pointer;
}

div.burger-slice {
	width: 40px;
	height: 4px;
	border-radius: 4px;
	background-color: var(--abra-primary-white);
}

div.burger-menu-nav {
	display: none;
}

ul.burger-nav {
	display: flex;
	width: 100%;
	height: 136px;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0;
}

ul.burger-nav li {
	width: 100%;
}

ul.burger-nav li a {
	color: var(--abra-primary);
	text-align: right;
}

ul.burger-nav li a:hover {
	color: var(--abra-primary-hover);
}

/* GENERAL */

#home-hero {
	color: var(--abra-black);
	background-image: linear-gradient(to right, rgba(242, 249, 255, .75), rgba(242, 249, 255, .05)), url("images/pictures/homepage-hero-img-l.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

#hero-heading {
	text-align: left;
	margin: 14px 0 0 0;
	width: 395px;
}

#hero-subheading {
	margin: 13px 0 0 0;
	width: 400px;
	text-align: left;
}

.hero-text {
	width: 480px;
	position: absolute;
	bottom: 18px;
}

.usp-header {
	background-color: var(--abra-gray);
	width: 100%;
	height: 240px;
	margin: 0;
	padding: 0;
	color: var(--abra-primary-white);
	text-align: center;
	position: relative;
}

#usp-subheading {
	margin-top: 21px;
	width: 552px;
}

.usp-cards {
	background-color: #FFFFFF;
	width: 100%;
	height: 560px;
	position: relative;
}

.usp-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--abra-primary-white);
	height: 496px;
	border-radius: 12px;
	margin: 32px 0;
}

.card1 {
	grid-column: 1 / 5;
}

.card2 {
	grid-column: 5 / 9;
}

.card3 {
	grid-column: 9 / 13;
}

i.usp-exit {
	display: none;
}

.usp-card-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.usp-gr {
	height: 120px;
	margin: 32px auto 30px auto;
}

.usp-card-heading {
	text-align: center;
	font-weight: 700;
	margin: 0 auto;
	width: 216px;
}

.usp-card-divider {
	width: 256px;
	margin: 24px auto 16px auto;
	color: var(--abra-gray);
}

.usp-card-text {
	width: 256px;
	text-align: left;
	margin: 0 auto;
	color: var(--abra-gray);
}

.usp-arrow {
	display: none;
}

.services {
	width: 100%;
	height: 800px;
	background-color: var(--abra-light-gray);
}

#services-heading {
	grid-column: 1 / -1;
}

.file-tab {
	height: 112px;
	border-radius: 12px 12px 0px 0px;
	margin-top: 29px;
	color: var(--abra-light-gray);
	border: none;
	text-align: left;
	position: relative;
	background-color: var(--abra-gray);
	z-index: 0;
	cursor: pointer;
}

.file-tab:hover, .file-tab:active {
	background-color: var(--abra-black);
}

.active-tab {
	background-color: var(--abra-primary);
	z-index: 1;
}

.active-tab:hover {
	background-color: var(--abra-primary);
}

.tab1 {
	grid-column: 1 / 4;
}

.tab2 {
	grid-column: 4 / 7;
}

.tab-heading {
	line-height: 100%;
	position: absolute;
	width: 232px;
	top: 24px;
	left: 16px;
}

.tab-gr {
	height: 48px;
	position: absolute;
	top: 32px;
	left: 192px;
}

.services-card-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	grid-column: 1 / 13;
	margin-top: -12px;
}

div.hidden {
	display: none;
}

.services-img-card {
	flex: 50%;
	height: 564px;
	text-align: center;
	position: relative;
}

.residential-img {
	background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/homepage-residential-img-l.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

.services-subheading {
	width: 456px;
	margin: 24px auto 0 auto;
}

.services-list {
	flex: 50%;
	background-color: #FFFFFF;
	height: 564px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: relative;
}

.services-subheading-small {
	display: none;
}

.circle-service {
	width: 160px;
	height: 160px;
	border-radius: 160px;
	background-color: var(--abra-primary-light);
	box-shadow: 0px 3px 6px #00000029;
	margin: 8px;
	text-align: center;
	cursor: pointer;
}

.circle-service:hover:not(#and-more) {
	background-color: var(--abra-primary-white);
}

.circle-service-gr {
	height: 56px;
	margin: 32px auto 0 auto;
}

.circle-service-text {
	font-weight: 700;
	margin: 8px auto 0 auto;
}

div.enlarged-circle-service {
	display: none;
	width: 528px;
	height: 528px;
	border-radius: 528px;
	background-color: var(--abra-primary-light);
	box-shadow: 0px 3px 6px #00000029;
	text-align: center;
	color: var(--abra-black);
	z-index: 1;
	position: absolute;
	top: 18px;
	left: 20px;
}

div.enlarged-circle-service i.fa-times {
	position: absolute;
	top: 48px;
	right: 128px;
	z-index: 2;
	font-size: 24px;
	color: var(--abra-secondary);
	cursor: pointer;
}

div.enlarged-circle-service i.fa-times:hover {
	color: var(--abra-secondary-hover);
}

h1.enlarged-circle-heading {
	margin: 40px auto 0 auto;
	font-weight: 700;
}

p.enlarged-circle-text {
	width: 368px;
	margin: 8px auto 0 auto;
}

div.b-a-imgs {
	margin: 12px auto 0 auto;
	width: 368px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

div.b-a-imgs figure {
	margin: 0;
}

div.b-a-imgs figcaption {
	font-weight: 700;
}

img.before-img {
	width: 180px;
	height: 240px;
	object-fit: cover;
}

img.after-img {
	width: 180px;
	height: 240px;
	object-fit: cover;
}

a.enlarged-circle-button {
	background-color: var(--abra-secondary);
	border: none;
	width: 192px;
	height: 40px;
	margin: 12px auto;
	padding: 4px 0;
	border-radius: 4px;
	box-shadow: 0px 3px 6px #00000080;
	cursor: pointer;
	text-align: center;
	color: var(--abra-light-gray);
	font-size: 24px;
}

a.enlarged-circle-button:hover, a.enlarged-circle-button:active {
	background-color: var(--abra-secondary-hover);
	color: white;
}

.commercial-img {
	background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/homepage-commercial-img-l.png");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

.commercial-subheading {
	width: 472px;
	margin: 24px auto;
}

.services-img-text {
	width: 468px;
	margin: 0 auto;
}

.commercial-description {
	flex: 50%;
	background-color: #FFFFFF;
	height: 564px;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	position: relative;
}

h3.commercial-description-heading {
	color: var(--abra-primary);
	text-align: center;
	width: 360px;
	margin-top: 32px;
}

div.commercial-description ul {
	list-style: disc outside none;
	width: 300px;
	height: 56px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	margin-top: 32px;
}

div.commercial-description ul li {
	font-size: 1em;
	font-weight: 700;
	color: var(--abra-primary);
}

hr.commercial-divider {
	height: 4px;
	width: 360px;
	border-width: 0;
	margin: 40px auto;
	background-color: var(--abra-primary);
	color: var(--abra-primary);
}

h3.commercial-cta {
	text-align: center;
	color: var(--abra-primary);
}

p.commercial-cta-text {
	text-align: center;
	color: var(--abra-primary);
	width: 300px;
	margin-top: 16px;
}

p.commercial-cta-text a {
	display: inline;
	color: inherit;
	text-decoration: underline;
}

p.commercial-cta-text a:hover, p.commercial-cta-text a:active {
	color: var(--abra-primary-hover);
}

a.commercial-button {
	background-color: var(--abra-secondary);
	border: none;
	color: var(--abra-light-gray);
	width: 360px;
	height: 60px;
	border-radius: 4px;
	box-shadow: 0px 3px 6px #00000080;
	cursor: pointer;
	margin-top: 32px;
}

a.commercial-button:hover, a.commercial-button:active {
	background-color: var(--abra-secondary-hover);
	color: white;
}

a.commercial-button h3 {
	text-align: center;
	margin: 14px auto;
	color: var(--abra-light-gray);
}

section.contact {
	background-color: var(--abra-primary);
	width: 100%;
	height: 800px;
	color: var(--abra-light-gray);
}

#contact-heading {
	grid-column: 1 / -1;
}

.contact-link-flex {
	display: flex;
	grid-column: 3 / -3;
	align-items: center;
	justify-content: space-between;
	height: max-content;
	margin-top: 21px;
}

.contact-link {
	color: var(--abra-light-gray);
	text-align: center;
	width: 188px;
}

.contact-link:hover {
	color: white;
}

.contact-gr {
	font-size: 40px;
	margin-bottom: 8px;
}

.contact-subheading {
	grid-column: 1 / -1;
	text-align: center;
	width: 526px;
	margin: 18px auto 0 auto;
	color: var(--abra-light-gray);
}

p a {
	display: inline;
	color: inherit;
	text-decoration: underline;
}

p a:hover, p a:active {
	color: white;
}

.contact-divider {
	grid-column: 1 / -1;
	height: 4px;
	width: 120px;
	border-width: 0;
	margin: 24px auto;
	background-color: var(--abra-light-gray);
	color: var(--abra-light-gray);
}

.form-subheading {
	grid-column: 1 / -1;
	width: 552px;
	text-align: center;
	margin: 0 auto;
}

.contact-form {
	background-color: var(--abra-primary-light);
	border-radius: 12px;
	grid-column: 3 / 11;
	height: 368px;
	margin: 16px auto 0 auto;
	padding-top: 4px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: flex-start;
	flex-wrap: wrap;
}

label {
	color: var(--abra-black);
}

.form-item {
	margin: 6px 12px;
}

.form-item input[type=text], .form-item input[type=email], .form-item select {
	width: 288px;
	height: 48px;
	padding-left: 16px;
	margin-top: 4px;
	box-sizing: border-box;
	border: 1px solid var(--abra-gray);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1em;
}

select {
	cursor: pointer;
}

.form-message {
	margin: 6px auto;
}

.form-message textarea {
	width: 600px;
	height: 80px;
	padding-left: 16px;
	margin-top: 4px;
	box-sizing: border-box;
	border: 1px solid var(--abra-gray);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.5em;
	resize: none;
}

input[type=submit] {
	background-color: var(--abra-secondary);
	border: none;
	color: var(--abra-light-gray);
	width: 264px;
	height: 48px;
	font-size: 1.5em;
	border-radius: 4px;
	box-shadow: 0px 3px 6px #00000080;
	cursor: pointer;
	margin-top: 4px;
}

input[type=submit]:hover, input[type=submit]:active {
	background-color: var(--abra-secondary-hover);
}

footer {
	max-width: 100%;
	height: 400px;
	background-image: linear-gradient(to right, rgba(41, 47, 51, .94), rgba(41, 47, 51, .94)), url("images/logos/abracadabra-wizard-logo.svg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, auto 256px;
	background-position: center, center;
	color: var(--abra-light-gray);
}

#footer-left-col {
	grid-column: 1 / 8;
}

.footer-contact-info {
	position: absolute;
	top: 14px;
}

#footer-text-contact-us {
	margin-bottom: 16px;
}

.footer-text {
	font-size: 1.5em;
	text-align: left;
	color: var(--abra-light-gray);
}

.footer-text:hover {
	color: white;
}

#footer-nav {
	position: absolute;
	margin: 0;
	bottom: 18px;
}

#footer-nav li a {
	font-size: 1.5em;
	margin: 0 60px 0 0;
	color: var(--abra-light-gray);
}

#footer-nav li a:hover, #footer-nav li a:active {
	color: white;
}

#footer-right-col {
	grid-column: 10 / 13;
	text-align: right;
}

.footer-social-links {
	margin-top: 14px;
	text-align: right;
}

#footer-social-nav {
	font-size: 24px;
	justify-content: flex-end;
	margin-top: 16px;
}

#footer-social-nav i {
	margin-left: 32px;
	color: var(--abra-light-gray);
}

#footer-social-nav i:hover, #footer-social-nav i:active {
	color: white;
}

.copyright {
	position: absolute;
	bottom: 18px;
	right: 0px;
}

/*RESIDENTIAL SERVICES PAGE*/

.res-services-hero {
	color: var(--abra-black);
	background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/res-hero-img.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

h1.res-hero-heading {
	margin: 40px auto 0 auto;
	text-align: center;
}

h2.res-hero-subheading {
	width: 524px;
	margin: 29px auto 0 auto;
	text-align: center;
}

section.residential-service-list {
	height: auto;
	padding: 12px 0;
	width: 100%;
	background-color: var(--abra-primary);
	position: relative;
}

div.res-services-list {
	grid-column: 1 / -1;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

div.service-box {
	width: 360px;
	height: 344px;
	margin: 12px 0;
	background-color: var(--abra-primary-white);
	color: var(--abra-black);
	border-radius: 12px;
}

div.service-thumbnail {
	margin: 16px auto 0 auto;
	width: 312px;
	height: 208px;
	position: relative;
}

img.thumbnail-img {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}

div.thumbnail-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background-color: rgba(217, 237, 255, .25);
}

h2.thumbnail-heading {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 4px;
	font-weight: 700;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
}

svg.open-gallery-arrow {
	width: 24px;
	height: 48px;
	position: absolute;
	top: 80px;
	right: 24px;
	z-index: 10;
	fill: var(--abra-black);
}

svg.open-gallery-arrow:hover {
	fill: black;
}


p.service-box-description {
	width: 312px;
	margin: 8px auto 0 auto;
}

/* OUR WORK PAGE */

section.our-work-hero {
	background-color: var(--abra-primary-white);
	color: var(--abra-black);
	padding: 22px 0 24px 0;
	text-align: center;
}

h1.our-work-hero-heading {
	margin: 0 auto;
	position: relative;
	font-weight: 700;
}

h2.our-work-hero-subheading {
	margin: 13px auto 0 auto;
	width: 694px;
}

a.back-button {
	position: absolute;
	top: 12px;
	left: 24px;
	color: var(--abra-primary);
	width: auto;
	height: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
}

a.back-button p:hover, a.back-button p:active {
	color: var(--abra-primary-hover);
}

img.back-arrow {
	width: 8px;
	height: auto;
	transform: rotate(180deg);
	margin-right: 8px;
}

section.our-work-gallery {
	width: 100%;
	height: auto;
	padding: 20px 0;
	background-color: var(--abra-primary);
}

div.gallery-containers {
	width: 100%;
	grid-column: 1 / -1;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

div.gallery-container {
	width: 552px;
	height: auto;
	color: var(--abra-black);
	background-color: var(--abra-primary-white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 12px 0;
	padding: 16px 0 8px 0;
	border-radius: 8px;
}

div.gallery-container figure {
	padding: 0;
}

figure.bef-fig {
	margin: 0 12px 0 0;
}

figure.aft-fig {
	margin: 0 0 0 12px;
}

div.gallery-container img {
	width: 248px;
	height: 372px;
	object-fit: cover;
}

div.gallery-container figcaption {
	font-size: 1.5em;
	line-height: 100%;
	font-weight: 700;
	text-align: center;
}

h2.coming-soon {
	grid-column: 1 / -1;
	margin: 8px auto 0 auto;
	color: var(--abra-primary-white);
	text-align: center;
}

/* COMMERCIAL SERVICES PAGE */

section.commercial-hero {
	color: var(--abra-primary-white);
	background-image: linear-gradient(to right, rgba(0, 91, 159, .5), rgba(0, 91, 159, .5)), url("images/pictures/com-hero-img.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

#com-hero-subheading {
	width: 524px;
}

h3.com-hero-text {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: 432px;
	text-align: center;
}

section.com-services-description {
	height: 600px;
	background-color: transparent;
	color: var(--abra-black);
	position: relative;
}

div.background-flex {
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	z-index: 0;
	flex-direction: row;
	background-color: transparent;
	align-items: center;
	justify-content: center;
	align-content: center;
}

div.com-description-background-left {
	width: 50%;
	height: 100%;
	background-color: var(--abra-primary-white);
}

div.com-description-background-right {
	width: 50%;
	height: 100%;
	background-image: url("images/pictures/office-interior.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left;
}

h2.com-description-text {
	margin-top: 60px;
	width: 480px;
}

section.com-services-usp {
	height: 800px;
	color: var(--abra-black);
	background-color: transparent;
	position: relative;
}

div.com-usp-background-left {
	width: 50%;
	height: 100%;
	background-image: url("images/pictures/office-carpet.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
}

div.com-usp-background-right {
	width: 50%;
	height: 100%;
	background-color: var(--abra-primary-white);
}

#com-usp-heading {
	width: 480px;
	margin-bottom: 29px;
}

div.com-usp {
	display: grid;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-column-gap: 24px;
	grid-row-gap: 0px;
	position: relative;
}

img.com-usp-gr {
	grid-column: 1 / 2;
	height: 48px;
	width: auto;
	margin: -4px auto 0 auto;
}

h2.com-usp-title {
	grid-column: 2 / -1;
	font-weight: 700;
}

h3.com-usp-text {
	grid-column: 2 / -1;
	margin: 4px 0 26px 0;
}

#com-contact {
	height: auto;
	padding-bottom: 24px;
}

#com-contact .contact-link-flex {
	margin-top: 21px;
}

#com-contact-heading {
	grid-column: 1 / -1;
}

#com-contact .contact-divider {
	margin: 33px auto;
}

#com-contact-subheading {
	grid-column: 1 / -1;
	width: 552px;
	margin: 0 auto;
}

#com-contact-form {
	height: 384px;
	margin: 21px auto 0 auto;
	align-content: center;
}

#com-contact .form-item {
	margin: 8px 12px;
}

/*CONTACT PAGE*/

#contact-page {
	background-color: var(--abra-primary-hover);
}

/*NO FEE 4 PEE PAGE*/
section.nofee4pee-hero {
	color: var(--abra-primary-white);
	background-image: linear-gradient(to right, rgba(242, 249, 255, .33), rgba(242, 249, 255, .33)), url("images/pictures/nofee4pee-hero-img-l.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

section.nofee4pee-hero div.left-col {
	color: var(--abra-black);
	display: flex;
	flex-direction: column;
	align-content: left;
	justify-content: space-between;
	padding: 56px 0 72px 0;
}

section.nofee4pee-info {
	background-color: var(--abra-primary-light);
	height: 800px;
}

section.nofee4pee-info img {
	width: auto;
	height: 64%;
	position: absolute;
	top: 18%;
	left: 2%;
}

section.nofee4pee-info div.right-col {
	grid-column: 6 / -1;
	display: flex;
	flex-direction: column;
	align-content: left;
	justify-content: space-between;
	padding: 80px 0 8px 0;
}

section.nofee4pee-info div.current-price-div {
	width: 90%;
	margin-left: 0;
	padding-top: 1.5%;
}

section.nofee4pee-info a {
	display: inline;
	text-decoration: underline;
	color: var(--abra-primary);
}

section.nofee4pee-info a:hover {
	color: var(--abra-primary-hover);
}

section.nofee4pee-info div.right-col h3 {
	text-align: right;
}

/*NEIGHBORHOOD SPECIAL PAGE*/

section.neighborhood-hero {
	background-color: var(--abra-light-gray);
	color: var(--abra-black);
}

#neighborhood-heading {
	grid-column: 1 / -1;
	margin-bottom: 37px;
}

.neighborhood-special-vid-l {
	display: none;
}

ul.special-details {
	list-style: disc outside none;
	width: 100%;
	height: 352px;
	font-size: 1.5em;
	line-height: 133.333333333%;
	padding-left: 72px;
}

ul.special-details li {
	margin: 16px 0;
}

a.schedule-now-button-l {
	background-color: var(--abra-secondary);
	border: none;
	width: 216px;
	height: 48px;
	border-radius: 4px;
	box-shadow: 0px 3px 6px #00000080;
	cursor: pointer;
	text-align: center;
	color: var(--abra-light-gray);
	font-size: 2em;
	margin: 0 auto;
}

div.upcoming-specials-l {
	display: none;
}

.neighborhood-special-vid-r {
	width: 552px;
	height: 368px;
}

a.schedule-now-button-r {
	display: none;
}

div.upcoming-specials-r {
	width: 100%;
	height: 176px;
	border-radius: 12px;
	background-color: var(--abra-primary);
	color: var(--abra-light-gray);
	margin-top: 40px;
	padding-top: 8px;
}

h2.special-table-heading {
	font-weight: 700;
	text-align: center;
}

h3.specials-table-text {
	text-align: center;
	margin-top: 13px;
}

table.upcoming-specials-table {
	border: none;
	width: 100%;
	margin: 8px auto 0 auto;
}

table.upcoming-specials-table th, table.upcoming-specials-table td {
	height: 32px;
	width: 50%;
	text-align: center;
	vertical-align: center;
}

table.upcoming-specials-table th {
	font-size: 1em;
	font-weight: 700;
}

table.upcoming-specials-table td {
	font-size: 1.5em;
}

section.neighborhood-contact {
	background-color: var(--abra-primary);
	width: 100%;
	height: 800px;
	color: var(--abra-light-gray);
}

#neighborhood-contact-heading {
	grid-column: 1 / -1;
}

#neighborhood-form-subheading {
	grid-column: 1 / -1;
	width: 600px;
}

/* HALF PRICE TILE PAGE */

section#tile-special-hero {
	background-image: url("images/pictures/shiny-tile.jpeg");
	background-size: cover;
	background-position: center;
}

h2.special-subheading {
	text-align: center;
	font-size: 2.8125em;
	line-height: 106.666666%;
	font-weight: 700;
	color: var(--abra-black);
	margin-top: 22px;
}

h1.special-heading {
	text-align: center;
	font-size: 5.625em;
	line-height: 97.77777777777778%;
	font-weight: 700;
	color: var(--abra-black);
	margin-top: 17px;
}

h3.special-text {
	text-align: center;
	font-size: 2em;
	line-height: 125%;
	width: 810px;
	margin: 18px auto 0 auto;
}

h2.old-price-text {
	text-align: center;
	text-decoration: line-through;
	margin-top: 37px;
}

div.current-price-div {
	width: 600px;
	height: 120px;
	background-color: var(--abra-primary);
	margin: 13px auto 0 auto;
	border-radius: 12px;
}

h1.current-price-text {
	text-align: center;
	font-size: 5.625em;
	line-height: 97.77777777777778%;
	font-weight: 700;
	color: var(--abra-primary-white);
}

h1.bold-red {
	text-align: center;
	font-size: 4em;
	line-height: 100%;
	font-weight: 700;
	color: var(--abra-secondary);
	margin-top: 64px;
}

p.dont-forget {
	text-align: center;
	font-size: 2em;
	line-height: 125%;
	margin-top: 8px;
}

section.comparison-section {
	height: 800px;
	background-color: var(--abra-black);
}

/* HENDERSON CITY EMPLOYEE PAGE*/

section.henderson-hero {
	background-color: transparent;
	color: var(--abra-primary-white);
	position: relative;
}

div.henderson-hero-background-left {
	width: 50%;
	height: 100%;
	background-image: linear-gradient(to right, rgba(41, 47, 51, .5), rgba(41, 47, 51, .5)), url("images/pictures/police-car.jpeg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

div.henderson-hero-background-right {
	width: 50%;
	height: 100%;
	background-image: linear-gradient(to right, rgba(41, 47, 51, .5), rgba(41, 47, 51, .5)), url("images/pictures/firetruck.jpeg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: right, right;
}

div.henderson-hero-header {
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

h1.henderson-hero-heading {
	text-align: center;
	font-weight: 700;
}

h1.henderson-hero-subheading {
	text-align: center;
	font-weight: 700;
	margin-top: 30px;
}

section.henderson-description {
	height: auto;
	background-color: var(--abra-primary-white);
	color: var(--abra-black);
	padding-bottom: 40px;
}

h1.henderson-description-heading {
	text-align: center;
	grid-column: 1 / -1;
	margin-top: 38px;
}

div.henderson-description-details-div {
	text-align: center;
	color: var(--abra-black);
	grid-column: 2 / -2;
	margin-top: 61px;
}

div.henderson-description-details-div h1 {
	font-size: 4em;
	line-height: 100%;
	font-weight: 700;
}

div.henderson-description-details-div h2 {
	font-size: 2.8125em;
	line-height: 106.6666666%;
	font-weight: 700;
	margin-top: 14px;
	margin-bottom: 21px;
}

div.henderson-description-steps {
	grid-column: 2 / -2;
	width: 792px;
	height: auto;
	margin: 0 auto;
	color: var(--abra-primary-white);
	text-align: left;
	background-color: var(--abra-gray);
	margin-top: 40px;
	padding: 22px 24px 12px 24px;
}

div.henderson-description-steps h1 {
	margin-bottom: 18px;
}

div.henderson-description-steps p {
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 1.5em;
	line-height: 133.333333333%;
}

div.henderson-description-steps p.caption {
	margin-top: 22px;
	font-size: 1em;
	line-height: 150%;
	width: 60%;
}

@media only screen and (max-width: 1224px) {
	
	/* LAYOUT */
	
	.width-container {
		max-width: 768px;
		padding: 0 12px;
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	
	.left-col {
		grid-column: 1 / 5;
	}
	
	.right-col {
		grid-column: 5 / -1;
	}
	
	/* GENERAL */
	
	.page-nav {
		display: none;
	}
		
	.social-nav {
		display: none;
	}
	
	.nav-button {
		grid-column: 6 / 8;
	}
	
	#burger-menu {
		display: flex;
		height: 80px;
		margin: 0 auto;
		padding: 24px 0;
		flex-direction: column;
		align-content: center;
		justify-content: space-between;
		grid-column: 8 / 9;
	}

	#home-hero {
		background-image: linear-gradient(to right, rgba(242, 249, 255, .75), rgba(242, 249, 255, .05)), url("images/pictures/homepage-hero-img-m.jpg");
	}
	
	div.burger-menu-nav {
		display: none;
		grid-column: 7 / 9;
		height: 160px;
		width: 100%;
		background-color: var(--abra-light-gray);
		box-shadow: 0px 3px 6px #00000080;
		padding: 12px 16px 12px 0px;
		position: absolute;
		z-index: 10;
	}
	
	.usp-cards {
		padding: 10px 0 0 0;
	}
	
	.usp-card {
		flex-direction: row;
		height: 168px;
		margin: 6px 0;
	}
	
	.card1 {
		grid-column: 1 / -1;
	}
	
	.card2 {
		grid-column: 1 / -1;
	}
	
	.card3 {
		grid-column: 1 / -1;
	}
	
	.usp-card-header {
		margin: 24px auto;
		position: relative;
	}
	
	.usp-gr {
		height: 80px;
		order: 2;
		margin: 16px auto 0 auto;
	}
	
	.usp-card-heading {
		width: 340px;
		margin: 0 auto;
		order: 1;
	}
	
	.usp-card-divider {
		width: 1px;
		height: 136px;
		margin: 16px auto;
		position: relative;
		left: -16px;
	}
	
	.usp-card-text {
		grid-column: 5 / 9;
		width: 304px;
		margin: 16px auto;
		position: relative;
		left: -16px;
	}
	
	.tab1 {
		grid-column: 2 / 5;
	}
	
	.tab2 {
		grid-column: 5 / 8;
	}
	
	.services-card-flex {
		grid-column: 2 / 8;
	}
	
	.services-img-card {
		display: none;
	}
	
	.services-subheading {
		display: none;
	}
	
	.services-list {
		flex: 100%;
		height: 552px;
	}
	
	.contact-link-flex {
		grid-column: 2 / -2;
	}
	
	hr.contact-divider {
		margin: 20px auto;
	}
	
	.contact-form {
		grid-column: 1 / -1;
	}
	
	#footer-left-col {
		grid-column: 1 / 6;
	}
	
	#footer-nav li a {
		font-size: 1em;
		margin: 0 44px 0 0;
	}
	
	#footer-right-col {
		grid-column: 6 / 9;
	}
	
	/* RESIDENTIAL SERVICES PAGE */
	
	.res-services-hero {
		background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/res-hero-img-m.jpg");
	}
	
	section.residential-service-list {
		height: 1480px;
		padding-top: 4px;
	}
	
	div.res-services-list {
		grid-column: 1 / 9;
	}
	
	div.something-else {
		display: none;
	}
	
	/* OUR WORK PAGE */
	
	#our-work-burger-menu-nav {
		margin-top: -22px;
	}
	
	div.gallery-containers {
		justify-content: center;
	}
	
	a.back-button {
		top: 7px;
	}
	
	img.back-arrow {
		width: 6px;
	}
	
	a.back-button p {
		font-size: .75em;
		line-height: 133.3333333%;
	}
	
	/* COMMERCIAL SERVICES PAGE	*/
	
	section.commercial-hero {
		background-image: linear-gradient(to right, rgba(0, 91, 159, .5), rgba(0, 91, 159, .5)), url("images/pictures/com-hero-img-m.jpg");
	}
	
	h2.com-description-text {
		font-size: 1.5em;
		line-height: 133.333333333%;
		width: 100%;
		margin-top: 68px;
	}
	
	#com-usp-heading {
		width: 100%;
	}
	
	h3.com-usp-text {
		font-size: 1em;
		line-height: 150%;
	}
	
	div.com-usp {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	img.com-usp-gr {
		margin: -2px auto 0 auto;
	}
	
	h1.com-usp-title {
		
	}
	
	h3.com-usp-text {
		margin: 4px 0 12px 0;
	}
	
	/* NO FEE 4 PEE PAGE*/
	
	section.nofee4pee-hero div.left-col {
		grid-column: 1 / 6;
	}
	
	section.nofee4pee-hero h1.special {
		font-size: 4em;
		line-height: 100%;
	}
	
	section.nofee4pee-info img {
		width: auto;
		height: 56%;
		top: 22%;
	}
	
	section.nofee4pee-info div.right-col {
		grid-column: 4 / -1;
		padding: 64px 0 8px 0;
	}
	
	section.nofee4pee-info div.current-price-div {
		width: 100%;
	}
	
	/* NEIHBORHOOD SPECIAL PAGE	*/
	
	h2.neighborhood-subheading {
		margin-top: -8px;
	}
	
	ul.special-details {
		height: auto;
		margin-top: 0;
	}
	
	ul.special-details li {
		margin: 12px 0;
	}
	
	a.schedule-now-button-l {
		display: none;
	}
	
	.neighborhood-special-vid-r {
		width: 360px;
		height: 240px;
	}
	
	a.schedule-now-button-r {
		display: block;
		background-color: var(--abra-secondary);
		border: none;
		width: 216px;
		height: 48px;
		border-radius: 4px;
		box-shadow: 0px 3px 6px #00000080;
		cursor: pointer;
		text-align: center;
		color: var(--abra-light-gray);
		font-size: 2em;
		margin: 16px auto 0 auto;
	}
	
	div.upcoming-specials-r {
		height: 224px;
		margin-top: 32px;
	}
	
	table.upcoming-specials-table-r {
		margin: 15px auto 0 auto;
	}
	
	/* HALF PRICE TILE PAGE */
	
	h2.special-subheading {
		
	}
	
	/* HENDERSON EMPLOYEE PAGE */
	
	h1.henderson-hero-heading {
		font-size: 4em;
		line-height: 100%;
	}
	
	h1.henderson-description-heading {
		font-size: 2em;
		line-height: 125%;
		margin-top: 32px;
	}
	
	div.henderson-description-details-div {
		grid-column: 1 / -1;
		margin-top: 46px;
	}
	
	div.henderson-description-details-div h1 {
		font-size: 2.8125em;
		line-height: 106.6666666%;
	}
	
	div.henderson-description-details-div h2 {
		font-size: 2em;
		line-height: 125%;
		margin-top: 13px;
		margin-bottom: 22px;
	}
	
	div.henderson-description-steps {
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 26px;
	}
	
	div.henderson-description-steps p.caption {
		width: 100%;
	}
}


@media only screen and (max-width: 768px) {
	
	/* LAYOUT */
	
	.width-container {
		max-width: 480px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.left-col {
		grid-column: 1 / 3;
	}
	
	.right-col {
		grid-column: 3 / -1;
	}
	
	/* NAV BAR */
	
	.page-nav {
		display: none;
	}
	
	.social-nav {
		display: none;
	}
	
	.nav-button {
		grid-column: 2 / 4;
		width: 144px;
		position: relative;
		left: 56px;
	}
	
	.nav-button p {
		margin-left: 12px;
	}
	
	.nav-button i {
		margin-left: 12px;
	}

	.call-us-button {
		display: none;
	}
	
	#burger-menu {
		grid-column: 4 / 5;
		display: flex;
		height: 80px;
		margin: 0 auto;
		padding: 24px 0;
		flex-direction: column;
		align-content: center;
		justify-content: space-between;
	}
	
	/* GENERAL */
	
	#home-hero {
		background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/homepage-hero-img-s.jpg");
	}
	
	div.burger-menu-nav {
		grid-column: 3 / 5;
	}
	
	#hero-col {
		grid-column: 1 / -1;
	}
	
	#hero-heading {
		position: absolute;
		text-align: center;
		top: 240px;
		width: 100%;
		margin: 0 auto;
	}
	
	#hero-subheading {
		text-align: center;
		position: absolute;
		width: 100%;
		top: 346px;
		margin: 0 auto;
	}
	
	.hero-text {
		width: 346px;
		text-align: center;
		left: 55px;
	}
	
	.usp-header {
		height: 312px;
	}
	
	#usp-subheading {
		width: 100%;
	}
	
	.usp-cards {
		height: 488px;
		padding-top: 12px;
	}
	
	.usp-card {
		height: 128px;
		margin: 12px 0;
		padding: 0;
		position: relative;
	}
	
	.card1 {
		grid-column: 1 / 5;
	}
	
	.card2 {
		grid-column: 1 / 5;
	}
	
	.card3 {
		grid-column: 1 / 5;
	}
	
	.usp-card-header {
		flex-direction: row;
		height: 100%;
		width: 100%;
		align-content: center;
		justify-content: space-between;
		margin: 0;
		padding: 0;
	}
	
	.usp-gr {
		width: 104px;
		height: 80px;
		order: 1;
		margin: 0 0 0 24px;
	}
	
	.usp-card-heading {
		text-align: left;
		order: 2;
		margin: 0;
	}
	
	.tools-heading {
		width: 224px;
		padding-right: 64px;
	}
	
	.solutions-heading {
		width: 224px;
	}
	
	.family-heading {
		width: 224px;
		padding-right: 58px;
	}
	
	.usp-arrow {
		display: block;
		order: 3;
		margin-right: 24px;
		cursor: pointer;
	}
	
	.usp-arrow:hover {
		background-color: var(--abra-light-gray);
	}
	
	.usp-card-divider {
		display: none;
	}
	
	.usp-card-text {
		display: none;
	}
	
	.active-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		align-content: center;
		height: 464px;
		width: 320px;
		border-radius: 12px;
		margin: 0 68px;
		z-index: 10;
		padding: 0;
		position: absolute;
		box-shadow: 0px 3px 6px #00000029;
	}
	
	i.usp-exit {
		display: none;
	}
	
	.active-card i.usp-exit {
		display: block;
		position: absolute;
		font-size: 24px;
		color: var(--abra-secondary);
		cursor: pointer;
		z-index: 100;
		top: 4px;
		right: 8px;
	}
	
	.active-card i.usp-exit:hover {
		color: var(--abra-secondary-hover);
	}
	
	.active-card .usp-card-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		align-content: center;
		margin: 0 auto;
		padding: 0;
		height: auto;
		width: auto;
	}

	.active-card .usp-gr {
		height: 120px;
		margin: 24px auto 16px auto;
		width: auto;
		padding: 0;
	}

	.active-card .usp-card-heading {
		text-align: center;
		font-weight: 700;
		margin: 0 auto;
		padding: 0;
		width: 175px;
	}
	
	.active-card #solutions-heading {
		width: 220px;
	}

	.active-card .usp-card-divider {
		display: block;
		width: 256px;
		height: 2px;
		margin: 16px auto;
		color: var(--abra-gray);
		background-color: var(--abra-gray);
		position: static;
	}

	.active-card .usp-card-text {
		display: block;
		position: static;
		width: 256px;
		text-align: left;
		margin: 0 auto;
		color: var(--abra-gray);
	}

	.active-card .usp-arrow {
		display: none;
	}
	
	.file-tab {
		height: 96px;
	}
	
	.tab1 {
		grid-column: 1 / 3;
	}
	
	.tab2 {
		grid-column: 3 / 5;
	}
	
	.tab-heading {
		top: 10px;
		left: 10px;
	}
	
	.tab-gr {
		height: 32px;
		top: 40px;
		left: 164px;
	}
	
	.services-card-flex {
		grid-column: 1 / -1;
	}
	
	.services-img-card {
		display: none;
	}
	
	.services-list {
		height: 592px;
		flex: 100%;
		align-content: flex-end;
		padding-bottom: 20px;
	}
	
	.services-subheading-small {
		display: block;
		width: 308px;
		position: absolute;
		text-align: center;
		left: 74px;
		top: 32px;
	}
	
	.circle-service {
		width: 128px;
		height: 128px;
		border-radius: 128px;
		margin: 8px;
	}
	
	.circle-service-gr {
		height: 48px;
		margin: 24px auto 0 auto;
	}
	
	.circle-service-text {
		margin: 4px auto 0 auto;
	}
	
	div.enlarged-circle-service {
		width: 440px;
		height: 440px;
		border-radius: 440px;
		top: 140px;
		left: 8px;
	}

	div.enlarged-circle-service i.fa-times {
		position: absolute;
		top: 40px;
		right: 96px;
		font-size: 16px;
	}

	h1.enlarged-circle-heading {
		margin: 32px auto 0 auto;
		font-weight: 700;
		font-size: 32px;
	}

	p.enlarged-circle-text {
		width: 308px;
		margin: 4px auto 0 auto;
	}

	div.b-a-imgs {
		margin: 8px auto 0 auto;
		width: 296px;
	}

	img.before-img {
		width: 144px;
		height: 192px;
		object-fit: cover;
	}

	img.after-img {
		width: 144px;
		height: 192px;
		object-fit: cover;
	}
	
	figcaption {
		font-size: 12px;
	}

	a.enlarged-circle-button {
		width: 136px;
		height: 32px;
		margin: 4px auto;
		padding: 4px 0;
		font-size: 16px;
	}

	.contact-link-flex {
		grid-column: 3 / -3;
	}
	
	.contact-link-flex {
		grid-column: 1 / -1;
	}
	
	.contact-gr {
		font-size: 32px;
	}
	
	.contact-subheading {
		width: 100%;
	}
	
	.contact-divider {
		margin: 26px auto;
	}
	
	.form-subheading {
		font-size: 1em;
		line-height: 1.5em;
		width: 100%;
	}
	
	.contact-form {
		height: auto;
		margin-top: 12px;
		grid-column: 1 / -1;
		width: 100%;
	}
	
	.form-item {
		margin: 4px auto;
	}
	
	.form-item input[type=text], .form-item input[type=email], .form-item select {
		width: 368px;
		height: 32px;
		margin-top: 0px;
	}
	
	.form-message {
		margin: 4px auto;
	}
	
	.form-message textarea {
		width: 368px;
	}
	
	input[type=submit] {
		width: 216px;
		height: 32px;
		margin-top: 4px;
		margin-bottom: 12px;
	}
	
	#footer-left-col {
		grid-column: 1 / 3;
	}
	
	#footer-text-contact-us {
		margin-bottom: 8px;
	}
	
	.footer-text {
		font-size: 1em;
		line-height: 1.5em;
	}
	
	#footer-nav {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#footer-nav li a {
		font-size: 1em;
		line-height: 1.5em;
		margin-top: 16px;
	}
	
	#footer-right-col {
		grid-column: 3 / 5;
	}
	
	#footer-text-follow-us {
		margin-bottom: 8px;
	}
	
	/* RESIDENTIAL SERVICES SECTION */
	
	section.res-services-hero {
		background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/res-hero-img-s.jpg");
		height: auto;
		padding: 32px 0;
	}
	
	#residential-burger-menu-nav {
		margin-top: -32px;
	}
	
	h1.res-hero-heading {
		margin: 0 auto;
	}
	
	h2.res-hero-subheading {
		font-size: 1.5em;
		line-height: 100%;
		width: 456px;
	}
	
	section.residential-service-list {
		height: 1032px;
	}
	
	div.res-services-list {
		grid-column: 1 / 5;
	}
	
	div.service-box {
		width: 216px;
		height: 232px;
	}
	
	div.service-thumbnail {
		width: 192px;
		height: 128px;
		margin: 8px auto 0 auto;
	}
	
	h2.thumbnail-heading {
		top: 6px;
		font-size: 1.5em;
		line-height: 100%;
	}
	
	svg.open-gallery-arrow {
		width: 16px;
		height: 32px;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
	}
	
	p.service-box-description {
		font-size: .75em;
		line-height: 133.333333333%;
		width: 184px;
	}
	
	/* OUR WORK PAGE */
	
	h2.our-work-hero-subheading {
		width: 100%;
	}
	
	div.gallery-container {
		width: 100%;
	}
	
	div.gallery-container img {
		width: 200px;
		height: 300px;
	}
	
	/* COMMERCIAL SERVICES PAGES */
	
	section.commercial-hero {
		background-image: linear-gradient(to right, rgba(0, 91, 159, .5), rgba(0, 91, 159, .5)), url("images/pictures/com-hero-img-s.jpg");
	}

	#com-hero-subheading {
		width: 100%;
	}
	
	div.background-flex {
		flex-direction: column;
	}
	
	div.com-description-background-left {
		width: 100%;
		height: 58.3%;
		order: 2;
	}
	
	div.com-description-background-right {
		width: 100%;
		height: 41.7%;
		order: 1;
		background-image: linear-gradient(to right, rgba(242, 249, 255, .6), rgba(242, 249, 255, .6)), url("images/pictures/office-interior.jpeg");
		background-repeat: no-repeat, no-repeat;
		background-size: cover, cover;
		background-position: center, bottom;
	}
	
	#com-description-col {
		grid-column: 1 / -1;
	}
	
	#com-description-heading {
		margin-top: 78px;
	}
	
	h2.com-description-text {
		width: 100%;
		margin-top: 128px;
	}
	
	div.com-usp-background-left {
		width: 100%;
		height: 31.25%;
		background-image: linear-gradient(to right, rgba(242, 249, 255, .6), rgba(242, 249, 255, .6)), url("images/pictures/office-carpet-s.jpg");
		background-repeat: no-repeat, no-repeat;
		background-size: cover, cover;
		background-position: center, center;
	}
	
	div.com-usp-background-right {
		width: 100%;
		height: 68.75%;
	}
	
	#com-usp-col {
		grid-column: 1 / -1;
	}
	
	#com-usp-heading {
		margin: 78px auto 92px auto;
	}
	
	div.com-usp {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	#com-contact-heading {
		width: 360px;
	}

	#com-contact-subheading {
		width: 456px;
	}
	
	#com-contact .contact-divider {
		margin: 28px auto;
	}
	
	#com-contact-form {
		height: 424px;
		margin-top: 18px;
		padding: 8px 0;
	}
	
	#com-contact .form-item {
		margin: 4px auto;
	}
	
	/* NO FEE 4 PEE Page */
	
	section.nofee4pee-hero div.left-col {
		grid-column: 1 / -1;
	}
	
	section.nofee4pee-info img {
		display: none;
	}
	
	section.nofee4pee-info div.right-col {
		grid-column: 1 / -1;
	}
	
	/* NEIHBORHOOD SPECIAL PAGE	*/
	
	section.neighborhood-hero {
		height: auto;
	}
	
	#neighborhood-special-left-col {
		grid-column: 1 / -1;
	}
	
	.neighborhood-special-vid-l {
		display: block;
		width: 456px;
		height: 304px;
	}
	
	h2.neighborhood-subheading {
		margin-top: 17px;
		text-align: center;
	}
	
	a.schedule-now-button-l {
		display: block;
	}
	
	div.upcoming-specials-l {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 12px;
		background-color: var(--abra-primary);
		color: var(--abra-light-gray);
		margin: 32px 0;
		padding-top: 8px;
		padding-bottom: 16px;
	}
	
	#neighborhood-special-right-col {
		display: none;
	}
	
	#neighborhood-special-contact {
		height: auto;
		padding-bottom: 24px;
	}
	
	#neighborhood-form-subheading {
		width: 100%;
	}
	
	/* HENDERSON EMPLOYEE PAGE */
	
	div.henderson-hero-background-left {
		width: 100%;
		height: 50%;
	}
	
	div.henderson-hero-background-right {
		width: 100%;
		height: 50%;
	}
	
	h1.henderson-hero-heading {
		font-size: 2.8125em;
		line-height: 106.6666666%;
	}
	
	h1.henderson-hero-subheading {
		font-size: 2em;
		line-height: 125%;
	}
	
	div.henderson-description-details-div {
		margin-top: 38px;
	}
	
	div.henderson-description-details-div h2 {
		font-size: 1.5em;
		line-height: 133.33333333%;
		margin-top: 11px;
		margin-bottom: 16px;
	}
	
	div.henderson-description-steps {
		margin-top: 18px;
		padding: 24px 16px 13px 16px;
	}
	
	div.henderson-description-steps h1 {
		margin-bottom: 12px;
		font-size: 2em;
		line-height: 125%;
	}
	
	div.henderson-description-steps p {
		margin-top: 8px;
		margin-bottom: 8px;
		font-size: 1em;
		line-height: 150%;
	}
	
	div.henderson-description-steps p.caption {
		margin-top: 11px;
		font-size: .75em;
		line-height: 133.333333333%;
	}
		
}

@media only screen and (max-width: 480px) {
	
	/* TEXT PROPORTIONS */
	h1 {
		font-size: 9.375vw;
		line-height: 106.6666666%;
	}

	h2 {
		font-size: 6.6666666vw;
		line-height: 125%;
	}

	h3 {
		font-size: 5vw;
		line-height: 133.333333333%;
	}

	p {
		font-size: 3.33333333vw;
		line-height: 150%;
	}

	p.caption {
		font-size: 2.5vw;
		line-height: 133.3333333333%;
	}
	
	/* LAYOUT */
	
	header {
		height: 16.66666666666667vw;
	}
	
	main {
		height: auto;
	}
	
	footer {
		height: 83.33333333333333vw;
	}
	
	.width-container {
		max-width: 100%;
	}
	
	.heading-top {
		margin: 2.916666666666667vw auto 0 auto;
	}
	
	.subheading-top {
		margin: 2.71vw auto 0 auto;
	}
	
	/* BUTTONS */

	.schedule-now-button {
		z-index: 9999999;
		bottom: 0;
		right: 0;
		width: 50%;
		height: 10vw;
		border-radius: 0;
	}
	
	.call-us-button {
		display: block;
		height: 10vw;
		cursor: pointer;
		position: fixed;
		z-index: 9999999;
		bottom: 0;
		left: 0;
		width: 50%;
		border-radius: 0;
	}

	.schedule-now-button p, .call-us-button p {
		font-size: 5vw;
	}
	
	/* NAV BAR */
	
	.logo {
		height: 13.33333333333333vw;
		top: 18%;
	}
	
	.page-nav {
		display: none;
	}
	
	.social-nav {
		display: none;
	}
	
	.nav-button {
		grid-column: 2 / 4;
		width: 30vw;
		height: 55%;
		margin-top: 3.4vw;
		position: relative;
		left: 11.66666666666667vw;
	}
	
	.nav-button p {
		margin-left: .75em;
		font-size: 3.33333333vw;
	}
	
	.nav-button i {
		margin-left: .5em;
		font-size: 5vw;
	}
	
	#burger-menu {
		grid-column: 4 / 5;
		display: flex;
		height: 16.66666666666667vw;
		margin: 0 auto;
		padding: 5vw 0;
		flex-direction: column;
		align-content: center;
		justify-content: space-between;
	}
	
	#home-hero {
		background-image: linear-gradient(to right, rgba(242, 249, 255, .3), rgba(242, 249, 255, .3)), url("images/pictures/homepage-hero-img-s.jpg");
		height: 150vw;
	}

	div.burger-menu-nav {
		height: 33.33333333333333vw;
		padding: 2.5vw 3.33333vw 2.5vw 0px;
	}
	
	ul.burger-nav {
		display: flex;
		width: 100%;
		height: 28.33333333333333vw;
	}
	
	/* GENERAL */
	
	#hero-heading {
		top: 56.25vw;
	}
	
	#hero-subheading {
		top: 78vw;
	}
	
	.hero-text {
		width: 80%;
		top: 121.25vw;
		left: 10vw;
	}
	
	.usp-header {
		height: 65vw;
	}
	
	#usp-subheading {
		font-size: 4.9vw;
	}
	
	.usp-cards {
		height: 101.6666666666667vw;
		padding-top: 2.5%;
	}
	
	.usp-card {
		height: 26.66666666666667vw;
		margin: 2.459016393442623% 0;
		position: relative;
	}
	
	.usp-card-header {
		flex-direction: row;
		height: 100%;
		width: 100%;
		align-content: center;
		justify-content: space-between;
		margin: 0;
		padding: 0;
	}
	
	.usp-gr {
		height: 16.66666666666667vw;
		width: 21.66666666666667vw;
		order: 1;
		margin: 0 0 0 5vw;
	}
	
	.usp-card-heading {
		text-align: left;
		order: 2;
		margin: 0;
		width: 46.66666666666667vw;
	}
	
	.tools-heading {
		padding-right: 13.33333333333333vw;
	}
	
	.family-heading {
		padding-right: 8vw;
	}
	
	.usp-arrow {
		display: block;
		order: 3;
		margin-right: 5vw;
		cursor: pointer;
	}
	
	.usp-arrow:hover {
		background-color: var(--abra-light-gray);
	}
	
	.usp-card-divider {
		display: none;
	}
	
	.usp-card-text {
		display: none;
	}
	
	.active-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		align-content: center;
		height: 96.66666666666667vw;
		width: 66.66666666666667vw;
		border-radius: 12px;
		margin: 0 14.16666666666667vw;
		z-index: 10;
		padding: 0;
		position: absolute;
		box-shadow: 0px 3px 6px #00000029;
	}
	
	i.usp-exit {
		display: none;
	}
	
	.active-card i.usp-exit {
		display: block;
		position: absolute;
		font-size: 1.5em;
		color: var(--abra-secondary);
		cursor: pointer;
		z-index: 100;
		top: 0.8333333333333333vw;
		right: 1.666666666666667vw;
	}
	
	.active-card i.usp-exit:hover {
		color: var(--abra-secondary-hover);
	}
	
	.active-card .usp-card-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		align-content: center;
		margin: 0 auto;
		padding: 0;
		height: auto;
		width: auto;
	}

	.active-card .usp-gr {
		height: 25vw;
		margin: 5vw auto 3.333333333333333vw auto;
		width: auto;
		padding: 0;
	}
	
	.active-card #solutions-heading {
		width: 48vw;
	}

	.active-card .usp-card-heading {
		text-align: center;
		font-weight: 700;
		margin: 0 auto;
		padding: 0;
		width: 36.45833333333333vw;
	}

	.active-card .usp-card-divider {
		display: block;
		width: 53.33333333333333vw;
		height: 2px;
		margin: 2.5vw auto;
		color: var(--abra-gray);
		background-color: var(--abra-gray);
		position: static;
	}

	.active-card .usp-card-text {
		display: block;
		position: static;
		width: 53.33333333333333vw;
		text-align: left;
		margin: 0 auto;
		color: var(--abra-gray);
	}

	.active-card .usp-arrow {
		display: none;
	}
	
	.services {
		height: 166.6666666666667vw;
	}
	
	.file-tab {
		height: 20vw;
		margin-top: 6.041666666666667;
	}
	
	.tab-heading {
		top: .5em;
		left: .3125em;
		width: 100%;
	}
	
	.tab-gr {
		height: 6.666666666666667vw;
		top: 48%;
		left: 77%;
	}
	
	.services-card-flex {
		margin-top: -1vw;
	}
	
	.services-list {
		height: 115vw;
		flex: 100%;
		align-content: flex-end;
		padding-bottom: 4.3859649122807%;
	}
	
	.services-subheading-small {
		display: block;
		width: 64.16666666666667vw;
		position: absolute;
		text-align: center;
		left: 16.2280701754386%;
		top: 2%;
	}
	
	.circle-service {
		width: 26.66666666666667vw;
		height: 26.66666666666667vw;
		border-radius: 100%;
		margin: 1.5%;
	}
	
	.circle-service-gr {
		height: 10vw;
		margin: 5vw auto 0 auto;
	}
	
	.circle-service-text {
		margin: .25vw auto 0 auto;
	}
	
	div.enlarged-circle-service {
		width: 90vw;
		height: 90vw;
		border-radius: 100%;
		top: 24vw;
		left: 1.75vw;
	}

	div.enlarged-circle-service i.fa-times {
		position: absolute;
		top: 8.333333333333333vw;
		right: 20vw;
		font-size: 1em;
	}

	h1.enlarged-circle-heading {
		font-weight: 700;
		font-size: 1.5em;
		margin: 1em auto 0 auto;
	}

	p.enlarged-circle-text {
		width: 64.16666666666667vw;
		margin: .25em auto 0 auto;
	}

	div.b-a-imgs {
		margin: 8px auto 0 auto;
		width: 61.66666666666667vw;
	}

	img.before-img {
		width: 30vw;
		height: 40vw;
	}

	img.after-img {
		width: 30vw;
		height: 40vw;
	}
	
	figcaption {
		font-size: .75em;
		margin-top: -1vw;
	}

	a.enlarged-circle-button {
		width: 29vw;
		height: 6vw;
		margin: .1em auto;
		padding: 0;
		font-size: 1em;
	}
	
	.commercial-description {
		height: 115vw;
		flex: 100%;
	}
	
	h3.commercial-description-heading {
		width: 76vw;
		margin-top: 6.666666666666667vw;
	}
	
	div.commercial-description ul {
		width: 72vw;
		height: 12vw;
		margin: 6.666666666666667vw auto 0 auto;
	}

	hr.commercial-divider {
		height: 4px;
		width: 75vw;
		margin: 8vw auto;
	}

	p.commercial-cta-text {
		width: 64vw;
		margin-top: 3.33333vw;
	}

	a.commercial-button {
		width: 75vw;
		height: 12.5vw;
		margin-top: 6.6666667vw;
	}

	a.commercial-button h3 {
		margin: 2.916666666666667vw auto;
	}
	
	.contact {
		max-height: 188vw;
	}
	
	.contact-link-flex {
		margin-top: 6.041666666666667vw;
	}
	
	.contact-link {
		width: max-content;
	}
	
	.contact-gr {
		font-size: 6.6666666667vw;
		margin-bottom: .25em;
	}
	
	.contact-subheading {
		margin: 3.75vw auto 0 auto;
	}
	
	.contact-divider {
		width: 26.31578947368421%;
		margin: 4.166666666666667vw auto;
	}
	
	.contact-form {
		margin: 2.5vw auto 0 auto;
	}
	
	.form-item {
		margin: 0.8333333333333333vw auto;
	}
	
	.form-item input[type=text], .form-item input[type=email], .form-item select {
		width: 76.66666666666667vw;
		height: 6.666666666666667vw;
	}
	
	.form-message {
		margin: 0.8333333333333333vw auto;
	}
	
	.form-message textarea {
		width: 76.6666666666667vw;
	}
	
	input[type=submit] {
		width: 45vw;
		height: 6.666666666666667vw;
		margin: .833333333333vw auto 2.5vw auto;
		font-size: 1em;
	}
	
	footer {
		height: 83.33333333333333vw;
	}
	
	.footer-contact-info {
		top: 2.916666666666667vw;
	}
	
	#footer-text-contact-us {
		margin-bottom: .33333333333333em;
	}
	
	.footer-text {
		font-size: 3.33333333vw;
		line-height: 150%;
	}
	
	#footer-nav {
		bottom: 3.75vw;
	}
	
	#footer-nav li a {
		font-size: 3.33333333vw;
		line-height: 150%;
		margin-top: 1em;
	}
	
	.footer-social-links {
		margin-top: 2.916666666666667vw;
	}
	
	#footer-social-nav {
		font-size: 5vw;
		margin-top: 1.666666666666667vw;
	}
	
	#footer-social-nav i {
		margin-left: 6.666666666666667vw;
	}
	
	.copyright {
		bottom: 3.75vw;
	}
	
	/* RESIDENTIAL SERVICES PAGE */
	section.res-services-hero {
		padding: 8.333333vw 0;
	}
	
	#residential-burger-menu-nav {
		margin-top: -8.333333vw;
	}
	
	h2.res-hero-subheading {
		width: 82vw;
	}
	
	section.residential-service-list {
		height: auto;
		padding: .83333333vw 0 3.333333333vw 0;
	}
	
	div.res-service-list {
		height: 100%;
	}
	
	div.service-box {
		width: 45vw;
		height: auto;
		padding: 3.3333333333vw 0;
		margin: 2.5vw 0;
	}
	
	div.service-thumbnail {
		width: 40vw;
		height: 26.66666666666667vw;
		margin: 0 auto 0 auto;
	}
	
	h2.thumbnail-heading {
		top: 1vw;
		font-size: 1em;
	}
	
	svg.open-gallery-arrow {
		width: 4vw;
		height: 8vw;
		top: 50%;
		right: 2.5vw;
		transform: translateY(-50%);
	}
	
	p.service-box-description {
		width: 40.2vw;
	}
	
	/* OUR WORK PAGE */
	
	section.our-work-hero {
		padding: 4.583333333333333vw 0 5vw 0;
	}
	
	#our-work-burger-menu-nav {
		margin-top: -4.583333333333333vw;
	}
	
	h2.our-work-hero-subheading {
		margin: 2.708333333333333vw auto 0 auto;
	}
	
	a.back-button {
		top: 1.458333333333333vw;
		left: 5vw;
	}
	
	img.back-arrow {
		width: 1.25vw;
		margin-right: 1.666666666666667vw;
	}
	
	section.our-work-gallery {
		padding: 4.166666666666667vw 0;
	}
	
	div.gallery-container {
		margin: 2.5vw 0;
		padding: 3.333333333333333vw 0 1.666666666666667vw 0; 
	}
	
	figure.bef-fig {
		margin: 0 2.5vw 0 0;
	}
	
	figure.aft-fig {
		margin: 0 0 0 2.5vw;
	}
	
	div.gallery-container img {
		width: 41.66666666666667vw;
		height: 62.5vw;
	}
	
	h2.coming-soon {
		margin: 1.666666666666667 auto 0 auto;
	}
	
	/* COMMERCIAL SERVICES PAGE*/
	
	section.commercial-hero {
		height: 75vw;
	}

	h2.com-hero-subheading {
		width: 95vw;
	}

	h3.com-hero-text {
		bottom: 3.333333333333333vw;
		width: 90vw;
	}
	
	section.com-services-description {
		height: 125vw;
	}

	#com-description-heading {
		margin-top: 16.25vw;
	}

	h2.com-description-text {
		font-size: 5vw;
		margin-top: 26.66666666666667vw;
	}

	section.com-services-usp {
		height: auto;
	}

	#com-usp-heading {
		margin: 16.25vw auto 25vw auto;
	}

	div.com-usp {
		grid-column-gap: 5vw;
	}

	img.com-usp-gr {
		height: 10vw;
		margin: -.83333vw auto 0 auto;
	}

	h3.com-usp-text {
		font-size: 3.3333333vw;
		margin: -.83333vw 0 5.416666666666667vw 0;
	}
	
	#com-contact {
		padding-bottom: 5vw;
	}

	#com-contact-subheading {
		width: 95vw;
		margin: 2.708333333333333vw auto 0 auto;
	}
	
	#com-contact .contact-divider {
		margin: 5vw auto 4vw auto;
	}
	
	#com-contact-form {
		height: auto;
		margin-top: 3.75vw;
	}
	
	/* NO FEE 4 PEE PAGE */
	
	section.nofee4pee-hero div.left-col {
		padding: 12% 0 16% 0;
	}
	
	section.nofee4pee-info div.right-col {
		padding: 15% 0 1.6666% 0;
	}
	
	section.nofee4pee-info h1.special {
		font-size: 18.75vw;
		line-height: 97.77777777777778%;
		margin-top: 1.5vw;
	}
	
	
	/* NEIGHBORHOOD SPECIAL PAGE */
	
	#neighborhood-heading {
		margin: 4.583333333333333vw auto 2.291666666666667vw auto;
	}
	
	.specials-table-text {
		margin-top: 2.71vw;
	}
	
	.neighborhood-special-vid-l {
		width: 93.75vw;
		height: 63.33333333333333vw;
	}
	
	h2.neighborhood-subheading {
		margin-top: 3.541666666666667vw;
	}
	
	div.upcoming-specials-l {
		margin: 6.666666667vw 0;
		padding-top: 1.666666666666667vw;
		padding-bottom: 3.3333333333vw;
	}
	
	#neighborhood-special-contact {
		padding-bottom: 5vw;
	}
	
	/* HENDERSON EMPLOYEE PAGE */
	
	h1.henderson-hero-heading {
		font-size: 9.375vw;
	}
	
	h1.henderson-hero-subheading {
		font-size: 6.6666666vw;
		margin-top: 6.25vw;
	}
	
	section.henderson-description {
		padding-bottom: 6.6666667vw;
	}
	
	h1.henderson-description-heading {
		margin-top: 6.6666667vw;
	}
	
	div.henderson-description-details-div {
		margin-top: 7.916666666666667vw;
	}
	
	div.henderson-description-details-div h1 {
		font-size: 9.375vw;
	}
	
	div.henderson-description-details-div h2 {
		font-size: 5vw;
		margin-top: 2.291666666666667vw;
		margin-bottom: 3.333333333333333vw;
	}
	
	div.henderson-description-steps {
		margin-top: 3.75vw;
		padding: 5vw 3.333vw 2.70833vw 3.333vw;
	}
	
	div.henderson-description-steps h1 {
		margin-bottom: 2.5vw;
		font-size: 6.6666666vw;
	}
	
	div.henderson-description-steps p {
		margin-top: 1.666667vw;
		margin-bottom: 1.666667vw;
		font-size: 3.3333333vw;
	}
	
	div.henderson-description-steps p.caption {
		margin-top: 2.2916666vw;
		font-size: 2.5vw;
	}
	
	
	
	
	
	
}