﻿/* Reset CSS */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
}

button {
	cursor: pointer;
	background-color: transparent;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	font-size: 100%;
	vertical-align: baseline;
	background: 0 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block
}

ul, ol, menu {
	list-style: none
}

input, select, button {
	vertical-align: middle;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

html, body {
	height: 100%;
	font-size: 18px;
	font-family: "Open Sans", sans-serif;
	color: #463939;
	line-height: 1.5em;
}

@media only screen and (max-width: 2048px) {
	/* When switching from land to port on Android phones, some
			text elements don't auto resize to fit port mode.  Applying
			a transparent BG fixes this bug */
	h1, h2, h3, h4, h5, h6, p, ul, li {
		background: url(../images/transparentimage.png) 0 0 repeat;
	}
}

*:focus-visible {
	outline-color: #0078C8 !important;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	position: absolute !important;
	clip: auto;
	overflow: visible;
	height: auto;
	width: auto;
	z-index: 10000002;
	cursor: pointer;
	background-color: #ffffff;
	padding: 15px;
	font-size: 23px;
	border: 1px solid #000;
	color: #000 !important;
}

.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible,
.swiper-pagination-bullet:focus-visible {
	outline: -webkit-focus-ring-color auto 1px;
}

/* ----------------------------------------------------
		Start Headers
------------------------------------------------------- */

h1 {
	width: 100%;
	margin: 0 auto 20px auto;
	font-weight: 300;
	font-size: 2.75em;
	line-height: 1.2em;
	color: #6d6e71;
	text-align: center;
}

h2 {
	width: 100%;
	margin: 0 auto 50px auto;
	font-weight: 300;
	font-size: 2.75em;
	line-height: 1.2em;
	color: #6d6e71;
	text-align: center;
}

h3 {
	font-size: 1.2em;
	margin-bottom: 10px;
}

.subHeadLine {
	margin-bottom: 30px;
	font-size: 1.2em;
	line-height: 1.4em;
	color: #8ebf5c;
	font-style: italic;
	text-align: center;
}

/* ----------------------------------------------------
		End Headers
------------------------------------------------------- */

a:link,
a:visited,
a:active,
a:hover {
	color: #016597;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

a.disabled {
	cursor: default;
}

strong {
	/*font-family: Arial, sans-serif;*/
}

input[type=text],
input[type=date],
input[type=email],
input[type=tel],
input[type=password],
textarea,
select {
	width: 100%;
	max-width: 100%;
	font-family: Arial, sans-serif;
	padding: 7px 0 7px 8px;
	color: #151c22;
	font-size: 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #0e151b;
	-webkit-appearance: none;
	-moz-appearance: none;
}

textarea {
	width: 100% !important;
	height: 150px;
	max-height: 300px;
	padding-right: 7px;
	line-height: 1.5em;
}

/* Set default select background */
select {
	background: #FFFFFF url(../images/form-dd-arrow.jpg) right 6px no-repeat;
}

/* Remove dropdown arrow from IE dropdown versions 10 and up */
select::-ms-expand {
	display: none;
}

input[type=button],
input[type=submit] {
	cursor: pointer;
	font-size: 16px;
	-webkit-appearance: none;
	outline: none;
}

input[type=image] {
	outline: none;
}

textarea {
	height: 150px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #797979;
}

::-moz-placeholder { /* Firefox 19+ */
	color: #797979;
}

:-ms-input-placeholder { /* IE 10+ */
	color: #797979;
}

:-moz-placeholder { /* Firefox 18- */
	color: #797979;
}

sup,
sub {
	font-size: .55em;
	text-transform: uppercase;
	position: relative;
	left: 0;
}

sup {
	top: -9px;
}

sub {
	top: 6px;
}

a.btn,
.btn {
	display: inline-block;
	min-width: 115px;
	padding: 11px 45px;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	vertical-align: middle;
	box-sizing: border-box;
	background-color: rgb(237, 125, 49);
	line-height: 22px;
	-webkit-appearance: none;
}

a.btnWhite,
.btnWhite {
	border-color: #FFF;
	background-color: transparent;
}

a.btnWhite:hover,
.btnWhite:hover {
	color: #6c6d71;
	border-color: #FFF;
	background-color: #FFF;
}

.bodyStopScrolling {
	padding-right: 17px;
	overflow: hidden;
}

.stickyOnScroll.sticky {
	position: sticky;
	top: 15px;
	left: 0;
}

.widgetTopMargin {
	margin-top: 50px;
}

.widgetBottomMargin {
	margin-bottom: 50px;
}

.videoIframeWrap,
.mceNonEditable.embeditem {
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
	overflow: hidden;
	/*border: 1px solid #ececec;*/
	/*background: url(/_assets/images/loading.gif) center center no-repeat;*/
}

.videoIframeWrap iframe,
.mceNonEditable.embeditem iframe {
	height: 100% !important;
	width: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
}

.imgScaleOnHover {
	transition: all .2s ease-in-out;
}

.imgScaleOnHover:hover {
	transform: scale(1.03);
}

.centered {
	margin: 0 auto;
}

.sitewidth {
	max-width: 1300px;
	margin: 0 auto;
	padding-left: 2%;
	padding-right: 2%;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.70) !important;
}

.overLayWhite {
	background-color: rgba(255, 255, 255, 0.9) !important;
}

p {
	margin-bottom: 25px;
	font-size: 18px;
	line-height: 1.5em;
}

.sectionHeader {
	margin-bottom: 15px;
	color: rgb(39, 39, 37);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.03em;
	font-family: "Roboto", sans-serif;
}

.sectionHeader span {
	color: rgb(84, 130, 53);
}

/* ----------------------------------------------------
		Start Header
------------------------------------------------------- */

header {
	position: relative;
	margin-bottom: 25px;
	padding: 10px 0;
	box-shadow: 0 0 15px #000 !important;
}

header .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 2%;
}

header .left {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
}

header .mobileMenuBtn {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	flex: 0 0 40px;
	padding: 6px;
	height: 34px;
}

header .mobileMenuBtn span {
	background-color: #5d8917;
	flex: 0 0 1px;
}

header .mobileMenuBtn span:not(:last-child) {
	margin-bottom: 2px;
}

header .right {
	display: none;
}

header .logo {
	max-width: 175px;
	margin-right: 10px;
}

header ul.mainNav {
	display: none;
}

header ul.mainNav li {
	margin-right: 35px
}

header ul.mainNav li a {
	color: #463939;
}

header .right .btn {
	font-size: 22px;
	padding: 15px 30px;
	color: #FFF !important;
}

header .headerMobilePhone {
	flex: 0 0 32px;
}

header .headerMobilePhone svg {
	fill: rgba(84,130,53,1) !important;
}

@media screen and (min-width:768px) {
	header .content {
		padding: 0;
	}

	header .mobileOnly {
		display: none;
	}

	header ul.mainNav {
		display: flex;
		flex-wrap: wrap;
	}

	header .left {
		justify-content: flex-start;
	}

	header .right {
		display: block;
		flex: 0 0 200px;
	}
}

/* ----------------------------------------------------
		End Header
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Mobile Menu
------------------------------------------------------- */

.body > form {
	position: relative;
}

.mobileMenu #MobileMenuCloseBtn {
	padding: 20px;
	font-size: 24px;
	color: rgba(84,130,53,1) !important;
}

.mobileMenu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 100%;
	display: none;
	background-color: #FFF;
	transition: top .2s ease-in-out;
}

.mobileMenu.open {
	display: block;
}

.mobileMenu ul {
	text-align: center;
	padding-top: 15px;
}

.mobileMenu ul li {
	padding-bottom: 14px;
}

.mobileMenu a {
	color: rgba(60,62,71,1) !important;
}
/* ----------------------------------------------------
		End Mobile Menu
------------------------------------------------------- */
/* ----------------------------------------------------
		Start Footer
------------------------------------------------------- */
footer {
	padding: 15px 0;
	background-color: #000;
	color: #FFF;
	font-size: 13px;
}

footer a {
	color: #FFF !important;
}

footer .content {
	text-align: center;
}

@media screen and (min-width:768px) {
	footer .content {
		min-height: 75px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	footer .left {
		text-align: left;
	}

	footer .right {
		text-align: right;
		padding-left: 50px;
	}

	footer .right ul {
	}

	footer .right ul li {
		margin-left: 15px;
		display: inline-block;
	}
}

/* ----------------------------------------------------
		End Footer
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Header Image
------------------------------------------------------- */

.headerImage {
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

.headerImage .caption {
	text-align: center;
	padding: 8% 0;
	position: relative;
	z-index: 10;
}

.headerImage .text {
	font-weight: 700;
	font-size: 45px;
	margin-bottom: 20px;
	color: #FFF;
	line-height: 1.1em;
}

.headerImage .btn {
	font-size: 16px;
	padding: 12px 49px;
}

@media screen and (min-width:768px) {
	.headerImage .text {
		font-size: 64px;
	}
}

/* ----------------------------------------------------
		End Header Image
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Line Header
------------------------------------------------------- */

.lineHeader {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
}

.lineHeader .line {
	position: absolute;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #333;
}

.lineHeader .headerText {
	position: relative;
	z-index: 1;
	font-size: 45px;
	font-weight: bold;
	line-height: 1.2em;
	text-align: center;
	font-family: "Roboto", sans-serif;
	color: rgb(39, 39, 37);
	background-color: #FFF;
	padding: 0 65px;
}

.lineHeader .headerText span {
	color: #5d8917 !important;
}

/* ----------------------------------------------------
		End Line Header
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Three Blocks
------------------------------------------------------- */

.threeBlocksBG {
	margin-bottom: 50px;
	padding: 50px 0;
	background-color: rgb(247, 247, 247) !important;
}

.threeBlocks .block {
	max-width: 365px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 42px;
}

.threeBlocks .img {
	height: 145px;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.threeBlocks .blockText {
	margin-bottom: 15px;
}

.threeBlocks .blockText h3 {
	font-family: "Roboto", sans-serif;
	color: rgb(39, 39, 37);
	font-size: 32px;
	line-height: 1.1em;
}

.threeBlocks .blockText h3 span {
	color: #5d8917 !important;
}

@media screen and (min-width:1024px) {
	.threeBlocks {
		display: flex;
		justify-content: space-evenly;
	}
}

/* ----------------------------------------------------
		End Three Blocks
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Why Us
------------------------------------------------------- */

.whyUsList {
	margin-bottom: 50px;
	color: rgba(39,39,37,1);
	font-weight: bold;
	font-size: 17px;
}

.whyUsList ul {
	max-width: 275px;
}

.whyUsList ul li {
	list-style-type: none;
}

.whyUsList ul > li:before {
	font-weight: 700;
	content: '\2022';
	font-family: Arial;
	margin-right: 10px;
}

@media screen and (min-width:768px) {
	.whyUsList {
		display: grid;
		grid-template-columns: repeat(2,1fr);
	}
}

@media screen and (min-width:1024px) {
	.whyUsList {
		grid-template-columns: repeat(3,1fr);
	}
}

@media screen and (min-width:1250px) {
	.whyUsList {
		grid-template-columns: repeat(4,1fr);
	}
}

/* ----------------------------------------------------
		End Why Us
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Text With Background Image
------------------------------------------------------- */

.textWithBGImage {
	margin-bottom: 50px;
	padding: 10% 0;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.textWithBGImage .text {
	color: #FFF;
	position: relative;
	z-index: 10;
	text-align: center;
}

.textWithBGImage h3 {
	font-size: 45px;
	line-height: 1.1em;
	font-weight: bold;
	margin-bottom: 15px;
}

.textWithBGImage h4 {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 15px;
}

.textWithBGImage ul > li:before {
	font-weight: 700;
	content: '\2022';
	font-family: Arial;
	margin-right: 10px;
}

.textWithBGImage ul li {
	margin: 0 15px;
}

@media screen and (min-width:768px) {
	.textWithBGImage ul {
		display: flex;
		justify-content: center;
	}
}

/* ----------------------------------------------------
		End Text With Background Image
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Home Dumpster Rental
------------------------------------------------------- */

.dumpsterRental {
	margin-bottom: 50px;
}

.dumpsterRental .content {
	margin-top: -80px;
}

.dumpsterRental .item {
	max-width: 285px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

.dumpsterRental img {
}

.dumpsterRental .size {
	margin-top: -35px;
}

@media screen and (min-width:768px) {
	.dumpsterRental .content {
		display: grid;
		grid-template-columns: repeat(2,1fr);
	}
}

@media screen and (min-width:1024px) {
	.dumpsterRental .content {
		grid-template-columns: repeat(3,1fr);
	}

	.dumpsterRental-3 .content {
		grid-template-columns: repeat(3,1fr) !important;
	}
}

@media screen and (min-width:1250px) {
	.dumpsterRental .content {
		grid-template-columns: repeat(4,1fr);
	}
}

/* ----------------------------------------------------
		End Home Dumpster Rental
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Estimate Form Section
------------------------------------------------------- */

.estimateFormWrap {
	padding: 75px 0;
	background-color: rgb(247,247,247) !important;
}

.estimateFormWrap .sectionHeader {
	font-size: 45px;
}

.estimateFormWrap .content {
}

.estimateFormWrap .content .left {
	margin-bottom: 35px;
}

.estimateFormWrap .map {
	margin-bottom: 20px;
}

.estimateFormWrap .left ul li {
	display: flex;
	padding-bottom: 15px;
}

.estimateFormWrap .left ul li .icon {
	flex: 0 1 40px;
}

.estimateFormWrap .content .right {
}

@media screen and (min-width:768px) {
	.estimateFormWrap .content {
		display: flex;
		justify-content: space-between;
	}

	.estimateFormWrap .content > * {
		flex: 0 1 48%;
	}

	.estimateFormWrap .content .left {
		margin-bottom: 0;
	}
}

/* ----------------------------------------------------
		End Estimate Form Section
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Form Styles
------------------------------------------------------- */

.formWrap .formRow {
	margin-bottom: 10px;
}

.formWrap .formError {
	margin-bottom: 15px;
	color: red;
	font-size: 16px;
}

.formWrap .formRow input[type=text],
.formWrap .formRow textarea {
	width: 100%;
	color: #FFF;
	background-color: rgba(84,130,53,1) !important;
	border: none;
}

.formWrap .formBtnRow {
	padding-top: 10px;
	text-align: center;
}

/* ----------------------------------------------------
		End Form Styles
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Text Image Side X Side Callout
------------------------------------------------------- */

.imgTextSideXSide {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

.imgTextSideXSide .content {
	padding-top: 75px;
	padding-bottom: 75px;
	position: relative;
	z-index: 10;
}

.imgTextSideXSide .left {
	margin-bottom: 30px;
}

.imgTextSideXSide .right {
}

@media screen and (min-width:1024px) {
	.imgTextSideXSide .content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imgTextSideXSide .content.flip {
		flex-direction: row-reverse;
	}

	.imgTextSideXSide .content > * {
		flex: 0 1 48%;
	}
}

/* ----------------------------------------------------
		End Text Image Side X Side Callout
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Front Load Dumpster List
------------------------------------------------------- */

.frontLoadDumpsterList .imgTextSideXSide .content {
	margin-bottom: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgb(41, 61, 76);
}

/* ----------------------------------------------------
		End Front Load Dumpster List
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Roll Off Dumpster List
------------------------------------------------------- */

.dumpsterRentalPage.dumpsterRental .content,
.dumpsterRentalPage.dumpsterRental .size {
	margin-top: 0;
}

.dumpsterRentalPage .dumpsterRental .item {
	max-width: 400px;
}

/* ----------------------------------------------------
		End Roll Off Dumpster List
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Contact Form
------------------------------------------------------- */

.contactForm {
	margin-bottom: 50px;
}

.contactForm .left {
	margin-bottom: 30px;
}

.contactForm .formWrap .formRow {
	margin-bottom: 21px;
}

.contactForm .formWrap .formRow input[type=text],
.contactForm .formWrap .formRow textarea {
	color: #000;
	background-color: transparent !important;
	border-bottom: 1px solid #000;
}

.contactForm input[type=text] {
	padding: 0 0 0 8px;
}

.contactForm select {
	border: none;
	border-bottom: 1px solid #000;
}

@media screen and (min-width:1024px) {
	.contactForm {
		display: flex;
		justify-content: space-between;
	}

	.contactForm > * {
		flex: 0 1 48%;
	}
}


/* ----------------------------------------------------
		End Contact Form
------------------------------------------------------- */

.joinMrdnMsg {
	text-align: center;
	max-width: 450px;
	margin: 0 auto;
}

.joinMrdnMsg .left {
	margin-bottom: 10px;
}

.joinMrdnMsg .left img {
	display: inline-block;
}

.joinMrdnMsg .right {
}

@media screen and (min-width:768px) {
	.joinMrdnMsg {
		text-align: left;
		max-width: 600px;
		display: flex;
		align-items: center;
	}

	.joinMrdnMsg .left {
		margin-bottom: 10px;
		flex: 0 1 224px;
		padding-right: 30px;
	}

	.joinMrdnMsg .right {
		flex: 1;
	}
}

