/***** 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: #EEE;font-family: 'montserrat', sans-serif !important;}
h1, h2, h3, h4, h5, span, button, id, a {font-family: 'montserrat', sans-serif !important;}

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


hr{border: 2px #FCAE26 solid; width: 38px; margin: 0px; margin-bottom: 15px;}
html {font-family: 'montserrat', sans-serif !important;}

/*--- HEADER STYLES ---------------------*/
header {background: #151515;}
.header-wrap {width: 95%; margin: 0 auto; display: flex; justify-content: flex-end; padding: 15px 0; gap: 50px;}
.header-wrap a {color: #fff; text-transform: uppercase; font-size: 15px; line-height: 15px; font-weight: bold;}
.header-wrap a i {color: #FCAE26;}
.header-wrap a:hover {color: #FCAE26; transition: .5s;}

/*---BODY--------------------------------*/
/*---DEFAULT---*/
.hero-shadow {background: #E3E3E3; clip-path: polygon(100% 90%, 50% 100%, 0% 90%, 0% 0%, 100% 0%); padding-bottom: 25px;}
.hero-bkgrd {background: url("/siteart/hero.jpg") no-repeat; background-position: bottom; background-size: cover; clip-path: polygon(100% 84%, 50% 100%, 0% 84%, 0% 0%, 100% 0%); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.hero-overlay {background: #151515; background: linear-gradient(90deg,rgba(21, 21, 21, 0.65) 0%, rgba(21, 21, 21, 0.8) 50%, rgba(21, 21, 21, 0.65) 100%);}
.hero-wrap {width: 95%; margin: 0 auto; padding: 175px 0 150px 0;}
.hero-content {width: 800px; margin: 0 auto; text-align: center;}
.hero-content h1 {color: #fff; text-transform: uppercase; font-size: 50px; line-height: 65px;}
.hero-content p {color: #fff; font-size: 18px; line-height: 30px; padding: 25px 0 40px 0;}
.hero-content button {background: #FCAE26; padding: 15px 0; width: 220px; color: #151515; font-size: 15px; font-weight: bold; text-transform: uppercase; line-height: 15px; font-family: 'montserrat', sans-serif; border: 2px #FCAE26 solid;}
.hero-content button:hover {background: none; border: 2px #fff solid; color: #fff;}

/* FLEX SETTINGS */
.flex-container {display: flex; flex-direction: row; align-content: center;}
.flex-container-align {display: flex; flex-direction: row; align-content: center;}
.flex-content-left {width:30%; background-image: url("../siteart/sidebar-bg.png");background-color: #000; padding: 25px 35px; }
.flex-content-left h1 {color:#fff; font-size: 34px; text-transform: uppercase; padding:10px 0;}
.flex-content-left p {color:#fff; font-size: 15px; line-height: 24px; padding:15px 0;}
.flex-content-left p a{color:#FCAE26; font-size: 15px; line-height: 24px; padding:10px 0; font-weight: bold; }
.flex-content-left ul li{color:#fff; font-size: 15px; line-height: 24px;  list-style-type: circle;}
.flex-content-left ul {padding-left: 20px;}
.flex-content-left img {width: 100%; padding: 25px 0; margin: 0 auto; text-align: center;}
.flex-content-right {width:70%; margin-left: 3%;  padding: 25px 10px;}
.flex-content-right h2 {font-size: 22px; padding: 15px 0 5px ; text-transform: uppercase; font-weight: bold;}
.flex-content-right h3 {font-size: 18px; padding: 15px 0 5px ;  font-weight: bold;}
.flex-content-right p {font-size: 15px; line-height: 25px;}
.flex-content-right p a{color:#333; font-size: 15px; line-height: 24px; padding:10px 0; font-weight: bold; transition: .2s ease;}
.flex-content-right p a:hover{color:#BE7902;  }
.flex-content-right ul li{color:#000; font-size: 15px; line-height: 24px;  list-style-type: circle;}
.flex-content-right ul {padding-left: 20px;}
.flex-content-right img {width: 100%; padding: 25px 0; margin: 0 auto; text-align: center;}

/* UNIFORM WIDTHS, PADDING, & CENTER CLASS */
.width-80 {width: 80%; margin: 0 auto}
.width-90 {width: 90%; margin: 0 auto;}
.width-90 {width: 95%; margin: 0 auto;}
#padding25 {padding: 25px 0;}
#padding50 {padding: 50px 0;}
.center-content {text-align: center; margin: 0 auto;}
.blk-txt {color:#333}
a.blk-txt {text-decoration: underline;}
a.blk-txt:hover {color:#BE7902}

.yellow-site-btn {background:#FCAE26; color:#333; padding: 10px 0; text-align: center; max-width: 300px; width: 100%; transition: .2s ease; font-weight: bold; font-size: 16px; text-transform: uppercase; border:none; margin: 10px 0;}
.yellow-site-btn:hover {background:#333; color:#FCAE26; padding: 10px 0; text-align: center; max-width: 300px; width: 100%; transition: .2s ease; }

.dark-site-btn {background:#333; color:#FCAE26; padding: 10px 0; text-align: center; max-width: 300px; width: 100%; transition: .2s ease; font-weight: bold; font-size: 16px; text-transform: uppercase; border:none; margin: 10px 0;}
.dark-site-btn:hover {background:#FCAE26; color:#333; padding: 10px 0; text-align: center; max-width: 300px; width: 100%; transition: .2s ease; }

.dark-bg {background: #333;}
.bg-yellow {background:#FCC667; }
.wht-bg {background:#fff; }

/*---*/

.inv-nav {width: 90%; margin: 0 auto; display: flex; justify-content: space-between; padding: 80px 0 120px 0; align-items: baseline; gap: 30px;}
.inv-nav a {text-align: center;}
.inv-nav img {width: 95%;}
.inv-nav h3 {font-size: 25px; color: #151515; font-weight: bold; line-height: 35px; text-transform: uppercase; margin-bottom: 12px; margin-top: 20px;}
.inv-nav p {color: #151515; font-size: 15px; font-weight: bold; text-transform: uppercase; border-bottom: 2px #151515 solid; width: 155px; margin: 0 auto;}
.inv-nav a:hover img {transition: .5s; transform: translateY(-6px);}

#inv-filter-search {background: #151515; width: 100%;}
#inv-filter-search form {width: 95%; margin: 0 auto; padding: 30px 0; display: flex; justify-content: space-between; gap: 10px;}
#inv-filter-search form input, #inv-filter-search form select {width: 100%; color: #737373; font-size: 14px; line-height: 14px; padding: 9px 0 9px 15px; font-family: 'montserrat', sans-serif !important;
-webkit-appearance: none; /* Removes default iOS styling */
}
#inv-filter-search form button {width: 220px; background: #FCAE26; border: none; color: #151515; font-size: 14px; line-height: 14px; text-transform: uppercase; font-weight: bold; font-family: 'montserrat', sans-serif !important; padding: 15px 0;}

#explore-jcb {width: 95%; margin: 0 auto; padding: 80px 0 120px 0;}
.explore-nav {display: flex; justify-content: space-between; gap: 15px; padding-top: 45px;}
.explore-header {width: 920px; margin: 0 auto; text-align: center;}
.explore-header h2 {color: #151515; font-size: 35px; line-height: 65px; font-weight: bold; text-transform: uppercase; padding-bottom: 10px;}
.explore-header p {color: #000; font-size: 16px; line-height: 28px;}
.showroom-img {background: url("/siteart/showroom.jpg") no-repeat; background-position: center; background-size: cover;}
.parts-img {background: url("/siteart/parts.jpg") no-repeat; background-position: center; background-size: cover;}
.services-img {background: url("/siteart/services.jpg") no-repeat; background-position: center; background-size: cover;}
.contact-img {background: url("/siteart/contact.jpg") no-repeat; background-position: center; background-size: cover;}
.explore-overlay {background: rgba(30,29,34,0.65);}
.explore-nav a {width: 100%; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.explore-nav a i {color: #000; background: #FCAE26; height: 46px; width: 46px; font-size: 24px; display: flex; justify-content: center; align-items: center;}
.explore-nav a > div:first-child > div {display: flex; justify-content: flex-end; padding-top: 180px;}
.explore-nav a h4 {font-size: 22px; line-height: 22px; font-weight: bold; text-transform: uppercase; color: #000; margin-bottom: 15px;}
.explore-nav a hr {border: 2px #FCAE26 solid; width: 38px; margin: 0px; margin-bottom: 15px;}
.explore-nav a p {color: #000; font-size: 14px; line-height: 24px;}
.explore-nav a > div:last-child {width: 90%; margin: 0 auto; padding: 35px 0 30px 0;}
.explore-nav a:hover {transition: .5s; transform: translateY(-6px);}
.explore-nav a:hover hr {width: 58px; transition: .5s;}

#about-northrock {background: #151515; display: flex; justify-content: space-between;}
.header-span p {color: #fff; font-size: 20px !important; line-height: 30px !important; font-weight: bold; text-transform: uppercase;}
#about-northrock h2 {font-size: 35px; color: #fff; line-height: 50px; font-weight: bold; text-transform: uppercase; margin-bottom: 25px; width: 850px;}
#about-northrock h2 span {color: #FCAE26;}
#about-northrock p {color: #fff; font-size: 16px; line-height: 28px; margin-bottom: 10px;}
#about-northrock p a {color: #FCAE26; font-weight: bold;}
.about-img {background: url("/siteart/about-jcb.jpg") no-repeat; background-position: center; background-size: cover;}
#about-northrock > div:first-child {width: 70%; padding: 100px 50px;}
#about-northrock > div:last-child {width: 30%;}
#about-northrock button {background: #FCAE26; padding: 15px 0; width: 220px; color: #151515; font-size: 15px; font-weight: bold; text-transform: uppercase; line-height: 15px; font-family: 'montserrat', sans-serif; border: 2px #FCAE26 solid; margin-top: 30px;}
#about-northrock button:hover {background: none; border: 2px #fff solid; color: #fff;}

#join-team {margin-top: 10px; margin-bottom: 10px;}
#join-team > div {background: url("/siteart/join-our-team/img-1.jpg"), url("/siteart/join-our-team/img-2.jpg"), url("/siteart/join-our-team/img-3.jpg"), url("/siteart/join-our-team/img-4.jpg"), url("/siteart/join-our-team/img-5.jpg"), url("/siteart/join-our-team/img-6.jpg"); background-repeat: repeat-x, repeat;}
#join-team > div > div {background: #FCAE26; background: linear-gradient(90deg,rgba(252, 174, 38, 0.85) 0%, rgba(252, 174, 38, 0.98) 50%, rgba(252, 174, 38, 0.85) 100%); text-align: center; padding: 50px 0;}
#join-team > div > div > div {width: 95%; margin: 0 auto;}
#join-team h2 {font-size: 35px; line-height: 50px; color: #151515; text-transform: uppercase; margin-bottom: 5px;}
#join-team p {color: #000; font-size: 16px; line-height: 28px;}
#join-team button {background: #151515; padding: 15px 0; width: 220px; color: #fff; font-size: 15px; font-weight: bold; text-transform: uppercase; line-height: 15px; font-family: 'montserrat', sans-serif; border: 2px #FCAE26 solid; margin-top: 20px;}
#join-team button:hover {background: none; border: 2px #151515 solid; color: #151515;}



/*---SPECIAL OFFERS---*/
#special-offers-hero {background: #000; text-align: center;}
#special-offers-hero img {width: 1100px; margin: 0 auto;} 
.special-offers {width: 95%; margin: 0 auto; padding: 80px 0;}
.special-offers > div {display: flex; gap: 50px; margin-bottom: 40px; align-items: center;}
.special-offers img {width: 500px;}
.special-offers h2 {font-size: 28px; text-transform: uppercase;}
.special-offers hr {border: 2px #FCAE26 solid; width: 50px; margin: 0px; margin-bottom: 15px; margin-top: 15px;}
.special-offers p {font-size: 16px; line-height: 26px; margin-bottom: 10px;}
.special-offers p span {color: #686868; font-size: 15px;}
.special-offers button {background: #FCAE26; padding: 15px 0; width: 250px; color: #151515; font-size: 15px; font-weight: bold; text-transform: uppercase; line-height: 15px; font-family: 'montserrat', sans-serif; border: 2px #FCAE26 solid; margin-top: 5px;}
.special-offers button:hover {background: #151515; border: 2px #151515 solid; color: #fff;}

/*---PARTS AND SERVICE---*/

#parts-service {display: flex; justify-content: space-between;}
.contact-feature {background: #E0E0E0;}
.contact-padding {padding: 80px 60px;}
.contact-nugget {border: 2px #151515 solid; border-radius: 5px; margin-bottom: 45px; width: 290px;}
.contact-nugget > div {padding: 10px 15px;}
.contact-icon {margin-top: -26px;}
.contact-icon i {background: #E0E0E0; color: #151515; font-size: 30px; line-height: 30px; padding: 0 8px;}
.contact-info {padding: 20px 8px 20px 8px;}
.contact-info h4 {font-size: 18px; margin-bottom: 10px; text-transform: uppercase;}
.contact-info a {color: #151515; font-size: 16px; line-height: 26px;}
.connect-icons {display: flex; gap: 8px; align-items: center;}
.connect-icons i {color: #151515; font-size: 28px; line-height: 28px;}
.parts-service-wrap {padding: 80px 50px;}
.parts-service-wrap h2 {font-size: 28px; text-transform: uppercase;}
.parts-service-wrap hr {border: 2px #FCAE26 solid; width: 50px; margin: 0px; margin-bottom: 15px; margin-top: 15px;}
.parts-service-wrap p {font-size: 16px; line-height: 26px; margin-bottom: 10px;}
.parts-service-wrap button {background: #FCAE26; padding: 15px 0; width: 250px; color: #151515; font-size: 15px; font-weight: bold; text-transform: uppercase; line-height: 15px; font-family: 'montserrat', sans-serif; border: 2px #FCAE26 solid; margin-top: 5px;}
.parts-service-wrap button:hover {background: #151515; border: 2px #151515 solid; color: #fff;}

/*Accordion*/
.flex-container.flex-services {
    justify-content: space-between;
    gap: 15px;
}

.flex-services .page-head {
    flex: 1;
}

.service-section {
    flex: 1;
}

.accordion {
	background: #FCAE26;
    color: #000;
    cursor: pointer;
    padding: 20px;
    font-size: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
	font-family: interstate, sans-serif !important;
    transition: 0.4s;
    font-weight: 500;
    display: flex;
    align-items: center;
   justify-content: space-between;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
}

.panel ul.fa-ul {
    padding-inline-start: 0px;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0px 20px;
  border-bottom: 10px solid #f1f1f1;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
    padding: 10px 0;
}

.accordion:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 28px;
    color: #fff;
    font-weight: 600;
    float: right;
}

.active:after {
  content: "-";
	 font-size: 28px;
  color: #fff;
  float: right;
  margin-left: 5px;/* Unicode character for "minus" sign (-) */
}



/*---Visit Us---*/

#visit-us {width: 85%; margin: 0 auto; padding: 80px 0 100px 0;}
.visit-header {text-align: center;}
.visit-header h1 {text-transform: uppercase; font-size: 35px; line-height: 45px;}
.visit-header h2 span {color: #FCAE26; font-weight: lighter; text-transform: uppercase; font-size: 20px; line-height: 30px;}
.visit-header p {font-size: 18px; line-height: 30px; width: 800px; margin: 0 auto; margin-top: 15px;}

#visit-us iframe {border-radius: 10px; margin-top: 40px;}

.visit-flex {display: flex; justify-content: space-between; margin-top: 50px;}
.visit-flex > div {width: 100%;}
.visit-hours {display: flex; justify-content: space-between; margin-top: 20px;}
.visit-hours li {font-size: 16px; line-height: 16px; padding: 12px 0 12px 15px;}
.visit-hours ul {width: 100%;}
.hours-dark {background: #E3E3E3;}
#visit-us h2 {text-transform: uppercase; font-size: 25px; line-height: 30px;}
.visit-contact {margin-top: 20px;}
.visit-contact li a {color: #000; font-size: 18px; line-height: 30px;}
.visit-contact li {margin-bottom: 10px;}
.visit-contact li a:hover {color: #FCAE26; transition: .5s;}



/* NEWS */
.news-left {width: 32%; margin-right: 10px; color:#000; padding: 25px 40px;}
.news-left img, .news-right img {width: 100%;margin: 0 auto; padding: 7px 0;}
.news-left h3, .new-right h3 {font-size: 22px;}
.news-right {width: 60%; margin-left:10px; align-items: center; align-content: center;}

.news-right h2, .news-left h2 {font-size: 24px; padding-bottom: 20px;}
.news-right p, .news-left p {font-size: 16px; line-height: 25px;}
.news-left-text {width: 70%;padding: 15px 15px; margin-top:5px; color:#000; background: #f1f1f1;}
.news-left-text p {font-size: 16px; padding: 10px 0; width: 90%;margin: 0 auto;}
.news-btn {background:#FCAE26}
.news-btn {width: 30%;align-items: center;text-align: center;}
.white-txt {color:#fff; }
.yell-txt {color:#FCAE26}
/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/
footer {background: #151515;}
.footer-wrap {width: 95%; margin: 0 auto; padding: 60px 0 80px 0; display: flex; justify-content: space-between;}
footer p {font-size: 20px; line-height: 18px; font-weight: bold; text-transform: uppercase; color: #fff;}
footer li a {color: #fff; font-family: 'montserrat', sans-serif;; font-size: 16px; line-height: 26px; text-transform: uppercase;}
footer ul {margin-top: 20px;}
footer li {margin-bottom: 8px;}
.footer-left {display: flex; gap: 100px;}
.footer-socials {display: flex; gap: 15px; margin-top: 12px;}
.footer-socials i {font-size: 20px; color: #FCAE26;}
footer button {background: #FCAE26; padding: 15px 0; width: 175px; color: #151515; font-size: 14px; font-weight: bold; text-transform: uppercase; line-height: 14px; font-family: 'montserrat', sans-serif; border: 2px #FCAE26 solid; margin-top: 20px;}
footer button:hover {background: none; border: 2px #fff solid; color: #fff;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.list-container-flexrow .view-listing-details-link, .list-container-flexrow .dealer-phone-call, .list-container-flexrow .dealer-phone-text, .list-container-flexrow .contact-options, .list-container-flexrow .contact-options a {background-color:#333 !important}





/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1350px) {
	#about-northrock h2 {width: 100%;}
}
@media only screen and (max-width: 1300px) {
	.request-flex a {width: 100%;}
}
@media only screen and (max-width: 1250px) {
	.hero-overlay {background: #151515; background: linear-gradient(90deg,rgba(21, 21, 21, 0.7) 0%, rgba(21, 21, 21, 0.8) 50%, rgba(21, 21, 21, 0.7) 100%);}
	#about-northrock > div:first-child {width: 65%;}
	#about-northrock > div:last-child {width: 35%;}
	#visit-us {width: 90%;}
}
@media only screen and (max-width: 1150px) {
	.inv-nav {width: 95%;}
	#about-northrock > div:first-child {width: 60%;}
	#about-northrock > div:last-child {width: 40%;}
	.special-offers > div {flex-wrap: wrap; margin-bottom: 70px; gap: 35px;}
}
@media only screen and (max-width: 1100px) {
	#special-offers-hero img {width: 100%;}
    .flex-container, .flex-container-align {display: block;}
    .news-left, .news-right {width: calc(100% - 70px); margin: 0 auto;}
    .flex-content-left {width: calc(100% - 70px); background-attachment: fixed; background-size: cover; background-position: bottom center;}
    .flex-content-left img {display: none;}
    #yellow-shield {display: none;}
    .flex-content-right {width: calc(100% - 70px);}
    .news-left-text {width: calc(100% - 70px);}
    .news-btn {width: 100%;}
}
@media only screen and (max-width: 1050px) {
	.explore-header {width: 100%;}
	.inv-nav {flex-wrap: wrap; justify-content: center;}
	.explore-nav {flex-wrap: wrap; justify-content: center;}
	.explore-nav a {width: 49%;}
	#inv-filter-search form button {width: 180px;}
    
}
@media only screen and (max-width: 1000px) {
	header {display: none;}
	.hero-overlay {background: #151515; background: linear-gradient(90deg,rgba(21, 21, 21, 0.8) 0%, rgba(21, 21, 21, 0.8) 50%, rgba(21, 21, 21, 0.7) 100%);}
	.hero-content h1 {font-size: 45px; line-height: 60px;}
	.hero-content p {font-size: 17px; padding: 20px 0 35px 0;}
	.hero-content button {font-size: 14px; line-height: 14px;}
	.hero-wrap {padding: 160px 0 145px 0;}
	.hero-shadow {clip-path: polygon(100% 93%, 50% 100%, 0% 93%, 0% 0%, 100% 0%);}
	.hero-bkgrd {clip-path: polygon(100% 88%, 50% 100%, 0% 88%, 0% 0%, 100% 0%);}
	.inv-nav h3 {font-size: 22px; line-height: 32px;}
	.inv-nav p {font-size: 14px; width: 145px;}
	.header-span p {font-size: 18px !important; line-height: 28px !important;}
	#about-northrock h2, #join-team h2 {font-size: 30px; line-height: 40px;}
	.explore-header h2 {font-size: 30px; line-height: 45px; margin-bottom: 5px;}
}
@media only screen and (max-width: 950px) {
	#about-northrock > div:last-child {display: none;}
	#about-northrock > div:first-child {width: 95%; margin: 0 auto; padding: 100px 0;}
	#visit-us {width: 95%;}
	.visit-header p {width: 100%;}
    #parts-service {display: block;}

    .contact-nugget {margin: 15px auto;}
}
@media only screen and (max-width: 850px) {
	.hero-content {width: 100%;}
	.hero-shadow {clip-path: polygon(100% 95%, 50% 100%, 0% 95%, 0% 0%, 100% 0%); padding-bottom: 15px;}
	.hero-bkgrd {clip-path: polygon(100% 90%, 50% 100%, 0% 90%, 0% 0%, 100% 0%);}
	#inv-filter-search form {flex-wrap: wrap;}
	#inv-filter-search form input {width: 48%;}
	#inv-filter-search form select {width: 48%;}
	#inv-filter-search form button {width: 100%;}
	#inv-filter-search form div {width: 50%;}
	#inv-filter-search form .input-keyword {width: 46% !important;}
}
@media only screen and (max-width: 800px) {
	.inv-nav a {width: 47%;}
	.explore-nav a {width: 48%;}
	.footer-wrap {flex-wrap: wrap; gap: 50px;}
	.footer-wrap .footer-right {width: 100%;}
	#inv-filter-search form input {width: 47.5%;}
	#inv-filter-search form select {width: 47.5%;}
	#inv-filter-search form .input-keyword {width: 45% !important;}
}
@media only screen and (max-width: 700px) {
	.hero-shadow {clip-path: polygon(100% 96%, 50% 100%, 0% 96%, 0% 0%, 100% 0%); padding-bottom: 15px;}
	.hero-bkgrd {clip-path: polygon(100% 93%, 50% 100%, 0% 93%, 0% 0%, 100% 0%);}
}
@media only screen and (max-width: 650px) {
	.hero-content h1 {font-size: 40px; line-height: 55px;}
	.hero-wrap {padding: 150px 0 135px 0;}
	.inv-nav h3 {font-size: 20px; line-height: 30px;}
	.inv-nav p {font-size: 13px; width: 135px;}
	.explore-header p {font-size: 15px; line-height: 27px;}
	.explore-nav a h4 {font-size: 20px; line-height: 20px;}
	.explore-nav a i {height: 40px; width: 40px; font-size: 20px;}
	.explore-nav a p {font-size: 13px; line-height: 23px;}
	.header-span p {font-size: 16px !important; line-height: 26px!important;}
	#about-northrock p, #join-team p, .special-offers p {font-size: 15px; line-height: 27px;}
	#about-northrock button, #join-team button {font-size: 14px; line-height: 14px;}
	footer p {font-size: 18px; line-height: 16px;}
	footer li a {font-size: 15px; line-height: 25px;}
	#inv-filter-search form input {width: 47%;}
	#inv-filter-search form select {width: 47%;}
	#inv-filter-search form div {width: 50%;}
	#inv-filter-search form .input-keyword {width: 44% !important;}
	.special-offers img {width: 100%;}
	.special-offers p span {font-size: 13px; line-height: 25px;}
	.special-offers h1 {font-size: 35px;}
	.request-flex {flex-wrap: wrap;}
}
@media only screen and (max-width: 550px) {
	.inv-nav a {width: 46%;}
	.explore-nav a {width: 80%;}
	#inv-filter-search form input {width: 100%;}
	#inv-filter-search form select {width: 100%;}
	#inv-filter-search form div {width: 100%;}
	#inv-filter-search form .input-keyword {width: 100% !important;}
}
@media only screen and (max-width: 500px) {
	.footer-left {flex-wrap: wrap; gap: 50px;}
	.footer-left > div {width: 100%;}
}
@media only screen and (max-width: 450px) {
	.hero-content h1 {font-size: 35px; line-height: 50px;}
	.hero-content p {font-size: 14px; line-height: 28px;}
	.hero-wrap {padding: 115px 0;}
	.hero-shadow {clip-path: polygon(100% 98%, 50% 100%, 0% 98%, 0% 0%, 100% 0%); padding-bottom: 10px;}
	.hero-bkgrd {clip-path: polygon(100% 95%, 50% 100%, 0% 95%, 0% 0%, 100% 0%);}
	.inv-nav a {width: 80%;}
	#inv-filter-search form button, #inv-filter-search form div {width: 100%;}
	.explore-nav a {width: 90%;}
	.explore-header h2 {font-size: 25px; line-height: 40px;}
	.explore-nav a h4 {font-size: 18px; line-height: 18px;}
	#about-northrock h2, #join-team h2, .special-offers h2 {font-size: 25px; line-height: 35px;}
	footer p {font-size: 16px; line-height: 14px;}
	footer li a {font-size: 14px; line-height: 24px;}
	.special-offers h1 {font-size: 30px;}
}
@media only screen and (max-width: 400px) {
	.explore-nav a {width: 100%;}
}
@media only screen and (max-width: 350px) {
	.hero-content h1 {font-size: 30px; line-height: 45px;}
	.hero-content button {width: 100%;}
	.hero-wrap {padding: 90px 0 100px 0;}
	.hero-bkgrd {clip-path: polygon(100% 96%, 50% 100%, 0% 96%, 0% 0%, 100% 0%);}
	.inv-nav a {width: 90%;}
	#about-northrock button, #join-team button, .special-offers button {width: 100%;}
}