/***** 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: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {background: #E9E9E9;}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none; cursor: pointer !important;}
button:hover {cursor: pointer !important;}


hr{border:#000 1px solid;}
html {font-family: 'inter-variable', sans-serif !important;}

/*--- HEADER STYLES ---------------------*/
header {background: #282E7A; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; position: relative; z-index: 600;}
#header-wrap {width: 95%; margin: 0 auto; display: flex; justify-content: flex-end; padding: 10px 0;}
#header-wrap ul {display: flex; gap: 30px;}
#header-wrap ul a {color: #fff; font-size: 14px;}

/*---BODY--------------------------------*/
/*---DEFAULT--*/
#hero-bkgrd {background: url("/siteart/hero-bkgrd.jpg") no-repeat; background-size: cover; background-position: center; margin-top: 10px;}
#hero-wrap {display: flex; justify-content: center; gap: 30px; align-items: center; padding: 20px 0;}
#hero-content a {display: flex; justify-content: flex-end; margin-top: 15px;}
#hero-content a div {border: 3px #2F4B96 solid;}
#hero-content a div button {background: #2F4B96; color: #fff; width: 180px; padding: 10px 0; margin: 4px; border: none; font-family: 'inter-variable', sans-serif; font-weight: 400; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
#hero-content a:hover div {border: 3px #383435 solid; transition: .5s;}
#hero-content a:hover div button {background: #383435; transition: .5s;}
#hero-button-mobile {display: none;}

#body {width: 80%; margin: 0 auto; margin-top: 65px;}
#body-hero {text-align: center;}
#body-hero h1 {font-size: 25px; color: #333881; font-weight: 800; margin-bottom: 5px; line-height: 27px;}
#body-hero p {font-size: 16px; color: #333881; font-weight: 400; line-height: 21px;}
#body-nav {display: flex; justify-content: center; gap: 10px; margin-top: 30px;}
#crane-sales {background: url("/siteart/crane-sales.jpg") no-repeat; background-size: cover; background-position: center;}
#sell-your-crane {background: url("/siteart/sell-your-crane.jpg") no-repeat; background-size: cover; background-position: center;}
#financing {background: url("/siteart/financing.jpg") no-repeat; background-size: cover; background-position: center;}
.image-overlay {width: 400px; height: 270px;}
.icon-wrapper {display: flex; justify-content: center; margin-top: -40px;}
.icon-shadow {background: rgba(58,91,178,0.30); border-radius: 50px;}
.icon-bkgrd {margin: 2px 2px 0px 2px;}
.icon-bkgrd img {background: #E9E9E9; border-radius: 50px; margin: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 10px 5px;}
.crane-inventory {width: 400px;}
.crane-content {text-align: center; margin-top: 30px;}
.crane-content h2 {color: #333881; font-size: 20px; font-weight: 800; margin-bottom: 18px;}
.crane-content p {font-size: 15px; line-height: 21px; font-weight: 300;}
.crane-content button {background: #333881; color: #fff; border: none; width: 100%; padding: 10px 0; font-size: 14px; font-family: 'inter-variable', sans-serif; font-weight: 400; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin-top: 25px;}
.crane-content button:hover {background: #383435; transition: .5s;}

#about-us {display: flex; background: url("/siteart/what-we-do.jpg") no-repeat; background-size: cover; background-position: center; margin-top: 85px; margin-bottom: 15px;}
.what-we-do {background: #2F4B96; clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; width: 45%; padding: 70px 0 70px 4%;}
.what-we-do h2, .customer-service h2 {color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 12px; line-height: 25px; letter-spacing: .8px;}
.what-we-do p, .customer-service p {font-size: 15px; line-height: 21px; font-weight: 300; color: #fff; margin-bottom: 25px;}
.customer-service {width: 55%; padding: 70px 25px 70px 0px;}
.what-we-do-wrap {width: 80%;}
.customer-service-overlay {width: 90%; margin: 0 auto;}
.what-we-do button {background: #2F4B96; border: 2px #fff solid; font-family: 'inter-variable', sans-serif; color: #fff; font-size: 15px; padding: 10px 0; width: 250px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.customer-service a {color: #fff; font-size: 15px; line-height: 30px; display: flex; gap: 3px;}
.customer-service i {font-size: 24px;}
.what-we-do button:hover {background: #383435;  border: 2px #383435 solid; transition: .5s;}
.customer-service a:hover {color: #383435; transition: .5s; font-weight: bold;}

#contact-us {background: rgba(40,46,122,0.84);}
.contact-us-wrap {display: flex; justify-content: space-between; padding: 30px 0; width: 92%; margin: 0 auto; align-items: center;}
.contact-us-wrap button {background: none; border: 2px #fff solid; font-family: 'inter-variable', sans-serif; color: #fff; font-size: 15px; padding: 10px 0; width: 250px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.contact-us-wrap button:hover {background: #383435; transition: .5s; border: 2px #383435 solid;}
.contact-us-wrap h3 {color: #fff; font-size: 20px; letter-spacing: .8px; line-height: 24px;}
.contact-us-wrap p {color: #fff; font-size: 17px; line-height: 21px; margin-top: 4px;}

/*---ABOUT--*/
#about-hero {background: url("/siteart/about-hero.jpg") no-repeat; background-size: cover; background-position: center; margin-top: 10px;}
.about-hero-wrap {width: 92%; margin: 0 auto; padding-top: 250px;}
.about-hero-wrap h1 {color: #E9E9E9; font-family: 'oswald', sans-serif; font-size: 60px; line-height: 55px;}
#about-body {display: flex; gap: 65px;}
.about-us {padding: 60px 0 90px 60px; width: 65%;}
.about-us h2 {font-size: 23px; color: #333881; margin-bottom: 10px;}
.about-us h2 span {font-size: 16px; color: #373435; line-height: 25px;}
.about-us p {font-size: 15px; line-height: 21px;}
.about-us h3 {font-size: 20px; margin-top: 25px; margin-bottom: 10px; color: #333881; line-height: 26px;}
.about-us p span {font-weight: bold;}
.about-us-check {display: flex; gap: 200px;}
.about-us-check li {font-size: 15px; line-height: 25px;}
.about-us-check li i {color: #282E7A;}
.get-in-touch {background: url("/siteart/get-in-touch.jpg") no-repeat; background-size: cover; background-position: center;}
.get-in-touch-flex {display: flex; column-gap: 20px; padding: 40px 30px 65px 30px; width: 390px;}
.get-in-touch-flex hr {border: rgba(245,245,245,0.25) 1px solid; height: 100%;}
.get-in-touch-flex h2 {font-size: 23px; color: #fff; letter-spacing: .8px; margin-top: 20px; margin-bottom: 10px;}
.get-in-touch-flex li a {color: #fff; font-size: 14px; line-height: 24px;}
.get-in-touch-flex li a:hover {color: #383435;; font-weight: bold; transition: .5s;}
.going-to-the-yard {margin-top: 30px;}
.big-p {color: #fff; font-size: 15px; line-height: 28px;}
.big-p a {color: #fff; padding-left: 10px; line-height: 23px;}
.big-p a:hover {color: #333881;; font-weight: bold; transition: .5s;}
.little-p {color: #fff; font-size: 13px; margin-top: 12px; margin-bottom: 5px;}
.yard-button {text-align: center; margin-top: 15px;}
.yard-button button {color: #fff; background: transparent; border: 2px #fff solid; padding: 10px 0; width: 100%; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin-top: 8px;}
.yard-button button:hover {background: #373435; border: 2px #373435 solid; transition: .5s;}

/*---SELL YOUR EQUIPMENT--*/
#sell-your-equipment-hero {background: url("/siteart/sell-your-equipment-hero.jpg") no-repeat; background-size: cover; background-position: center; margin-top: 10px;}
.about-us p b a {color: #373435; border-bottom: 1px #E9E9E9 solid;}
.about-us p b a:hover {border-bottom: 1px #373435 solid}
.pdf-buttons button {background: #282E7A; border: none; width: 220px; padding: 10px 0; color: #fff; font-family: 'inter-variable', sans-serif; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; font-size: 14px;}
.pdf-buttons button:hover {background: #373435; transition: .5s;}
.pdf-buttons {display: flex; gap: 15px; margin-top: 25px;}

/*---CONTACT US--*/
#contact-us-hero {background: url("/siteart/contact-us-hero.jpg") no-repeat; background-size: cover; background-position: center; margin-top: 10px;}
#contact-form h1 {margin-bottom: 15px; font-family: 'inter-variable', sans-serif; font-weight: bold;}
#contact-form p {font-family: 'inter-variable', sans-serif; font-size: 15px; margin-bottom: 5px; line-height: 22px;}
#contact-form p a {color: #e37226; font-style: italic;}
#contact-form p a:hover {border-bottom: 1px #e37226 solid;}
#contact-form tr {display: flex; gap: 20px; color: #040807 !important;}
#contact-form td {width: 100%; color: #040807 !important;}
#contact-form input {width: 100%; color: #040807 !important;}
#contact-form input {padding: 10px 0px 10px 15px; margin-bottom: 8px; font-family: 'inter-variable', sans-serif; color: #282E7A !important; border: none; background: #fff; border-top: #bbb 2px solid; font-size: 15px; box-shadow: rgba(50, 0, 15, 0.15) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 10px 30px -18px inset;}
#contact-form .select {width: 50.35%;}
#contact-form select {width: 100%; padding: 8px 0px 8px 7px; margin-bottom: 8px;}
#contact-form textarea {width: 100.5%; font-family: 'inter-variable', sans-serif; padding: 10px 0px 10px 12px; color: #282E7A !important; border: none; background: #fff; font-size: 15px; border-top: #bbb 2px solid;  box-shadow: rgba(50, 0, 15, 0.15) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 10px 30px -18px inset;}
#contact-form .captcha-selected {margin-top: 55px; width: 100%;}
#contact-form .CaptchaAnswerPanel input, .contact-form .submit, .contact-form .reset {width: 200px !important;}
#contact-form .CaptchaWhatsThisPanel a {color: #040807 !important; font-family: 'inter-variable', sans-serif; font-size: 15px; font-weight: 600;}
#contact-form .CaptchaWhatsThisPanel a:hover {cursor: pointer; border-bottom: #040807 2px solid;}
#contact-form .CaptchaMessagePanel {font-weight: 300; font-family: 'inter-variable', sans-serif; font-size: 15px; color: #040807;}
#contact-form .submit, .contact-form .reset {background: #282E7A; border: none; color: #fff !important; padding: 10px 0; width: 150px; font-family: 'inter-variable', sans-serif; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.contact-form .submit:hover, .contact-form .reset:hover {background: #040807; transition: .5s;}
.margin-top-send {margin-top: 13px;}
.captcha-selected {display: flex; justify-content: center;}
#contact-form .submitselect {background: #282E7A; border: none; color: #fff; padding: 10px 0; width: 150px; font-family: 'inter-variable', sans-serif; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; text-align: center;}
#contact-form .submitselect:hover {background: #373435; transition: .5s; cursor: pointer !important;}
#contact-form .captcha {display: flex; justify-content: center; gap: 12px;}
#contact-form .captcha-selected {width: 100%; margin: 0 auto !important; margin-top: 11px !important;  color: #fff!important; width: 59%;}
::placeholder {color:  #040807;}
#contact-form form {margin-top: 15px;}


/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/
footer {background: #E9E9E9; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; position: relative; z-index: 600}
#footer {width: 92%; margin: 0 auto; padding: 35px 0 65px 0;}
.footer-contact {display: flex; justify-content: space-between;}
#footer img {width: 220px;}
.footer-contact p {font-size: 14px; line-height: 21px; color: #373435; width: 400px; margin-top: 12px;}
footer h4 {font-size: 18px; color: #282E7A; margin-bottom: 8px;}
footer a {color: #373435; font-size: 15px; line-height: 25px;}
footer span {font-weight: bold; font-size: 12px; padding-left: 21px;}
.footer-links a {font-size: 15px; line-height: 28px;}
footer a:hover {color: #282E7A; font-weight: bold;}

#site-hosted {text-align: center; padding: 25px 0 20px 0;}
#site-hosted h5 {font-weight: 300; font-size: 12px; width: 95%; margin: 0 auto;}

.contact-location {display: flex; gap: 40px;}
.small-width {width: 250px;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
#inventory-hero {background: url("/siteart/inventory-hero.jpg") no-repeat; background-size: cover; background-position: center; margin-top: 10px;}
.list-content, .detail-wrapper {margin-top: 50px !important; margin-bottom: 100px !important;}
.list-top-section .list-title {padding: 0 24px 12px 0 !important;}
.list-top-section .list-listings-count, .listing-prices__retail-price, .listing-prices__discount-formatted-price, .listing-prices__alternate-retail-price, .listing-prices__exclusive-wholesale-price {color: #282E7A !important;}
.faceted-search-content .selected-facets-container .selected-facet, .view-listing-details-link, .michelsmachinerycomhdev-88jlbf {background: #282E7A !important;}
.disclaimer {font-size: 15px !important; line-height: 21px !important;}


/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1330px) {
	.image-overlay {width: 360px; height: 230px;}
	.icon-bkgrd img {width: 50px;}
}
@media only screen and (max-width: 1240px) {
	.footer-contact {flex-wrap: wrap; gap: 28px;}
}
@media only screen and (max-width: 1180px) {
	#footer {flex-wrap: wrap; gap: 30px;}
	.footer-contact {width: 100%;}
}
@media only screen and (max-width: 1150px) {
	#hero-wrap {width: 95%; margin: 0 auto;}
	#hero-wrap img {width: 100%;}
	.image-overlay {width: 320px; height: 190px;}
	.icon-bkgrd img {width: 40px;}
	.what-we-do {padding: 70px 0 70px 40px;}
	#about-body {flex-wrap: wrap;}
	.about-us {width: 92%; margin: 0 auto; padding: 60px 0;}
	.get-in-touch-flex {padding: 40px 0 40px 0; width: 92%; margin: 0 auto;}
	.get-in-touch {width: 100%;}
	#about-body {gap: 40px;}
	.footer-about {width: 100%;}
}
@media only screen and (max-width: 1050px) {
	.contact-us-wrap {flex-wrap: wrap; gap: 15px;}
	.need-info {width: 100%;}
}
@media only screen and (max-width: 1000px) {
	.image-overlay {width: 280px;}
	#about-us {flex-wrap: wrap; background: none;}
	.what-we-do {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); width: 100%; padding: 70px 0 70px 0;}
	.what-we-do-wrap {width: 95%; margin: 0 auto;}
	.customer-service { background: url("/siteart/customer-service.jpg") no-repeat; background-size: cover; background-position: center; padding: 0px; width: 100%;}
	.customer-service-overlay {background: rgba(58,91,178,0.80); padding: 70px 0px 70px 0px; width: 100%;}
	.customer-service-wrap-mobile {width: 95%; margin: 0 auto;}
	.contact-us-wrap {width: 95%;}
	#footer {width: 95%;}
}
@media only screen and (max-width: 900px) {
	#contact-form form {width: 99%;}
}
@media only screen and (max-width: 880px) {
	#body-nav {flex-wrap: wrap; gap: 50px;}
	.image-overlay {width: 100%; height: 280px;}
	.crane-inventory {width: 80%;}
	.crane-content button {padding: 12px 0;}
}
@media only screen and (max-width: 750px) {
	.about-us-check {gap: 20%;}
	.footer-links {width: 100%;}
}
@media only screen and (max-width: 700px) {
	#header-wrap ul span {display: none;}
	#header-wrap ul a {font-size: 18px;}
	#header-wrap ul {gap: 15px;}
	#hero-wrap {flex-wrap: wrap;}
	#hero-button-desktop {display: none;}
	#hero-button-mobile {display: contents;}
	#hero-button-mobile a div {border: 3px #2F4B96 solid; padding: 4px;}
	#hero-button-mobile a div button {background: #2F4B96; color: #fff; width: 100%; padding: 12px 0; border: none; font-family: 'inter-variable', sans-serif; font-weight: 400; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
	#hero-button-mobile a:hover div {border: 3px #383435 solid; transition: .5s;}
	#hero-button-mobile a:hover div button {background: #383435; transition: .5s;}
	.crane-inventory {width: 100%;}
	#body {width: 95%;}
	.footer-contact p {width: 100%;}
	#contact-form form {width: 98%;}
}
@media only screen and (max-width: 600px) {
	.what-we-do button, .contact-us-wrap button {width: 100%; padding: 12px 0;}
	.contact-us-button {width: 100%;}
	.pdf-buttons {flex-wrap: wrap; gap: 10px;}
	.pdf-buttons button {width: 100%; padding: 12px 0;}
	.pdf-buttons a {width: 100%;}
	#contact-form form {width: 100%;}
	#contact-form tr {flex-wrap: wrap; gap: 0px;}
	#contact-form input {width: 98%;}
	#contact-form textarea {width: 98.5%;}
	#contact-form .submitselect {width: 100%; padding: 12px 0;}
	#contact-form .captcha-selected {width: 100%;}
	#contact-form .CaptchaAnswerPanel input, .contact-form .submit, .contact-form .reset {width: 100% !important;}
	#contact-form .submit, .contact-form .reset {width: 100%; padding: 12px 0;}
}
@media only screen and (max-width: 500px) {
	.about-us-check {gap: 0; justify-content: space-between;}
	.about-us h3 {margin-top: 35px;}
	#about-body { gap: 20px;}
	#contact-form input {width: 97.5%;}
	#contact-form textarea {width: 98%;}
}
@media only screen and (max-width: 450px) {
	.image-overlay {height: 240px;}
	.about-hero-wrap h1 {font-size: 50px; line-height: 46px;}
}
@media only screen and (max-width: 420px) {
	.about-us-check {flex-wrap: wrap;}
	.about-us-check ul {width: 100%;}
	.get-in-touch-flex hr {display: none;}
	.get-in-touch-flex {display: inherit;}
}
@media only screen and (max-width: 400px) {
	#contact-form input {width: 96%;}
	#contact-form textarea {width: 96.5%;}
}
@media only screen and (max-width: 350px) {
	.image-overlay {height: 200px;}
}
@media only screen and (max-width: 320px) {
	.big-p {display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 10px; align-items: center;}
	.big-p a {width: 100%;}
	.yard-button button {width: 100%;}
}
@media only screen and (max-width: 300px) {
	#contact-form input {width: 95%;}
	#contact-form textarea {width: 95.5%;}
}
@media only screen and (max-width: 280px) {
	.image-overlay {height: 180px;}
}
@media only screen and (max-width: 260px) {
	#footer img {width: 100%;}
}