﻿/***** 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;
}

/* BUTTONS */
button{
	background-color: #CF2E0E;
	border: none;
	transition: .25s;
	color: #FFFFFF;
	display:flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	/* padding: 10px 12px 10px 10px; */
	padding: 12px 20px 12px 20px;
	border-bottom-right-radius: 15px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
	cursor: pointer;
}

button:hover{
	background-color: #B52205;
	gap: 20px;
}

.grey-btn{
	background-color: #E9E9E9;
	color: #000000;
}

.grey-btn .fa-solid{
	color: #CF2E0E;
}

.grey-btn:hover {
	color: white;
}

.outline-btn{
	padding: 0px;
	background-color: inherit;
	cursor: pointer;
}

.outline-btn:hover{
	background-color: inherit;
}

.grey-btn:hover .fa-solid{
	color: #FFFFFF;
}

/*-------- Cover --------*/


/*-------- BODY STYLES --------*/

body {
font-family: 'Ubuntu', sans-serif;
}

.section{
	padding: 50px 40px;
}

.no-padding-top .team-contact{
	padding-top:0px !important;
	}

.center{
	text-align: center;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*---------------------------HEADER--------------------------------*/
header{
	position: relative;
	z-index: 1000000;
}

.home-header{
	position: absolute;
		z-index: 1;
		width: 100%;
}
/*
.home-header header{
	backdrop-filter: blur(14px) !important;
	background-color: #00000010;
}
*/


.home-header .top-menu{
	backdrop-filter: blur(14px) !important;
	background-color: #00000000 !important;
}



.top-menu{
	display:flex;
	justify-content: space-between;
	align-items: center;
	color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF50;
	padding:10px 40px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	background-color: #000000;
}



/*-------------------------UNIVERSAL--------------------------------*/
h1{
	font-family: 'Ubuntu', sans-serif;
	font-size: 75px;
}

.sub-title{
	font-size: 38px;
}

h2{
	font-size: 36px;
}

p{
	line-height: 20px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

.section h2{
	margin-bottom: 10px;
}

.flex-qt{
	display: flex;
	justify-content: center;
}

.flex-half{
	display: flex;
	justify-content: space-between;
	gap: 25px;
	align-items: flex-start;
}

.half-post{
	width: 50%;
	padding: 25px;
}

.white{
	color: #FFFFFF;
}
.red-background{
	background-color: #CF2E0E;
}

.margin-top{
	margin-top:50px;
}

.cover{
	padding:75px 25px !important;
}
/*---------------------HOME PAGE-----------------------*/
.home-cover{
	background-image: linear-gradient(155deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 95%), url("/siteart/heavy-duty-dozer.jpeg");
	background-position: center;
	background-size: cover;
    color: #FFFFFF;
	padding: 230px 40px 150px 40px;
}

.home-cover h2{
	font-weight: 400;
	font-size: 26px;
	line-height: 35px;
}

.home-cover button{
	margin-top: 50px;
}

.inventory-box{
	background-color: #CF2E0E;
	color: #FFFFFF;
	padding: 25px;
	border-right: 1px solid #ffffff25;
	transition: all .25s;
	width: 25%;
}

.inventory-box img{
	width: 75px;
}

.inventory-box button{
	margin-top: 75px;
}

.inventory-box:hover{
	background-color: #B52205;
	transform: scale(1.075);
	border-bottom-right-radius: 40px;
	z-index: 1;
}

.polygon-2{
	background-color: #CF2E0E;
	border-bottom-right-radius: 75px;
	padding: 40px 25px;
	width: 50%;
	color: #FFFFFF;
	transition: .25s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.polygon-2:hover{
	background-color: #B52205;
}

.polygon-2 a{
	color: #fff;
}

.extra-margin-top{
	margin-top: 50px;
}

.half-post-flex{
	display: flex;
	justify-content: space-between;
	gap: 25px;
}

.content{
	width: 60%;
}

.discover-section button{
	margin-top: 50px;
	margin-bottom: 15px;
}

.discover-section .center p{
	width: 60%;
	text-align: center;
	margin: 0 auto;
}

.drilling-equipment-image img{
	width: 100%;
}

.drilling-equipment-image{
	width: 385px;
	height: auto;
}

.personal-service{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.rubber-image{
	width: 300px;
}

.rubber-image img{
	width: 100%;
}

.center-post{
	display: flex;
	justify-content: center;
}

.parts-gallery{
	width: 33.33%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 25px;
}

.parts-gallery img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
	    border: 1px solid #EEEEEE;
}

.parts-gallery-container{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 25px;
}


/*--------Slick Slider--------------------*/
li.slick-slide.slick-active img{
	max-width: 100%;
}

.logo-banner{
	background-color: #FFFFFF;
	position: absolute;
	width: 90%;
	margin: 0 auto;
	position: absolute;
	top: -20px;
-webkit-box-shadow: 0px 17px 16px -8px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 17px 16px -8px rgba(0,0,0,0.1);
box-shadow: 0px 17px 16px -8px rgba(0,0,0,0.1);
}

.slick-track {
  display: flex !important;
}
.slick-track .slick-slide {
  display: flex !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

ul.equipment-slider.slick-initialized.slick-slider{
	width: 450px;
    height: 350px;
	border-top-right-radius: 75px;
	position: absolute;
	left: 25px;
	top: 25px;
	z-index: 99999999;
}

.polygon{
	background-color: #B52205;
	width: 320px;
	height: 272px;
	border-top-right-radius: 75px;
	position:relative;
}


.dozer-container{
	width: 435px;
	left: -35px;
	top: 14px;
	position: absolute;
}

.dozer{
	width: 100%;
}

/*--------FORM STYLES--------------------*/

.form-field-flex{
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

select{
	padding: 13px 20px;
	border-radius: 25px;
	border: 1px solid #E5E5E5;
	margin-bottom: 15px;
	width: 100% !important;
	font-family: 'Montserrat', sans-serif;
	color: grey;
}

input#fname{
	padding: 13px 20px;
	border-radius: 10px;
	border: 1px solid #E5E5E5;
	margin-bottom: 15px;
	width: 100% !important;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	color: grey;
}

select{
		 -moz-appearance:none; /* Firefox */
   -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

form input:focus, select:focus{
	background: #F7F7F7;
	outline: none;
}

option{
	background-color: #FFFFFF;
	color: grey;
	border-bottom: rgba(255, 255, 255, 0.25) 0.25px solid !important;
}

.radio-flex{
	display: flex;
	gap:2px;
	justify-content: space-around;
	align-items: baseline;
}

.flex-start{
	justify-content: flex-start;
}

a.submit-button{
	background-color: #CF2E0E;
    border: none;
    transition: .25s;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 20px;
    border-bottom-right-radius: 15px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 16px;
	width: 102px;
}

a.submit-button:hover{
	background-color: #B52205;
	gap: 20px;
}

input.submit-button{
background-color: #CF2E0E;
    border: none;
    transition: .25s;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 20px;
    border-bottom-right-radius: 15px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 16px;
}

input.submit-button:hover{
	background-color: #B52205;
	gap: 20px;
}

textarea#fname{
	padding: 13px 20px;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    margin-bottom: 15px;
    width: 100% !important;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    color: grey;
}

.CaptchaPanel{
width: 75%;
	text-align: left !important;
}

img#CaptchaImage {
    width: 250px !important;
}

/* Slider */

.sec-heading {
  margin-bottom: 50px;
}
.sec-heading h2 {
  text-align: center;
  font-family: allura;
  font-size: 80px;
}
.clients {
  padding: 200px 0;
}
.box {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 60%;
  height: auto;
  transition: transform 0.5s ease-in;
  margin: 8px auto;
}
.box img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}
.box:hover {
  transform: scale(1.2);
}


/*-------- FOOTER STYLES ----------------*/
footer{
	background-image: linear-gradient( rgba(0,0,0,0.87) 90%, rgba(0,0,0,0.87) 100%), url("/siteart/hexagon-pattern.jpeg");
	background-size: cover;
	background-position: top;
	color: #FFFFFF;
}

.top-footer{
	padding: 75px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
}

.top-footer .logo{
	max-width: 275px !important;
}

.nav-footer{
	text-align: center;
	border-top: 1px solid #FFFFFF20;
	padding: 25px 0px !important;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 12px;
}

.quick-links{
	display: flex;
	justify-content: space-between;
	gap: 75px;
}

.quick-links h3{
	margin-bottom: 20px;
}

.quick-links a{
	text-decoration: none;
	color: #FFFFFF;
}

.quick-links p, .quick-links ul {
	font-size: 14px;
}

.quick-links ul{
	line-height: 24px;
}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
a.view-listing-details-link.des-view-listingDetails{
	background-color: #CF2E0E;
}

a.view-listing-details-link.des-view-listingDetails, a.email-seller.des-email-seller.collapsible-contact-list-item, a.video-chat.des-video-chat.collapsible-contact-list-item{
	border-radius: 0px !important;
}

.list-top-section .list-title .list-listings-count, .listing-prices__retail-price, .listing-prices__discount-formatted-price {
	color: #000000 !important;
}
button#detail-page-email-seller, a.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeSmall.MuiButton-containedSizeSmall.finance-link.guardianequipmentcahdev-kdn5oq, a.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeSmall.MuiButton-containedSizeSmall.listing-widget__link.guardianequipmentcahdev-1cczsil{
	border-radius: 0px !important;	
	box-shadow: none;
}

a#detail-page-print-this{
	    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 11px 30px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    background-color: #f3f3f3;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all .25s ease-in-out;
	box-shadow: none;
}

button#share{
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 11px 30px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    background-color: #f3f3f3;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all .25s ease-in-out;
	box-shadow: none;
}

.body-wrapper{
	margin-top: 50px;
	margin-bottom: 50px;
}

span.price{
	color: #000000 !important;
	text-decoration: underline;
}

/*---------- GALLERY STYLES ----------*/
.gallery-container{
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.grid{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 25px;
}

.grid-image-container{
	width: 33.33%;
	height: 300px;
	border: 1px solid #EEEEEE;
	overflow: hidden;
}

.grid-image-container img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}

.clear{
	visibility: hidden;
}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1100px) {
	.flex-qt{
		flex-wrap: wrap;
		gap: 20px;
	}
}

@media only screen and (max-width: 1055px) {

	
	.content{
		width: 100%;
	}
	
	.inventory-box{
		width: 33.33%;
	}
	
	.inventory-box:hover{
	transform: inherit;	
	}
}

@media only screen and (max-width: 1000px){
	
ul.equipment-slider.slick-initialized.slick-slider{
	width: 350px;
    height: 350px;
	left: 25px;
	top: 35px;
}

.polygon{
	width: 300px;
	height: 300px;
}
	
.grid-image-container{
	height: 250px;
}
	
	.no-break{
		display: none;
	}
	
	.dozer-container{
	width: 389px;
    left: -35px;
    top: 43px;
    position: absolute;
	}
	
}

@media only screen and (max-width: 840px) {

	.flex-half{
		flex-direction: column;
	}
	
	.half-post{
		width: inherit;
	}
	
	.top-footer{
		flex-direction: column;
		align-items: flex-start;
	}
	
	ul.equiment-slider.slick-initialized.slick-slider{
		width: 525px;
    	height: 300px;
		border-top-right-radius: 75px;
		position: absolute;
		left: -40px;
		top: 25px;
	}
	
.grid-image-container{
	height: 200px;
	}
	
	.personal-service{
		align-items: flex-start;
	}
	
	.no-break{
		display: block;
	}
	
	.parts-section{
		flex-direction: column-reverse;
	}
	
	.parts-gallery-container{
		flex-direction: column;
	}
	
	.parts-gallery{
		width: 100%;
	}
	
	.parts-gallery img{
		height: 350px;
	}
	
	.parts-gallery:nth-last-of-type(1){
		height: 250px;
	}
	
	.logo-banner{
		display: none !important;
	}
	
}

@media only screen and (max-width: 680px) {

	.inventory-box{
		width: 100%;
	}
	
		.polygon-2{
		padding: 40px 50px 40px 25px;
	}
	
		
.grid-image-container{
	height: 150px;
	}
	
.discover-section .center p{
	width: 100% !important;
}
}

@media only screen and (max-width: 590px) {

	.quick-links{
		flex-direction: column;
		gap: 25px;
	}
	
	br{
		display: none !important;
	}

	
	.grid{
		flex-direction: column;

	}
	
	.grid-image-container{
		width: 100%;
		height: 365px;
	}
	
}

@media only screen and (max-width: 540px) {

	.no-break{
		display: block !important;
		visibility: inherit;
	}
	
}



@media only screen and (max-width: 510px) {
	
	h1{
		font-size: 60px;
	}
	
		.polygon-2{
		padding: 40px 30px 40px 25px;
	}
	
	.polygon{
		width: 250px;
    height: 250px;
	}
	
.dozer-container{
	width: 350px;
}
	
	ul.equipment-slider.slick-initialized.slick-slider{
	display:none !important;
		visibility: hidden;
}
	
	.drilling-equipment-image{
		width: 300px !important;
	}
	
		.parts-gallery img{
		height: 250px;
	}
	
	.parts-gallery:nth-last-of-type(1){
		height: 200px;
	}
	
}

@media only screen and (max-width: 430px) {

	.half-post-flex{
		flex-direction: column;
	}
	
	.section{
		padding: 50px 10px;
	}
	
	h1{
		font-size: 40px;
	}
	
	h2{
		font-size: 30px;
	}
	
	.top-footer .logo{
		max-width: 225px !important;
	}
	
	.polygon-2{
		padding: 40px 85px 40px 25px;
	}
	
	.rubber-image{
		width: 250px;
	}

	
}

@media only screen and (max-width: 380px){
	
	.grid-image-container{
		height: 240px;
	}
	
	.polygon{
	width: 200px;
    height: 200px;
	}
	
	.dozer-container{
	width: 275px;
}
	
	.drilling-equipment-image{
		width: 275px !important;
	}
}


@media only screen and (max-width: 350px){
	
	
	.polygon{
	width: 175px;
    height: 180px;
	}
	
	.dozer-container{
	width: 250px;
}
	
		.drilling-equipment-image{
		width: 250px !important;
	}
}


@media only screen and (max-width: 300px) {

	.quick-links{
		flex-direction: column;
		gap: 25px;
	}
	
	.section{
		padding: 50px 20px;
	}
	

	
	.form-field-flex{
		flex-direction: column;
	}
	
	.sub-title{
		text-align: left;
	}
	
	h2{
		font-size: 23px;
		text-align: left;
	}
	
	p{
		text-align: left;
	}
	
	.flex-qt{
		justify-content: flex-start;
	}
	
	.half-post{
		padding: 10px !important;
	}
	
	.discover-section .center p{
	text-align: left !important;
}
	.dozer-container{
		width: 225px;
	}
	
}






