/***** BEGIN RESET *****/
*{
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    font-family:'Saira', sans-serif;
	vertical-align: baseline;
}

ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

/***** END RESET *****/

a {
	text-decoration:none;
	color:#333;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all.3s ease-in-out;
}

p {font-family: 'Saira', sans-serif;font-size:18px;line-height:1.5;margin-bottom: .75rem;}

body{
	margin:0;
	padding:0; 
	font-family:'Saira', sans-serif;
	background: #fff;
    background-size: cover;
	overflow-x: hidden;
	background-color:#fff; 
	color:#252525;
	font-size:18px;
	line-height: 28px;
	-webkit-text-size-adjust: none;
}*
img {max-width: 100%; height: auto; border:none;}

h1, h2, h3, h4 {text-transform: uppercase;}
/*{font-size:28px; margin: 15px 0; text-transform:capitalize;}*/
h2{font-size:1.75em; padding: 30px 0;}
h3{font-size:1em;}

.left {float: left;}
.right {float: right;}

.map-wrap{position: relative; width: 100%; overflow: hidden; height: 320px;}
.map {width: 100%; max-height: 340px;}
.map-overlay {background: rgba(0, 0, 0, 0.75); color: #fff; position: absolute; padding: 2.5em 3.25em;; top: 0; bottom: 0; right: 6%; margin: 0 auto; line-height: 1; text-align: center;}
.map-overlay a {display: block; font-size: 24px; font-weight: 600; color:#fff; text-align:center;}
.map-overlay a:hover {color: #ffc22c;}

iframe .gm-style .place-card-large {display: none !important;}

/*Wrappers*/
.wrapper {  max-width: 100%; margin: auto 100px; box-sizing:border-box; }
.wrapped {  max-width: 100%; margin: auto 100px; box-sizing:border-box; }
.navcontain-mobile .wrapped {  max-width: 100%; margin: 0;; box-sizing:border-box; !important;}
.inv-wrap {max-width: 100% ; margin: auto 100px; box-sizing:border-box; background: #fbfbfb;}

/*Header*/
nav.mobile, .mobile-nav-cont-1 { display:none;}

.header{position: relative; width: 100%;background-color: #000; z-index:99; }
.logo {float:left; max-width: 440px; position:relative; margin: 15px 0; line-height:0; z-index:9999999999;}
.openBtn {position: relative;float: right; padding-left: 20px;}
.openBtn {font-size: 24px; color: #fff; cursor:pointer; z-index:99;}
.closebtn { position: absolute;top: 15px;right: 15px;font-size: 60px;cursor: pointer;color: #ffffff;}
.closebtn:hover, .openBtn:hover {color:#ffc22c;}
.overlay {width: 80%;display: none; position: fixed; z-index: 9999999999;top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9); padding: 50px; border-radius: 20px;}
.overlayForm {position: relative;top: 40%;width: 80%;text-align: center;margin-top: 30px;margin: auto;}
.overlayForm input[type="text"] {
	font-size: 1.6em !important;
    margin: 0 auto;
    padding: 0 20px !important;
    color: #000;
    outline: none;
    border: .5px solid #454545 !important;
    background-color: #fff !important;
    height: auto !important;}

.overlayForm .search-btn {
    background-color: #ffc22c;
    cursor: pointer;
    padding: 15px;
    font-size: 18px;
    border: none;
    border-radius: 3px;
    /* margin-top: 10px; */
    width: 100%;
    max-width: 150px;
}
.overlayForm strong {font-size: 2em; color: #fff; font-weight: 400; line-height:2;}
.ctc-bar {background: #e1e1e1; width: 100%; padding: 11px 0; float: left;}
.ctc-bar h3 {float: left; font-size: 20px;}
a.phone {float: right; font-weight: 700; font-size: 24px;}
a.phone:hover {transform: scale(1.1);}
.location{text-align: right; font-weight: 700; font-size: 24px;}

.search-form {    
display: flex;
margin-bottom: 30px;}

i.fas.fa-caret-down {
margin-left: 12px;
}

/*Slider*/
.main-image {position: relative; width: 100%; height: 520px; background-color: #333;}
.hero-title {position: absolute; bottom: 40%;}
.hero-title h1 {color: #fff;font-size: 2em;font-weight: 600;text-shadow: 1px 2px 2px #000;}
.button { display: inline-block; margin-top: 20px; padding:.5em 2em;; border: 3px solid #ffc22c; text-align: center; font-size: 22px !important; font-weight: 700; text-transform: uppercase;color: #fff;  text-shadow: 1px 1px 1px #000; border-radius: 10px; -webkit-border-radius:10px; cursor:pointer;}
a.button:hover {background: rgba(255, 255, 255, 0.25);}

/*Content*/
.callouts { position: relative;  width: 100%; margin: 0 auto;}
.callouts a {position: relative; width: 33.33%; float: left; text-transform: uppercase; font-size: 1vw; font-weight: 700; text-align: left; background-position: 10% center; background-repeat: no-repeat; padding: 30px 0;color: #FFF;transition: all 0.3s; }
a.c-eq {background-image: url(../siteart/construction-icon.png); background-size: 51px; background-color: #ffc22c; color: #333;}
.c-att {background-image: url(../siteart/attachments-icon.png); background-size: 43px; background-color: #222222; color: #ffc22c;}
.tck-trl {background-image: url(../siteart/trucks-icon.png); background-size: 62px; background-color: #00004c; color:#fff;}
.agri-eq {background-image: url(../siteart/agri-icon.png); background-size: 57px; background-color: #004220; color: #fff;}
.miscl {background-image: url(../siteart/miscellaneous-icon.png); background-size: 44px; background-color: #990200; color: #fff;}

.callouts a::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;transition: all 0.3s;transform: scale(0.1, 1);}
.callouts a:hover span {letter-spacing: 2px;}
.callouts a:hover::before {opacity: 1;	transform: scale(1, 1);	}
.callouts a::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;transition: all 0.3s;background-color: rgba(255,255,255,0.1);}
.callouts a:hover::after {opacity: 0;transform: scale(0.1, 1);}
.callout-title {margin-left: 30%; line-height: 20px;}
.callout-title span {color: #fff; font-size: 18px;font-weight: 400;}

.products {padding: 1em 0 2em; background: #eee;}
.products h2 {text-transform: capitalize;}

/*.product {float: left; width: calc(16.66% - 24px);  border: 2px solid #ffff; margin: 10px; background-size: contain; background-position:center 8px; background-repeat: no-repeat; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}*/
.product:hover {background-color:#e1e1e1; cursor:pointer;}
.power-s{background-image: url(../siteart/equipment/generators.png);}
.motorgraders{background-image: url(../siteart/equipment/motorgraders.png);}
.sweepers{background-image: url(../siteart/equipment/sweepers.png);}
.trenchers{background-image: url(../siteart/equipment/trenchers.png);}
.trucks{background-image: url(../siteart/equipment/trucks.png);}
.trailers{background-image: url(../siteart/equipment/trailers.png);}
.forklifts{background-image: url(../siteart/equipment/forklifts.png);}
.forestry{background-image: url(../siteart/equipment/forestry-equipment.png);}
.wheel-loaders{background-image: url(../siteart/equipment/wheel-loaders.png);}
.concrete{background-image: url(../siteart/equipment/concrete-equipment.png);}
.agricultural{background-image: url(../siteart/equipment/agricultural-equipment.png);}
.attachments{background-image: url(../siteart/equipment/attachments.png);}
.producttext {position: relative; width: 100%; float: left; margin-top: 60%;font-size: 16px;font-weight: 600;text-transform: uppercase;text-align: center;}

.main-text {padding: 5rem 0;}
.main-text h1 {width: 30%; font-size: 38px; font-weight: 900; float: left; line-height: .85; text-align: right; padding:2em 0;}
.main-text h1:after {    border-right: 6px solid #000; padding: 100px 20px; margin-right: -40px; content: "";}
.main-text span {font-size: 28px; font-weight: 400; text-transform: none;}
.main-text p {float: left; font-size: 20px; text-align: justify; width:60%; padding: 3em 0 3em 8%;}

/*Scrolling banner*/
.scrolling-wrap { max-width: 100%; height: 90px; overflow: hidden; border-left: 10px solid #ffc22c; border-right: 10px solid #ffc22c;}
.scrolling {width: 100%;height: 90px;}

/* Footer */
#bottom {color: #fff; font-size: 18px ; text-transform:uppercase;}
#bottom a:hover {color: #ffc22c;}
#bottom h3 {color: #ffc22c; margin-bottom: 20px; font-size: 24px; text-transform: uppercase;}
#bottom strong {font-weight: 900;line-height: 0;font-size: 36px; color: #575757;}
.footer_top {width: 100%; background-color: #000; color: #ffff; float: left; padding: 80px 0; }
.footer_top a {color: #fff;}
.footer_top a:hover {color: #952726; }
.footer_bottom {width: 100%; float: left; margin: 5px auto; text-align: center; background: #fff; color: #252525; font-size: 16px; font-weight: 600; text-transform: uppercase;}
.quarter {width: 20%;margin: 0px 2.5%; float: left;}
.quarter:last-child {text-align: right;}

/* Forms */
.search {display: none;}
div#search {margin: 0 auto;}
.form {position:relative; max-width: 75%; margin: 40px auto; padding: 20px; font-family: 'Saira', sans-serif; font-size: .9em;}
input[type="text"] {
    width: 98%;
	margin: 0px 0 12px 0;
    padding: 4px 1%;
    font-size: .9em;
    border: 1px solid #bebebe;
	-webkit-border-radius:0; 
    border-radius:0;
}
select#searchselector {width: calc(100% - 40px);}
select {margin: 10px auto;padding: 0 20px;font-size: 2em;color: #fff;background: #353534;border: 1px solid #fff;-webkit-border-radius: 0;border-radius: 0;}

select:focus {outline: none;}

textarea {
    width: 98%;
    min-height:80px;
	margin:2px 0;
    padding: 4px 1%;
    font-size: .9em;
    background-color: #f9f9f9;
    border: 1px solid #bebebe;
	-webkit-border-radius:0; 
    border-radius:0;
}

.form input[type="submit"] {
	width: 30%;
	padding: 6px 0;
	border: 0;
    text-align: center;
    font-family: 'Saira';
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
	color: #fff;
	-webkit-border-radius:0; 
    border-radius:0;
    background-color: #363636;
	cursor: pointer;
	
}

.form input[type="submit"]:hover {
	background-color: #ffc22c;
    outline: none;
    border: none;
	transition: all .2s ease-in-out; 
	-moz-transition: all .2s ease-in-out; 
	-webkit-transition: all .2s ease-in-out;  
    -webkit-appearance: none;
}

/*CAPCHA*/
.CaptchaPanel {margin:0 !important; text-align: -webkit-center; font-size: 12px; font-weight:300;}
.CaptchaImagePanel {padding:0 !important; text-align: -webkit-center !important;}
.CaptchaImage {width:auto !important;}
.CaptchaAnswerPanel { padding:0 !important;}
.CaptchaMessagePanel {font-weight:normal !important;padding:0 !important;}
.CaptchaWhatsThisPanel {padding:0 !important;}
#CaptchaAnswer {border: 1px solid #999; background: #fff; font-weight: bold;}
.cap-sub-group {text-align: center; margin: 20PX auto;}
.form-btns {max-width: 80%; margin: 0 auto; text-align: center;text-align: center;}

/* Inventory styles*/
.hosted-content input[type='submit']:hover, .hosted-content button[type='submit']:hover, .hosted-content .btn:hover, .hosted-content .button:hover { background: #ffc22c !important; color: #333!important;}

/* Go to top button*/
#btt {display: none;position: fixed;bottom: 25px;right: 25px;border: none;background-color: rgba(4, 7, 7, 0.85);box-shadow: 0px 0px 2px rgba(255,255,255,.6);color: white;cursor: pointer;padding: 15px; z-index: 99;}

/* Media queries*/
.show-menu-for-mobile {display:none;} 

@media screen and (max-width: 1600px) {
.main-text h1 {font-size: 32px;}
.main-text p {font-size: 18px;}
}
@media screen and (max-width: 1440px) {
.main-text h1 {font-size: 32px;}
.wrapper, .wrapped , .inv-wrap {max-width: 100% ; margin: auto 30px; box-sizing:border-box;}
.products h2 {margin-left: 30px;}
}


@media screen and (max-width: 1494px) {
	#navcontain {display:none;}
	
.openBtn {font-size: 24px;z-index: 99999;right: 7em;}
}

@media screen and (max-width: 1367px) {
.main-image {height:472px; max-height:472px;}
.hero-title {left: 5%;}		
.main-text h1 {font-size: 28px;}
.callouts {background: linear-gradient(180deg, rgba(1, 82, 137, .85) 55%, #ffffff 45%);}
}
 
@media screen and (max-width: 1280px) {
.ctc-bar h3 {font-size: 18px;}	
.main-image {height: 480px; max-height: 480px;}
.wrapped { width: 100%;margin: 0 auto;}
.products h2 {margin-left: 20px;}
.wrapper {margin: 0 auto ; padding: 0 20px;}
.equipment-s a {font-size: 18px;}

.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.callouts { width: 100%; margin: 0 auto; background:rgba(255, 255, 255, 0.65);}
.producttext {font-size: 15px; }
}

@media screen and (max-width: 1024px) {
.hero-title h1 {font-size: 1.25em;}
h2 {font-size: 1.25em;}
.ctc-bar h3 {font-size: 16px;}
.callouts a {width: 50%; font-size: 20px;}
.callouts a {font-size: 18px;}
.product {width: calc(25% - 24px);}
.producttext {font-size: 14px; top: 75%;}
.main-text h1 {text-align: left;width: 100%; padding: 1em 0;}
.main-text h1:after {display: none;}
.main-text p {width: 100%; padding: 0;}
.map-overlay {display: none;}
}

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

.overlayForm input[type="text"] {font-size: 1em !important;line-height: 3; width: unset;}
}

@media screen and (max-width: 768px) {	
.overlayForm strong {font-size: 1.25em;}
.overlayForm input[type="text"] {font-size: 2em;}
.main-image {height: 300px; max-height: 300px;}
.product {width: calc(25% - 16px); margin: 6px;}
p {font-size: 16px;}
#footer {font-size: 14px;}
#footer h3 {font-size: 20px;}
.form {max-width: 100%;}
.quarter { width: 40%; margin: 20px 5%;float: left;}
#bottom strong {font-size: 34px;}
.footer_bottom {font-size: 12px;}
}

@media screen and (max-width: 680px) {
.logo {width: 100%; max-width: 100%;text-align: center; margin: 0 auto 10px auto;}
.logo img {max-width: 100%;}
.hero-title {left: 0;right: 0; text-align: center;}
.openBtn {position: absolute;left: 0;}
.ctc-bar h3 {display: none;}
a.phone {width: 100%; text-align:center;}
.openBtn {right: 2em; width: 28px;}
	.menu-toggle  {margin-bottom:20px;}
}

@media screen and (max-width: 640px) {
.callouts a {width: 100%;}
.callout-title {margin-left: 38%;}
.product {width: calc(33.33% - 16px);}
.left, .right {width: 100%;}
}

@media screen and (max-width: 460px){
.overlayForm {width: 100%;}
select {font-size: 1em;padding: 6px;}
.producttext {font-size: 10px;font-weight: 900;}
.contact {width: 100%; margin-top: 20px;}
.footer_bottom {padding: 5px 0; text-align: center; width: 100%; margin: 0 auto;}
#bottom {font-size: 16px; }
.quarter:last-child {display: none;}
}

@media screen and (max-width: 400px){
.main-image {height: 194 px; max-height: 194px;}
.hero-title h1 {font-size: 14px; font-weight: 600; line-height: 18px;}
.hero-title {left: 0; right: 0; bottom: 10%; text-align: center;}
.button {margin-top: 10px; font-size: 14px !important; padding: 2px 2em;}
.ctc-bar {padding: 5px 0;}
.callouts a {padding: 15px 0;}
.callout-title {margin-left: 30%;}
.product {width: calc(50% - 16px);}
.producttext {font-size: 14px;}
.main-text {padding: 2rem 0;}
.footer_top {padding: 40px 0;}
.quarter {width: 90%;}
}