.loading-screen {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 22;
}

.no-webp .loading-screen {
  background: rgba(255,255,255,.6) url('images/loading.gif') no-repeat center center fixed;
}

.webp .loading-screen {
  background: rgba(255,255,255,.6) url('images/loading.webp') no-repeat center center fixed;
}

.main-landing:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,.6);
}

.main-landing {
	position: relative;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.no-webp .main-landing {
  background-image: url('images/door.jpg');
}

.webp .main-landing {
  background-image: url('images/door.webp');
}

.landing:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
}

.landing {
	position: relative;
	height: 50vh;
	background-size: cover;
	background-repeat: no-repeat;
}

.landing h1 {
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	margin: 115px auto auto;
	font-weight: 800;
}

.number-link:hover {
	color: inherit;
	text-decoration: none;
}

.logo:hover {
	cursor: pointer;
}

.sticky-header {
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 9;
	opacity: .98;
}

.dropdown-link:hover .dropdown, 
.residential-dropdown-link:hover .residential-dropdown, 
.commercial-dropdown-link:hover .commercial-dropdown,
.automotive-dropdown-link:hover .automotive-dropdown {
	visibility: visible;
	max-height: 1000px;
}

.residential-dropdown-link:hover .residential-dropdown ul li a, 
.commercial-dropdown-link:hover .commercial-dropdown ul li a,
.automotive-dropdown-link:hover .automotive-dropdown ul li a {
	opacity: 1;
}

.dropdown-link:hover .dropdown ul {
	opacity: 1;
}

.dropdown-links-list:hover {
	background-color: #0ad287;
}

.residential-dropdown-link:hover i, .commercial-dropdown-link:hover i, .automotive-dropdown-link:hover i {
	transform: rotate(90deg);
}

.residential-dropdown:hover i, .commercial-dropdown:hover i, .automotive-dropdown:hover i {
	transform: rotate(90deg);
}

.main-nav ul li:hover  {
	background-color: #045436;
}

.navigation-links ul li:hover a {
	background: #323232;
	cursor: pointer;
}

.main-nav ul li a:hover {
	text-decoration: none;
}

/* Mobile Menu */

.mobile-menu-icon:hover {
	cursor: pointer;
}

.side-nav ul {
	list-style-type: none;
	font-size: 0px;
	padding: 0px;
}

.side-nav ul li:first-child {
	text-align: right;
}

.side-nav ul li:first-child a {
	display: inline-block;
	margin: 15px 10px;
	padding: 10px 10px 5px;
	line-height: 100%;
}

.side-nav ul li i {
	font-size: 22px;
	margin: auto 15px auto 20px;
}

.side-nav ul li a {
	display: block;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	padding: 10px 5px;
	margin: 5px auto;
	text-decoration: none;
	color: white;
	white-space: nowrap;
}

.side-nav ul li:not(:first-child) {
	border-bottom: 1px solid white;
}

.side-nav ul li:nth-child(2) {
	border-top: 1px solid white;
}

.side-nav ul li a:hover {
	cursor: pointer;
	background-color: white;
	color: #0ad287;
}

.side-nav-residential {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	max-height: 0px;
	overflow: hidden;
	transition: max-height .5s ease-out;
}

.side-nav ul li .side-nav-residential li {
	text-align: left;
	margin: 0px;
	border: none;
}

.side-nav .side-nav-residential li a, .side-nav ul .side-nav-residential li:first-child a {
	display: block;
    margin: 10px 5px 10px 30px;
	padding: 5px 5px;

}

.main-banner a:hover {
	color: #045436;
	text-decoration: none;
	cursor: pointer;
}

.service-section, .advantage-section {
	min-height: 70vh;
	padding: 100px 0px;
}

.service-section h2, .advantage-section h2, .discount-section h2, .contact-section h2 {
	position: relative;
	font-weight: 800;
}

.advantage-section h2, .discount-section h2 {
	color: white;
}

.card {
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 35px 25px;
	width: 375px;
	max-width: 95%;
	height: 490px;
	border-radius: 10px;
	background-size: cover;
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden;
}

.no-webp .residential-card {
  background-image: url("images/boston-alley.jpg");
}

.webp .residential-card{
  background-image: url("images/boston-alley.webp");
}

.no-webp .commercial-card {
  background-image: url("images/boston-buildings.jpg");
}

.webp .commercial-card{
  background-image: url("images/boston-buildings.webp");
}

.no-webp .automotive-card {
  background-image: url("images/auto-key.jpg");
}

.webp .automotive-card{
  background-image: url("images/auto-key.webp");
}

.card h3 {
	position: relative;
	display: block;
	padding: 15px 0px 0px;
	font-size: 22px;
	font-weight: 800;
	margin: 0px;
	color: #fff;
	background-color: #0ad287;
}

.card p {
	text-align: left;
	font-size: 18px;
	font-weight: 500;
	padding: 10px 20px;
	margin-bottom: 0px;
	color: #fff;
	background-color: #0ad287;
}

.card:hover {
	cursor: pointer;
}

.left-header-design {
	position: absolute;
	visibility: visible;
	padding: 0px;
	top: 50%;
	left: -40px;
	height: 1px;
	width: 40px;
	background-color: #fff;
}

.right-header-design {
	position: absolute;
	visibility: visible;
	padding: 0px;
	top: 50%;
	right: -40px;
	height: 1px;
	width: 40px;
	background-color: white;
}

.advantage-section:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,.6);
}

.advantage-section {
	position: relative;
	background-size: cover;
	background-position: 0px;
	background-repeat: no-repeat;
}

.no-webp .advantage-section {
  background-image: url('images/boston.jpg');
}

.webp .advantage-section {
  background-image: url('images/boston.webp');
}

.no-webp .lazy-load-divs, .webp .lazy-load-divs {
	background-image: none;
}

.advantage-section div {
	display: inline-block;
	position: relative;
	margin: 50px 25px;
	max-width: 375px;
	vertical-align: top;
}

.advantage-section div span {
	font-size: 80px;
	color: #0ad287;
}

.advantage-section div h3 {
	font-weight: 800;
}

.advantage-section div p {
	font-size: 16px;
	padding: 0px 10px;
	text-align: left;
}

.advantage-section div h3, .advantage-section div p  {
	color: white;
}

.advantage-section hr {
	width: 100px;
	background-color: #0ad287;
	border: 1px solid #0ad287;
}

.discount-section {
	min-height: 350px;
	padding-top: 20px; 
	padding-bottom: 40px;
	background-color: #0ad287;
}

.discount-section h2 {
	margin-bottom: 30px;
}

.coupon {
	display: inline-block;
	position: relative;
	margin: 0px 40px 45px;
	height: 200px;
	width: 400px;
	max-width: 85%;
	border: 3px solid #045436;
	vertical-align: top;
}

.coupon:before {
	content: '';
	position: absolute;
	height: 200px;
	width: 400px;
	top: 5px;
	left: 5px;
	border: 3px solid white;
}

.coupon h2 {
	margin: 40px auto 0px;
	font-size: 52px;
	font-weight: 800;
	color: white;
}

.coupon p {
	margin: 10px auto auto;
	font-size: 18px;
	font-weight: 700;
	color: #045436;
	padding: 5px 25px;
}

/******************** CONTACT SECTION *****************************/


.alert-container {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,.5);
}

.alert {
	display: none;
	position: relative;
	width: 400px;
	padding: 40px 0px;
	margin: 10% auto;
	text-align: center;
	border-radius: 10px;
	background-color: #EEEEEE;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name:animatetop;
	animation-duration: 0.4s;
}

@-webkit-keyframes animatetop {
	from {
		top: -200px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -200px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

.alert h2 {
	font-size: 26px;
	margin-bottom: 10px;
	font-weight: 500;
}

.alert p {
	font-size: 18px;
	margin-bottom: 20px;
}

.alert button {
	display: inline-block;
	border-radius: 5px;
	padding: 6px 40px 5px;
	border: none;
	outline: none;
	color: white;
	font-size: 20px;
}

.incomplete-form button {
	background-color: #bc2f2b;
}

.message-sent button {
	background-color: #4caf50;
}

.close-sent-alert, .close-form-alert {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 6px 8px 2px;
	border-radius: 50%;
	font-size: 14px;
}

.close-sent-alert:hover, .close-form-alert:hover {
	cursor: pointer;
}

.sticky-services-section {
	margin-right: 35%;
}

img.portrait-image {
	top: 2%;
}

.sticky-service-links {
	position: fixed;
	top: 70px;
	right: 0px;
	margin-top: 0px;
}

aside a:hover {
	text-decoration: none;
}

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

.location:hover {
	text-decoration: none;
	color: white
}

.city-section iframe, .map-container {
	max-width: 1000px;
	width: 1000px;
	margin: 75px auto;
}

.sticky-blog-article-section {
	margin-right: 35%;
}

.sticky-blog-links {
	position: fixed;
	top: 70px;
	right: 0px;
	margin-top: 0px;
}

footer {
	position: relative;
	font-size: 0px;
	margin: 0px;
	padding: 50px 0px;
	background-color: #0ad287;
	color: #045436;
}

.footer-address {
	display: inline-block;
	vertical-align: top;
	margin: 45px auto auto 40px;
	text-align: left;
}

.footer-logo {
	display: inline-block;
	margin: 10px auto auto;
}

.footer-address span {
	display: block;
	font-size: 18px;
	font-weight: 600;
}

.copyright {
	position: absolute;
	margin: 0px;
	padding: 4px 15px 0px;
	bottom: 5px;
	left: 0px;
	width: 100%;
	background-color: #0ad287;
	text-align: center;
}

.copyright p, .copyright p a {
	margin: 0px;
	font-size: 14px;
	font-weight: 600;
	color: #045436;
}

.copyright a:hover {
	text-decoration: none;
}

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

	.locations-section {
		padding: 100px;
	}

}

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

	.address-panel, .contact-panel {
		margin: 35px 25px;
	}

}

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

	.main-landing {
		background-attachment: scroll;
	}
	
	.card {
		border-radius: 0px;
	}

	.main-banner {
		top: 40%;
	}

	.services-section {
		margin: 50px 0px 50px;
		text-align: center;
		width: 100%;
	}

	.sticky-services-section {
		margin-right: 0px;
	}

	.service-links {
		display: none;
	}

}

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

	.advantage-section {
		padding: 40px 20px;
	}
	
	.coupon {
		margin: 0px 0px 45px;
		width: 90%;
	}

	.coupon:before {
		width: 100%;
		top: 5px;
		left: 11px;
		border: 3px solid white;
	}

	.contact-section {
		padding: 30px 0px;
	}

	.city-section article {
		text-align: center;
		margin: 25px auto;
	}

	.city-section article img {
		float: none;
		height: auto;
		width: 75%;
		margin-right: 0px;
	}

	article.right-float img {
		float: center;
		margin-left: 0px;
	}

	.city-section article h2 {
		width: 75%;
	}

	.city-section article p {
		width: 75%;
		margin: 15px auto;
	}

	.city-section article ul {
		float: none;
		min-width: 75%;
		max-width: 75%;
	} 

	.city-section iframe, .map-container {
		width: 75%;
		margin: 75px auto;
	}

	.blog-list-section {
		margin: 50px auto;
	}

	.blog-article-preview {
		display: block;
		margin: 100px auto;
	}

	.sitemap-section-list {
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
	}

}


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

	.logo img {
		height: 50%;
		width: 50%;
	}

	.footer-logo img {
		height: 100%;
		width: 100%;
	}

	.top-header {
		position: fixed;
		top: 0px;
		width: 100%;
		height: 120px;
		z-index: 2;
		border-bottom: 5px solid #0ad287;
	}

	.main-nav {
		display: none;
	}

	.header-info {
		display: none;
	}

	.header-banner {
		display: none;
	}

	.side-nav, .mobile-menu-icon {
		display: inline-block;
	}

	.main-nav ul {
		display: none;
	}

	.logo {
		margin-right: -50px;
	}

	.main-banner h1 {
		font-size: 40px;
	}

	.main-banner span {
		font-size: 25px;
	}

	.main-banner a {
		font-size: 16px;
	}

	.landing {
		position: relative;
		height: 250px;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.landing h1 {
		margin: 45px auto;
		font-size: 26px;
	}

	.service-section {
		padding: 30px 0px;
	}

	.card {
		max-width: 95%;
	}

	.advantage-section {
		background-position: 0px;
		background-repeat: no-repeat;
	}

	.advantage-section div {
		margin: 35px auto;
	}

	.footer-address {
		margin: 45px 35px;
	}

	.footer-logo {
		margin: 0px 35px;
	}

	.about-section article {
		margin: 20px auto;
		width: auto;
	}

	.about-section article p {
		padding: 10px 40px;
	}

	.services-section article {
		width: 95%;
	}

	.services-section article img {
		width: 100%;
		margin-right: 0px;
	}

	.locations-section {
		padding: 100px 0px;
	}

	.location {
		margin: 10px 15px;
		
	}

	.city-section article img, .city-section article h2, .city-section article p, .city-section iframe, .map-container {
		width: 95%;
	}

	.city-section article ul {
		min-width: 95%;
		max-width: 95%;
	} 

	.blog-article-section {
		width: 100%;
		margin-bottom: 50px;
		text-align: center;
	}

	.sticky-blog-article-section {
		margin-right: 0px;
	}

	.blog-article {
		margin: 0px auto;
		width: 95%;
	}

	.blog-links {
		position: relative;
		width: 95%;
		padding-top: 50px;
		margin: 0px auto 100px;
		border-top: 3px solid #CCC;
	}

	.blog-links div.blog-links-div {
		width: 100%;
		margin: 0px auto;
	}

	.blog-links h3 {
		padding-left: 10px;
	}

	.sticky-blog-links {
		position: relative;
		padding-top: 50px;
		margin: 0px auto 100px;
		top: 0px;
	}

}

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

	.sitemap-section {
		padding: 30px 0px;
	}

	.sitemap-section-list {
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}

	.sitemap-links {
		width: 300px;
	}

	.address-panel, .contact-panel {
		width: 95%;
		margin: 35px auto;
		padding: 40px 25px;
	}

	.address-panel iframe, .map-container {
		width: 100%;
	}

	form {
		width: 100%;
	}

	.alert {
		width: 80%;
		padding: 40px 0px;
	}
	
	.close-sent-alert, .close-form-alert {
		border: none;
	}

}