﻿@import url(https://use.typekit.net/dce5ogv.css);
/***** 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 --------*/
:root {
--orange: #f79027;
--black: #202020;
--white: #ffffff;
--black: #000000;
--font: synthese, sans-serif !important;
}

/***** 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 --------*/
html {scroll-behavior: smooth}
body,p {
	font-family: var(--font);
}

p {font-size: 16px;line-height: 1.5;}
h1,h2,h3,h4,h5,h6 {
	font-family: var(--font);
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {position: relative;padding: 20px 0 45px;}
.main-head .flex-container {justify-content: space-between;align-items: center}
.logo-img img {max-width: 100%;width: 500px;}
.logo-img a{display: inline-flex;}
.head-contact {gap: 45px;}
.contact-wrap {gap: 10px;align-items: baseline !important;}
.head-contact .link, .head-contact span {color:var(--white);font-family: var(--font);}
.head-contact .link {font-weight: 700 !important;text-transform: uppercase;font-size: 16px}
.head-contact span {display: block;font-size: 14px !important;opacity: .5;text-transform: uppercase;font-weight: 300 !important;}
.head-icon {color:var(--orange);font-size: 18px;}
.navigation-bar {background:var(--white);border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;overflow: hidden;position: absolute;width: 90%;left: 5%;right: 5%;bottom: -45px;z-index: 999;}
.contact-btn {overflow: hidden; min-width: 200px; display: inline-flex;}
.contact-btn a {background: var(--orange);display: block;padding: 20px 15px;width: 100%;box-sizing: border-box;text-align: center;color: #fff;font-family: var(--font);text-transform: uppercase;display: inline-flex;justify-content: center;align-items: center;font-size: 15px;}

.navigation-wrap {display: flex; justify-content: space-between;}
/*---BODY--------------------------------*/
.black-bg{background:var(--black);}
.flex-container {display: flex;}
.relative {position:relative;}
.grid-container {display: grid;}
.pad-xl {padding: 75px 0;}
.wid90 {width: 90%;margin: 0 auto;}
.center {text-align: center;}
.page-wid {max-width: 1400px;}
.half-page {flex-basis: 50%;}
.white-bg{background:var(--white);}
.orange-bg {background:linear-gradient(0deg,rgba(247, 144, 39, 0.85) 0%, rgba(247, 144, 39, 0.85) 100%),url("/siteart/tractor-img.jpg");background-size: cover;background-position: center center;}
/*--home-page---*/
.hero {height: 50vh;max-height: 550px;min-height: 400px;position:relative;background:var(--black);}
.hero img {width: 100%;height: 100%;object-fit: cover;object-position: center 70%}
.hero-overlay{background:rgba(32,32,32,0.60);position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;display:flex;align-items: center;justify-content: center;color:#fff;text-align: center;}
.hero-txt {width: 90%;margin: 0 auto;}
.hero-txt h1 {text-transform: uppercase;font-weight: 700;font-size: 48px;line-height: 1.25;margin-bottom: 20px;}
.hero-txt p {font-weight: 300;}
.hero-arrow {color: var(--orange);font-size: 32px;position: absolute;bottom: 0;left: 50%;transform: translate(-50%, -50%);}
.grid-services{grid-template-columns: repeat(3, 1fr);gap: 30px;}
.service-box {background: #fff;border-radius: 3px;box-sizing: border-box;display: flex;flex-direction: column;overflow: hidden;}
.img-container, .cat-text {flex-basis: 50%;}
.img-container {overflow: hidden;}
.img-container img {height: 100%;width: 100%;object-fit: cover;}
.cat-text {padding-top: 45px !important;padding-bottom: 20px;width: 85% !important;display: block !important;margin: 0 auto;display: block;box-sizing: border-box;}
.cat-text a {color:#000;transition:.3s all;display: inline-block;}
.cat-text a:hover {color:var(--orange);}
.cat-text h2 {font-size: 20px;margin-bottom: 20px;}
.cat-text p{opacity: .75;}
.service-icon {position:absolute;top: 50%;left: 10%;transform: translate(-50%, -50%);background:var(--orange);height: 30px;width: 30px;border-radius:90px;display:flex;align-items: center;justify-content: center;padding:8px;color:var(--white);font-size: 20px;}
.home-contact.flex-container {border-radius: 3px;overflow: hidden;}
.contact-info {width: 85%;margin: 0 auto;padding: 80px 0;}
.contact-info p {opacity: .75;}
.contact-info h3 {font-size: 32px;font-weight: 550;margin-bottom: 20px;}
.contact-info span {display: block;font-size: 16px;font-weight: 400;color: var(--orange);}
.contact-form h3 {color:#fff !important;}
.contact-icon {background: var(--orange); display: flex; height: 45px; width: 45px; align-items: center; justify-content: center; border-radius: 90px; color: #fff; font-size: 18px;}
.information-third {display: flex;gap: 15px;flex-basis: 33%;flex-grow: 1;}
.contact-wrap {display: flex;flex-wrap: wrap;gap: 20px;}
.information-third h4 {font-size: 18px;}
.information-third a {opacity: .75; transition:.3s all;color:#000;}
.information-third a:hover {opacity: 1;}
.map-container {height: 400px;margin-top: 45px;border-radius: 3px;overflow:hidden;}
.map-container iframe {position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;}
/*--------ABOUT & CONTACT STYLES--------------------*/
h2.about-text {font-size: 25px; line-height: 30px; letter-spacing: 1px;}
.wht-text {color:#fff;}
p.wht-text {max-width: 1100px; width: 100%; margin: 0 auto; padding: 10px 0; font-weight: 300; line-height: 26px;}
p.wht-text a {color:#F79027; transition: .2s ease;}
p.wht-text a:hover {color:#F9B168;}
/*--------FORM STYLES--------------------*/
a.black-round {display: inline-block;background: #000;margin-top: 10px;padding: 15px;border-radius: 90px;min-width: 100px;text-align: center;color: #fff;font-size: 14px;line-height: 1;transition:.3s all;}
a.black-round:hover {background:#fff;color:#000;}

button.submit-form {background: transparent;padding: 15px;border: 2px solid #fff;font-family: var(--font);text-transform: uppercase;font-size: 15px;color: #fff;letter-spacing: 1px;transition: .3s all;cursor: pointer;border-radius: 90px;color:#fff}
button.submit-form:hover {background:var(--white);border-color:var(--white);color:var(--black)}
button.submit-form:before {content:"\f178";font-family: "Font Awesome 6 Free";color:var(--white);font-size: 16px;margin-right: 10px;font-weight: 900;transition: .3s all;}
button.submit-form:hover:before {color:var(--black)}
/*-------- FOOTER STYLES ----------------*/
footer{padding: 45px 0;}
footer .flex-container {justify-content: space-between;color: #fff;}
span.foot-title {display: block;text-transform: uppercase;font-weight: 800;font-size: 16px;margin-bottom: 15px;}
.foot-col a {color: var(--white);transition:.3s all}
.foot-col a:hover {opacity: .5;}
.foot-col ul li a {line-height: 2;font-size: 15px;font-weight: 300 !important;}
li.call-footer a:before {content:"\f095";font-family: "Font Awesome 6 Free";color:#fff;font-size: 16px;margin-right: 10px;font-weight: 900;}
li.visit-footer a:before {content:"\f3c5";font-family: "Font Awesome 6 Free";color:#fff;font-size: 16px;margin-right: 10px;font-weight: 900;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.sub-hero {height: 200px; background-image: url("../siteart/field-hero.jpg"); background-attachment: fixed; background-position: center bottom}







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1250px) {
	.hero-txt h1 {font-size: 42px;}

}

@media only screen and (max-width: 1100px) {
	.hero-txt h1 {font-size: 36px;}
	.information-third {flex-basis: 100%;}
	.map-container{height: 300px;}
		.cat-text{padding-top: 35px !important;}
	.cat-text h2 {font-size: 18px;margin-bottom: 10px;}
	.cat-text p {font-size: 15px;}
	
}

@media only screen and (min-width:768px) and (max-width: 1130px) {
	
}


@media only screen and (max-width: 1000px) {
	.logo-img img {max-width: 350px;}
	.hero-txt h1 {font-size: 32px;}
	.pad-xl {padding: 50px 0;}
	.contact-info {padding: 60px 0;}
	.contact-info h3 {font-size: 28px;}
	.img-container, .cat-text {flex: 1 !important;}
	.service-icon {top: 40% !important;left:30px !important;}
}

@media screen and (max-width: 800px) {
	.home-contact.flex-container {flex-wrap:wrap;}
	.home-contact .half-page {flex-basis:100%;}	
	.contact-btn,.head-contact {display: none;}
	.logo-img {flex-basis: 100%;text-align: center;}
	.logo-img img {max-width: 100% !important;}
	header {padding: 20px 0 30px;}
    .sub-hero {background-size: cover; background-attachment: inherit;}
	

}

@media screen and (max-width: 710px) {
	.grid-services {grid-template-columns: repeat(1, 1fr);}
	.cat-text {margin: 0 auto !important;padding: 30px 0 !important;}
	.service-box {display: block !important;}
	a.img-container {height: 150px;overflow: hidden;display: block;}
	    .service-icon {top: 50% !important;left: 10% !important;}
}

@media screen and (max-width: 600px) {
	
	footer .flex-container{flex-wrap:wrap;gap: 30px;}
	.foot-col {flex-basis: 100%;}
	
}
@media screen and (max-width: 500px) {
	.service-icon {top: 45% !important;}
	.hero-txt h1 {font-size:24px;}
}


