@charset "UTF-8";


/* RESET 
------------------------------------------------*/
* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}
	
@media screen and (prefers-reduced-motion: reduce) {
  * {animation: none !important; transition: none !important;
	animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
	}
}


/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
body {font-size:100%; font-family: "Be Vietnam Pro", sans-serif !important; color:#252525; background:#fff;}

/* SELECTION */	
::selection {color:#fff; background: #b01c21;}
::-moz-selection {color:#fff; background: #b01c21;}


/* CLEAR */
.clear {clear: both;}

/* HEADERS */
/*Remove or simplify font-weight and font-height */
h1, h2, h3, h4 ,h5 ,h6 {line-height: normal;}
h1 {font-size:26px; font-weight:normal;}
h2 {font-size:24px; font-weight:normal;}
h3 {font-size:20px; font-weight:normal;}
h4 {font-size:18px; font-weight:normal;}
h5 {font-size:16px; font-weight:normal;}
h6 {font-size:14px; font-weight:normal;}


/* PARAGRAPH/LIST/GENERAL TEXT */

/* LINKS */
a{transition:.5s ease-in;}
a:link, a:visited {color:inherit; text-decoration:none;}
a:hover, a:active {color:inherit; text-decoration:none;}

a[href^="tel:"] {color:inherit;  text-decoration: none;}

/* IMAGES */
img {display:block;}

/* TEXT EMPHASIS */
em {font-style:italic;}
strong {font-weight: 700;}

/* TEXT STYLINGS */
.dark {color:#131313;}
.gray {color:#4F4F4F;}
.heavy {font-weight:800;}

/* ALIGNMENT */
.left {float:left;}
.right {float:right;}
.center {text-align:center;}



/* VISIBLE FOCUS
------------------------------------------------*/	
/*a:focus,
button:focus,
input:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}*/



/*

font-family: rucksack, sans-serif;

font-family: "Be Vietnam Pro", sans-serif;

*/



a.red-pill {position:relative; display:inline-block; padding:20px 35px; text-transform:uppercase; font-weight:600;  color:#f0f0f0; border-radius:40px; background:#b01c21; }
/*Which one Neo?*/
a.blue-pill {color:#f0f0f0; border-radius:40px; background:#2134d1; }


a.yellow-button {position:relative; z-index: 1; display:inline-block; padding:20px 50px; text-transform:uppercase; font-weight:800 !important; color:#332b2b; border-radius:20px; background:#d1aa21;transition:.8s ease-in;}
a.yellow-button:hover {background:#ae8e1e; transform: scale(1.05);}


a.arrow-button {overflow:hidden; }
a.arrow-button::before {position: absolute; z-index:-1; top:-5px; right:55px; rotate:-120deg; font-size:60px; color: #765d06; opacity:.3;  content: "\f149"; font-family: FontAwesome; transition:.8s ease-in;}
a.arrow-button:hover::before {rotate:-100deg; opacity:.2;}




/* HEADER
------------------------------------------------*/	
.site-header {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:36px 3.5%; background:#f9f9f9;}	
.logo img {display:flex; max-width: 300px;}
	

/* LOGO
------------------------------------------------*/	
.logo {}	
.logo a {font-size:27px; font-weight:400; text-transform:uppercase; color:#232323; }	
.logo a strong {font-weight: 800;}
.logo a:hover {}


/*  NAVIGATION
------------------------------------------------*/
#menu-button{display:none;}
nav.mobile {display:none;}

nav.primary {z-index:500; position:relative; margin:0; padding:0;}

nav.primary ul {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-around; margin:0; padding:0;}
nav.primary ul li {margin:0; padding:0; list-style-type:none; }
				
nav.primary ul li a {
	display:block; margin:0 5px; padding:12px 18px;
    font-size:18px; line-height:1; font-weight:700; text-align:center; text-decoration:none; text-transform:uppercase; color:#3a3a3a; transition:.5s ease-in;	
}	

nav.primary ul li a:hover {color:#b01c21;}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width: auto;}
nav.primary ul li li a:link, nav.primary ul li li a:visited{
padding:15px 0; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background: #181818;
}

nav.primary ul li li a:hover,nav.primary ul li li a:active {line-height:18px; color:#fff; background:#058fce;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute;} 
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover > ul {display: block; line-height:18px; z-index: 500;}
nav.primary ul ul li {float: none; position: relative; margin:0;}



.head-contact a[aria-label] {padding:12px 18px; font-size:22px; color:#232323; }
.head-contact a[href^="tel:"] {display:inline-block; padding:15px 25px 17px; font-size:18px; font-weight:600; color:#b01c21; border-radius:10px; border:2px #b01c21 solid;} 





/*  MAIN
------------------------------------------------*/	
.main-home {padding:165px 0 123px 0;  background:url("/siteart/hay-bale-background.webp") no-repeat; background-position: 0% 41%;}
.main-inv {padding:calc(1% + 65px) 5%;}
.main-sub {padding:75px 5%;}
.main-center {text-align: center;}
.main-flex {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;}
.main-alt {background: #F9F9F9;}

/*  ARTICLE
------------------------------------------------*/
article h1 {font-size:40px; line-height:1; font-weight: 800; text-transform: uppercase; color:#b01c21; font-family: rucksack, sans-serif;}
article h2 {margin:10px 0 0 0; font-size:33px; line-height:1; font-weight: 800; text-transform: capitalize; color:#111; font-family:rucksack, sans-serif;}
article h3 {margin:0 0 25px 0; font-size:33px; line-height:1; font-weight: 800; text-transform: capitalize; color:#111; font-family:rucksack, sans-serif;}
article p {display:block; margin:45px 0 0 0; font-size:22px; line-height:30px; font-weight:300; color:#111;}


/*  CONTACT
------------------------------------------------*/
.contact-intro {width: 47%;}

.contact-map {width: 47%; align-self: normal; overflow:hidden;} 
.contact-map iframe{width: 100%; border-top-right-radius:80px; border-top-left-radius:15px; border-bottom-left-radius:15px;}

.contact-details {width:47%;}
.contact-details ul {list-style:none; margin:0 0 0 45px;}
.contact-details ul li {position:relative; margin:15px 0; font-size:22px; line-height:30px; font-weight:300; color:#111;}

.contact-details ul li.map-icon::before {position: absolute; z-index:1; top:12px; left:-36px; font-size:25px; color: #b01c21; content: "\f3c5"; font-family: FontAwesome;}
.contact-details ul li.phone-icon::before {position: absolute; z-index:1; top:2px; left:-40px; font-size:25px; color: #b01c21;  content: "\f095"; font-family: FontAwesome;}
.contact-details ul li.email-icon::before {position: absolute; z-index:1; top:2px; left:-40px; font-size:25px; color: #b01c21; content: "\f0e0"; font-family: FontAwesome;}
.contact-details ul li.hours-icon::before {position: absolute; z-index:1; top:15px; left:-40px; font-size:25px; color: #b01c21; content: "\f017"; font-family: FontAwesome;}


/*  HERO
------------------------------------------------*/
.hero {display:flex; flex-flow:column wrap; justify-content:flex-end; position:relative; background:#E3E1E1;}

.hero-flair {
	position:absolute;top:0; right:0; width:47%; height:700px; border-bottom-left-radius:150px; background:url("/siteart/hero-round-bale-field.jpg") no-repeat right center; background-size: cover;
}

.hero-body {max-width:41%; margin:0 0 0 5%; padding:110px 0;}
.hero-body h1 {margin:0 0 42px 0; font-size: calc(16px + 2.15vw); line-height:1; text-transform:uppercase; font-weight:600; color:#b01c21; font-family: rucksack, sans-serif;}
.hero-body h1 strong {font-weight:900;}
.hero-body p {font-size:20px; line-height:30px; font-weight:200;  color:#252525;}


/*  CATEGORY HIGHLIGHT
------------------------------------------------*/
.category-highlight{display: flex; flex-flow:row wrap; align-items: flex-start; justify-content: space-around; margin:0 1%;}

.category-item {
	display: flex; flex-flow:column wrap; justify-content:flex-end;
	
	box-sizing:border-box; position:relative; width:24%;
	
	/*height:532px;*/
	
	padding:0 35px 70px 35px; border:3px #b01c21 solid; border-radius:20px; background:#fff; 
}

.category-item:nth-child(1) {margin-top:0;}
.category-item:nth-child(2) {margin-top:50px;}
.category-item:nth-child(3) {margin-top:100px;}
.category-item:nth-child(4) {margin-top:150px;}



.category-item img {max-width:100%; margin:-55px auto auto auto;}
.category-item .cat-title {font-size:36px; font-weight:700; text-transform:uppercase; color:#282828; font-family: rucksack, sans-serif;}
.category-item p {font-size:20px; line-height:34px; font-weight:300; }

.category-item a.red-pill {position: absolute; bottom:-25px; left:10%;}



/*  HOME INTRO
------------------------------------------------*/
.home-intro {box-sizing:content-box; max-width:885px; margin:15% 0 15% auto; padding:0 6%;}
.home-intro h2{margin:0 0 35px 0; font-size:51px; font-weight:900; color:#363636; font-family: rucksack, sans-serif;}
.home-intro p{font-size:20px; line-height: 30px; font-weight: 200;}



/*  BRANDS HIGHLIGHT
------------------------------------------------*/	
.brands-highlight {display: flex; flex-flow:row wrap; align-items:center;justify-content: center; margin:130px 5%;}
.brands-highlight h3 {width:100%; margin:0 0 12px 0; font-size:26px; line-height:1; font-weight:700; text-align:center; color:#332b2b; }
.brands-highlight a {margin:6px 12px; padding:10px 20px;}
.brands-highlight a img {max-width:100%; filter: brightness(0) saturate(100%) invert(100%) sepia(63%) saturate(0%) hue-rotate(114deg) brightness(82%) contrast(90%); opacity:.75; transition:ease-in .7s;}
.brands-highlight a:hover img {filter:none; opacity:1;} 



/*  COMPANY HIGHLIGHT
------------------------------------------------*/	
.company-highlight {display: flex; flex-flow:row wrap; justify-content: space-around; margin:0 1%;}

.comp-item {box-sizing:border-box; width:31.3%; margin:1%; padding:40px 60px; text-align:center; border-radius:44px; background:#fff; box-shadow:0 4px 30px rgba(0,0,0,.07);}
.comp-item img {max-width:100%; margin:0 auto 38px auto;}
.comp-item h4 {margin: 0 0 23px 0; font-size:26px; font-weight:800; text-transform: uppercase; color:#282828;}
.comp-item p {margin: 0 0 18px 0; font-size:22px; font-weight:200; color:#6a645e;}
.comp-item a {position:relative; font-size:22px; font-weight:700; text-align:center; text-transform: uppercase; color:#b38f12;}
.comp-item a::before {position: absolute; z-index:1; top:8px; left:-15px; font-size:13px; color: #765d06; content: "\f105"; font-family: FontAwesome;}



/*  LOCATION HIGHLIGHT
------------------------------------------------*/	
.location-highlight {
	display:flex; flex-flow:row wrap; align-items:flex-end;  justify-content:space-between; padding:170px 5%;
	background: #F9F9F9; background: linear-gradient(0deg, rgba(249, 249, 249, 1) 0%, rgba(244, 244, 244, 1) 100%);
}

.location-highlight .locat-address {width:100%; margin:0 0 20px 0; font-size:22px; font-weight:700;  line-height:1;  color:#282828;}
.location-highlight .locat-address i {color:#d1aa21;}
.location-highlight .locat-address a {position:relative; margin:0 2% 0 0;}
.location-highlight .locat-address a.greg-numb::before {position: absolute; z-index:1; top:-25px; left:48%; font-size:22px; color: #b01c21; content: "GREG";}
.location-highlight .locat-address a.kody-numb::before {position: absolute; z-index:1; top:-25px; left:48%; font-size:22px; color: #b01c21; content: "KODY";}
.location-highlight .locat-address a:last-of-type {margin:0;}

.location-highlight .locat-map{
	overflow:hidden; width:calc(97.5% - 470px); margin:0 2.5% 0 0; box-sizing:border-box; height:313px;  border-radius:30px; border:1px #d3d3d3 solid; box-shadow:0 4px 30px rgba(0,0,0,.07);
}
.location-highlight .locat-map iframe{width:100%; height:100%; background:#F9F9F9;}
.location-highlight .locat-pic{overflow:hidden; box-sizing:border-box; width:470px; height:313px; border-radius:30px; border:1px #d3d3d3 solid; box-shadow:0 4px 30px rgba(0,0,0,.07);}
.location-highlight .locat-pic img{object-fit:contain;}


/*  FOOTER
------------------------------------------------*/
.site-footer {position:relative; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:space-evenly; padding:120px 5% 130px 5%; color:#f6f6f6;}

.foot-contact a {word-break: break-all;}
.site-footer .foot-title {margin:0 0 40px 0; font-size:22px; font-weight:900; text-transform: uppercase; color:#f6f6f6; font-family: rucksack, sans-serif;}

.site-footer a {font-size:20px; font-weight:300;}
.site-footer ul {}
.site-footer ul li{list-style:none;}
.site-footer ul li a {font-size:20px; line-height:33px;}





/************************************************ Responsive Styles **/


@media screen and (max-width: 1450px) {
	.logo a {font-size:22px;}
	nav.primary ul li a {padding:12px 10px; font-size:16px;}
}


@media screen and (max-width: 1250px) {
	nav.primary{display:none;}
	#menu-button{width:100%; display: block;  position: relative; text-align: center; z-index:400; background: #b01c21; }
	#menu-button a{display:inline-block; text-decoration: none; padding:20px 3.5%; font-size:18PX; font-weight:700; color:#fff; cursor:pointer;}
	
	nav.mobile ul li a .fa{
		width:25px;
		font-weight:100;
		padding:8px 3px;
		margin:0 0 0 5px;
		text-align:center;
		background:#292929;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	
	nav.mobile ul li .fa-chevron-down {position:absolute; right:10px; margin:18px 0 0 0;}

	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		left: -285px;
		width: 285px;
		height: 100%;
		z-index: 500;
		overflow:auto;
		padding-bottom:40px;
		background:#333;
	}
	
	/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: absolute;
		text-decoration: none;
		vertical-align: top;
		z-index:9999;
		display: inline-block;
		
		top: 15px;
		left: 15px;
		font-size:16px;
		word-spacing:13px;
		color: #ccc !important;
	}
	
	nav.mobile .social-media a:link, nav.mobile .social-media a:visited {color:#ccc; text-decoration:none;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}
	
	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		color: #ccc;
		padding: 23px 0;
		position: relative;
		font-size: 18px;
		background:#313131;
	}			
	nav.mobile .menu-title {position: absolute; vertical-align: top; top: 16px; right: 47px; text-transform:uppercase; font-size:12px; color: #ccc;}
		
	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {position: absolute; top: 8px; right: 10px; padding: 6px 9px 5px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; color: #ccc; text-decoration: none; vertical-align: top; cursor:pointer; font-family: Arial, sans-serif;}
	nav.mobile .menu-toggle:hover {color: #fff;}
	
	/* MENU LIST STYLE */
	nav.mobile ul {list-style: none; font-weight: 300; margin:0; padding:0;}
	nav.mobile ul li {color: #999; font-size:15px; border-bottom: 1px solid #303030;}
	
	/* FIRST LEVEL */
	nav.mobile ul li a {
		color: #999;
		position: relative;
		display: block;
		font-size:15px;
		text-align:right;
		text-decoration: none;
		border-left:4px #333 solid;
		padding: 15px 35px 15px 20px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.5); color: #fff; border-left:4px #C8102E solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li:last-child {border:none;}
	nav.mobile ul li li a {color: #ccc; background: #444; border-left:4px #444 solid; padding: 15px 10px 15px 15px;}
	nav.mobile ul li li a:hover {background:rgba(65,65,65,0.5);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li:last-child {border:none;}
	nav.mobile ul li li li a {color: #ccc; background: #555; border-left:4px #555 solid;}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}	
	
	
	.hero-flair {position:relative ;top:0; right:0; width:100%; height:375px; border-bottom-left-radius:0; background:url("/siteart/hero-round-bale-field-mobile.jpg") no-repeat right center; background-size: cover;}
	
	
	.hero-body {max-width:100%; margin:0 5%; padding:110px 0;}
	.hero-body h1 {font-size:42px;}	
		
	
	.category-item {width:49%;}
	.category-item:nth-child(1) {margin-top:0; margin-bottom:100px;}
	.category-item:nth-child(2) {margin-top:50px; margin-bottom:100px;}
	.category-item:nth-child(3) {margin-top:0;}
	.category-item:nth-child(4) {margin-top:50px;}
	
	.main-home {background-position: 0% 44%;}
		
	.comp-item {width:48%;}
}

@media screen and (max-width: 1185px) {	
	.site-footer {padding:120px 8% 130px 8%;}
	.foot-nav, 
	.foot-contact {width:48%;}

	.foot-contact {margin-top:80px;}
}

@media screen and (max-width: 1024px) {	
	
	
	
	.main-home {background-size:100%; background-position: 0% 44%;}	
	
	
	.main-alt {flex-direction: column-reverse;}
	.contact-intro {width:100%;}
	.contact-map {width:100%;} 
	.contact-details {width:100%;}
	
	
	
	.location-highlight {
		display:flex; flex-flow:row wrap; justify-content:space-between; padding:120px 5%;
		background: #F9F9F9; background: linear-gradient(0deg, rgba(249, 249, 249, 1) 0%, rgba(244, 244, 244, 1) 100%);
	}

	.location-highlight .locat-map{width:100%; margin:0 0 calc(2.5% + 20px) 0;}
	.location-highlight .locat-map iframe{width:100%; height:100%; background:#F9F9F9; }
	.location-highlight .locat-pic{width:85%; max-width:680px; height:240px; margin:0 auto;}

	
	
	.comp-item {width:90%; margin:2% 5%;}
	.location-highlight {padding:80px 5%;}
	.location-highlight .locat-address {display: flex; flex-flow:column wrap; width:auto;  margin: 0 auto 20px auto }
	.location-highlight .locat-address a {display:inline-block; padding:8px 0; text-align:center;}
	.location-highlight .locat-address a:first-of-type {margin:0;}
	
	
	.location-highlight .locat-address a.greg-numb::before {position: relative; z-index:1; top:0px; left:-10px; font-size:22px; color: #b01c21; content: "GREG";}
	.location-highlight .locat-address a.kody-numb::before {position: relative; z-index:1; top:0px; left:-10px; font-size:22px; color: #b01c21; content: "KODY";}
}


@media screen and (max-width: 850px) {
	.site-footer {padding:120px 10% 130px 10%;}
	.foot-nav, 
	.foot-contact {width:100%; margin-top:80px;}
	.foot-nav:first-of-type{margin-top: 0;}
}

@media screen and (max-width: 768px) {
	.main-home {background-position: 0% 39%;}
	
	.home-intro {margin:calc(15% + 60px) auto; padding:0 6%;}
	
	.brands-highlight a {max-width:80%; margin:0 auto; padding:8px 20px;}
}

@media screen and (max-width: 678px){
	.site-header {flex-flow: column wrap; padding:30px 3.5%;}
	.head-contact {margin:25px 0 0 0;}
	
	
	.hero-flair {height: 285px;}
	    .hero-body {padding: 20% 0;}
	
	
	.main-home {background-position: 0% 55%;}
	
	.category-item {width:95%; margin-bottom:100px;}
	.category-item:nth-child(1) {margin-top:0; margin-bottom:100px;}
	.category-item:nth-child(2) {margin-top:50px; margin-bottom:100px;}
	.category-item:nth-child(3) {margin-top:50px; margin-bottom:100px;}
	.category-item:nth-child(4) {margin-top:50px; margin-bottom:0;}
}

@media screen and (max-width: 500px){
	.hero-body h1 {font-size:33px;}	
	.brands-highlight a {max-width:60%;}
}

@media screen and (max-width: 320px){

}