﻿/***** 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; } 
/***** END RESET *****/
::-moz-selection { background: #000;  color: #fff; text-shadow: none; } 
::selection { background: #000; color: #fff; text-shadow: none; }
/* Clearfix */
.cf { *zoom: 1; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } 

/*-------- BODY STYLES --------*/
html { scroll-behavior: smooth; }
body, body.ojppage { font-family: 'mozaic-geo-variable', sans-serif; }

a:link, a:visited, a:active, a:hover { text-decoration: none; }
hr { border: #000 1px solid; }
header, footer, section, main, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, i, ol, ul, li, form, label, :before, :after { box-sizing: border-box; }

/*--- HEADER STYLES ---------------------*/
header {}

.aria-skip { position: relative; width: 0px; height: 0px; display: flex; font-size: 0px; opacity: 0; }

.ojp-header, header.ojp-header { position: relative; z-index: 1004; padding: 0 max(40px, calc(50vw - 1000px)); width: 100%; margin-bottom: -101px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 20px rgba(0, 0, 0, .1); display: flex; justify-content: space-between; align-items: stretch; }
.header-left, .header-right { position: relative; display: flex; align-items: stretch; }
.header-left { z-index: 5; justify-content: flex-start; }

.ojp-logo, .ojp-logo img { max-width: min(100%, 240px); }
.ojp-logo { position: relative; display: flex; align-items: center; }
.ojp-logo img { object-fit: contain; object-position: center; }

.ojp-header, header.ojp-header, .header-logo, .header-logo img { height: 100px; }
.header-logo { justify-content: flex-start; }
.header-logo img { padding: 10px 0; }

.nav-div { position: relative; z-index: 5; padding-left: 60px; display: flex; justify-content: flex-start; align-items: stretch; }

.header-right { z-index: 3; justify-content: flex-end; }

.searchform {}
.searchform form.ccc-form { position: relative; width: 230px; height: 50px!important; }
.searchform input[type="text"], .searchform button[type="submit"] { position: absolute; top: 0; right: 0; height: 100%; border-radius: 16px!important; border: none; box-sizing: border-box; }
.searchform input[type="text"] { width: 100%; background: #fff; outline: 1px solid #000; padding: 9px 56px 12px 12px!important; font-family: 'mozaic-geo-variable', sans-serif; font-size: 15px!important; letter-spacing: -.5px; height: 50px!important; }
.searchform button[type="submit"] { width: 50px; background: none; outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 16px; color: var(--dpurple); transition: .25s ease all; }
.searchform button[type="submit"]:hover { color: var(--purple); }

.headersearch-holder { position: absolute; top: calc(100% + 24px); right: max(40px, calc(50vw - 1000px)); }

#headersearch {}
.searchform #headersearch input[type="text"] { background: rgba(255, 255, 255, .8)!important; }
.searchform #headersearch input[type="text"]:focus { background: #fff!important; }

/* Site Colors: */
:root {
	--dblue: 	#112632; 	/* var(--dblue); 	rgba(17, 38, 50, 1); 	*/
	
	--lblue: 	#1c3a4a; 	/* var(--lblue); 	rgba(28, 58, 74, 1); 	*/
	
	--dpurple: 	#65336b; 	/* var(--dpurple); 	rgba(101, 51, 107, 1); 	*/
	
	--purple: 	#90336a; 	/* var(--purple); 	rgba(144, 51, 106, 1); */
	
	--pink: 	#b83d70; 	/* var(--pink); 	rgba(184, 61, 112, 1); */
}
/*---BODY--------------------------------*/
.invisilink { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; display: inline; transition: .25s ease all; }
a.invisilink:hover { color: var(--purple); text-decoration: underline; }
.darkmode a.invisilink:hover, a.invisilink.darkmode:hover { color: var(--pink); }

/* Text / Titles / Paragraphs / <h1><h2><h3><h4> / <p> 
h1, h2, h3, h4, h5, h6, p, span, a, button, label, input, select, textarea, div, ul, ol {  font-weight: 400; color: #000; transition: .25s ease all; }

.txt-default, .content-sect p, p, span, a, input, select, textarea, div, ul, ol { font-size: 16px; }*/

.txt-default, .content-sect p { font-family: 'mozaic-geo-variable', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.4; color: #000; }

.title, .subtitle, .subtitle2 { font-family: 'mozaic-geo-variable', sans-serif; width: 100%; color: #000; }

.title { font-size: 48px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }

.subtitle, .subtitle2 { font-weight: 400; line-height: 1.2; }

.subtitle { font-size: 42px; letter-spacing: -1px; font-style: italic; }

.subtitle2 { font-size: 34px; letter-spacing: 3.5px; text-transform: uppercase; }

.stacked-title { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }

/* buttons / links / <a> / ctas */
.btnclass, .listed { position: relative; min-width: 50px; min-height: 50px; display: flex; align-items: center; column-gap: 12px; cursor: pointer; transition: .25s ease all; }

.btnclass, .btn-purple { padding: 8px 28px 12px 28px; justify-content: center; background: var(--pink); color: #fff; text-shadow: none!important; font-size: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); border-radius: 8px; font-weight: 600; letter-spacing: .25px; line-height: 1.2; }
.shadowed .btnclass, .shadowed .btn-purple, .btnclass.shadowed, .btn-purple.shadowed { box-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.btn-purple, .btnclass.btn-purple { background: var(--purple); }
.btnclass:hover, .btn-purple:hover { background: var(--dpurple); color: #fff; text-shadow: none!important; }

.listed { padding: 8px 16px; justify-content: center; }
.listed, .listed i, .listed span { color: var(--dpurple); transition: .25s ease all; }
.listed, .listed span { font-size: 17px; }
.listed i { font-size: 17px; }
a.listed:hover, a.listed:hover i, a.listed:hover span { color: var(--purple); cursor: pointer; }

.darkmode .listed, .darkmode .listed i, .darkmode .listed span, 
.listed.darkmode, .listed.darkmode i,  .listed.darkmode span, 
.shadowed .listed, .shadowed .listed i, .shadowed .listed span, 
.listed.shadowed, .listed.shadowed i,  .listed.shadowed span { color: #fff; }
.darkmode a.listed:hover, .darkmode a.listed:hover i, .darkmode a.listed:hover span, 
a.listed.darkmode:hover, a.listed.darkmode:hover i, a.listed.darkmode:hover span { color: var(--pink); }

/* sections */
.content-sect, .horiz-sect { position: relative; display: flex; row-gap: 20px; }
.content-sect { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.ai-c, .content-sect.ai-c, .multi-title.ai-c { align-items: center; }
.ai-fe, .content-sect.ai-fe, .multi-title.ai-fe { align-items: flex-end; }

.content-sect p { width: 100%; }

.horiz-sect { width: 100%; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 20px; }
.jc-c, .horiz-sect.jc-c { justify-content: center; }

.f-row { display: flex; flex-direction: row; }
.f-col { display: flex; flex-direction: column; align-items: flex-start; }

.jc-fs { justify-content: flex-start; }
.jc-sb { justify-content: space-between; }

.ai-fs { align-items: flex-start; }
.ai-s { align-items: stretch; }

.ac-c { align-content: center; }

.f-wrap { flex-wrap: wrap; }

.mission { position: relative; width: 100%; padding: 60px max(5vw, calc(50vw - 1000px)); display: flex; justify-content: center; align-items: stretch; column-gap: 80px; row-gap: 40px; }
.mission > .content-sect { width: 50%; }
.mission .missionimg { position: relative; width: 50%; min-height: 320px; display: flex; justify-content: center; align-items: center; }

.missionimg img, .hero > img, .subhero > img, .bg-img > img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

img.img-contain { object-fit: contain; }

.has-blur { filter: blur(1.25px); }

.mission .missionimg img.img-contain { position: relative; width: 100%; height: auto; max-height: 600px; object-fit: contain; }

.pill-sect { width: min(1600px, 76vw); margin: 0 auto; background: rgba(255, 255, 255, .1); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); position: relative; z-index: 3; display: flex; justify-content: center; align-items: stretch; }
.pill-sect, .pill-sect > * { border-radius: 16px; }
.pill-sect .title, .pill-sect .subtitle, .pill-sect .subtitle2, .pill-sect p, .pill-sect .listed { text-shadow: 0 0 12px rgba(17, 38, 50, .5); }
.pill-sect .listed:hover { text-shadow: 0 0 4px rgba(17, 38, 50, 1); }
.pill-sect > .content-sect { position: relative; width: 45%; z-index: 1; padding: 42px 60px; }
.pillimg { position: relative; width: 55%; z-index: 3; min-height: 400px; display: flex; align-items: stretch; }
.map-div iframe { height: unset; min-height: 400px; background: var(--dpurple); border-radius: 16px; }

/* Homepage - default.htm */
.homepage, .subpage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.homepage {}

.hero, .subhero { position: relative; width: 100%; padding-top: 200px; display: flex; justify-content: center; align-items: center; }
.hero { padding-top: 200px; padding-bottom: 100px; min-height: 700px; }

.hero > img { opacity: .6; }

.hero-overlay { position: relative; z-index: 7; }

.inv-sect { position: relative; width: 100%; padding: 42px max(24px, calc(50vw - 1000px)) 56px max(24px, calc(50vw - 1000px)); background: var(--dblue); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; }

.invbox { position: relative; z-index: 3; width: calc(20% - 14px); margin: 24px 7px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.invbox, .invbox:before, .inv-both { border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.invbox:before { position: absolute; z-index: 1; content: ""; bottom: 0; left: 0; width: 100%; height: calc(100% - 120px); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.inv-both { position: absolute; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; transition: .25s ease all; }
.inv-both:before { position: absolute; margin-top: -10px; content: "View All"; z-index: 3; opacity: 0; display: flex; justify-content: center; align-items: flex-end; transition: .25s ease all; color: var(--dpurple); text-shadow: 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #fff, 0 0 10px #fff, 0 0 12px #fff, 0 0 20px #fff, 0 0 20px #fff; }
.inv-both:before, .invbox img { height: 160px; }
.invbox img { position: relative; z-index: 2; width: 100%; padding: 0 4px; object-fit: contain; object-position: 50% 100%; transition: .25s ease all; filter: none; }
.inv-title { position: relative; z-index: 3; width: 100%; font-size: 26px; font-weight: 800; letter-spacing: .5px; transition: .25s ease all; color: #000; text-align: center; pointer-events: none; display: flex; justify-content: center; align-items: center; padding: 0 12px; }
.inv-half { position: absolute; z-index: 5; bottom: 0; width: 50%; height: 70px; padding: 8px 8px 20px 8px; display: flex; justify-content: center; align-items: center; transition: .25s ease all; color: var(--pink); border-radius: 4px; font-size: 19px; text-align: center; font-style: italic; }
.inv-saletitle, .inv-renttitle { position: relative; z-index: 5; width: 50%; height: 70px; padding: 8px 8px 20px 8px; display: flex; justify-content: center; align-items: center; transition: .25s ease all; color: var(--pink); border-radius: 4px; font-size: 19px; text-align: center; font-style: italic; pointer-events: none; }
.inv-half, .inv-saletitle:after, .inv-renttitle:after { color: var(--pink); }
.inv-saletitle:after, .inv-renttitle:after { position: relative; content: "\f054"; opacity: 0; margin-left: -16px; margin-top: 4px; width: 16px; font-family: 'Font Awesome 6 Free', icon; font-weight: 900; display: flex; justify-content: flex-end; align-items: center; transition: .25s ease all; font-style: normal; }
.inv-saletitle:after, .inv-renttitle:after { font-size: 12px; }
.inv-saletitle { padding-left: 16px; }
.inv-renttitle { padding-right: 16px; }
.inv-half.inv-forsale { left: 0; }
.inv-half.inv-forrent { right: 0; }

.inv-both:hover:before { opacity: 1; margin-top: 4px; }
.inv-both:hover ~ img { filter: grayscale(1) blur(1px); }
.showallinvoptions .inv-both:hover ~ .inv-title, .salepage .inv-forsale:hover ~ .inv-title, .rentalpage .inv-forrent:hover ~ .inv-title { color: var(--dpurple); letter-spacing: 1.5px; }

.inv-forsale:hover ~ .inv-saletitle, .inv-forsale:hover ~ .inv-saletitle:after, .inv-forrent:hover ~ .inv-renttitle, .inv-forrent:hover ~ .inv-renttitle:after { color: var(--dpurple); }
.inv-forsale:hover ~ .inv-saletitle:after, .inv-forrent:hover ~ .inv-renttitle:after { margin-left: 0; opacity: 1; }

.all-invbox { position: relative; width: 92%; padding: 50px 24px 40px 24px; margin: 24px auto 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background: var(--purple); box-shadow: 0 4px 20px rgba(0, 0, 0, .5); transition: .25s ease all; overflow: hidden; }
.all-invbox, .all-filllink { border-radius: 16px; }
.all-filllink { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/siteart/inv-all.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; transition: .25s ease all; }
.all-title, .all-saletitle, .all-renttitle { position: relative; z-index: 5; text-align: center; color: #fff; letter-spacing: .5px; transition: .25s ease all; }
.all-title { pointer-events: none; font-size: 40px; width: 100%; font-weight: 800; }
.all-half { position: absolute; z-index: 7; bottom: 32px; }
.all-forsale { right: 50%; }
.all-forrent { left: 50%; }
.all-half, .all-saletitle, .all-renttitle { width: min(50%, 180px); min-height: 80px; }
.all-saletitle, .all-renttitle { position: relative; pointer-events: none; padding: 12px 24px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-style: italic; letter-spacing: .5px; color: #fff; }
.all-saletitle:after, .all-renttitle:after { font-size: 12px; color: #fff; margin-top: 6px; }

.all-invbox:hover .all-filllink { transform: scale(1.2); transition: .45s ease all; }
.all-filllink:hover ~ .all-title { letter-spacing: 3px; transition: .35s ease all; }
.all-forsale:hover ~ .all-saletitle, .all-forsale:hover ~ .all-saletitle:after, 
.all-forrent:hover ~ .all-renttitle, .all-forrent:hover ~ .all-renttitle:after { opacity: .7; }
.all-forsale:hover ~ .all-saletitle:after, .all-forrent:hover ~ .all-renttitle:after { margin-left: 4px; }

.salepage .inv-both, .salepage .inv-forrent, .salepage .inv-renttitle, .salepage .all-forrent, .salepage .all-renttitle, 
.rentalpage .inv-both, .rentalpage .inv-forsale, .rentalpage .inv-saletitle, .rentalpage .all-forsale, .rentalpage .all-saletitle { display: none; pointer-events: none; } 
.salepage .inv-forsale, .rentalpage .inv-forrent, .salepage .all-forsale, .rentalpage .all-forrent { z-index: 5; width: 100%; height: 100%; }

.salepage .all-forsale, .rentalpage .all-forrent { width: 100%; height: 100%; bottom: 0; left: 0; right: 0; border-radius: 16px; }

/* subpages */
.subpage {}

.subhero { padding-bottom: 40px; }
.subhero > img { opacity: .25; }

.ojp-breadcrumbs { position: relative; width: 100%; margin-top: -20px; margin-bottom: -16px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; gap: 12px; }
.ojp-breadcrumbs .ojp-breadcrumb { color: #ccc; }
.ojp-breadcrumbs a.ojp-breadcrumb:hover { color: #fff; }
.ojp-breadcrumbs p { width: unset; color: #ccc!important; }

/* contact-us.htm */
.contactpage {}

/* thank-you.htm */
.thankyoupage {}

/* recommended styles */
.ta-c, .ta-c .title, .ta-c p, .title.ta-c, p.ta-c { text-align: center; }
.ta-r, .ta-r .title, .ta-r p, .title.ta-r, p.ta-r { text-align: right; }
.ta-l, .ta-l .title, .ta-l p, .title.ta-l, p.ta-l { text-align: left; }

.txt-upper { text-transform: uppercase; }

.txt-ital { font-style: italic; }

.fs-28 { font-size: 28px; }

.txt-white, .txt-white span, .txt-white h1, .txt-white h2, .txt-white h3, .txt-white h4, .txt-white p, 
.darkmode, .darkmode .title, .darkmode .subtitle, .darkmode .subtitle2, .darkmode p, 
.shadowed, .shadowed .title, .shadowed .subtitle, .shadowed .subtitle2, .shadowed p { color: #fff; }

.shadowed, .shadowed .title, .shadowed .subtitle, .shadowed .subtitle2, .shadowed p { color: #fff; text-shadow: 1px 1px 0 #000, 0 0 24px #000; }

.txt-dblue { color: var(--dblue); }
.txt-lblue { color: var(--lblue); }
.txt-dpurple { color: var(--dpurple); }
.txt-purple { color: var(--purple); }
.txt-pink { color: var(--pink); }
.txt-black { color: #000; }

.bg-dblue { background: var(--dblue); }
.bg-lblue { background: var(--lblue); }
.bg-dpurple { background: var(--dpurple); }
.bg-purple { background: var(--purple); }
.bg-pink { background: var(--pink); }
.bg-white { background: #fff; }
.bg-black { background: #000; }

.bg-img { position: relative; }

.z3, .bg-img > *:not(img), .dirt-sides > *:not(.dirt-helper) { position: relative; z-index: 3; }

.dirt-sides { position: relative; width: 100%; padding: 140px max(12vw, calc(50vw - 800px)); }
.dirt-helper { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }

.dirt-sides:before, .dirt-sides:after, .dirt-helper:before, .dirt-helper:after { position: absolute; content: ""; height: calc(100% - 120px); }

.dirt-sides:before, .dirt-helper:before { left: 0; border-top-right-radius: 16px; border-bottom-right-radius: 16px; }

.dirt-sides:after, .dirt-helper:after { right: 0; border-top-left-radius: 16px; border-bottom-left-radius: 16px; }

.dirt-sides:before, .dirt-sides:after { z-index: 2; width: min(5.5vw, 180px); background: var(--dpurple); background-image: url('/siteart/bg-soil.png'); background-size: cover; background-repeat: no-repeat; }

.dirt-helper:before, .dirt-helper:after { z-index: 1; width: min(calc(5.5vw + 20px), 200px); border: 1px solid var(--dblue); }

.dirt-sides:before { bottom: 24px; background-position: 0% 100%; }

.dirt-sides:after { top: 24px; background-position: 100% 0%; }

.dirt-helper:before { bottom: 44px; border-left: none; }

.dirt-helper:after { top: 44px; border-right: none; }

.width50 { width: 50%; }
.width100 { width: 100%; }

.padtb-20 { padding-top: 20px; padding-bottom: 20px; }
.padtb-40 { padding-top: 40px; padding-bottom: 40px; }
.padtb-50 { padding-top: 50px; padding-bottom: 50px; }
.padtb-80 { padding-top: 80px; padding-bottom: 80px; }

.padlr-norm { padding-left: max(5vw, calc(50vw - 1000px)); padding-right: max(5vw, calc(50vw - 1000px)); }

.margt-neg12 { margin-top: -12px; }
.margt-12 { margin-top: 12px; }
.margt-16 { margin-top: 16px; }
.margt-20 { margin-top: 20px; }
.margt-40 { margin-top: 40px; }

.margb-neg40 { margin-bottom: -40px; }
.margb-neg4 { margin-bottom: -4px; }
.margb-8 { margin-bottom: 8px; }
.margb-16 { margin-bottom: 16px; }
.margb-80 { margin-bottom: 80px; }

.marglr-auto { margin-left: auto; margin-right: auto; }

.colgap-24 { column-gap: 24px; }
.colgap-60 { column-gap: 60px; }
.colgap-lg { column-gap: min(200px, 10vw); }

.rowgap-24 { row-gap: 24px; }
.rowgap-24 { row-gap: 24px; }
.rowgap-32 { row-gap: 32px; }
.rowgap-40 { row-gap: 40px; }
.rowgap-50 { row-gap: 50px; }

/* forced styles */
.txt-bold { font-weight: 900!important; }

.force-bora-0 { border-radius: 0!important; }

.force-colgap-0 { column-gap: 0!important; }
.force-rowgap-0 { row-gap: 0!important; }

/*-------- FORM STYLES now located in formstyles.css --------------------*/


/*-------- FOOTER STYLES ----------------*/
footer {}

.ojp-footer, footer.ojp-footer { position: relative; width: 100%; padding: 80px max(4.25vw, calc(50vw - 800px)); background: var(--dblue); box-shadow: 0 0 10px rgba(0, 0, 0, .15); display: flex; justify-content: space-between; align-items: center; overflow: hidden; row-gap: 50px; }
.ojp-footer:before { position: absolute; z-index: 1; content: ""; pointer-events: none; background-image: url('/siteart/stripes.jpg'); background-size: 100% 100%; background-repeat: no-repeat; transform: skewX(-20deg); top: 0; width: 306px; height: 100%; right: max(calc(50vw - 800px), 3.7vw); }

.foot-logo-col, .foot-nav { width: 320px; }

.footcol { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.foot-nav, .foot-soc { align-items: flex-start; }
.foot-nav a { position: relative; padding: 8px; min-height: 28px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 400; color: #fff; transition: .25s ease all; }
.foot-nav a:hover { color: var(--pink); }
.foot-soc {}

.foot-logo-col { align-items: center; }
.foot-logo, .foot-logo img { height: 110px; }
.foot-logo { justify-content: center; filter: drop-shadow(1px 1px 0 rgba(17, 38, 50, .2)) drop-shadow(0 2px 4px rgba(17, 38, 50, .5)); }
.foot-logo img { filter: saturate(0) brightness(10); }

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.invlayoutpage .ojp-footer { padding-bottom: 110px!important; }

/* AT styles */
.list.listing { display: flex!important; }

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (min-width: 2201px) {	/* MIND THE MIN-WIDTH */
	.dirt-sides:before, .dirt-sides:after, .dirt-helper:before, .dirt-helper:after { width: 136px; border-radius: 16px; }
	.dirt-helper:before, .dirt-helper:after { border: 1px solid var(--dblue); }
	.dirt-sides:before { left: calc(50vw - 1044px); }
	.dirt-sides:after { right: calc(50vw - 1044px); }
	.dirt-helper:before { left: calc(50vw - 1020px); }
	.dirt-helper:after { right: calc(50vw - 1020px); }
}

@media only screen and (max-width: 1550px) {
	.nav-div { padding-left: 50px; }
}

@media only screen and (max-width: 1500px) {
	.invbox:before { height: calc(100% - 80px); }
	.inv-both:before, .invbox img { height: 140px; }
	
	.dirt-sides { padding: 100px 11.5vw; }
	
	.ojp-footer, footer.ojp-footer { padding: 60px 4.75vw; }
	.ojp-footer:before { width: 250px; right: 6vw; }
	.foot-logo-col, .foot-nav { width: 300px; }
	.foot-logo, .foot-logo img { height: 96px; }
}

@media only screen and (max-width: 1450px) {
	.ojp-header, header.ojp-header { padding: 0 32px; margin-bottom: -91px; }
	.ojp-header, header.ojp-header, .header-logo, .header-logo img { height: 90px; }
	.nav-div { padding-left: 36px; }
	.headersearch-holder { top: calc(100% + 20px); right: 32px; }
}

@media only screen and (max-width: 1400px) {
	.invbox { width: calc(20% - 8px); margin: 20px 4px; }
}

@media only screen and (max-width: 1280px) {
	.inv-title { font-size: 24px; }
	
	.pill-sect { width: 88vw; }
	.pill-sect > .content-sect { padding: 36px 3.75vw; }
}

@media only screen and (max-width: 1220px) {
	.invbox { width: calc(25% - 8px); }
	.all-invbox { width: calc(50% - 24px); margin: 0 0 20px 24px; }
}

@media only screen and (max-width: 1200px) {
	.ojp-header, header.ojp-header { padding: 0 12px 0 24px; margin-bottom: -87px; }
	.ojp-header, header.ojp-header, .header-logo, .header-logo img { height: 86px; }
	.header-logo img { padding-top: 8px; }
	.nav-div { padding-left: 24px; }
	.headersearch-holder { top: calc(100% + 16px); right: 12px; }
}

@media only screen and (max-width: 1150px) {
	.inv-saletitle, .inv-renttitle { height: 60px; }
	
	.ojp-footer, footer.ojp-footer { padding: 60px 4.75vw; }
	.ojp-footer:before { width: 250px; right: 6vw; }
	.foot-logo-col, .foot-nav { width: 300px; }
	.foot-logo, .foot-logo img { height: 96px; }
}

@media only screen and (max-width: 1080px) {
	.invbox:before { height: calc(100% - 60px); }
	.inv-both:before, .invbox img { height: 120px; }
}

/* switch to mobile nav */
@media only screen and (max-width: 1050px) {
	.invbox { width: calc(33.333333% - 8px); }
	.all-invbox { width: calc(66% - 24px); }
	
	.ojp-footer, footer.ojp-footer { flex-wrap: wrap; padding: 50px 4.5vw; }
	.ojp-footer:before { width: 32%; height: 260px; right: 10%; }
	.foot-logo-col, .foot-soc { width: 50%; }
	.foot-soc { order: 1; }
	.foot-logo-col { order: 2; padding-bottom: 50px; }
	.foot-logo, .foot-logo img { height: 86px; }
	.foot-nav { order: 3; width: 100%; flex-direction: row; justify-content: space-around; align-items: center; }
	.foot-nav a { min-height: 50px; }
}

@media only screen and (max-width: 1000px) {
	.pill-sect > .content-sect { width: 360px; }
	.pillimg { width: calc(100% - 360px); }
}

@media only screen and (min-width: 801px) {	/* MIND THE MIN-WIDTH */
	.show800 { display: none!important; }
}

@media only screen and (max-width: 800px) {
	.hide800 { display: none!important; }
	
	.ojp-header, header.ojp-header { padding: 0 8px 0 20px; }
	.nav-div { padding-left: 8px; }
	
	.invbox { width: calc(50% - 8px); }
	.all-invbox { width: 98%; margin: 32px auto 0 auto; }
	
	.pill-sect { flex-direction: column; }
	.pill-sect > .content-sect, .pillimg { width: 100%; }
	.pillimg, .map-div iframe { min-height: 320px; }
	
	.dirt-sides { padding-top: 60px; padding-bottom: 60px; }
	.dirt-helper:before, .dirt-helper:after { width: calc(5.5vw + 12px); }
	.dirt-helper:before { bottom: 36px; }
	.dirt-helper:after { top: 36px; }
}

@media only screen and (max-width: 750px) {
	
}

@media only screen and (max-width: 650px) {
	.ojp-header, header.ojp-header { height: 136px; margin-bottom: -137px; padding: 50px 0 0 0; }
	.header-left { padding-left: 16px; width: 100%; justify-content: space-between; }
	.header-logo, .header-logo img { height: 86px; }
	.header-right { position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: var(--dpurple); justify-content: space-around; }
	.header-right a.listed, .header-right a.listed i, .header-right a.listed span { color: #fff!important; }
	.header-right a.listed:hover, .header-right a.listed:hover i, .header-right a.listed:hover span { color: var(--pink)!important; }
	.header-right a.listed { padding: 0 5vw; }
	.header-right a:first-child { padding: 0 7vw; margin-right: auto; }
	
	.ojp-breadcrumbs { margin-top: 0; }
	
	.ojp-footer, footer.ojp-footer { row-gap: 32px; }
	.ojp-footer:before { width: 45%; height: 180px; right: 48%; transform: skewX(-20deg) translateX(50%); }
	.foot-soc, .foot-logo-col { width: 100%; }
	.foot-logo-col { order: 1; }
	.foot-soc { order: 2; align-items: center; }
	.foot-nav { flex-direction: column; }
	.foot-nav a { width: 100%; }
}

@media only screen and (max-width: 580px) {
	.dirt-sides { padding: 40px 7.5vw; }
	.dirt-sides:before, .dirt-sides:after { width: 3.5vw; }
	.dirt-helper { display: none!important; }
}

@media only screen and (max-width: 550px) {
	.invbox { margin: 12px 4px; }
	.inv-half, .inv-saletitle, .inv-renttitle { width: 100%; height: 50px; }
	.inv-forsale { bottom: 50px; }
	.salepage .inv-forsale { bottom: 0; }
	.inv-saletitle, .inv-renttitle { padding: 8px!important; font-size: 17px; }
	.inv-saletitle { padding-top: 12px!important; }
	.inv-renttitle { padding-bottom: 16px!important; }
}

@media only screen and (max-width: 500px) {
	.inv-title { font-size: 20px; }
}

@media only screen and (max-width: 480px) {
	.ojp-footer:before { width: 60%; }
}

@media only screen and (max-width: 420px) {
	.dirt-sides { padding-left: 4.5vw; padding-right: 4.5vw; }
	.dirt-sides:before, .dirt-sides:after { display: none!important; }
}

@media only screen and (max-width: 400px) {
	.inv-sect { padding-left: 2.5vw; padding-right: 2.5vw; }
	.invbox { width: 100%; }
	.inv-half, .inv-saletitle, .inv-renttitle { width: 50%; }
	.inv-forsale { bottom: 0; }
	.inv-saletitle, .inv-renttitle { padding-top: 8px!important; padding-bottom: 16px!important; }
}

@media only screen and (max-width: 350px) {
	.ojp-footer:before { display: none!important; }
	.foot-logo-col { padding-bottom: 10px; }
}

@media only screen and (max-width: 320px) {
	.hide320 { display: none!important; }
	.header-right a:first-child { width: 100%; padding: 0 5vw; margin-right: 0; }
}

@media only screen and (max-width: 300px) {
	.btnclass { width: 100%; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; }
}

@media only screen and (max-width: 250px) {
	.inv-half, .inv-saletitle:not(.all-saletitle), .inv-renttitle:not(.all-renttitle) { width: 100%; height: 50px; }
	.inv-forsale { bottom: 50px; }
	.salepage .inv-forsale { bottom: 0; }
	.inv-saletitle, .inv-renttitle { padding: 8px!important; }
	.inv-saletitle:not(.all-saletitle) { padding-top: 12px!important; }
	.inv-renttitle:not(.all-renttitle) { padding-bottom: 16px!important; }
}

@media only screen and (max-width: 220px) {
	.inv-title { font-size: 16px; }
	.inv-saletitle, .inv-renttitle { font-size: 15px; }
}

@media only screen and (max-width: 200px) {
	.header-right { display: none!important; }
	
	.ojp-header, header.ojp-header { height: 76px; margin-bottom: -77px; padding:0; }
	.header-logo, .header-logo img { height: 76px; }
}






