/***** BEGIN RESET *****/
* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    font-family: 'Roboto Condensed', sans-serif;
}
ol, ul {list-style: none;}
.clear {clear:both; height:0px; margin:0;}
/***** END RESET *****/

header, nav, article, footer, {display:block;}

body {background:#fff; font-family: 'Roboto Condensed', sans-serif; font-size:16px; font-weight:400; line-height:normal; color:#000; -webkit-text-size-adjust:none;}
.clear-it:after {content:""; display:block; clear:both;}

.wrap {width:80%; margin:0 auto;}

.column1, .column2, .column3, .column4, .column5, .column6, .column6-nopad, .column7, .column8, .column9, .column10, .column11, .column12 {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; float:left;}
.column1 {width:8.33333%;}
.column2 {width:16.66666%;}
.column3 {width:25%;}
.column4 {width:33%; margin-right:2px;}
.column5 {width:41.66666%;}
.column6 {width:49%; margin-right:.5%;}
.column6-nopad {width:50%;}
.column7 {width:58.33333%;}
.column8 {width:66.66666%;}
.column9 {width:75%;}
.column10 {width:83.33333%;}
.column11 {width:91.66666%;}
.column12 {width:100%;}

.col-pad-lt {padding:0 0 0 2%;}
.col-pad-rt {padding:0 2% 0 0;}
.col-pad-center {padding:0;}

/**SERVICE***/
.flex-container {
	display: flex;
}
.flex-container.homecta {
    
    gap: 10px;
}

.flex-container.service-emp {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-container.flex-job {
	gap: 75px;
	justify-content: center;
}

.emp-img {
	flex-basis: 20%;
}

.emp-img img {
	max-width: 100%;
}

.emp-bio {
	flex-basis: 75%;
}

.service-btn {
	display: inline-block;
    width: 250px;
    margin: 1% auto;
    border: 1px solid #335eaa;
	background: #335eaa;
	color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
	cursor: pointer;
	max-width: 100%;
	-webkit-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.service-btn:hover {
	color: #335eaa;
	background: #fff;
	
}

.grey-btn {
	display: inline-block;
    margin: 1% auto;
    border: 1px solid #444;
	background: #444;
	color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
	cursor: pointer;
	max-width: 100%;
	-webkit-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
.head-logos .brand-head img {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
}
h4.value-headline{
	padding-top: 100px !important;
}

p.value-p{
	margin-bottom: 0px!important;
}

.grey-btn:hover {
	color: #444;
	background: #fff;
}

.job h3 {
    font-size: 22px;
    font-weight: 500;
}

.job {
    flex-basis: 33%;
    text-align: center;
}

.center {
	text-align: center;
}

div#pad-l {
    padding-top: 50px;
	padding-bottom: 50px;
}

.brand-wrap.flex-container {
        flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    margin-top: 20px;
}

.brand img {
    max-width: 100%;
    width: 250px;
	margin: 0 auto;
	min-width: 200px;
	
}

.brand {
    flex: 1;
    flex-grow: 1;
    flex-basis: 20%;
}

.brand-video{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.brand-video iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.attachments-image img {margin: 0 auto;}
.storagepage {
	font-size:28px;
}
/*BLOG **/
.blog-wrap img {
    max-width: 100%;
	width: 100%;
	
}

ul.blog-list {
    list-style: disc;
    padding-inline-start: 40px;
    line-height: 2;
}

.blog-wrap a {
    color: #335eaa;
	transition: .3s all;
}

.blog-wrap a:hover{color: #000;}
.blog-wrap {
    padding: 30px;
    border: 1px solid #ddd;
	margin-top: 10px;
}

.small-text {
	color: #335eaa;
	margin: 15px 0;
}

.brand a {
    display: inline-block;
}

.red-icon {color: #C5161D !important;font-size: 22px;}
img.brand-logo {
    max-width: 100%;
    width: 400px;
	margin: 0 auto;
}

.flex-products {
	    display: flex;
    margin: 40px 0;
}

.product-page {
	text-align: center;
}

.product-img {
    flex: 1;
}

.product-img img {
    max-width: 100%;
}

.product-page a {
	transition:.3s all;
	color: #335eaa;
}

.product-page a:hover {
	text-decoration: underline;
}

.button-wrap {
    display: flex;
    gap: 15px;
}

.button-wrap a {
    flex: 1;
    width: 100%;
}

.button-wrap button {
    width: 100%;
}

.grey-bg {
	background: #eaeaea;
}

.product-form {
	padding: 2% 0;
}

.product-page h1 {text-transform: uppercase;}

.product-form h3 {
	color: #335eaa;
	text-transform: uppercase;
}

.product-page ul {
    display: flex;
    flex-wrap: wrap;
        margin: 40px 0;
    gap: 20px;
}

.product-page ul li {
    line-height: 1.5;
    flex-basis: 28%;
    flex-grow: 1;
	padding: 20px;
    border: 1px solid #eaeaea;
}

.product-page ul li strong {
    font-size: 18px;
    text-transform: uppercase;
    color: #444;
}

ul.mahindra-list li strong {
    color: #B70609!important;
}

ul.nh-con-list li strong {
    color: #333;
}

.product-video {
	position: relative;
	height: 500px;
	max-width: 100%;
	margin: 0 auto;
}

.product-video iframe {
	position:absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/***** typography styles **/
/* font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Condensed', sans-serif; */

p {margin-bottom:15px; font-size:16px; line-height:185%;}

h1, h2, h3, h4 {font-family: 'Roboto Condensed', sans-serif; font-weight:600;}
h1 {font-size:30px; margin-bottom:12px;}
h2 {font-size:28px; margin-bottom:0px; text-transform: uppercase;}
h3 {font-size:26px; margin-bottom:7px;}
h4 {font-size:22px; margin-bottom:5px;}

a, a:hover {color:inherit; text-decoration:none;}

hr {border-bottom:1px solid #ccc; padding:0; margin-bottom:10px; width:100%;}
.white {border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px; width:100%;}

/* HEADER */
header {width:100%; background:#fff; padding:2px 0;}

.logo {width:25%; float:left;}
.logo img {width:100%; height:auto;}

.rt-head {width:65%; float:right; text-align:right; margin:20px 0 10px;}
.head-content {text-align:right; font-size:17px; color:#000; text-transform:uppercase; padding-bottom:25px; margin:15px 0 15px 0; border-bottom:1px solid #555555;display:flex;gap:20px;justify-content: flex-end;align-items: center;}
.head-content .fab {color:#555555; font-size:20px;}

#colorblock {background:#000; color:#fff; padding:10px 0; text-align:center;}
.blockwrap {width:100%; max-width:1100px; margin:0 auto;}
.blockright {float:left; vertical-align:middle; width:28%;}
.blockright img {width:100%;}
.blockleft {float:right; vertical-align:middle; width:60%; padding-top:2.5%; text-align:left;}
button.head-btn,button.head-btn-grey, .inventory-button button{
    border-radius: 5px;
    text-align: center;
	text-transform: uppercase;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    max-width: 100%;
    -webkit-transition: .3s all;
    -ms-transition: .3s all;
    transition: .3s all;
}

button.head-btn, .inventory-button button {
	border: 1px solid #335eaa;
    background: #335eaa;
    color: #fff;
}

button.head-btn-grey {border:1px solid #e8e8e8;background:#e8e8e8;color: #000;}
button.head-btn-grey:hover{background: #333;color: #fff;border-color: #333;}
button.head-btn:hover, .inventory-button:hover button{color: #335eaa;
    background: #fff;}
.head-logos{box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    position: relative;background: #e8e8e8 !important;color: #000 !important;}
.grid-wrap{display:flex;align-items: center;justify-content: space-between;gap: 30px;}

.part-hero img {max-width: 100%;}

.part-hero {margin-top: 50px;}
.brand-head {
    flex: 1;
}
.brand-head img {max-width:100%;width:100%;}
.brand-head-middle{flex: 2;}
.brand-head-middle h2 {margin-bottom: 0;}
.brand-head-middle a{transition: .3s all;}
.brand-head-middle a:hover {color:#335eaa;}
/* content styles */
.text-block {width:67%; display:block; background:#fff; color:#000; text-align:center; padding:5px 0 22px 0;}
.text-inner {width: 60%;
margin: 0 auto;
padding-top: clamp(40px, 5%, 60px);
margin-top: 0 !important;
padding-bottom: clamp(40px, 5%, 60px);
margin-bottom: 0 !important;}

.blog-post .small-text {margin-top: 0;}
.text-inner .fas {color:#335eaa;}
.twoflyers {
    display: flex;
    gap: 20px;
}

.brand-head-middle a h2{font-size:21px !important;}

.twoflyers div {box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;}
article {width:100%; background:url('../siteart/11.jpg') center center; background-size:cover; padding:8% 0; margin-bottom:20px; text-align:center;}

a.outline-btn {display:inline-block; width:100%; margin:1% auto; border:1px solid #fff; color:black; text-align:center; padding:10px 0; font-size:18px;background:white;}
a.outline-btn:hover {background:#335eaa; color:#fff;}

.pageleft {float:left; width:60%; margin:10px 0;}
.pageright {float:right; width:30%; margin:10px 0;}
.pageright a:hover {color:#335eaa;}

#colorblockgray {background:#373737; color:#fff; padding:10px 0;}
.col3 {float:right; width:75%; margin-top:10px;}
.col3img {float:left; width:20%; margin-top:10px;}
.col3img img {width:100%;}

.specials-banner {
    width: 60%;
    margin: 0 auto;
}
.specials-banner img {
    max-width: 100%;
    width: 100%;
}

.home .text-inner {padding-bottom: 0 !important;}

.team-section h4 {
	text-transform: uppercase;
}
.artic-cat-img, .new-holland-ag-img {width: 100%}
.form-centered {text-align: center;}
/* ZOOM */
.zoom-container {float:left; width: 50%; margin:0%; position: relative; overflow: hidden; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.zoom-container img {display: block; width: 100%; height: auto; -webkit-transition: all .5s ease; /* Safari and Chrome */ -moz-transition: all .5s ease; /* Firefox */  -ms-transition: all .5s ease; /* IE 9 */ -o-transition: all .5s ease; /* Opera */ transition: all .5s ease;}
.zoom-container .zoom-caption {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .6); -webkit-transition: all .5s ease; /* Safari and Chrome */ -moz-transition: all .5s ease; /* Firefox */ -ms-transition: all .5s ease; /* IE 9 */ -o-transition: all .5s ease; /* Opera */ transition: all .5s ease;}
.zoom-container .zoom-caption h3 {display: block; text-align: center; font-family: 'Roboto Condensed', sans-serif; font-size: 19px; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);}
.zoom-container:hover .zoom-caption {background: none;}

img.storage-img{
	width: 100%;
}

* {box-sizing:border-box}

.slideshow-container{
	max-width: 100%;
	position: relative;
	margin: 20px;
}
.mySlides{
	display: none;
}

.prev, .next{
	cursor: pointer;
	position: absolute;
	top: 38%;
	width: auto;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	background-color: rgba(128, 128, 128, 0.5)
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;	
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;	
}

.prev:hover, .next:hover {
  background-color: white;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: ease 0.6;
}

.active, .dot:hover {
  background-color: #335EAA;
}
/* Fading animation */
.fade {
  animation-name: none;
  animation-duration: 1s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* MANU */
#manu {text-align:center;}
#manu img {display:inline-block; width:17%; margin:2%;}

/* SCROLLING INVENTORY */
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrolling{width:100%; height:92px;}



/* Inventory */

p.location-title {font-size:30px;font-weight:700;text-align:center;margin-bottom:10px;}

.inv-buttons {
    text-align: center;
    display: flex;
    justify-content: center;
   gap: 30px;}

.inv-buttons a button {border: 1px solid #335eaa;background: #335eaa;color: #fff; padding:15px 50px;border-radius:5px 5px 5px 5px;font-size:18px;margin-top: 0px;cursor: pointer;}

.inv-buttons a button:hover  {color: #335eaa;background: #fff;transition: .3s all;}

/* FOOTER */
.footer {background:#373737; width:100%; padding:20px 0; margin-top:10px; color:#fff; text-align:center;}
footer a {color:#fff!important;}
footer a:hover {color:#ccc;}

/* FORM */
#formpage label {display:block; margin-bottom:3px;}
#formpage input {width:calc(100% - 12px); padding:6px 5px; border:1px solid #999; color:#333; font-size:14px; margin-bottom:12px; background:rgba(255,255,255,0.5);}

#formpage textarea {width:calc(100% - 12px); padding:6px 5px; border:1px solid #999; color:#333; font-size:14px; height:120px; margin-bottom:12px; background:rgba(255,255,255,0.5);}

#formpage select {width:100%; border:1px solid #999; color:#333; vertical-align:middle; font-size:14px; line-height:normal; padding:5px; margin-bottom:12px; background:rgba(255,255,255,0.5);}

#formpage input.checkbox {padding:0; border:0; margin:0 5px 0 0; width:13px; height:13px; display:inline; background-color:#fff;}
#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:rgba(255,255,255,1.0); color:#000; border:1px solid #00a8dd; outline-style:none;}
#formpage input.radio:focus, #formpage input.checkbox:focus {background:none; border:0; outline-style:none;}

#formpage input.button, #formpage input.button:focus {width:99%; margin:0; padding:5px 0; background:#335eaa; border:none; font-size:16px; line-height:28px; font-weight:bold; text-transform:uppercase; color:#fff;}
#formpage input.button:hover {background:linear-gradient(#335eaa, #2d569e); color:#fff; cursor:pointer}

/*control the Captcha */
.captchawrap {width:50%; margin:0 auto;}
.captcha {width:100%; margin:0 auto; text-align:center;}
.CaptchaPanel {margin:0 auto !important; padding:0 0 0 0 !important; text-align: center !important; line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 auto !important; font-weight:normal !important; font-size:12px; line-height:14px; color:#000;}
.CaptchaAnswerPanel {margin:0 auto; padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:0; margin:0 0 0 0; padding:8px 0 8px 0 !important; font-size:11px;}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}  
.CaptchaImage {width:200px; margin: 10px auto 0;}


a.button-col-1 {background:#335eaa; width:99%; margin:1% 0 0 0%; font-weight:bold; text-transform:uppercase; color:#fff; line-height:28px; display:inline-block; text-align:center; padding-top:5px;}
a.button-col-1:hover {background-position:bottom; text-decoration:none; background:linear-gradient(#335eaa, #2d569e); color:#fff!important;}


/***** responsive styles **/

@media screen and (max-width: 1547px) {
	.home-content {
		gap: 3%;
	}
	.storagepage {
	font-size:26px;
}
}
@media screen and (max-width:1450px) {
	.wrap {width:90%;}
	
	.logo {width:30%;}
	.text-inner,.specials-banner {width:80%;}
	
	.job {
    flex: 1 !important;
}
}
@media screen and (max-width: 1369px) {
	.lg-display {
		display: none;
	}
	.sm-display {
		display: contents !important;
	}
	.home-content {
		gap: 0%;
		justify-content: center;
		width: 100%;
	}
}
@media screen and (max-width:1069px) {
.storagepage {
	font-size:25px;
}
}
@media screen and (max-width:1026px) {
	.brand-head-middle a h2 {font-size:18px !important;}

}
@media screen and (max-width:1024px) {

	
	body {font-size:16px;}
	
	.text-inner,.specials-banner {width:90%;}

	.CaptchaImage {width:75%; margin: 10px auto 0;}

}

@media screen and (max-width:1023px) {
	h1 {font-size:26px;}	
	.logo {width:32%;}
	.mobile-links {display:none;}
	.rt-head {width:40%;margin: 20px 0;}
	
	.rt-head .fab {float:left!important; margin-left:5%;}
	.head-content{border: none;padding: 0 0 30px 0; margin: 0;}
	
}

@media screen and (max-width:1000px) {
	a.brand {
    flex-basis: 23%;
	}
}

@media screen and (max-width:900px) {
	.zoom-container .zoom-caption h3 {font-size: 16px;}
	.brand {flex-basis: 25%;}
	
}

@media screen and (max-width:768px) {
	h1 {font-size:22px; margin-bottom:10px;}
	h2 {font-size:20px; margin-bottom:10px;}
	h3,h4 {font-size:18px;}
	h5 {font-size:16px;}
	
	h6 {font-size:14px; margin-bottom:10px;}
	.blockwrap {max-width:500px;}
	.zoom-container .zoom-caption h3 {font-size: 14px;}
	.head-logos .blockwrap{max-width: 90%;margin: 0 auto;}
	article {padding:40px 0;}
	a.outline-btn {font-size:16px;}
	
	.pageleft {float:none; width:100%;}
	.pageright {float:none; width:96%;}
	
	#manu {margin-bottom:10px;}
	#manu img {width:30%; margin:1%;}
	
	.column4 {width:49.5%;}
	
	.flex-container.service-emp {
		gap: 15px;
	}
	
	.emp-img {
    flex-basis: 100%;
}
	.emp-img img {
    width: 275px;
    margin: 0 auto;
}
	
	.emp-bio {
    flex-basis: 100%;
    text-align: center;
	}
	
	.flex-container.homecta {
    flex-wrap: wrap;
}
	
	.cta-item {
		flex-basis: 100%;
	}
	
	.flex-products {
		flex-wrap: wrap;
	}
	
	.product-img {
		flex-basis: 40%;
		flex-grow: 1;
	}
	.twoflyers {flex-wrap:wrap;}
	.twoflyers div {flex-basis: 100%;}
}
@media screen and (max-width: 762px) {
	.home-p {
		width: 85%;
	}
	.grid-wrap {
    flex-wrap: wrap;
	}
}
@media screen and (max-width: 656px) {
	.attachments-image img {
		width: 100%;
	}
}
@media screen and (max-width:640px) {		
	.logo {float:none; width:75%; margin:0 auto;}
	.rt-head {float:none; width:100%;}
	
	.grid-wrap{gap: 10px;}
	
	.head-content{justify-content: center;}
	
	.head-content a {flex: 1;}
	.head-content button{width: 100%;}
	.column6 {width:100%;}
	.column6-nopad {width:100%;}
	
	.text-block {padding:0 0 5px;}
	
	.zoom-container .zoom-caption h3 {font-size: 12px;}
	
	.col3img {float:none; width:50%; margin:0 auto;}
	.col3 {float:none; width:100%; margin:0 auto; text-align:center !important;}
	
	.team-section h2 {text-align: center;}
	footer {padding:20px 0;}
	
	.flex-container.flex-job{flex-wrap: wrap;}
	.job {
    flex-basis: 100% !important;
		gap: 40px;
}
	
	a.brand {
    flex-basis: 23%;
	}
	
	a.brand {
    flex-basis: 30%;
    flex-grow: 1;
}
	
	.product-page ul li {
		flex-basis: 100%;
	}
	
	.product-video {
		height: 300px;
	}
	
	.text-inner{    padding: 50px 0;}
	.blog-wrap {
    padding: 10px;
	}
	.home .text-inner {padding: 20px 0 0;}
}

@media screen and (max-width:490px) {
	h1 {font-size:20px;}	
	body {font-size:14px;}
	p {margin-bottom:14px;}
	
	header {padding:12px 0 7px 0;}
	.logo {float:none; width:100%; margin:0 auto 10px auto;}
	.rt-head {width:100%;}
	.head-contact {font-size:12px; margin:5px auto; text-align:center;}
	
	.zoom-container .zoom-caption h3 {font-size: 14px;}
	.blockwrap {text-align:center;}
	.blockleft {float:none; width:100%; margin:0 auto; text-align:center;}
	.blockright {float:none; width:40%; margin:0 auto;}
	
	a.outline-btn {font-size:14px;}
	
	.column4 {width:100%; margin-right:0;}
	
	.brand {
		flex-basis: 100%;
		text-align: center;
	}
	
	.product-img {
		flex-basis: 100%;
	}
	
	.button-wrap {
		flex-wrap: wrap;
	}
	
	.button-wrap a {
		flex-basis: 100%;
	}
	
	.brand-head-middle {flex-basis: 100%;}
	.brand-head {
    flex-basis: 47%;
	}
	
	.brand-head img {width: 140px;margin: 0 auto;}
}
@media screen and (max-width:300px) {
	h1 {font-size:18px;}
	.blockright {width:100%;}
	.zoom-container {float:none; width: 100%; margin:0% auto;}
	
	.col3img {width:75%;}
}
