/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

	YELLOW:  #FFF200
	PURPLE:  #662D91

	DARK PURPLE: #4C1973
	LIGHT YELLOW: #FFFBAE
*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

* {box-sizing: border-box;}

body {

}

.wid-90 {width: 90%; margin: 0 auto;}

.padit {padding: 100px 0;}

.logo {max-width: 300px;}

.logo img {padding: 15px 0; max-width: 300px;}


/*------------- TEXT STYLES AND BUTTONS -------------*/

.purple {color: #662D91;}

.yellow {color: #FFF200;}

.white {color: #fff;}

.light-txt {font-weight: 400;}

.italics {font-style: italic;}

a:link, a:visited, a:active {text-decoration:none; font-family: "Open Sans", sans-serif; color: #551A8B;}
a:hover {text-decoration:none;}

h1, h2, h3, h4, h5, h6, p, li { font-family: "Open Sans", sans-serif;}

p, li {
	font-size: 16px;
	line-height: 1.8;
}

.wid-90 ul {margin-left: 20px;}

.sm-heading {
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 5px;
}

.heading {
	font-size: 48px;
	text-transform: uppercase;
	font-weight: 900;
}

hr{border:#000 1px solid;}

/*  BUTTONS  */

.hero-btn {
	width: 200px;
	padding: 10px 0;
	background: #FFF200;
	color: #000;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
	border: none;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}

.hero-btn:hover {
	color: #662D91;
}

.yellow-btn {
	width: 200px;
	padding: 10px 0;
	background: #FFF200;
	color: #662D91;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	border-left: 10px solid #662D91;
	box-shadow: 0 3px 8px rgba(0,0,0,.25);
/*	for animation*/
	transform: perspective(1px) translateZ(0);
  	position: relative;
  	transition: color 0.3s;
}

.yellow-btn:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #662D91;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s ease-out;
}

.yellow-btn:hover {
	color: #FFF200;
}

.yellow-btn:hover:before {
  transform: scaleX(1);
}

/*--- HEADER STYLES ---------------------*/
header {}

.top-header {
	background: #662D91;
	padding: 9px 0;
}

.top-header .wid-90 {
	display: flex;
	justify-content: space-between;
}

.head-contact a, .head-socials a {
	color: #fff;
	font-weight: 600;
}

.head-socials {
	font-size: 18px;
}

.main-header .wid-90 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-contact {display: none; text-align: center; padding-bottom: 5px;}
.mobile-contact a {color: #662D91;}


/*---BODY--------------------------------*/

.hero {
	background: linear-gradient(90deg,rgba(0,0,0,1.0), rgba(0,0,0,.3) 50%), url("/siteart/trelco-main.jpg") no-repeat center;
	background-size: cover;
}

.hero-text {
	padding: 100px 0;
	max-width: 570px;	
}

.about, .contact {
	display: flex;
}

.about .wid-90, .contact .wid-90 {
	margin: 0;
	padding-left: 5%;
}

.about-img {
	background: url("/siteart/about.jpg") center;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}

.about-img::before {
	content: " ";
	position: absolute;
	left: 0;
	width:15px;
    height: 100%;
    border-top: 300px solid #662D91;
    border-right: 60px solid transparent;
}

.about-img::after {
	content: " ";
	position: absolute;
	left: 0;
	width:0px;
    height: 100%;
    border-top: 300px solid #fff;
    border-right: 60px solid transparent;
}

.contact-img {
	background: url("/siteart/dump-trailer.jpg") center;
	background-size: cover;
	width: 100%;
	height: 400px;
	position: relative;
}

.parts-img {
	background: url("/siteart/parts-page.jpg") center;
	background-size: cover;
	width: 100%;
	height: 400px;
	position: relative;
}

.contact-img::before, .parts-img::before {
	content: " ";
	position: absolute;
	left: 0;
	width:30px;
    border-top: 400px solid #662D91;
    border-right: 60px solid transparent;
}

.contact-img::after, .parts-img::after {
	content: " ";
	position: absolute;
	left: 0;
	width:15px;
    border-top: 400px solid #fff;
    border-right: 60px solid transparent;
}

.about-socials {display: flex;}
.about-socials, .about-socials a {color: #A1A1A1;}

.social-tile {
	padding: 10px;
	border: 2px solid #ccc;
	border-right: 0;
	font-size: 20px;
	height: 50px;
	width: 50px;
	text-align: center;
	cursor: pointer;
}

.social-tile a {
	-webkit-transition:.4s ease-in;  
	-moz-transition:.3s ease-in;  
	-o-transition:.3s ease-in;  
	transition:.3s ease-in;
}

.social-tile:hover > a{
	color: #662D91;
}

.social-tile:last-child {
	border-right: 2px solid #ccc;
}

.links {
	background: linear-gradient(rgba(102,45,145,0.08), rgba(102,45,145,0.08)), url("/siteart/metal-bg.jpg");
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.card-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	max-width: 1300px;
	margin: 0 auto;
}

.link-card {
	position: relative;
}

.link-card img {
	max-width: 500px;
	border-left: 15px solid #662D91;
	border-radius: 5px;
	width: 100%;
	box-shadow: 0 3px 8px -2px rgba(0,0,0,.75);
}

.card-title {
	position: absolute;
	bottom: 30px;
	left: 30px;
	-webkit-transition:.3s ease-in;  
	-moz-transition:.3s ease-in;  
	-o-transition:.3s ease-in;  
	transition:.3s ease-in;
}

.link-card:hover > .card-title {
	transform: translateY(-20%);
}

.card-heading {
	font-family: "Open Sans", system-ui;
  	font-optical-sizing: auto;
  	font-weight: 800;
  	font-style: italic;
	font-size: 36px;
}

.gradient {
	background: linear-gradient(0deg,rgba(255,242,0,0.15), rgba(255,242,0,0) 50%);
}

.loc-card {
	background: #fff;
	border: 2px solid #a1a1a1;
	border-radius: 10px;
	display: flex;
	max-width: 1300px;
	margin: 0 auto;
}

.loc-info {
	width: 50%;
	padding: 50px;
}

.loc-card iframe {
	width: 50%;
	border-radius: 0 10px 10px 0;
}

.loc-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

/*--------SCROLLING INV STYLES--------------------*/
.scrolling-inv {
	background: #662D91;
	padding: 10px 0;
}

.scrolling-wrap iframe {
	width: 100%;
	height: 75px;
}

.scrolling-wrap {
	position: relative;
	height: 75px;
}

.scrolling-wrap::before {
	content: " ";
	position: absolute;
	left: 0;
	width: 0;
    height: 75px;
    border-top: 75px solid #662D91;
    border-right: 50px solid transparent;
}

.scrolling-wrap::after {
	content: " ";
	position: absolute;
	right: -1px;
	top:-100%;
	width: 0;
    height: 76px;
    border-bottom: 75px solid #662D91;
    border-left: 50px solid transparent;
}


/*--------FORM STYLES--------------------*/

.form-flex { 
	display: flex;
	gap: 20px;
	padding: 10px 0;
}

.form-flex input, textarea {
	border: 2px solid #662D91;
	padding: 10px;
	font-family: "Open Sans", sans-serif;
	border-radius: 5px;
	width: 100%;
}
.form-flex input:focus, textarea:focus {
	outline: none;
	background: rgba(255,242,0,0.15);
}

textarea {
	height: 75px;
}

.CaptchaPanel {
	font-family: "Open Sans", sans-serif;
}
.captcha-button {
	text-align:center;
}

.submit-button {
	width: 200px;
	height: 40px;
	margin: 10px 0;
	padding: 10px 0;
	background: #662D91;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	box-shadow: 0 3px 8px rgba(0,0,0,.25);
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}

.submit-button:hover {
	border: 2px solid #662D91;
	background: #fff;
	color: #662D91;
}

#captcha {
	display: none;
}

/*-------- FOOTER STYLES ----------------*/
footer{padding: 30px 0 100px 0; border-top: #662D91 solid 10px;}

footer .logo {margin: 0 auto;}

.footer-nav ul {
	display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	gap: 15px;
	padding: 10px 0;
	border-bottom: #662D91 solid 2px;
}

.footer-nav ul li a {
	text-transform: uppercase;
	font-weight: 800;
}

footer a:link, footer a:visited, footer a:active {
	color: #662D91;
}

.footer-connect {text-align: center; margin-top: 10px;}

.footer-bottom {
	background: #4C1973;
	text-align: center;
	padding: 10px 0;
	margin-top: 10px;
}

.footer-bottom p, .footer-bottom a:active, .footer-bottom a:link, .footer-bottom a:visited {
	font-size: 13px;
	color: #FFFBAE;
	font-weight: 300;
}




/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1200px) {
	.logo {margin: 0 auto}
	.logo img {padding: 15px 0; max-width: 300px; width: 95%;}
	.top-header {display: none;}
	
	.mobile-contact {display: block;}
}

@media only screen and (max-width: 785px) {
	.about, .contact {display: block;}
	.about-img, .contact-img, .parts-img {border-left: 15px solid #662D91;}
	.about-img::before, .about-img::after, .contact-img::before, .contact-img::after, .parts-img::before, .parts-img::after {display: none;}
	
	.loc-card {display: block;}
	.loc-info {width: auto; padding: 25px;}
	.loc-card iframe {width: 100%; height: 200px; border-radius: 0 0 10px 10px;}
}


@media only screen and (max-width: 600px) {
	.heading {font-size: 32px;}
	.sm-heading {font-size: 13px;}
	.padit {padding: 50px 0;}
	
	.hero-text {padding: 200px 0 10px 0;}
	
}

@media only screen and (max-width: 450px) {
	.hero-btn, .yellow-btn, .submit-button {width: 100%;}
	
	.card-title {bottom: 15px;}
	.card-heading { font-size: 20px;}
	
	.form-flex { flex-wrap: wrap; gap: 10px; padding: 5px 0;}
}