/*============================================

	WEBSITE DEVELOPER: KAROLINE DASSIE
	
	Main Colors:
	- Green: #367c2b
	- Black: #000
	- White: #fff
	- Yellow: #FFD361 
	
==============================================*/

/*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;
}

/*END RESET*/

/*==============================================
			
			TYPOGRAPHY / TEXT FORMATTING
			
==============================================*/

::-moz-selection {
    background: #367c2b;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #367c2b;
    color: #fff;
    text-shadow: none;
}

section{
	padding: 25px 0;
	border-bottom: 1px #6d6e71 solid;
}
h1 {  font-weight:700; color: #000; font-size: 28px; padding:0.5em; margin:0 auto 1em auto; text-align:left!important}
h2 {  font-weight:400; color: #000; font-size:30px;}
h2.white {  font-weight:700; color: #fff; font-size: 28px; border:1px solid #fff; padding:0.5em; margin:0 auto 1em auto; text-align:left!important}
h3 {  font-weight:900; color: #367c2b!important; font-size: 21px; text-transform:uppercase; margin:2em auto 0.5em auto}
h4 {  font-weight:700; color: #000; font-size: 20px; margin:10px 0 20px  0}
h4.white {  font-weight:700; color: #fff; font-size: 20px; margin:10px 0 20px  0}
h5 {  font-weight:900; color: #fff; font-size: 20px; text-transform:uppercase;}
h6 {  font-weight:500; color: #000; font-size: 24px; text-transform:uppercase;}

p { font-weight:200;font-size: 18px; line-height: 1.5em;}
strong { font-weight:900;}

.redText {color:#FF0004;}

/***** homepage popup styles **/
.popup {width:92%; background:rgba(35,35,35,.98); position:absolute; z-index:99999999; /*top:10%;*/ left:50%; transform:translateX(-50%); -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); max-width:800px; padding:10px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; display:none;}
.close-popup, .bar-right {position:absolute; top:10px; right:15px; color:#999; font-size:22px; z-index:1; cursor:pointer;}
.popup img#logo {width: 100%; height: auto; margin: 0 auto; display: block; max-width: 225px; margin-bottom: 15px; padding: 15px;}
.popup p {text-align: center; color: #eee; margin: 0 auto; display: block; max-width: 600px;}

h1.feature-buttons-title{font-weight:400; padding: unset; border: unset; text-align: unset!important}
#content h1{font-weight:400; margin: unset; border: unset; text-align: left!important;}
/*==============================================
			
			LINKS
			
==============================================*/

a{
	color:#4a4a4a;
	text-decoration:none;
	transition: all .2s ease-in-out; 
	-moz-transition: all .2s ease-in-out; 
	-webkit-transition: all .2s ease-in-out;
}

a:hover{
	color: #dfdfdf ;
	text-decoration:none;
}

.fa-chevron-circle-right{ padding-left: 15px;}

.half{
	float: left;
	width: 50%;
}
.quarter{
	float: left;
	width: 25%;
}

#equipment{
	float:left;
	width:100%;
	background:none;
	margin:-5em auto 0 auto;
	position:relative;
	 /*z-index:999;*/
}

#equipment a{
	display:block;
	font-size: 26px;
	line-height: 28px;
	text-transform: uppercase;
	text-decoration:none;
	text-align: center;
	color: #000;
	padding: 20px 0;
	box-sizing: border-box;
	margin: 0 4%;
	*background: #367c2b;
	background:rgba(255, 255, 255, 0.67);
	border:1px solid #FFD361;
	border-bottom:none;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#equipment a:hover{
	color: #a3a3a3;
	background:#fff;
}

#equipment .fa{color:#367c2b}

a.button{
	display: block;
	width: 250px;
	background: #367c2b;
	transition: none; -moz-transition: none; -webkit-transition: none; 
	color: #fff !important;
	margin: 10px auto;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
}
a.button:hover{
	background: #367c2b;
}

a#botao{
	display: block;
	width: 100%;
	background:#FFD361;
	color: #000;
	text-transform:uppercase;
	margin:10px 0 0 0;
	padding: 10px;
	font-size:20px;font-weight:900;
	box-sizing: border-box;
	text-align: center;
}
a#botao:hover{
	color: #FFD361;
	background:#000;
}

.cont a{
	color:#E30003!important; 
	
	font-weight:900
	}
.cont a:hover{
	text-decoration:underline!important;
}

/*=============================
		Catalog
=============================*/
	.catalog{
	position: absolute;
	top: 75px;
	right:20px;
	z-index: 999;
	}
	.catalog img{max-width:380px; width:100%; border:#367c2b 3px solid}
	

/*=============================
		customer portal page buttons
=============================*/

#portal a{
	display:block;
	font-size: 23px;
	line-height: 40px;
	text-transform: uppercase;
	text-align: center;
	color: #000;
	padding: 20px 0;
	box-sizing: inherit;
	margin: 0 1% 0 0;
	background:rgba(255, 255, 255, 0.67);
	border:3px solid #367c2b;
	-webkit-border-top-left-radius: 12px;
	-webkit-border-top-right-radius: 12px;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-topright: 12px;
	border-top-left-radius: 12px;
	border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 12px;
	-webkit-border-bottom-right-radius: 12px;
	-moz-border-radius-bottomleft: 12px;
	-moz-border-radius-bottomright: 12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	width: 95%;
}
#portal a:hover{
	color: #FFD361;
	background:#fff;
}

/*=============================
		parts page buttons
=============================*/

#catalogs a{
	display:block;
	font-size: 23px;
	line-height: 40px;
	text-transform: uppercase;
	text-align: center;
	color: #000;
	padding: 40px 0;
	box-sizing: inherit;
	margin: 0 1% 0 0;
	background:rgba(255, 255, 255, 0.67);
	border:3px solid #367c2b;
	-webkit-border-top-left-radius: 12px;
	-webkit-border-top-right-radius: 12px;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-topright: 12px;
	border-top-left-radius: 12px;
	border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 12px;
	-webkit-border-bottom-right-radius: 12px;
	-moz-border-radius-bottomleft: 12px;
	-moz-border-radius-bottomright: 12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	float: left;
	width:23.5%;
}

#catalogs a:hover{
	color: #FFD361;
	background:#fff;
}

#catalogs .fa{color:#367c2b}





/*==============================================
			
			QUICK SEARCH 
			
==============================================*/

#search-head{
	text-transform: uppercase;
	float: right;
	width: 330px;
	padding:0
}
.search {
	float: right;
    width: 100%;
    position: relative;
}
.search:before {
    position: absolute;
    top: 12px;
    left: 15px;
    line-height: 18px;
    font-family: 'FontAwesome';
    content: '\f002';
    text-align: center;
	color: #4F4F4F;
	background: #fff;
    -webkit-font-smoothing: subpixel-antialiased;
    font-smooth: always;
}
.searchTerm {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
	background: #fff;
    padding: 13px 12px 12px 38px;
	border: 1px #ccc solid;
	border-radius: 30px;
	color: #000;
    outline: none;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


.searchButton {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px !important;
    height: 42px;
	background: transparent;
	border: none;
    cursor: pointer;
	background-color: white;
}


#search-head input[type="color"], #search-headinput[type="date"], #search-head input[type="datetime"], #search-head input[type="datetime-local"],#search-head input[type="email"],#search-head input[type="file"],#search-head input[type="month"],#search-head input[type="number"],#search-head input[type="password"],#search-head input[type="reset"], #search-headinput[type="search"],#search-head input[type="tel"],#search-head input[type="text"],#search-head input[type="time"],#search-head input[type="url"],#search-head input[type="week"],#search-head select,#search-head textarea {
    padding: 13px 12px 12px 38px;
    border: 1px #ccc solid;
    background: #fff;
    color: #000;
    border-radius: 30px;
    height: 40px;
    font-size: 13px;
}


/*==============================================
			
			SITE FRAMEWORK 
			
==============================================*/

html, body{ 
	background: #367c2b;
	font-weight:200;font-size: 14px; 
	line-height: 24px;
	-webkit-text-size-adjust: none;
	font-family: 'Roboto Condensed', sans-serif!important;
}

img{
	max-width: 100%;
	height: auto;
}


.sitewidth {
	max-width: 1200px;
	margin: 0 auto;	
	width: 95%;
}

#content{
	padding:4em 0 1em 0;
	background:#fff;
}

#content-yellow{
	padding:4em 0;
	background:#FFD361;
}

.wrapper {
	width: 100%;
	height: auto;
	float: left;
	background:#fff;
}
.wrapper-inner{width:95%; max-width: 1020px; margin: 0 auto; padding-bottom: 1%;}
.wrapper h2,h3{ padding-top: 1%;}
.wrapper h3{ margin-bottom: -25px;}

.wrapper p {
	line-height: 180%;
	font-size: 16px;
	width: 80%;
	max-width: 1020px;
	text-align: center;
	margin:0 auto;
	vertical-align: middle;
	padding: 1%;
}
.wrapper a{color: #000;}


/*--------Form Styles----------*/
#formpage {vertical-align:top;padding-bottom: 30px;margin: 0 auto;}
#formpage div { vertical-align:top; padding:5px 5px;}
#formpage input { padding:6px 5px 10px; border:1px solid #8e8d8d; color:#000; font-size:13px; background:#fff;}
#formpage textarea { padding:6px 5px; border:1px solid #8e8d8d; color:#000; font-size:12px; background:#fff; margin-top: 5px;}

 /* 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 #8e8d8d; color:#000; vertical-align:middle; font-size:12px; line-height:normal; padding:5px; width:100%;}
.formfield { float:none;  margin-right: 10px;  margin-top: 10px; color: #000; text-align: left; }
#formpage input  { width:100%; margin-top: 5px;}
 #formpage input.larger  { width:100%; }
#formpage textarea { width:99%; height:85px; 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:#abacac;  color:#FFF; border:1px solid #abacac; 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:120px; margin:0; padding:12px 0; background: #367c2b;  font-size:20px; line-height:14px;  
font-weight:700;  color:#fff; text-transform:uppercase;}

#formpage input.button:hover {background: #000;color:#fff;text-shadow:none; text-transform:uppercase; padding:12px 0; }
 
/* 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; }



/*============================== 

	CUSTOMER PORTAL FORM
	
==============================*/

form .portal{font-weight:200;font-size: 17px; line-height: 1.5em;}

#formpage input.checkbox {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:13px;
    height:13px;
    display:inline;
    background-color:#fff;
	font-family: 'Roboto Condensed', sans-serif;
 }


	
#author.input-name{
    border: 1px solid #d2d2d2;
    width: 90%;
    font-size: 14px;
    color: #747474;
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    padding: 8px 1%;
    float: left;
    margin: 1% 0 0 0 ;
	font-family: 'Roboto Condensed', sans-serif;
	}


#email.input-email {
    border: 1px solid #d2d2d2;
    width: 90%;
    font-size: 14px;
    color: #747474;
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    padding: 8px 1%;
    float: left;
	margin: 1% 0 0 0 ;
	font-family: 'Roboto Condensed', sans-serif;
	}
	#email.input-email:focus{
		outline-color:#25c1f0;
	}

#comment-submit {
    text-align: center;
	width:235px;
	margin:0 auto;
}


#form input {
	font-family: 'Roboto Condensed', sans-serif;
	width: 100%;
	padding: 5px 10px;
	border:1px solid #DFDFDF;
	margin: 5px 0 15px;
	box-sizing: border-box;
}

.CaptchaPanel {
	margin:0 0 0 0 !important;
	padding:0 0 0 0 !important;
}

.CaptchaAnswerPanel input {
	width: 200px !important;
	border: 1px solid #d2d2d2;
	-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    padding: 8px 1%;
	margin:10px auto;
	}
	.CaptchaAnswerPanel input:focus{outline-color:#25c1f0;}

.CaptchaImagePanel {
	margin:0 0 0 0;
	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;
	color:#8f979d
}

.CaptchaAnswerPanel {
	margin:0 0 0 0;
	padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 0 0;
	padding:8px 0 8px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#8f979d;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 

.contactbtn{
	margin:10px auto 0 auto;
	text-align:center;
}

.contactbtn input[type="submit"] {
    font-size: 15px;
	font-weight:600;
	padding:8px 0;
    line-height:normal;
    background: #367c2b;
    width: 220px;
    color: #fff;
	text-transform:uppercase;
    display: inline-block;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    outline: none;
    border: none;
	transition: all .2s ease-in-out; 
	-moz-transition: all .2s ease-in-out; 
	-webkit-transition: all .2s ease-in-out;
	cursor: pointer;
	position: relative;
}
.contactbtn input[type="submit"]:hover {
	background: #000;
	color: #fff;
	outline:none;
}

 #inquiry.textarea-comment {
    border: 1px solid #d2d2d2;
	font-family: 'Roboto Condensed', sans-serif;
    width: 90%;
    height:180px;
    color: #747474;
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
    padding: 8px 1%;
	margin: 1% 0 0 0 ;	
	}
	#inquiry.textarea-comment {
		outline-color:#25c1f0;
	}

/*---------------------------*/


.column1 {width:100%;}
.column2 {width:50%; *width:48%; float:left; padding-right: 20px; box-sizing: border-box;}
.column3 {width:28%; *width:28%; float:left; margin:1% 4% 1% 0; box-sizing: border-box;}
.column4 {width:25%; *width:23%; float:left; padding-right: 20px; box-sizing: border-box;}
.column5 {width:20%; float:left; padding:0 1%; box-sizing: border-box;}
.column6 {width:16.66666%; float:left; padding-right: 20px; box-sizing: border-box;}

.twothird{float:left; width:69%; margin-right:1%}
.onethird{float:left; width:30%}

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

.position-reset{position: relative;top: -201px;}


.info-box{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.05);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,.05);
	box-shadow: 0px 1px 1px rgba(0,0,0,.05);
	border:1px solid #c5cace;
	margin:1em auto 0 auto;
	padding:2%;
		
}

.building img{ max-width:600px; width:100% }
.partsphoto img{ max-width:525px; width:100%; display:block ; margin-bottom:10px;}

/*==============================================
				
				NAVIGATION
				
==============================================*/


#navicon {
	float: left;
	font-size: 28px;
	background: #367c2b;
	padding: 8px 10px 5px;
	border-radius: 5px;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	color:#fff;
	margin-left: 15px;
}

#nav{
	width: 100%;
	background:#367c2b
}

#nav ul{text-align: center}

#nav ul li{
	position:relative;
	display: inline-block;
}

#nav ul li a{
	display: block;
    color: #fff;
	text-decoration:none;
	text-transform: uppercase;
	font-size: 18px;
	padding:15px;
	font-weight:600;
}

#nav ul a:hover{
	background: #000;
}

#nav ul ul{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	padding:0;
	z-index: 9999999;
	border: 1px #dfdfdf solid;
	border-top:none
}

#nav ul ul li{
	float:none;
}

#nav ul ul a{
    font-size: 17px;
    color: #367c2b;
	padding: 6px 15px;
	text-transform: none;
	background:#fff ;
	width: 220px;
	border-bottom:1px solid #ececec
}

#nav ul ul a:hover{
	background: #EEEEEE;
}

#nav ul li:hover > ul{
	display:block
}


#nav ul ul ul{
	top: -1px;
	left: calc(100% + 1px);
}
#nav ul ul ul li:first-child{
	border-top: 1px #217221 solid;
}
#nav ul ul ul li:last-child{
	border-bottom: 1px #217221 solid;
}
	
#nav ul li a.portalfont{
	background:#FFD361!important;
	color:#000!important;
	}
#nav ul li a.portalfont:hover{
	background:#000!important;
	color:#fff!important;
	}

#nav ul li a.covid19{
	background:#ff3434!important;
	color:#fff!important;
	}
#nav ul li a.covid19:hover{
	background:#000!important;
	color:#fff!important;
	}

.bannermessage {
	color: white;
	background-color: black;
}

.bannermessage p {
	width: 90%;
	margin: 0 auto;
text-align: center;
	padding: 12px 0;
}



/*==============================================
					
					STYLES
					
==============================================*/

.feature-buttons {
  padding: 60px 20px;
  background-color: #FFD361; /* John Deere yellow */
  text-align: center;
}

.feature-buttons-title {
  font-size: 28px;
  color: #1a2a4f;
  margin-bottom: 30px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.feature-btn {
  background-color: #367C2B; /* John Deere green */
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  font-size: 16px;
  border-radius: 6px;
  flex: 1 1 220px;
  max-width: 300px;
  text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* base shadow */
}

.feature-btn:hover {
  background-color: #2e6b24; /* darker green */
}
header {
	background-size:cover;
	transition: all 0.4s ease;
	position:relative;
	z-index:9999;
	padding:5px 1%;
	background:#fff;
}

header #phonetop h2 {
	font-size:27px;
	color:#4a4a4a;
	display:block;
	margin:0.2em 0;
	border: unset;
	text-align: unset!important;
	padding: unset;
	font-weight: 400;
}

.header-left{float: left; width:70%; margin-top:25px }
.header-right{float: right; width:30%}

#jglogo{float:left; margin:1em 0 0 0}
	img#jglogo {width:100%; max-width:360px;}

.header-left #logo{
	float: left;
	border-right:3px solid #d5d5d5;
	padding-right:25px;
	margin-right:20px;

}
	.header-left #logo img{float: left; max-width:270px;width:100%}

#phonetop{text-align: right;}
	
#phonetop h2{display:inline}

#phonetop .fa {color:#000}
.slideshow{ position: relative; width: 100%; padding-bottom: 0; background-color: white;}
.cycle-slideshow{width: 100%; height: 500px;; position: relative; z-index: 0;}

.cycle-slideshow > li {
  width: 100%;
  height: 500px;          
  list-style: none;
  position: relative; 
}

.cycle-slideshow img{ height: auto; position: relative; z-index: 0;}

.video-container{
	float:left;
	width:53.3%;
	position: relative;
	padding-bottom: 30%;
	padding-top: 0; 
	height: 0; 
	overflow: hidden;
	}
	
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-side1{
	background:url(../siteart/KS130038.jpg) no-repeat center center;
	width:23.35%;
	float:left;
	padding-bottom: 30%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.video-side2{
	background:url(../siteart/KS130036.jpg) no-repeat center center;
	width:23.35%;
	float:left;
	padding-bottom: 30%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
}

/*==============================================
					
					PAGER
					
==============================================*/

.cycle-controls{
	position: absolute;
	top: 40%;
	width: 100%;
	z-index: 9;
}
#prev{float:left; margin-left:25px;}
#next{float:right; margin-right: 25px;}
.cycle-controls img{cursor: pointer;opacity: .8;}
.cycle-controls img:hover{cursor: pointer;opacity: 1;}

.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 5px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #fff; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #367c2b;}
.cycle-pager > * { cursor: pointer;}


a.underline{
	text-decoration:underline;
}
a.underline:hover{
	text-decoration: none;
	color: #0b470e;
}


.alinhe img{ display:inline-block; vertical-align:middle; max-width:300px}
.ams img{ margin:4em 0 0 0; }
.ams { text-align:right}

img.serv-img{max-width:450px; width:100%; margin:0 auto 1% auto; display:block}

/*==============================================
			
			DETAILED SEARCH
 
==============================================*/

.detailed-form {
	color: #fff;
	margin:0 auto 2em auto;
}
.detailed-search input {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    background-color: #fff;
    border: 2px solid #367c2b;
	box-sizing: border-box;
}
.detailed-search select {
    width: 100%;
    padding:8px;
    font-size: 12px;
    background-color: #fff;
    border: 2px solid #367c2b;
	box-sizing: border-box;
}

.detailed-row{
	margin: 10px 0;
	color: #000;
	text-transform:uppercase;
	font-weight:600;
	font-size: 12px;
}

.detailed-search input[type="submit"] {
	text-transform:uppercase;
	font-size: 12px;
    background: #000;
    width: 100%;
	height: 35px;
    color: #fff;
    display: inline-block;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    outline: none;
    border: none;
	transition: all .2s ease-in-out; 
	-moz-transition: all .2s ease-in-out; 
	-webkit-transition: all .2s ease-in-out;
	cursor: pointer;
	position: relative;
	margin-top:22px;
	font-weight:700;
}

.detailed-search input[type="submit"]:hover {
	background: #367c2b;
}

.detailed-search select:focus, .detailed-search input:focus{outline-color:#fff;}

.last{ margin:1% 0 1% 0; }


/*==============================================
				
				FORM STYLES  
				
==============================================*/

#form input {
	width: 100%;
	padding: 5px 10px;
	border:1px solid #DFDFDF;
	margin: 5px 0 15px;
	height: 30px;
	border-radius: 5px;
	box-sizing: border-box;
}

#form textarea {
	width: 100%;
	padding: 5px 10px;
	border:1px solid #DFDFDF;
	margin: 5px 0 15px;
	height: 90px;
	border-radius: 5px;
	box-sizing: border-box;
}

#form select {
	width: 100%;
	padding: 5px 10px;
	border:1px solid #DFDFDF;
	margin: 5px 0 15px;
	height: 30px;
	border-radius: 5px;
	box-sizing: border-box;
}

#form input[type="checkbox"] {
    margin:5px 10px 0 0;
    width:13px;
    height:13px;
    display:inline;
}
#form input[type="radio"] {
    margin:5px 10px 0 0;
    width:15px;
    height:15px;
    display:inline;
}
 
#form input.button,
#form input.button:focus {
	display: block;
    width:200px; 
	height: auto; 
    background:#a3a3a3;
    border:2px #fff solid;
	border-radius: 8px;
    font-size:14px;
	line-height:14px;
	font-weight:bold;
	color: #fff;
	padding: 10px 0;
	margin: 10px 0;
	cursor: pointer;
	transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease
}
#form input.button:hover {
	background:#367c2b;
	color:#fff;
	border:2px #a3a3a3 solid;
}
#form input.otheropt{ width:30%; margin-left:1%}

#form input:focus, #form textarea:focus, #form select:focus{ outline-color:#367c2b;}




button.bottom_link{position:relative; right:2.5rem; top:40%; bottom:50%; width:3rem; height:3rem; font-size:1.15rem; padding:0; text-align:center; display:block;color:#ffde00;  border:2px solid #ffde00; background:#163b1e; border-radius:50%; cursor:pointer;}

button.bottom_link img {vertical-align:text-top;}


/* ==============================================
	
			banner slideshow with buttons
			
 ==============================================*/
.ohara-events-banner-container {
            position: relative;
            width: 100%;
            min-height: 500px;
            overflow: hidden;
			background-image: url('/siteart/slideshow/bannerbg-new.jpg');
        }

        .ohara-events-banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .ohara-events-banner-overlay {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
			box-sizing: border-box;
        }

        .ohara-events-main-title {
            color: #367C2B;
            font-size: 50PX;
            font-weight: bold;
            margin-bottom: 2.5rem;
			line-height: 1.2;
    		text-align: center;
           
        }

        .ohara-events-cards-wrapper {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
			padding: 0px 10px;
        }

        .ohara-event-single-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            flex: 1;
            max-width: 450px;
        }

        .ohara-event-card-title {
            color: #333;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        .ohara-event-card-date {
            color: #367C2B;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .ohara-event-action-link {
            display: inline-block;
            padding: 10px 40px;
            font-size: 1.05rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
        }



        .ohara-event-link-green {
            background-color: #367C2B;
            color: white;
        }

        .ohara-event-link-green:hover {
            transform: translateY(-2px);
        }

.cs-banner {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 500px;
  background: #ffffff;
}

.cs-title{
	font-size: 50px;
	color: white;
	display: block;
	line-height: 1.2;
    text-align: left;
	margin-bottom: 0px;
	padding: 0px;
	width: 100%;
}

.cs-left {
	background: #367c2b;
	color: #ffffff;
	flex-direction: column;
	align-content: center;
	justify-items: center;
	text-align: center;
	flex: 33;
	padding: 24px;
	padding-bottom: 64px;
	gap: 24px;
}

.cs-logo-deutz {
	padding-top: 24px;
	width: 182px;
	height: auto;
	display: block;
}

.cs-right {
	position: relative;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	flex: 66;
	padding: 24px!important;
	padding-bottom: 64px;
}

.cs-logo-weidemann {
  align-self: flex-start;
  height: auto;
	width: auto;
}

/* Machine image */
.cs-machine {
  width: 100%;
	max-width: 800px;
	align-self: center;
  height: auto;
  display: block;
}


/* ==============================================
	
			SCROLLING INVENTORY
			
 ==============================================*/
 
.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
	background: #fff;
    padding: 10px 0;
}
 
.scrolling{
    width:100%;
    height:90px;
}


/* ==============================================
	
			MANU LOGOS
			
 ==============================================*/
 .manulogos {
	max-width:100%;
	margin:10px auto 0;
	position:relative;
	padding:20px 0 60px;
	text-align:center;
}

.manulogos a{
	*display:inline-block;
}

.whitebox {
	width:150px; 
	height:130px;
	vertical-align:middle;
	text-align:center;
	display:inline-block;
	margin:7px;
	background:#fff;
	border:2px solid #eaeaea;
	padding-top:14px;
}

.whitebox:hover {
	transform:scale(1.1,1.1);
	box-shadow:0 0 5px #363636;
}

.whitebox img {
	max-width:150px; 
    width: 100%;
	border:none;
	float:none;
	padding:0;
	margin:0;
	max-height:124px; 
	display:inline-block; text-align:center; vertical-align:middle;
}

 
/*==============================================
				
				INVENTORY STYLES 
				
 ==============================================*/
 
	.hosted-content h5 span{ color:#000}
	
/*==============================================
				
				FOOTER STYLES 
				
 ==============================================*/


.bottom{
	font-size: 14px;
	line-height: 22px;
	background: #000;
	padding: 3em 0;
	color: #dfdfdf;
}
.bottom p{color: #dfdfdf!important; font-size: 14px; line-height:2em}
.bottom a{color: #dfdfdf!important; text-decoration:underline}
.bottom a:hover{color: #dfdfdf!important; text-decoration:none}

.tempo{
	padding:2em 0 0 0; 
	width:100%!important; 
	background:#fff; 
	text-align:center; 
	border:none!important
}
	
#yellow{background:#FFD361; padding:1em 0; text-align:center}

.footer{background:#367c2b; padding:2em 2%; text-align: center; border-top:2px solid #3d8b31;}
	.footer a .fa{ color:#fff; font-size:45px;}
	.footer a:hover .fa{ opacity:0.5; } 


.clear{clear:both;}	


/*==============================================
				
				FOOTER NAV
				
 ==============================================*/
 
.footernav { background:#367c2b; padding:1em 0; text-align:center ; color:#fff; border-bottom:2px solid #2e6a25;}
.footernav li{ display:inline;}
.footernav li a{ color:#fff; text-transform:uppercase;text-decoration:none; margin:0 1%; font-weight:700}
.footernav li a:hover{color:#a3a3a3 ; }

/*==============================================
				
				ADDICIONAL
				
 ==============================================*/

.feature-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 60px;
    color: 111;
    text-shadow: 2px 2px white;
    line-height: 60px;
}

.bulk-oil-link {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px 2px black;
    line-height: 60px;
    background: #367c2b;
    padding: 10px;
    border-radius: 10px;
}
.banner-red-link {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px 2px black;
    line-height: 60px;
    background: #e60000;
    padding: 10px;
    border-radius: 10px;
}

.bulk-oil-feature {
    background: #ffde00;
	border-bottom:6px #367c2b solid;
   padding: 1em 0;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
}

/*==============================================
			
			RESPONSIVE STYLES 
			
==============================================*/
.show-menu-for-mobile {display:none;}  

	 @media screen and (max-width: 1620px){
		 #equipment a{font-size: 18px;}
		 }

    @media screen and (max-width: 1420px){
        #equipment a{margin: 0 1%;}
    }
    @media screen and (max-width: 1380px){
        #nav ul li a{
            font-size: 17px;
            padding:15px 10px;
        }
    }
    @media screen and (max-width: 1320px){
       .quarter{width:48%; margin:0 1%}
        #whitbg{background:#fff; padding: 0}
        .slideshow{ line-height:0 }
        #equipment{width: calc(100% - 30px); margin: 0 auto }
        #equipment a{
            top: 0;
            width: 100%;
            text-align: center;
            font-size: 20px;
            line-height: 24px;
            padding: 15px 0;
            box-sizing: border-box;
            margin: 10px auto;
            background:#FFD361;
            border-radius:0;
            border:none;
        }
        #equipment{float: none;}
		.ohara-event-link-green { padding: 20px 40px;
    }

    @media screen and (max-width: 1230px){
/*        .bulk-oil-feature {padding: 10em 0;}*/
        .whitebox {width:177px; }
    }
    @media screen and (max-width: 1060px){
        .whitebox {width: 30%; margin: 1%}
        .manulogos {margin:0 auto;padding: 0;text-align: left}
		.cs-title{
			font-size: 32px;
		}
		.cs-logo-deutz {
			width: 86px;
		}
    }
    @media screen and (max-width: 600px){
        .whitebox {width: 46%; margin: 1%}
    }

    @media screen and (max-width: 990px){
/*        .bulk-oil-feature {padding: 7em 0;}*/
        .feature-title {font-size: 45px;}
        .bulk-oil-link{font-size: 20px}
		.cs-machine{
			max-width: 600px;
		}
    }
	@media (max-width: 768px) {
		  .feature-btn {
			flex: 1 1 100%;
			max-width: 100%;
		  }
		.cs-banner{
			flex-direction: column;
		}
		
		.cs-logo-weidemann{
			align-self: center;
		}
		
		.cs-logo-deutz {
			width: 86px;
			padding-top: 0px;
		}
		.cs-title{
			font-size: 28px;
		}
		.cs-left {
			flex-direction: row;
			padding-bottom: 12px;
		}
    @media screen and (max-width: 660px){
/*        .bulk-oil-feature {padding: 3em 0;}*/
    }


    @media screen and (max-width: 1855px){
        .catalog img{max-width: 320px;}
    }

    @media screen and (max-width: 1200px) and (min-width: 966px) {
        .show-menu-for-mobile {display:none;}  
        .wrapper, .container{padding: 0 2%;}
        .header{padding:1%}
    }

    @media screen and (max-width: 1260px){
        #nav ul li a{
            font-size: 14px;
            padding:1em 5px;
        }
    }

    @media screen and (max-width: 1190px){
        header #phonetop h2{font-size:20px;}
        #logo img{max-width:230px}
        #jglogo{margin:0}
    }

    @media screen and (max-width: 1540px){
        .catalog img{max-width: 290px;}
    }

    @media screen and (max-width: 1270px){
        .catalog img {max-width: 190px;}
        #catalogs a {width: 18%;}
    }

    @media screen and (max-width: 1100px){
        #catalogs a {
            width:30%;
            margin: 1%;
        }
        .sitewidth{width:95%;}
    }

    @media screen and (max-width: 950px){
        .catalog {
            background:#fff;
            position: relative;
            top:auto;
            right:auto;
            margin: 0 auto;
            padding:30px 0 15px 0;
            z-index: 99999;
            text-align:center
        }
        .catalog img{display:block; margin:0 auto; max-width: 300px;}

        .header-right{width:100%; display:block; float:left; margin:10px auto}
        #search-head{width:100%}
        #search-head input[type=text]{width:100%}

        #catalogs a {
            width: 47%;
            margin: 1%;
        }
    }

    @media screen and (max-width: 950px) and (min-width:670px) {
        header #phonetop h2{display:none}
        #phonetop{text-align:center}

        .show-menu-for-mobile {display: block;}
        .hide-for-mobile {display:none;}
        .hide{display:none;}
        #nav{display:none;}

        .column4 {width: 50%; text-align: center; margin: 10px 0;}
        .column2 {width:100%; float:none; padding-right: 0; margin: 10px 0;}
        .column5 {width:33.3%; float:left; padding: 1.5% 3%; margin: 0 auto;}
        .half{float: none; width: 100%;}

        header{position:relative; padding:1em 0 0 0; width:100%}
        .header-left{margin:0 0 0 2%; width:89%}

        img#jglogo{max-width:200px}
        #jglogo{margin:1.5em 0 0 0}

        .wrapper, .container{
            padding: 0 2%;
        }

        #content{padding:3em 0}
        #content-yellow{padding:3em 0}

        #equipment a{
            padding: 16px 0;
            font-size:22px;
        }

        #equipment{
            float: none;
            /*margin:-4.9em auto 0 auto;*/ 
            background:none;
        }

        .position-reset{top:0;}
        .search-container{font-size: 14px;}
        .search input[type=text]{width: 200px;}

        .twothird{float:none; width:100%; margin:0 auto; text-align:left}
        .onethird{float:none; width:100%; margin:0 auto; text-align:left}

        .heading-loc{   line-height:1em; text-align:center;display:block}

        .tempo{display:none}

        .ams img{ margin:1em 0 0 0; }
        .ams { text-align:left}

        .alinhe{display:block;text-align:left}
        .alinhe img{display:block;text-align:left}
        img.serv-img{text-align:left; margin: 2% 0}
    }

    @media screen and (max-width: 850px){
        h6{font-size:18px}

        #brandleft {float:none; width:100%; margin:0 auto;}
        #brandright {float:none; width:100%; margin:5em auto ;}
        a.botao-short{width:100%}
        #brandright img{width:70%}
        .brandtext img{width:100%;}

        .building img{ max-width:400px; }
        .partsphoto img{ width:48%; display:block; margin:0 1%;  float:left}

        #content{padding:2em 0}
        #content-yellow{padding:2em 0}

        .twothird{float:none; width:100%; margin:0 auto}
        .onethird{float:none; width:100%; margin:0 auto}
        #space-top{padding-top:12%}

        .heading-loc{   line-height:1em; text-align:center;display:block}

        #gal_container {
            width:40%;
        }
        #gal_container img {  /*Style to make the thumbnail image style on the gallery page.*/
            max-width:100%;
            width:100%;
        }



        .ams img{ margin:1em 0 0 0; }
        .ams { text-align:left}

        .alinhe{display:block;text-align:left}
        .alinhe img{display:block;text-align:left}
        img.serv-img{text-align:left; margin: 1% 0}
        .catalog {
            padding: 30px 0 5px 0;
        }
    }

    @media screen and (max-width: 669px){
        #space-top{padding-top:200px}
        header #phonetop h2{font-size:17px; }

        h2{font-size:26px}

        .show-menu-for-mobile {display: block;}
        .hide-for-mobile {display:none;}
        .hide {display:none;}
        #nav  {display:none;}
        #navicon{float:none; margin:0 auto; border-radius:0 }

        .column4 {width:100%; float:none; padding-right: 0; text-align: center; margin: 10px 0;}
        .column3 {width:100%; float:none; padding-right: 0; margin: 10px 0;}
        .column2 {width:100%; float:none; padding-right: 0; margin: 10px 0;}
        .column5 {width:100%; float:none; padding: 2% 0; margin: 0 auto; text-align:center}
        .half, .quarter{float: none; width: 100%;}

        .video-container{
            float:none;
            width:100%;
            padding-bottom:56%
        }
        .video-side1{display:none}
        .video-side2{display:none}

        .wrapper, .container{padding: 0 2%;}

        #content{padding:1em 0}
        #content-yellow{padding:1em 0}

        .top-header{text-align:center}
        header{width:100%; padding:0}
        .header{padding:0; box-shadow:0 3px 5px rgba(95, 95, 95, 0.46)}
        .header-left{float: none; width:100%; margin:0 auto; text-align:center; line-height:0}
		.header-left #logo{ border: none !important; padding-right: 0px !important; margin-right: 0px !important;}
        .header-right{width:100%; display:block; float:none;}
        #search-head input[type=text]{margin:10px auto}
        .search::before{top:20px}

        #logo{
            float: none!important;
            margin: 0 auto;
            border:none;
            display:block;
            padding:1em 0 0 0;
        }
        #logo img{
            float:none!important;
            max-width:200px;
            margin:0 auto;
        }
        #jglogo{float:none;}
        img#jglogo{max-width:200px}

        #phonetop{
            text-align: center;
        }
        #quote-request{float: none;}
        .cycle-controls{display: none;}

        #whitbg{background:#fff; padding:15px 0 5px 0}

        .footer-left{float:none!important;width: 100%; text-align: center;margin:0 auto;}
        .footer-right{float:none;width: 100%; text-align: center;margin:2% auto 0 auto;}
        .divfooter{text-align:center; float:none}
        .footernav li a{font-size:13px; margin:0 2%}

        .footer a .fa{  float:none; width:100%; margin:0 auto; text-align:center}
        .divfooter { float:none; width:90%; margin:0 auto; text-align:center;}
        .tempo{display:none}

        #catalogs a {
            width: 46%;
            margin: 1%;
            min-height: 160px;
        }

    }

    @media screen and (max-width: 450px){
        #catalogs a {
            width: 90%;
            margin: 1% auto;
            float: none;
            min-height:auto;
            padding: 15px 0;
            font-size: 20px;
            line-height: 20px;
        }
        .catalog img{ border:none!important}
    }