@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/Hubot-Sans.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}


@charset "utf-8";
/* CSS Document */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,select{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;color:unset}html{scroll-behavior:smooth}a{text-decoration:none;cursor:pointer}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer;border:none;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}img{max-width:100%;}
/*=== END RESET ===*/

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

/*=== GLOBAL ===*/
.flex-container{display:flex}.flex-vertical{flex-direction:column}.flex-horizontal{flex-direction:row}.flex-width{flex-grow:1;flex-shrink:1;flex-basis:100%}.flex-height{height:100%}.flex-wrap{flex-wrap:wrap}.set-width{flex-grow:0;flex-shrink:0;flex-basis:auto}.justify-center{justify-content:center}.justify-right{justify-content:flex-end}.justify-left{justify-content:flex-start}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.align-center{align-items:center}.align-top{align-items:flex-start}.align-bottom{align-items:flex-end}.align-stretch{align-items:stretch}.align-all-center{align-items:center;justify-content:center}.align-self-center{align-self:center}.align-self-right{align-self:flex-end}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.mobile-only{display: none}.max-width{margin:0 var(--sm-padding)}.map{min-height:350px;line-height:0;}


*,
*::before,
*::after {
    transition: all 0.3s ease;
}
a:hover {cursor: pointer !important;}

/*=== SELECT STYLES ===*/
::selection, ::-moz-selection {
	background: var(--red);
	color: var(--white);
	text-shadow: none;
}

:root {
	/*=== Fonts ===*/
    --Forum: "Forum", serif;
    --Inter: "Inter", sans-serif;
    --Hubot: "Hubot Sans", sans-serif;

	/*=== Colors ===*/
	--white: #FFFFFF;
	--cream: #FBF3E9;
	--gray: #E6EAF3;
	--blue: #033C59;
    --black: #1A1C25;
    --red: #df2a2d;
    
    /*=== Font Sizes ===*/
    --p: clamp(16px, 5vw, 20px);

	/*=== Spacing ===*/
	--lg-padding: clamp(75px, 5vw, 100px);
	--sm-padding: clamp(25px, 2.5%, 2.5%);
}

    .white{color: var(--white)}
    .cream{color: var(--cream)}
    .gray{color: var(--gray)}
    .blue{color: var(--blue)}
    .black{color: var(--black)}
    .red{color: var(--red)}

body {
    position: relative;
	font-family: var(--Inter), sans-serif !important;
	height: auto !important;
    background-color: var(--white);
}

section {padding: 100px 0;}
#inv section {padding: unset;}

.page-shadow {
	max-width: 1920px!important;
    width: 100%!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px!important;
    background-color: rgb(255, 255, 255)!important;
    margin: 0 auto!important;
	overflow-x: hidden;
}

p {
    font-size: clamp(16px, 5vw, 18px);
    font-weight: 300;
}

.thick {
    font-weight: 700 !important;
}

.center {text-align: center;}

.xl-heading, .lg-heading, .md-heading, .sm-heading {
	font-family: var(--Hubot);
	text-transform: uppercase;
    font-stretch: 75%;
    font-weight: 700;
}

.xl-heading-bold {
	font-family: var(--Hubot);
	text-transform: uppercase;
    font-weight: 900 !important;
}


.xs-heading {
	font-family: var(--Forum);
    font-weight: 300;
/*	text-transform: uppercase;*/
	padding-top: 5px;
}
.xl-heading {font-size: clamp(56px, 10vw, 110px);line-height: clamp(56px, 10vw, 110px);}
.lg-heading {font-size: clamp(34px, 5vw, 42px);line-height: clamp(34px, 5vw, 42px);}
.md-heading {font-size: clamp(27px, 5vw, 35px);line-height: clamp(27px, 5vw, 35px);}
.sm-heading {font-size: clamp(18px, 1.5vw, 26px);line-height: clamp(18px, 1.5vw, 26px);}
.xs-heading {font-size: clamp(18px, 5vw, 20px);line-height: clamp(18px, 5vw, 20px);}

.sm-padding {padding: 20px 0;}

/*=== BODY STYLES 
============================================*/
.width90 {width: 90%; max-width: 1600px; margin: auto;}

.btn-row {display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap;}

.btn-blue { color: var(--white); background: var(--blue); display: flex; justify-content: center; align-items: center; padding: 10px 20px; max-width: 220px; font-weight: 300; width: 100%; border: 1px solid var(--white);}
.btn-blue:hover { color: var(--blue); background: var(--white);}

.btn-white { color: var(--blue); background: var(--white); display: flex; justify-content: center; align-items: center; padding: 10px 20px; max-width: 220px; font-weight: 300; width: 100%; border: 1px solid var(--blue);}
.btn-white:hover { color: var(--white); background: var(--blue);}

.scribble {position: relative; background-image: none; background-color: transparent; color: var(--blue);}
.scribbleWhite {position: relative; background-image: none; background-color: transparent; color: var(--white);}
.scribble::after, .scribbleWhite::after { content: ''; position: absolute; bottom: -10%; left: 0; height: 30%; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='22' fill='none'%3E%3Cmask id='a' width='246' height='23' x='0' y='1' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M0 1h246v23H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%2300a661' d='M.225 13.987c40.77-3.247 81.218-6.304 122.486-5.61 40.217.68 80.07 3.493 119.823 8.284 4.828.577 4.966-4.727.193-5.301-40.597-4.886-82.029-7.082-123.059-6.436-39.896.627-80.713 2.548-119.53 8.822-.233.04-.132.263.087.25v-.009z'/%3E%3C/g%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: 95%; width: 100%; background-image: linear-gradient(to right, currentcolor 40%, transparent 50%); background-repeat: no-repeat; animation: background-size-300 0.4s 0.5s ease-in both; background-size: 300%}
@keyframes background-size-300 {from {background-size: 0%;} to {background-size: 300%;}}

.bg-grad-blue {background: radial-gradient(circle at 0 0, var(--blue) 0%, transparent 30%), linear-gradient(var(--gray));}

/*=== HEADER STYLES
==============================*/
body:has(#inv) .header-wrap {position: relative; background: var(--black);}
.header-wrap { position: absolute; width: 100%; z-index: 99;}
.primary.nav {display: flex; justify-content: space-between; align-items: center; }
.header-logo img,.header-logo svg {height: 100%; width: 100%; max-height: 200px; object-fit: contain;}
.nav-links {background: var(--blue); border-radius: 100px;}
.header-logo:hover svg {fill: var(--orange) !important;}
.mobile-menu-fb{display: flex; justify-content: space-between; align-items: center; gap: 50px; padding: 0 5% !important;}
.mobile-menu-right {display: flex; flex-wrap: wrap; gap: 20px;justify-content: center; align-items: center; padding: 20px 0;}
.menu-toggle {padding: 0 !important;}
.phone-num {background: linear-gradient(rgba(0,0,0,0));}
.phone-num a:hover {color: var(--blue);}
.btn-phone {color: var(--blue); background:  var(--white); padding: 15px 20px; border-radius: 10px;}

/*=== FOOTER STYLES
==============================*/
.footer-wrap {background: var(--black); padding: 50px 0; color: var(--white); overflow: hidden;}
.footer-wrap > div {display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; flex-wrap: wrap;}
.footer-wrap ul {min-width: 280px;}
.footer-wrap ul:last-child {text-align: right;}
.footer-wrap ul li {padding-bottom: 15px;}
.footer-logo {max-height: 200px;}
.footer-copyright { padding: 10px 0; width: 100%; background: #2C2F3D; text-align: center; color: var(--white); font-size: 15px;}

.footer-wrap ul li:hover {transform: translateX(10px);}
/*.footer-wrap ul li a::after {content:''; display: block; height: 2px; width: 0px; background: var(--white);}*/
/*.footer-wrap ul li:hover a::after {width: 100px;}*/

/*=== HOME PAGE 
==============================*/
.home-hero {background:
    linear-gradient(to top, rgba(3, 60, 89, 1), rgba(3, 60, 89, 0.5)),
    url("../siteart/skid-steer-sunny.jpg"); height: clamp(750px, 100vh, 1000px); position: relative; overflow: hidden;}
.home-hero > div > div {max-width: 700px; position: absolute; bottom: 50px; z-index: 1; padding-right: 20px;}
.img-cutout {position: absolute; bottom: 0; right: -10%; width: 60vw; background: url("../siteart/white-scribble-tight.svg");}

.bg-blue1 {background: linear-gradient(to bottom, rgba(3, 60, 89, 1), rgba(0, 20, 31, 1));}
.bg-blue2 {background: linear-gradient(to top, rgba(3, 60, 89, 1), rgba(0, 20, 31, 1));}

.quicklinks-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 50px;}
.quicklink-box {position: relative; display: block;background: linear-gradient(to bottom, #8E9095,var(--gray), var(--gray)); padding: 30px; border-radius: 20px; border: 3px solid #8E9095;}
.quicklink-box img {padding-bottom: 20px; position: relative; z-index: 2;}
.quicklink-box:hover {border-color: var(--white); transform: translateY(10px);}
.quicklink-box:hover img {transform: scale(1.10);}

.quicklink-box div:has(> img)::before {content: ''; position: absolute; left: 0; top:0; display: block; height: 0%; width: 100%; margin: auto; background:  url("../siteart/white-scribble-loose.svg"); background-repeat: no-repeat!important; background-size: contain; transform: translateX(0%); z-index: 1; background-position: top center !important;}
.quicklink-box:hover div:has(> img)::before {height: 100%; background-size: contain;}

.half-photo > div {display: flex; justify-content: space-between; align-items: stretch; gap: 50px; background: url("../siteart/white-scribble-tight.svg"), linear-gradient(to top, #8E9095,var(--gray), var(--gray)); background-repeat: no-repeat; background-position: center right ;padding: 100px 5%; border-radius: 20px;}
.half-photo > div > div {flex: 1 1 0;}
.half-photo > div > div:not(:has(> img)) {min-width: 465px;}
.half-photo > div img {display: block; height: 100%; object-fit: cover; border-radius: 20px;}
.half-photo div:has(> ul) {display: flex; justify-content: flex-start; width: 100%; background: rgba(255,255,255,0.75); padding: 20px; border-radius: 20px; flex-wrap: wrap;}
.half-photo div > ul {flex: 1 1 0;}
.half-photo div > ul li {padding-bottom: 10px;}

.photo-left {position: relative; background: radial-gradient(circle at 0 0, var(--blue) 0%, transparent 30%), linear-gradient(var(--gray)); overflow: hidden;}
.photo-left > div {display: flex; justify-content: space-between; gap: 100px; overflow: hidden;}
.photo-left > div > div {flex: 1 1 0; display: flex; flex-direction: column; gap: 20px;}
.photo-left > div > div:has(> img) {flex: 1.25 1 0;}
.photo-left > div > div img {display: block; object-fit: cover; border-radius: 20px; height: 100%;}
.photo-left > .circles {position: absolute; left: -30px; top: 50%; height: 300px; transform: translateY(-50%); width: 10vw; object-fit: contain;}

.status {padding: 10px; border-radius: 100px; background:linear-gradient(rgba(0,0,0,0)), url("/siteart/white-scribble-long.svg"), var(--blue); color: var(--blue); max-width: 150px; display: flex; justify-content: center; text-align: center; background-size: 135%; border: 1px solid var(--blue); background-repeat: no-repeat; background-position: center center; font-weight: 600;}

.photo-right {position: relative; background: radial-gradient(circle at bottom right, var(--blue) 0%, transparent 30%), linear-gradient(var(--gray)); overflow: hidden;}
.photo-right > div {display: flex; justify-content: space-between; gap: 100px; overflow: hidden;}
.photo-right > div > div {flex: 1 1 0; display: flex; flex-direction: column; gap: 20px;}
.photo-right > div > div:has(> img) {flex: 1.25 1 0;}
.photo-right > div > div img {display: block; object-fit: cover; border-radius: 20px; height: 100%;}
.photo-right > .circles {position: absolute; right: -30px; top: 50%; height: 300px; transform: translateY(-50%); width: 10vw; object-fit: contain;}

/*=== ABOUT PAGE 
==============================*/
body:has(.subpage-header) .primary.nav {border-bottom: 1px solid var(--white);}
.subpage-header {background-size: cover !important; background-position: center center !important; padding: 250px 0 50px;}
body:has(.subpage-header) .phone-num a:hover {color: var(--white) !important; transform: scale(1.05);}

.subpage-header.about {background: linear-gradient(to top, rgba(3, 60, 89, 0.75), rgba(0, 0, 0, 0.75)), url("../siteart/deere-with-attachment.jpg");}

.blue-banner {padding: 20px 5%; display: flex; justify-content: center; align-items: center; gap: 20px; background: linear-gradient(to right, rgba(3, 60, 89, 0.75), var(--blue), rgba(3, 60, 89, 0.75)); background-size: cover; background-position: center center; flex-wrap: wrap;}


/*=== CONTACT PAGE 
==============================*/
.subpage-header.contact {background: linear-gradient(to top, rgba(3, 60, 89, 0.75), rgba(0, 0, 0, 0.75)), url("../siteart/skid-steer-woods-2.jpg");}

#contact-form {display: flex; flex-direction: column; gap: 10px; font-size: var(--p); max-width: 100%;}
#contact-form label {display: none;}
#contact-form input {padding: 20px; width: 100%;}
#contact-form .input-row {display: flex; flex-direction: row; gap: 10px;}
#contact-form .dualFields {width: 50%;}
#contact-form textarea {width: 100%; height: 200px; border: none; font-family: var(--Inter); padding: 20px; font-size: var(--p);}
#contact-form input.submit:hover {cursor: pointer ;}

/*control the Captcha */
.CaptchaPanel {margin:0 0 0 0 !important;padding:0 0 0 0 !important;text-align: center;line-height:normal !important;}
.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;}
.CaptchaAnswerPanel {margin:0 0 0 0;padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:2;text-decoration: underline !important;margin:0 0 0 0;padding:8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}

.form-submitted {display: flex; justify-content: center; align-items: center; background: rgba(3, 60, 89, 0.75); border-radius: 20px; padding: 50px 0; text-align: center;}










/*=== MEDIA QUERIES 
==============================*/
@media screen and (max-width: 1300px) {
    .footer-wrap ul:last-child {text-align: left;}
}
@media screen and (max-width: 1200px) {
    .img-cutout {display: none !important; }
    .quicklinks-grid {grid-template-columns: repeat(2, 1fr);}
    
    .half-photo > div div:has(> img){display: none;}
    .half-photo > div {background: linear-gradient(to top, #8E9095,var(--gray), var(--gray));}
    .half-photo > div > div:not(:has(> img)) {min-width: 0;}
    
}
@media screen and (max-width: 1000px) {
    .primary.nav {display: none !important; }
    
    .home-hero > div > div {top: 100px;}
    
    .photo-left > div, .photo-right > div {flex-direction: column; border: 1px solid var(--white); border-radius: 20px; background: linear-gradient(to bottom, #8E9095,var(--gray), var(--gray)); box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15); gap: 50px;}
    .photo-right > div {flex-direction: column-reverse;}
    .photo-left > div > div:not(:has(> img)), .photo-right > div > div:not(:has(> img)) {padding: 0 5vw 5vw;}
    .photo-left > div > div img, .photo-right > div > div img {border-radius: 0;}
    .photo-left .circles, .photo-right .circles {display: none;}
    .photo-left > div img, .photo-right > div img {max-height: 300px;}
    .photo-left > div > div:has(iframe), .photo-right > div > div:has(iframe) {padding: 0;}
    .photo-left iframe, .photo-right iframe {height: 300px !important;}
    
    .half-photo > div {flex-direction: column;}
}
@media screen and (max-width: 700px) {
    #contact-form .input-row {flex-direction: column; width: 100%;}
    #contact-form .dualFields {width: 100%;}
}

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

@media screen and (max-width: 600px) {
    .header-logo img {max-width: 100px;}
    .btn-phone {padding: 5px 15px; font-size: 16px;}
    
    .quicklinks-grid {grid-template-columns: repeat(1, 1fr);}
    
    .half-photo div:has(> ul) {flex-direction: column;}
}

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