@media screen and (max-width: 1200px) {
	#main-nav > ul > li {
		margin: 0;
	}
	body > header .top-navigation div {
		left: 0;
	}
}

@media screen and (max-width: 1100px) {
	
	/**
	 * Hide phone text
	 *
	 * Hide the phone number but leave the icon
	 */
	body > header .top-navigation div > h2 {
		font-size: 0;
		line-height: 44px;
		padding: 0 12px;
	}
	
}

@media screen and (max-width: 1000px) {
	
	/**
	 * Responsive home/sub page banners
	 *
	 * 
	 */
	#banner-tiles>li {
		width:100%;
		border: none;
		top: 0;
		left:0;
		right: 0;
		margin: 0 auto;
	}
	#banner.home::before,
	#banner-tiles > li::before, 
	#banner-tiles > li::after {
		display: none;
	}
	#banner-tiles {
		height: 417px;
	}
	#banner.home {
		margin-bottom: 50px;
	}
	#banner nav {
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	#banner-prev {
		background: none;
    right: auto;
    left: 0;
	}
	#banner-next {
		background: none;
    left: auto;
    right: 0;
	}
	
	/* Subpages */
	#banner:before,
	#banner > h1:before,
	#banner > h1:after {
		display: none;
	}
	#banner.inner {
		margin-bottom: 20px;
		height: 270px;
		min-height: 100%;
	}
	#banner.inner > div {
		background-attachment: scroll;
		background-color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border: none;
		position: relative;
		top: 0;
		margin: 0;
		left: 0;
		width: 100%;
	}
}

@media screen and (max-width: 900px) {
	/**
	 * Mobile navigation
	 *
	 * Setup styles and layout for the mobile side menu.
	 */
	body > header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.top-navigation {
		display: none;
	}
	#main-nav {
		height: 70px;
		padding: 10px;
	}
	#main-nav > a {
		padding: 0;
		height: 100%;
		width: 155px;
	}
	#main-nav > a:hover {
		background: none !important;
	}
	.mobile-logo {
		display: block;
		position: relative;
		z-index: 999;
		height: 100%;
	}
	.mobile-nav-control {
		background: #252525;
		border-radius: 5px;
		display: block;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 100%;
		width: 65px;
		z-index: 999;
	}
	.mobile-nav-control span {
		background: #006fd0 url('../images/site/texture-scratchy.png') repeat center top;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		height: 5px;
		width: 45px;
		transition: all 0.3s ease 0;
	}
	.mobile-nav-control span:before,
	.mobile-nav-control span:after {
		content: '';
		background: #006fd0 url('../images/site/texture-scratchy.png') repeat center top;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		height: 5px;
		width: 45px;
		transition: all 0.3s ease 0s;
	}
	.mobile-nav-control span:before {
		top: 12px;
	}
	.mobile-nav-control span:after {
		bottom: 12px;
	}
	body.open-nav .mobile-nav-control span {
		background: none;
	}
	body.open-nav .mobile-nav-control span:before {
		transform: rotate(135deg);
		transform-origin: 25px -3px;
	}
	body.open-nav .mobile-nav-control span:after {
		transform: rotate(-135deg);
		transform-origin: 25px 9px;
	}
	#main-nav > ul {
		background-color: #252525;
		position: fixed;
		top: 0;
		right: -100%;
		bottom: 0;
		height: calc(100% - 70px);
		max-height: 100%;
		width: 100%;
		max-width: 320px;
		z-index: 998;
		top: 70px !important;
		overflow: auto;
		transition: all 0.3s ease 0s;
	}
	body.open-nav #main-nav ul {
		right: 0;
	}
	#main-nav > ul > li {
		border-bottom: solid 1px #fff;
		display: block;
		text-align: left;
	}
	#main-nav > ul .logo-item {
		display: none;
	}
	#main-nav > ul > li ul {
		display: block;
		position: relative;
	}
	#main-nav > ul > li ul a {
		padding-left: 30px;
	}
	
	#main-nav #top-nav ul {
		background: #006fd0 url('../images/site/texture-scratchy.png') repeat center top;
		text-align: center;
	}
	#main-nav #top-nav #search {
		padding: 0 0 10px;
		width: 100%;
	}
	#main-nav #top-nav #search input:last-child {
		padding-left: 5px;
	}
	#main-nav #top-nav #search-q {
		width: 80%;
	}
	#main-nav #top-nav ul li {
		display: inline-block;
	}
	#main-nav #top-nav ul li a {
		padding: 0;
	}
	
	/**
	 * Footer Styles
	 *
	 * Move around the footer elements and center them.
	 */
		#jb-logo {
			order: 2;
		}
		.flex > div {
			order: 3;
			width: 100%;
		}
		
		/**
		* Subpage styles
		*
		* Full width content sections
		*/
		.main.col,
		.side.col {
			width: 100%;
		}
		.main.col > div,
		.side.col > div {
			padding: 0 10px;
		}
		.col + .col {
			margin: 0;
		}
	
	/**
	 * Metal prices found on the services/pricing page
	 *
	 * 
	 */
		.metal-prices {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
		}
		.metal-prices .main.col {
			order: 2;
		}
		.metal-prices .side.col {
			order: 1;
		}
		#side-nav {
			text-align: left;
		}
		#price-list h2 {
			padding-left: 10px;
		}
}

@media screen and (max-width:700px) {
	#content #contact {
		display: none;		
	}
}

@media screen and (max-width:670px) {
	#banner-tiles li {
	  display: flex;
	  justify-content: center;
	  flex-direction: column;
	}
	#banner-tiles > li:before {
		content: '';
		background: rgba(0, 0, 0, 0.5);
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	/* All importants are set to overide all banner heavy positions */
	#banner-tiles > li * {
		position: relative;
		background: none !important;
		left: 0 !important;
		top: 0 !important;
		display: inline-block !important;
		padding: 0 !important;
		margin: 0 !important;
		transform: rotate(0deg) !important;
	}
	#banner-tiles > li > * {
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
	#banner-tiles li h2 {
		display: block !important;
		padding-bottom: 15px !important;
	}
	#banner-tiles li a {
		background: #006fd0 url('../images/site/texture-scratchy.png') repeat center top !important;
		padding: 0.5em 0.7em !important;
		margin-top: 15px !important;
	}
	#banner.inner > h1 {
		left: 0;
		bottom: 0;
		right: 0;
		text-align: left;
	}
	
	/**
	 * Parts salvage page
	 *
	 * 
	 */
	 .parts-list li figure > ul,
 	 .parts-list li figure > ul li,
 	 .parts-list li figure > ul li a,
	 .parts-list li figure > div {
		 display: block;
		 padding-left: 0 !important;
		 position: relative;
		 height: 150px;
		 width: 100%;
	 }
	 .parts-list figcaption {
		 display: block;
		 margin: 0 auto;
		 width: 100%;
	 }
}

@media screen and (max-width:570px){
	#price-list article header {
		padding: 135px 0 0 0;
	}
	#price-list article h3 {
		margin: 0;
	}
	#price-list article ul {
		padding: 0;
	}
	#price-list article li {
		padding: 5px;
	}
	#price-list article figure p {
		height: 150px;
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width:480px){
	/**
	 * Full with dumpsters on the dumpsters page
	 *
	 * 
	 */
	.dumpsters figure {
    width: 100%;
	}
}