/* Styles for content pages */


/************************************************************
Banner area (home page) */

#banner {
	position:relative;
	background:transparent none no-repeat center center;
	margin:-2em 0 3em -8px;
}
#banner {
  position: relative;
  background: transparent none no-repeat center center;
  margin: 0 0 3em 0;
  max-width: 966px;
  width: 100%;
  min-height: 340px;
}
#banner:before {
	content:url('../images/site/bg-banners.jpg');
	display:block;
	position:absolute;
	overflow:hidden;
	margin:-131px 0 0 -457px;
	height:280px;
	left:50%;
	top:50%;
	box-shadow:0 0 10px rgba(0,0,0,0.5);

	-webkit-transform:rotate(-4deg);
	-ms-transform:rotate(-4deg);
	-o-transform:rotate(-4deg);
	transform:rotate(-4deg);
}

/* Specific tweaks to home page banners */
#banner.home {
	margin: 0 auto 50px;
	width: 100%;
}
#banner.home:before {
	height:448px;
	margin-top:-224px;
}


/* Tiles */
#banner-tiles {
	color:#fff;
	position:relative;
	list-style:none;
	margin:0 auto;
	padding:0;
	text-transform:uppercase;
	height:534px;
	max-width: 856px;
	width: 100%;
}
#banner-tiles>li {
	position:absolute;
	text-align:left;
	background:transparent none no-repeat center center;
	background-size: cover;
	width:856px;
	height:437px;
	border:10px solid rgba(17,17,17,0.7);
	margin:-218px 0 0 -438px;
	left:50%;
	top:50%;
	visibility:hidden;
	opacity:0;

	-webkit-transition:all 0.6s ease 0s;
	transition:all 0.6s ease 0s;
}
#banner-tiles>li:before,
#banner-tiles>li:after {
	content:url('../images/site/triangle.png');
	position:absolute;
	overflow:hidden;
}
#banner-tiles>li:before {
	left:-27px;
	top:-10px;
	height:25px;
}
#banner-tiles>li:after {
	right:-27px;
	bottom:-10px;
	height:26px;

	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}
#banner-tiles>li.sel {
	visibility:visible;
	opacity:1;
}

#banner-tiles h2 {
	position:absolute;
	left:1.7em;
	top:1.4em;
	line-height:1.5;
	padding:0.2em 0.5em;
	background:rgba(0,0,0,0.7);
}
#banner-tiles p {
	font:bold 15pt/1.5 Eurostile,Arial,Helvetica,sans-serif;
	background:rgba(0,0,0,0.7);
	position:absolute;
	padding:0.2em 0.5em;
	top:4.7em;
	left:4.2em;
}
#banner-tiles p>* {
	position:absolute;
	white-space:nowrap;
}
#banner-tiles p em {
	font:italic normal 13.5pt/1.5 Bebas,Arial,Helvetica,sans-serif;
	background:rgba(0,0,0,0.7);
	padding:0.2em 0.6em;
	left:6.2em;
	top:2.6em;
}
#banner-tiles p strong {
	background:rgba(0,0,0,0.7);
	font-size:44pt;
	line-height:1;
	padding:0.1em 0.2em 0;
	right:-0.3em;
	top:0.8em;
}
#banner-tiles p small {
	display:inline-block;
	font:11pt/1.5 Bebas,Arial,Helvetica,sans-serif;
	background:rgba(0,0,0,0.7);
	margin:0 -1.3em;
	padding:0;

	-webkit-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
}
#banner-tiles p strong small {
	background:none;
	position:relative;
	top:-0.7em;
	left:-0.3em;
}
#banner-tiles p .button {
	left:10.7em;
	top:6.1em;
}

/* Specific tiles */
#banner #banner-01 {
	background-image:url('../images/banners/home/banner-01.jpg');
}
#banner #banner-02 {
	background-image:url('../images/banners/home/banner-02.jpg');
}
#banner #banner-03 {
	background-image:url('../images/banners/home/banner-03.jpg');
}
#banner #banner-04 {
	background-image:url('../images/banners/home/banner-04.jpg');
}


#banner #banner-02 p em {
	font-size:18pt;
	line-height:40px;
	padding:0 0.5em 3px 0.3em;
	top:1.9em;
	left:0;
}
#banner #banner-02 p small {
	padding:0.1em 0.6em;
	left:8.1em;
	top:4em;
}
#banner #banner-02 p small+em {
	font-size:21pt;
	top:1.6em;
	left:4.8em;
}
#banner #banner-02 p .button {
	left:5.2em;
	top:5em;
}

#banner #banner-03 p strong {
	font-size:36pt;
	left:2.9em;
	right:auto;
	top:0;
}
#banner #banner-03 p>small {
	padding:0.2em 0.4em;
	left:18.2em;
	top:0;

	-webkit-transform:none;
	-ms-transform:none;
	transform:none;
}
#banner #banner-03 p em {
	padding:0.1em 0.5em 0.1em 0.3em;
	font-size:21pt;
	left:8.8em;
	top:1.4em;
}
#banner #banner-03 p strong small {
	margin:0 -0.8em;
}
#banner #banner-03 p .button {
	left:7.8em;
	top:4.8em;
}



/* Navigation */
#banner nav {
	position:absolute;
	left:50%;
	width:100%;
	bottom:3em;
	max-width:875px;
	margin:0 0 0 -437px;
}
#banner nav ol {
	list-style:none;
	margin:2.7em 0;
	padding:0;
}
#banner nav li {
	display:inline;
}
#banner nav li a {
	display:inline-block;
	text-align:left;
	text-indent:-9999px;
	outline:none;
	height:1.2em;
	width:1.2em;
	margin:0.1em;
	background:rgba(255,255,255,0.35);
	border-radius:100%;
}
#banner nav li.sel a {
	background:#0071d4;
}

#banner-prev,
#banner-next {
	position:absolute;
	font:50pt/1 Arial,Helvetica,sans-serif;
	padding:0.2em 0.2em 0.3em;
	bottom:2.7em;
	background:#252525;
	color:#fff;
}
#banner-prev {
	right:100%;
}
#banner-next {
	left:100%;
}


/************************************************************
Banner area (other pages) */

/* Banner heading */
#banner>h1 {
	position:absolute;
	background:rgba(0,0,0,0.7);
	color:#fefefe;
	font-size:24pt;
	padding:0.3em 0.4em;
	bottom:40px;
	left:75px;
	z-index:2;
}
#banner>h1:before,
#banner>h1:after {
	content:url('../images/site/triangle.png');
	position:absolute;
	overflow:hidden;
}
#banner>h1:before {
	left:-47px;
	top:-202px;
	height:34px;
}
#banner>h1:after {
	left:847px;
	bottom:-29px;
	height:35px;

	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}


/* Banner image */
#banner > img,
#banner > div {
	position:absolute;
	overflow:hidden;
	height:284px;
	width:877px;
	left:50%;
	top:50%;
	margin:-132px 0 0 -438px;
	border:10px solid rgba(17,17,17,0.7);
}



/************************************************************
Callouts area (home page) */

#callouts {
	position:relative;
	text-align:center;
	padding:2em 0 5.5em;
	box-shadow:inset 400px 0 200px -200px rgba(17,17,17,0.3), inset -400px 0 200px -200px rgba(17,17,17,0.3);
}
#callouts:before {
	content:' ';
	position:absolute;
	width:100%;
	height:5px;
	left:0;
	top:0;
	background:transparent url('../images/site/slashes.png') repeat center center;

	/*
	background-image:-webkit-repeating-linear-gradient(155deg, rgba(93,93,93,0) 5px, rgba(93,93,93,0.9) 9px);
	background-image:repeating-linear-gradient(155deg, rgba(93,93,93,0) 5px, rgba(93,93,93,0.9) 9px);
	*/
}
#callouts aside {
	display:inline-block;
	vertical-align:top;
	margin:1em;
}
#callouts aside>a {
	height:335px;
	margin:20px;
}
#callouts aside h3 {
	font-size:23pt;
}
#getDir {
	height: auto;
	padding: .3em;
	text-align: center;
}

/************************************************************
Featured area (home page) */

#featured {
	position:relative;
	text-align:center;
	padding:3.5em 0 0.5em;
	background:#006fd0 url('../images/site/texture-scratchy.png') repeat center top;
	box-shadow:inset 3px 4px 40px rgba(0,0,0,0.4);
}
#featured:before {
	content:' ';
	position:absolute;
	height:100%;
	width:530px;
	background:transparent url('../images/site/question-marks.png') no-repeat right center;
	right:0;
	top:0;
	
}
#featured header {
	position:absolute;
	margin:-3em 0 0;
	width:100%;
	z-index:2;
	left:0;
	top:0;
}
#featured header h2 {
	position:relative;
	display:inline-block;
	background:#252525 url('../images/site/bg-metal.jpg') no-repeat center center;
	background-size:100% 100%;
	margin:0;
	font-size:27pt;
	font-style:italic;
	letter-spacing:1px;
	padding:0.4em 1.1em;
	box-shadow:0 0 10px rgba(0,0,0,0.6);
	text-shadow:3px 4px 5px rgba(0,0,0,0.8);

	-webkit-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
#featured header h2:before {
	content:' ';
	position:absolute;
	background:transparent url('../images/site/triangle.png') no-repeat left center;
	width:20px;
	height:35px;
	left:-16px;
	top:0;
}

#featured article {
	position:relative;
	margin:0 auto;
	text-shadow:1px 1px 0 rgba(0,0,0,0.5);
	max-width: 1070px;
	width: 100%;
	z-index:2;
}
#featured article > div {
	padding: 0 10px;
}
#featured article h3 {
	font-family:Eurostile,Arial,Helvetica,sans-serif;
	text-transform:uppercase;
}
#featured article p {
	font-size:12pt;
	margin:0.4em 0 1.2em;
}
#featured article a {
	color:#fefefe;
}
#featured article a em {
	text-decoration:underline;
}


/************************************************************
Side navigation */

#side-nav {
	text-align:right;
	padding:0 0.8em;
	margin:0 0 2em;
}
#side-nav ul {
	list-style:none;
	margin:1em -0.8em;
	padding:0;
}
#side-nav li {
/* 	margin:0.45em 0; */
}
#side-nav li a {
	display:block;
	font-size:12pt;
	font-weight:bold;
	padding:0.4em 0.7em;
	color:#111;
}
#side-nav li.sel a /*,
#side-nav li a:hover*/ {
	background:#006fd0 url('../images/site/texture-scratchy.png') repeat center top;
	color:#fff;
}


/************************************************************
Parts List */

.col.main .parts-list {
	list-style:none;
	margin:2em 0;
	padding:0;
}
.parts-list>li {
	margin:1.5em 0;
	padding:0.5em 0.7em;
	box-shadow:inset 260px 0 130px -130px rgba(17,17,17,0.2), inset -260px 0 130px -130px rgba(17,17,17,0.2);
	border-radius:0.2em;
}

.parts-list figure {
	position:relative;
	margin:0;
	padding:0;
}
.parts-list li figure > ul,
.parts-list li figure > ul li,
.parts-list li figure > ul li a,
.parts-list li figure > div {
	position:absolute;
	height: 100%;
	width:195px;
	max-height:150px;
	left:0;
	top:0;
	list-style: none;
	background-attachment: scroll;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.parts-list li figure > ul li a:before {
	content: 'View More Photos';
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 19px;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease 0s;
}
.parts-list li figure > ul li a:hover:before {
	opacity: 1;
	visibility: visible;
}
.parts-list li figure > ul li a img {
	opacity: 0;
	visibility: hidden;
}
.parts-list figcaption {
	min-height:150px;
	margin-left:210px;
}

.parts-list h3 {
	font:bold 15pt/1.2 Eurostile,Arial,Helvetica,sans-serif;
	margin:0.2em 0;
}
.parts-list p {
	margin:0.5em 0 0.7em;
	font-size:11pt;
	font-weight:bold;
}


/* Categories page */
#cat-list a {
	display:block;
	color:inherit;
}


/************************************************************
Scrap pricing list */

#price-list article {
	position:relative;
	margin:1.5em 0;
	padding:1em;
	font-size:12pt;
	min-height:300px;
	box-shadow:inset 260px 0 130px -130px rgba(17,17,17,0.2), inset -260px 0 130px -130px rgba(17,17,17,0.2);
}
#price-list article header {
	white-space:nowrap;
}
#price-list article header,
#price-list article ul {
	list-style:none;
	margin:0;
	padding:0 0 0 170px;
}
#price-list article h3 {
	font-size:14pt;
	font-style:italic;
	display:inline-block;
	vertical-align:top;
	margin-left:30px;
	width:200px;
}
#price-list article li {
	padding:0.3em 0 0.1em 30px;
	background:transparent;
	background-clip:padding-box;
	border-top:2px solid transparent;

	clear:both;
	overflow:hidden;
}
#price-list article li:before {
	content:'\276E';
	visibility:hidden;
	opacity:0;
	float:left;
	margin:-0.1em 0 0 -1.2em;

	-webkit-transform:scaleX(1.5);
	-ms-transform:scaleX(1.5);
	transform:scaleX(1.5);
}
#price-list article figure,
#price-list article h4 {
	/*display:inline-block;
	vertical-align:top;*/
	margin:0;
}
#price-list article h4 {
	font-size:12pt;
	/*width:230px;*/

	float:left;
	max-width:165px;
}
#price-list article figure {

	float:right;
	min-width:170px;
	padding-right:5px;
}
#price-list article figure p {
	position:absolute;
	visibility:hidden;
	overflow:hidden;
	opacity:0;
	margin:0;
	left:0;
	top:0;
	height:100%;
	width:200px;
	z-index:2;
}
#price-list article figure img {
	padding:1em;
	max-height:100%;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


/* Animations */
#price-list article li,
#price-list article li:before,
#price-list article figure p {
	-webkit-transition:all 0.5s ease 0s;
	transition:all 0.5s ease 0s;
}
#price-list article li:hover {
	background:rgba(0,0,0,0.85);
	color:#fff;
}
#price-list article li:hover:before,
#price-list article li:hover figure p {
	visibility:visible;
	opacity:1;
}

/* Some trickery to get that default image to show properly (and vanish on hovering another image) */
#price-list article li:last-child {
	height:0;
	background:none !important;
}
#price-list article li:last-child:before {
	content:' ';
}
#price-list article li:last-child figure p {
	visibility:visible;
	opacity:1;
	z-index:1;

	-webkit-transition:none;
	transition:none;
}
#price-list article li:hover~li:last-child {
	visibility:hidden;
	opacity:0;
}



/* Section fade in/out */
#price-list {
	position:relative;
	list-style:none;
	top:-1em;
	margin:0;
	padding:0;
}
#price-list>li {
	position:absolute;
	visibility:hidden;
	padding:1px 0;
	width:100%;
	opacity:0;
	left:0;
	top:0;

	transition:all 0.5s ease 0s;
}
#price-list>li.open {
	position:static;
	visibility:visible;
	opacity:1;
}



/************************************************************
FAQs */

#faqs {
	position:relative;
	margin:0.5em 0 2em;
	padding:0 0 0 1.3em;
}
#faqs dt {
	font:15pt/1.1 FjallaOne,Arial,Helvetica,sans-serif;
	margin:0.3em;
}
#faqs dd {
	margin:0 0 0.5em;
	padding:0;
}
#faqs dd p {
	margin:0;
	padding:0 0 0.5em;
}

#faqs dt:before,
#faqs dd:before {
	content:'Q:';
	font:15pt/1.1 FjallaOne,Arial,Helvetica,sans-serif;
	position:absolute;
	left:0;
}
#faqs dd:before {
	content:'A:';
}
#faqs dt:after {
	content:' ';
	display:block;
	height:1px;
	margin:0.6em 0 0.2em -1em;
	background:transparent url('../images/site/slashes.png') repeat center center;
	box-shadow:inset -8em 0 3em -3em rgba(245,245,245,0.7);
}


/* Fade effect to smoothen the JQuery toggling */
#faqs dd {
	visibility:hidden;
	max-height:1px;
	opacity:0;

	-webkit-transition:all 0.5s cubic-bezier(1,0,0,0.5) 0s;
	transition:all 0.5s cubic-bezier(1,0,0,0.5) 0s;
}
#faqs dd.open {
	visibility:visible;
	max-height:500px;
	opacity:1;
}



/************************************************************
Animated contact area */

#contact {
	position:relative;
	overflow:hidden;
	text-align:left;
	padding:1px 0;
}
#contact:before {
	content:' ';
	position:absolute;
	width:100%;
	height:5px;
	left:0;
	top:0;
	background:transparent url('../images/site/slashes.png') repeat center center;
	box-shadow:inset 8em 0 3em -3em rgba(195,195,195,0.7), inset -8em 0 3em -3em rgba(195,195,195,0.7);
}

#contact p {
	position:relative;
	width:750px;
	height:145px;
	margin:2em auto 1em;
	font:22pt/1.2 Bebas,Arial,Helvetica,sans-serif;
}
#contact a {
	display:block;
	color:#fff;
}
#contact span,
#contact em,
#contact small {
	position:absolute;
	display:inline-block;
	text-align:center;
	background:rgba(0,0,0,0.75);
	padding:0.2em 0.5em 0.3em;
}
#contact em {
	font:italic bold 14pt/1.2 Eurostile,Arial,Helvetica,sans-serif;
	text-transform:uppercase;
}
#contact small {
	font:italic normal 15pt/1.2 Eurostile,Arial,Helvetica,sans-serif;
	text-transform:lowercase;

	-webkit-transform-origin:bottom left;
	-ms-transform-origin:bottom left;
	-o-transform-origin:bottom left;
	transform-origin:bottom left;

	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
}

/* All the little pieces */
#contact #c1 {
	font-size:24pt;
	left:0;
	top:0;

	-webkit-transition-delay:0.6s;
	transition-delay:0.6s;
}
#contact #c2 {
	padding:0.3em 0.7em;
	left:80px;
	top:63px;

	-webkit-transition-delay:0.2s;
	transition-delay:0.2s;
}
#contact #c3 {
	width:105px;
	left:225px;
	top:63px;

	-webkit-transition-delay:0.5s;
	transition-delay:0.5s;
}
#contact #c4 {
	padding:0.2em 0.8em 0.35em;
	left:344px;
	top:-10px;

	-webkit-transition-delay:0.7s;
	transition-delay:0.7s;
}
#contact #c5 {
	padding:0.25em 0.4em 0.35em;
	left:390px;
	top:0;

	-webkit-transition-delay:0.5s;
	transition-delay:0.5s;
}
#contact #c6 {
	font:bold 24pt/1.2 Eurostile,Arial,Helvetica,sans-serif;
	padding:0.1em 0.25em;
	left:500px;
	top:8px;

	-webkit-transition-delay:0.7s;
	transition-delay:0.7s;
}
#contact #c7 {
	font:bold 24pt/1.2 Eurostile,Arial,Helvetica,sans-serif;
	text-transform:uppercase;
	padding:0.2em 0.7em 0.1em;
	left:390px;
	top:63px;

	-webkit-transition-delay:0.4s;
	transition-delay:0.4s;
}
#contact #c8 {
	position:absolute;
	left:580px;
	top:65px;

	-webkit-transition-delay:0.3s;
	transition-delay:0.3s;
}


/* Animations */
#contact a>* {
	margin-top:-250px !important;

	-webkit-transition:margin 0.7s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;
	transition:margin 0.7s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;
}
#contact.appear a>* {
	margin-top:0 !important;
}


/************************************************************
Search results */

/* Results list */
#search-results {
	list-style:none;
	margin:1em 0;
	padding:0;
}
#search-results li {
	margin:1.5em 0 0;
}
#search-results li:before {
	content:' ';
	display:block;
	height:5px;
	width:100%;
	margin:0.5em 0;
	background:transparent url('../images/site/slashes.png') repeat-x center center;
	box-shadow:inset 8em 0 3em -3em rgba(195,195,195,0.7), inset -8em 0 3em -3em rgba(245,245,245,0.7);
}
#search-results a {
	color:inherit;
}

/* Pagination */
.pagination {
	list-style:none;
	margin:1em 0;
	padding:0;
	text-align:center;
}
.pagination li {
	display:inline;
	margin:0 0.2em;
}


/************************************************************
Callouts */

/* Shared */
aside {
	text-align:center;
	max-width:295px;
	padding:1px;
	margin:1.5em auto;
	font-size:12pt;
	line-height:1.15;
	background:transparent none no-repeat center center;
	box-shadow:inset 0 0 1em rgba(0,0,0,0.75);
	border-radius:0.2em;
}
aside>a {
	position:relative;
	display:block;
	margin:10px;
	padding:0.7em 1.5em 4em;
	color:#fefefe !important;
	background:rgba(0,0,0,0.7);
}
aside h3 {
	line-height:1.2;
}
aside .button {
	position:absolute;
	margin:0;
	left:10%;
	width:80%;
	bottom:0.8em;

	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
aside>a:hover .button {
	background-color:#ee0113;
}
aside ul {
	text-align:left;
	margin:0.7em 0;
	padding:0 0 0 1.5em;
}

/* Generic */
aside.box {
	text-align:left;
	padding:0.3em 1em;
	background:rgba(17,17,17,0.85);
	color:#fff;
}
aside.box p {
	margin:0.5em 0;
}
aside.box a {
	color:#fff;
}


/* Parts */
aside.parts {
	background-image:url('../images/photos/callout-parts.jpg');
}

/* Recycling Services */
aside.recycling {
	background-image:url('../images/photos/callout-recycling.jpg');
}

/* Dumpster Services */
aside.dumpster {
	background-image:url('../images/photos/callout-dumpster.jpg');
}

/* Callout */
aside.trucks {
	background-image:url('../images/photos/callout-truck.jpg');
}



/************************************************************
Odds and Ends */

/* Google map */
.map-canvas {
	height:200px;
	border:7px solid rgba(0,0,0,0.5);
	border-radius:0.3em;
}

/* Photos */
.photos {
    margin:1.5em auto;
}
.photos img {
	display:block;
	margin:0 auto;
	padding:8px;
    max-width:94%;
	background:rgba(17, 17, 17, 0.8);
    border-radius:0.2em;
}

/* Dumpster Illustrations */
.dumpsters {
	display: flex;
	flex-wrap: wrap;
}
.dumpsters figure {
	margin: 0;
	width: 50%;
}
.dumpsters figcaption {
	margin:0 0.5em;
}
.dumpsters p {
	margin:0.6em 0.5em;
}


/* Columns */
ul.cols {
	list-style:none;
	padding-left: 17px;
	width:100%;

	-moz-column-gap:3em;
	-webkit-column-gap:3em;
	column-gap:3em;

	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
}
/* This mess is to keep the <li>s from breaking across columns */
ul.cols li {
	display:table;
	-webkit-column-break-inside:avoid;
}
ul.cols li:before {
	content:'\2022';
	float:left;
	font-size:120%;
	line-height:1.1;
	margin-left:-0.7em;
}