﻿/***** 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 --------
*/

/***** END RESET *****/
::-moz-selection {
    background: #fff;
    color: #2a7103;
    text-shadow: none;
}
::selection {
    background:#fff;
    color: #2a7103;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
	font-family: 'Open Sans', sans-serif;
	font-size:16px; 
	line-height: 28px; 
	color: #000; 
	height:100%;
	background: #f2f2f2;
	overflow-x:hidden;

}

h1 {font-size:70px; font-weight:700; line-height:55px; letter-spacing: 1px; color: #2a7103; }
h2 {font-size:55px; line-height: 45px;  letter-spacing: 1px; color:#000; } 
h3 {font-size:40px; line-height: 37px; letter-spacing: 1px; text-transform: uppercase;color: #2a7103; font-style: italic;}
h4 {font-size:20px; line-height: 27px; letter-spacing: 1px; font-weight:400; text-transform: uppercase;}

a:link, a:visited, a:active {text-decoration:none;color:#424242;}
a:hover {text-decoration:none; color:#2a7103;}
strong { font-size:16px;}

.right{float: right; text-align:right;}
.left{text-align:left;}

.pad{padding: 2% 0;}

hr{border:#000 1px solid;}

/*--- HEADER STYLES --------------------------*/
header {background:#000; width: 100%; border-bottom:8px solid #fff; display: inline-block;}
.header-width {width: 90%; margin: 0 auto; margin-top:1%;}
.logo {display:inline-block;  vertical-align: bottom;}
.logo img {max-width: 300px; width: 100%;}
.header-right { display: inline-block; float:right;}
.social { float:right; margin-left:10px;}
.social img {width:35px; display: inline-block; vertical-align: top;}


/*---BODY--------------------------------*/
.hero {background:url("../siteart/nagel_hero_image.jpg") no-repeat; background-attachment: fixed; max-width: 2200px; width: 100%; background-size: cover;background-position: bottom;}
#hero-text {padding:5% 6%; background: #ffffff05;
    background-image: linear-gradient(to right, #ffffffa1 , #ffffff00); }
#hero-text h1{ padding-top:9%;}
.hero-btn {margin:1% 0;width: 350px; background:rgba(255,255,255,1.00); color:#AFAFAF; font-size:30px; font-weight: 600; padding:8px 0; text-align: center; font-style: italic;box-shadow: 2px 2px 7px rgba(0,0,0,.6); transition:.5s;}
.hero-btn:hover {background:#212121;transition:.5s;}
.green-bg {background:#2a7103; width: 100%;}
.green-bg h3 {color:#fff; font-size:18px; letter-spacing: 1px; text-align: center; font-style: normal; padding:10px 0;}
.shopbrandsect{
    display: flex;
    flex-wrap: wrap;
    padding: 4% 5%;
    justify-content: space-between;
}
.headertext{
    font-size: 30px;
    line-height: 37px;
    text-align: center;	
	letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
	color: #000;
}
.lgheadertext{
      color: #fff;
    text-align: center;
	    font-size: 40px;
    line-height: 37px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-style: italic;
}
.headertext span{
   line-height: 37px;
	display: block;
	width: 100%;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2a7103;
    font-style: italic;
	    font-size: 30px;
    text-align: center;
}
.shopheader{
	width: 100%;
    font-size: 35px;
    font-weight: 800;
    line-height: 55px;
    letter-spacing: 1px;
    color: #2a7103;
}
.greenheader{
	font-size:35px; font-weight:800; line-height:55px; letter-spacing: 1px; color: #2a7103;
}
.shopbrandbox{
display: flex;
    flex-wrap: wrap;
    width: 300px;
    margin: 20px 30px 0px 0px;
    height: 300px;
    align-items: flex-end;
    align-content: flex-end;
}
.inventorypadding{
	padding: 5% 0% 8% 0%;
}
.johndeere{
	background: url("/siteart/johndeere_tractor.jpg"); background-repeat: no-repeat; background-size: 100%;
}
.caseih{
	background: url("/siteart/caseih_tractors.jpg"); background-repeat: no-repeat; background-size: 100%;
}
.newholland{
	background: url("/siteart/newholland_tractor.jpg"); background-repeat: no-repeat; background-size: 100%;
}
.allinv{
	background: url("/siteart/all_inventoryimg.jpg"); background-repeat: no-repeat; background-size: 100%;
}
.brandnamesect{
    width: 65%;
    opacity: 85%;
    background: #fff;
    padding: 8px 10px;
    height: 28px;
}
.brandname{
    color: #2a7103;
    font-weight: 800;
    font-size: 20px;
}
.shopnowsect{
 	background: #2a7103;
    color: #fff;
    text-align: center;
    width: 280px;
    padding: 16px 10px;
    font-weight: 500;
}
.contactsection{
	display: flex;
	padding: 3% 5%;
	background: #fff;
	border-bottom: 8px solid #2a7103;
}
.hpmapsect{
	width: 65%;
}
.hpmap{
	width: 100%;
	height: 270px;
}
.hplink{
	line-height: 20px;
}
.contactheader{
	width: 100%;
}
.contactinfosect {
    padding: 0% 4%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 25%;
}
.hpcontactinfo {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 16px 0px;
    align-items: center;
}
.hpgreensubhead {
    width: 38%;
    color: #2a7103;
    font-weight: 700;
    font-size: 20px;
}
.greenbtn{
background: #2a7103;
color: #fff!important;
padding: 6px 15px;	
}

.greenbtn:hover{
background: #000;
font-weight: 500;	
}
/*---QUICKLINK SECTION---*/
.quicklinks {margin: 0 auto;background:url(../siteart/quicklinks-bg.jpg); padding:2% 0; text-align: center;}
.width {width: 70%; margin: 0 auto;}
#white-btn {width:48.2%; display: inline-block; color: #2a7103; background:#fff; text-align: center; font-size:1vw; font-weight: 600; text-transform: uppercase; font-style: italic; padding:11px 0; margin: .5%;box-shadow: 2px 2px 7px rgba(0,0,0,.6); transition:.5s;}
#white-btn:hover {color:#2a7103; background:#0E3D00;transition:.3s;}
#green-btn {width:99%; display: inline-block; color: #fff; background:#2a7103; text-align: center; font-size:1vw;font-weight: 600; text-transform: uppercase; font-style: italic; padding:11px 0; margin: .5%;box-shadow: 2px 2px 7px rgba(0,0,0,.6); transition:.5s;}
#green-btn:hover {color:#2a7103; background:#0E3D00;transition:.3s;}

/*---RECENTLY SOLD SECT---*/
.sold-equipment {background:#ddd; width: 100%;display:inline-block;}
#gray-sect {float:left; width:30%; vertical-align: top; padding:3% 0;}
.sold-hm {margin: 0 auto; width:80%;}
.sold-hm h3 {padding-bottom:4%;}
.sold-btn {width:100%; color:#2a7103; text-align: center; font-size:1vw; font-weight: 600; background:#fff;transition:.3s; padding:9px 0; margin: 15px 0; text-transform: uppercase;box-shadow: 2px 2px 7px rgba(0,0,0,.6);}
#blk-sect {float:right; width: 70%;background:#000; vertical-align: top;}
#blk-sect .width {margin: 0 auto;}
#blk-sect img{ max-width:400px; width: 100%; display: inline-block; padding:5% 15px;}

/*---RECENTLY SOLD PAGE---*/
.sold-section {margin: 0 auto;}
.sold-section h3 {text-align: center; padding:2% 0; font-size:30px;}
.col-1-3 {width:30%; display: inline-block; padding:2% 1%; vertical-align: top;}
.col-1-3 img {max-width: 400px; width: 100%; border-bottom:5px solid #fff; border-top:5px solid #fff;}
.col-1-3 h4 {color:#2a7103; font-weight: 600; font-size:18px;}

/*---ABOUT PAGE---*/
.contact-pg {margin: 0 auto; padding:5% 0;}
.contact-pg h4 {font-size:30px; line-height: 37px; text-align: center;}
.contact-pg h3 {font-size:30px; text-align: center;}
.contact-pg p {padding: 2% 0;}
p#white-text {color:#fff; text-align: center; margin: 0 auto; padding:2% 0;}

/*--------FORM STYLES----------------------*/
.form-bg {background:url(../siteart/bg-contact.jpg); background-attachment: fixed; padding:3% 0;}
.form-full {width:100%; }
.form-right {width:60%; float:right;}
#formpage { vertical-align:top; margin: 0 auto;  text-align:left; width:90%; }
#formpage h3 {color:#fff; text-align: center;}

#formpage div {
	vertical-align:top;
	padding:0px 5px;
	color: #fff;
	font-weight:300;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size:14px;
	font-style: italic;
}

#formpage input {
	padding:10px 0px;
	border:1px solid #fff;
	font-size:13px;
	background:rgba(255,255,255,.70);
}

#formpage textarea {
	padding:6px 0px;
	border:1px solid #fff;
	font-weight: 700;
	color:#000;
	font-size:12px;
	margin-top: 5px;
	background:rgba(255,255,255,.70);
}

/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	border:1px solid #ed1c24;
	color:#202e3b;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:5px;
	width:100%;
}

.formfield {
	width:99%; 
	display:inline-block; 
	margin-right: 12px; 
	margin-top: 10px;
	color: #000;
	text-align:left;
	font-family: 'Open Sans', sans-serif; 

	
}
#formpage input  {
    width:100%;
	margin-top: 5px;
}
 
#formpage input.larger  {
    width:100%;
}

#formpage textarea {
    width:100%;
    height:85px;
	font-family: 'Open Sans', sans-serif; 
	text-align: left;
}

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
	
 }

/* focus states of various types of fields */
#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#fff; 
	color:#2a7103;;
	outline-style:none;
	padding-left:5px;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}

#formpage input.button,
#formpage input.button:focus {
    width:250px;
    margin:0;
    background: #2a7103; 
    line-height:18px;
	font-size:17px;
    color:#fff;
	padding: 10px 20px;
	font-family: 'Open Sans', sans-serif; 
	font-weight: 600;
	letter-spacing:1px;
	text-transform: uppercase;
	transition:.3s;
}
#formpage input.button:hover {

    margin:0;
    padding:10px 0px;
    background: #fff; /* For browsers that do not support gradients */
    line-height:18px;
    color:#2a7103;
}
#formpage input#button {color:#fd1722;}
.next {width: 150px; background: rgba(237,28,36,1.00); }
.next h4 {color:#fff; text-align: center; margin: 15px 0; padding: 8px 0;}
.next:hover {background: rgba(14,29,144,1.00);}
/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:left;
	padding:10px 10px;
} 


/*control the Captcha */

.CaptchaPanel {margin:0 auto !important;padding:0 0 0 0 !important;line-height:normal !important;color:#000;width: 100%; text-align:center;}

.CaptchaImagePanel {
	
margin-top: 10px;
padding:0 0 0 0;
}

.CaptchaMessagePanel {
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
font-weight:normal !important;
font-size:12px;
line-height:14px;
text-align: center;
}

.CaptchaAnswerPanel {
margin:0 0 0 0;
padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 10px 0;
	padding:10px 0 10px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#fff;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 



/*-------- FOOTER STYLES ------------------*/
footer {background:#000; width: 100%; color:#000;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-family:Arial, Helvetica, sans-serif;font-size:13px; line-height: 20px;color:#fff}
a.footerlink:hover {text-decoration:none; font-family:Arial, Helvetica, sans-serif;font-size:13px;}

.footertext{font-family:Arial, Helvetica, sans-serif;font-size:13px; line-height: 20px; color:#999999;}

.smallfootertext{font-family:Arial, Helvetica, sans-serif;font-size:10px; color:#999999;}

.divfooter {max-width:450px; text-align:center; margin:0 auto;}


/*---Inventory Styles---*/
header {display: inline-block !important;}
.hosted-content .m-bottom-10 h1 {font-size:22px !important; line-height: 28px !important;letter-spacing: 0px !important;}
.hosted-content .listings-wrapper .listings-list .category-banner h3 {font-size:18px !important; letter-spacing: 0px !important;}
.hosted-content h3 {letter-spacing: 0px !important; font-size:20px !important;}
.hosted-content input[type='submit'], .hosted-content .btn {background: #2a7103 !important;}
 .hosted-content .btn:hover {background: #212121 !important;}


/*--- Faceted Inventory Styles---*/

.view-listing-details-link, .buy-now-link,.faceted-search-content .selected-facets-container .selected-facet,.detail-content .detail-additional-data .data-row .data-label,.detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn,.modal-bg .form-bottom .captcha-and-submit .captcha-placeholder button, .modal-bg .form-bottom .captcha-and-submit .captcha-placeholder input, .modal-container .form-bottom .captcha-and-submit .captcha-placeholder button, .modal-container .form-bottom .captcha-and-submit .captcha-placeholder input,.compare-listings-container .compare-container .button,.contact-options a,.detail-content-mobile .detail-contact-bar .contact-bar-btn{ 
	background: #2a7103 !important;
	color: #fff !important;
}

.detail-content .detail-additional-data h3 {
	font-size: 18px !important;
   line-height: normal !important;
   letter-spacing: normal !important;
  text-transform:none !important;
    color: #000 !important;
   font-style: normal !important;
}

.list-content .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info .dealer-name {
	line-height: normal !important;
	letter-spacing: normal !important;
}
.container,.compare-listings-container .compare-container {
	line-height: normal !important;
}

.title-media-buttons-heading h1,.detail-content-mobile .detail-main-body .detail-mobile-title h1 {
	font-size: 32px !important;
	line-height: normal !important;
}
.detail-content-mobile .detail-additional-data .data-row .data-label {
	background: #000 !important;
}
.compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title h3,.detail-content-mobile .detail-additional-data h3{
	font-size: 18px !important;
	line-height: normal !important;
}
.detail-content .detail-additional-data .data-row .data-value {
	background: #fff !important;
}

.currency-selector,.detail-content .search-results span,.detail-content .search-results,.compare-checked,.compare-listings-container .compare-container .compare-price{
	color:#2a7103 !important; 
}

.list-content .list-title .list-listings-count {
	color: #000 !important;
}
.container .body-content,.list-content .list-title {
	line-height: normal !important;
}
.compare-chkbox-container .compare-listings .fa-check {
	top: -4px !important;
    left: 7px !important;
}

.detail-content .dealer-info .phone-and-email .send-email-btn,.list-content .list-listing-mobile .dealer-phone-container a {
	color: #2a7103 !important;
		border-color: #2a7103 !important;
	background: #f2f2f2 !important;
}

.contact-info-heading h2 {
	font-size: 28px !important;
	line-height: normal !important;
}
/*-------- RESPONSIVE STYLES --------*/
@media screen and (max-width:1700px){
}


@media screen and (max-width:1500px){
	h3 {font-size:30px;}
	.width {width:95%;}
	#blk-sect {margin: 0 auto; text-align: center;}
	#blk-sect img {max-width:350px;}
	.green-bg h3 {font-size:14px;}
	.shopbrandbox{
		width: 266px;
		height: 256px;
		margin: 20px 0px 0px 0px;
	}
	.shopnowsect{
		width: 246px;
	}
}
@media screen and (max-width:1465px){
	.contactsection{
		padding: 3%;
	}	
	.hpgreensubhead {
		width: 32%;}
	
}
@media screen and (max-width:1300px){
	#white-btn {font-size:16px;}
	#green-btn {font-size:16px;}
	.shopbrandsect{
		padding: 4% 2%;
	}
}
@media screen and (max-width:1280px){
	.contactinfosect{width: 35%;}
	
	
}
@media screen and (max-width:1150px){
	#blk-sect {width: 100%;}
	#gray-sect {width: 100%;}
	.sold-btn {font-size:17px;}
	.sold-section {text-align: center;}
	.col-1-3 {width:47%;}
.shopbrandbox {
    display: flex;
    flex-wrap: wrap;
    width: 225px;
margin: 20px 0px 0px 0px;
    height: 230px;
    align-items: flex-end;
    align-content: flex-end;
}
	.brandnamesect {
		width: 77%;}
	.shopnowsect {
    background: #2a7103;
    color: #fff;
    text-align: center;
    width: 205px;
    padding: 12px 10px;
    font-weight: 500;
}
}
@media screen and (max-width:1000px){
.hpmapsect {
    width: 50%;
}	
.contactinfosect {
    width: 46%;
}	
.hpgreensubhead {
    width: 28%;
}	
}
@media screen and (max-width:974px){
	.shopbrandbox{
		width: 48%;
		overflow: hidden;
		height: 289px
	}
	.shopnowsect{
		width: 50%;
	}
	.shopbrandsect{
		padding: 4% 8%;
	}
	.shopnow{width: 100%;}
	.shopnowsect{
		width: 100%;
	}
		.hero{
		background-attachment: inherit;
	}
}
@media screen and (max-width:900px){
	#white-btn {width: 99%;}
	.col-1-3 h4 {font-size:17px;}
	.col-1-3 {width:100%;}
	.hero-btn {width: 100%;}
	
}
@media screen and (max-width:752px){
	.shopbrandbox{
		height: 225px;
	}
	.brandname{
		font-size: 18px;
	}
	.brandnamesect {
    width: 78%;
}
	.contactsection{
		flex-wrap: wrap;
	}
	.hpmapsect {
    width: 100%;
}
	.contactinfosect {
    width: 100%;
}
}
	@media screen and (max-width:649px){
	#hero-text h1 {font-size:44px; line-height: 43px;}
	#hero-text h2 {font-size:36px; line-height: 45px;}
	#blk-sect img {padding: 5% 0;}
	.header-right {display: inline-block; float:none; width: 100%;}
	.social {float:none; display: inline-block; padding-top:5px;}
	
}


@media screen and (max-width:550px){
.shopbrandsect {
    padding: 4% 11%;
}
	.greenheader{
		line-height: 35px;
	}
	.shopbrandbox {
    height: 270px;
		width: 100%;
}

}
@media screen and (max-width:420px){
	.col-1-3 h4 {font-size:13px; line-height: 18px;}
}
@media screen and (max-width:370px){
	.shopbrandsect {
    padding: 4% 3%;
}
	.brandnamesect {
    width: 100%;
}
	.shopbrandbox {
    height: 261px;
    width: 100%;
}
}

@media screen and (max-width:350px){
	.hpgreensubhead {
    width: 100%;
    padding-bottom: 5px;
}
}