/* VARS */
:root {
  /* COLOR SCHEME */

  /* alt scheme */
  --primary: #44749dff;
  --secondary: #bdb8adff;
  --black: #030303ff;
  --med-grey: #333333ff;
  --grey: #666666ff;
  --light-grey: #ccccccff;
  --off-white: #f1f1f1ff;
  --white: #fafafaff;
  --green: #6f917cff;
  --light-green: #d7f4e3ff;
  --orange: #ca711eff;
  --yellow: #ede574;
  --light-orange: #ebe7e0ff;
  --light-red: #ac939dff;
  --dark-red: #aa0044ff;
  --trans: #f1f1f133;
  --trans-black: #33333366;
  --box-shadow: #eeeeeeff;
  --secondary-light: #ebe7e0ff;
  --secondary-grey: #333333ff;

  /* FONT SIZES */
  --x-small: 0.6rem;
  --small: 0.75rem;
  --medium: 0.92rem;
  --large: 1.25rem;
  --x-large: 1.5rem;
  --xx-large: 2rem;
  --xxx-large: 4rem;
  --xxxx-large: 9rem;

  /* FONT WEIGHT */
  --light: 400;
  --med: 500;
  --heavy: 700;
  --bold: 900;

  /* ANIMATION SPEEDS */
  --very-slow: 1s;
  --slow: 0.8s;
  --fast: 0.7s;
  --very-fast: 0.3s;
  
  /* BORDER RADIUS */
  --round-very-small: 1px;
  --round-small: 5px;
  --round-big: 10px;
  --circle: 50%;
}

/* animatons */
@keyframes fade {
    0% {box-shadow:2px 2px 50px 2px #aaaaaaff;}
    50% {box-shadow:2px 2px 50px 2px #aaaaaa00;}
    100% {box-shadow:2px 2px 50px 2px #aaaaaaff;}
}


/* FONTS */
@font-face {
  font-family: "helvetica";
  src: url("../fonts/helvetica.ttf") format("truetype");
  src: url("../fonts/helvetica.woff") format("woff");
}

@font-face {
  font-family: "vogue";
  src: url("../fonts/vogue.ttf") format("truetype");
  src: url("../fonts/vogue.woff") format("woff");
}



/* CLEARFIX */
* {
  box-sizing: border-box;
}

html {
  background:var(--off-white);
  scroll-behavior: smooth;
}

.clearfix:after {
  content: " ";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  font-size: 0;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: helvetica;
  background: var(--off-white);
  overflow-x:hidden;
}

/* MISC */
:focus {
	outline: none;
}

p {
	line-height: 1.5;
	font-size: var(--medium);
  	color: var(--light-grey);
	white-space: pre-line;
}

.overflowHide {
  overflow:hidden;
}

.lineBreak {
	width: 25%;
	border: solid 1px var(--secondary);
	display: block;
	margin: 0px 0px 30px 0px;
}

.disabled {
  display:none;
}

.xl-text {
  font-size: var(--xxx-large);
}

.l-text {
  font-size: var(--xx-large);
}

.dark-text {
  color: var(--black) !important;
}

video, img {
	width: 100%;
    border-radius: var(--round-small)
}

.darkBG {
  background:var(--black);
}

.lightBG {
  background: var(--off-white) !important;
}

.noBG {
  background: none !important;
}

.bgPrimary {
  background:var(--primary);
}

.bgSecondary {
  background:var(--secondary);
}

.bgSize {
  background-position: center !important;
  background-size: cover;
}

.parallax {
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover;
}

.fullHeight {
  min-height:100vh;
}

.fullWidth {
  min-width: 100vw;
}

.halfWidth {
  width: 50vw;
}
.pad {
  padding-top:50px;
}

.largeIcon {
	font-size: var(--xxx-large);
	text-align: center;
	text-shadow: 2px 2px 5px #03030344;
}

.centered {
  text-align:center;
}

.green {
	padding: 8px;
	text-align: center;
	display: block;
	line-height: 1.5;
	font-size: var(--medium);
	background: var(--green);
	border-radius: var(--round-small);
	color: var(--off-white);
}

.red {
	padding: 8px;
	text-align: center;
	display: block;
	line-height: 1.5;
	font-size: var(--medium);
	background: var(--dark-red);
	border-radius: var(--round-small);
	color: var(--off-white) !important;
}

.orange {
	padding: 8px;
	text-align: center;
	display: block;
	line-height: 1.5;
	font-size: var(--medium);
	background: var(--orange);
	border-radius: var(--round-small);
	color: var(--off-white) !important;
}

.noRad {
	border-radius: 0px !important;
}

.underline {
  border-bottom: solid 1px var(--secondary);
}

.copyright {
  font-size:var(--small);
}

.bold {
	font-weight: 900;
}

/* ACCORDIAN */
.accordian {
	display: flex;
	flex-flow: column;
  	gap:5px;
	width: 100%;
}

.accItem {
	width: 100%;
	padding: 10px;
	border: solid 1px var(--black);
	border-radius: var(--round-small);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.accInfo ul {
	display: flex;
	flex-flow: column;
	justify-content: center;
	gap: 5px;
}

.accInfo ul {
	background: var(--trans);
	border-radius: var(--round-small);
	padding: 10px;
}

.accInfo li {
	text-align: left;
}

/* FLEX */
.flex {
	display: flex;
	gap: 30px;
}

.column {
  flex-flow:column;
}

.wrap {
  flex-flow:wrap;
}

.spaceBetween {
  justify-content: space-between;
}

.flex-smallgap {
	display: flex;
	gap: 20px;
}

.flex-nogap {
  display:flex;
}

.flex img, .flex video {
  padding-right:30px;
}

.col-1 {
  flex: 0 0 33%;
}

.col-1-wrap {
  flex: 0 0 calc(33% - 30px);
}

.col-2 {
  flex: 0 0 67%;
}

.col-3 {
	flex-grow: 1;
	display: flex;
	flex-flow: column;
	width: 100%;
}

.col-4 {
  width: 20%;
  flex: 0 0 20%;
}

.col-5 {
  width: 80%;
  flex: 0 0 80%;
}

.col-quart-wrap {
  width: calc(25% - 30px);
  flex: 0 0 calc(25% - 30px);
}

.col-half {
  width:50%;
  flex: 0 0 50%;
}

.col-input {
	width:25rem;
	flex: 0 0 25rem;
}

iframe {
	width: 100vw;
	margin: auto;
	border: solid 0px;
	display: flex;
	overflow: hidden !important;
}

/* HEADINGS */
h1 {
  font-size: var(--xx-large);
  margin: 10px 0px 10px 0px;
}

h2 {
  font-size: var(--x-large);
  margin: 5px 0px 5px 0px;
}

h3 {
  font-size: var(--x-large);
  margin: 5px 0px 5px 0px;
}

h4 {
  font-size: var(--x-small);
  margin: 5px 0px 5px 0px;
}


/* LINKS */
a, .link{
  text-decoration: none;
  font-size: var(--small);
  color: var(--primary);
  font-family: helvetica;
  transition: var(--slow);
  cursor:pointer;
}

a:hover, .link:hover{
  color: var(--secondary);
  transition: var(--fast);
}

.a-enter-vr {
  display:none;
}

.burger {
  cursor: pointer;
  color: var(--off-white);
}

/* BUTTONS */

button, .Submit {
  border: none;
  padding:15px;
  margin-top: 10px;
  font-size: var(--medium);
  border-radius: 5px;
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  transition: var(--fast);
}

.SubmitTrans {
  border: none;
  padding:15px;
  margin-top: 10px;
  font-size: var(--medium);
  border-radius: 5px;
  background: none;
  color: var(--off-white);
  border: solid 1px var(--off-white);
  transition: var(--very-fast);
  cursor: pointer;
}

.SubmitTrans {
  border: none;
  padding:15px;
  margin-top: 10px;
  font-size: var(--medium);
  border-radius: 5px;
  background: none;
  color: var(--off-white);
  border: solid 1px var(--off-white);
  transition: var(--very-fast);
  cursor: pointer;
}

button:hover, .Submit:hover {
  background: var(--secondary);
  color: var(--off-white);
  transition: var(--fast);
}

.darkHover:hover {
  background: var(--black);
  color: var(--white);
  transition: var(--very-fast);
}

.darkBtn {
  background: var(--secondary);
  color: var(--white);
}

.darkBtn:hover {
  background: var(--black);
  color: var(--white);
}

button a {
  font-size: var(--medium) !important;
}

/* FORMS AND FIELDS */
form {
  width:20rem;
}

form .green {
  padding: 40px;
  text-align: center;
  display: block;
  line-height: 1.5;
  font-size: var(--medium);
  background: var(--green);
  border-radius: var(--round-small);
  color: var(--med-grey);
}

.errorMsg {
	background: var(--dark-red);
	color: var(--off-white);
	padding: 10px;
	border-radius: 5px;
	width: 80%;
	margin: auto;
	display: block;
	text-align: center;
	font-size: var(--small);
}

.succMsg {
	background: var(--green);
	color: var(--off-white);
	padding: 10px;
	border-radius: 5px;
	width: 80%;
	margin: auto;
	display: block;
	text-align: center;
	font-size: var(--small);
}

.check {
  display:flex; 
  gap: 5px;
  flex-wrap: wrap;
}

.questionItem {
	display: flex;
	flex-flow: column;
	flex: 1 1 18%;
	justify-content: center;
	align-items: center;
}

.question span {
	cursor: pointer;
	text-align: center;
}

.warn {
	background: var(--light-orange);
	padding: 10px;
	width: 60%;
	border-radius: var(--round-small);
}

.questu .Submit {
	color: var(--off-white);
	text-align: center;
}

.questu .Submit:hover {
	color: var(--black);
	text-align: center;
}

.questu {
	width: 50%;
}

.twin .question, .qLife .question {
	background: var(--trans-light);
	padding: 20px;
	border-radius: var(--round-small);
}

.deployment {
	border: solid 1px var(--off-white);
	padding: 6px;
	color: var(--off-white);
	border-radius: var(--round-small);
  	transition: var(--fast);
  	cursor: pointer;
}

.deployment:hover {
	background: var(--off-white);
  	color: var(--black);
  	transition: var(--fast);
}

.question li i {
	font-size: var(--small);
}


::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

.check a {
	color: var(--secondary);
	font-size: var(--medium);
}

label {
  margin:40px 0px 40px 0px;
  display:block;
}

form button, form .Submit {
	float: right;
}

::placeholder {
  opacity: 1;
  color: var(--white);
}

.lightBG ::placeholder {
  opacity: 1;
  color: var(--grey);
}

select {
	border: solid 1px var(--off-white);
	border-radius: var(--round-small);
	padding: 15px;
	background: none;
	color: var(--off-white);
}

.textInput {
	background: none;
	padding: 10px;
  margin:0px;
	border-bottom: solid 1px var(--secondary);
	width: 20rem;
	font-size: var(--medium);
	color: var(--secondary);
}

.checkBox {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--grey);
	cursor:pointer;
	border-bottom:0px !important;
}

.checkBox span {
	font-size: var(--small) !important;
}

.checkBox i {
	transition:var(--fast);
}

.checkBox i:hover {
	color: var(--primary);
	transition:var(--fast);
}

textarea {
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	font-size: var(--small) !important;
	color: var(--secondary) !important;
	resize: none;
}

.rightNav .textInput {
	width: calc(100% - 10px);
	display: block;
	margin: 5px;
}

.input {
	margin: 10px;
	padding: 8px;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	color: var(--secondary);
}

.checkInput {
	width: fit-content;
	margin: 6px;
}

input {
	border: none;
	/* margin: 0px 0px 0px 10px; */
}

::placeholder {
  color: var(--secondary);
  font-size: var(--small);
}

:-ms-input-placeholder {
  color: var(--secondary);
  font-size: var(--small);
}

.imgInput {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow:column;
  width: 100%;
  height:100px;
  padding-right: 10px;
  min-height: 77px;
  cursor:pointer;
  transition: var(--very-fast);
}

.imgInput i {
  font-size: var(--xx-large);
  transition: var(--very-fast);
}

.imgInput span {
  margin:10px 0px 0px 0px !important;
  transition: var(--very-fast);
}

.imgInput:hover i, .imgInput:hover span {
  color: var(--light-grey) !important;
  transition:var(--very-fast);
}

.removeImg {
	position: relative;
	color: var(--secondary) !important;
	top: -80px;
	right: -47px;
	background: var(--off-white);
	border-radius: var(--circle);
	padding: 2px;
	transition:var(--fast);
	cursor:pointer;
}

.removeImg:hover {
	position: relative;
	color: var(--black) !important;
	transition:var(--fast);
}

.removeImg i {
	font-size: var(--large);
}

.imgInput input {
	height: 20px;
	display: block;
	position: relative;
	z-index: 999;
	width: 100%;
	opacity: 0;
	margin-top: -20px;
}

.search {
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px var(--secondary);
	border-radius: var(--round-big);
	width: fit-content;
	padding:0px;
    padding-left:10px;
	color:var(--secondary);
}

.search input {
  margin-left:10px;
	padding: 0px;
	border: none;
  width:15rem;
}

.All {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary);
}

.All option{
	color: var(--primary);
}

.search .Submit {
	background: none;
	color: var(--primary);
	width: fit-content;
	border-radius: 0px 10px 10px 0px;
  	height:53px;
}

.search .Submit:hover {
  background: var(--primary);
  color:var(--off-white);
}


/* MAIN */
#container {
  display: flex;
  flex-flow:column;
}


.hide {
  /* width: 68px !important; */
  display:none !important;
}


/* NAVIGATION */

/* home navigation */

/* landing page navigation */
.navbar {
	display: flex;
	width: 100vw;
	padding: 15px 5vw 15px 5vw;
	align-items: center;
    justify-content:space-between;
    gap:20px;
}

.navbar .Submit {
	padding: 15px;
	float: right;
	margin: 0px;
	font-size: var(--medium);
}

.navbar .logo img {
	width: 140px;
  z-index:1000;
  position:relative;
}

.navbar .logo {
  color: var(--white);
  display:inline-flex;
  align-items:center;
  font-size: var(--medium);
  margin:0px;
  float:left;
}

.navbar .logo span {
	padding: 3px 0px 0px 3px;
}

/* logo */
.logo {
  margin: 0px 0px 10px 0px;
  justify-content:center;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.selected {
  background: var(--primary);
  color: var(--off-white) !important;
  transition: var(--fast);
}

/* SECTION */
.section {
	width: 100vw;
	color: var(--white);
	padding: 40px;
	max-width: 100vw;
	margin: 0px;
	padding-left: 5vw;
	padding-right: 5vw;
}

/* modal */
.modalBg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: var(--trans-black);
	top: 0px;
	left: 0px;
	z-index:999;
	overflow:scroll;
	display:flex;
	justify-content: center;
	align-items: center;
}

.modal {
	width: 70vw;
	display: flex;
	max-height: 80vh;
	border-radius: var(--round-small);
	flex-flow:column;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
	position:relative;
	z-index:999;
	padding:10px;
	background:var(--off-white);
	overflow:hidden;
}

.modal span i {
	float: right;
	font-size: var(--x-large);
	padding: 20px;
    cursor:pointer;
    color: var(--secondary);
    transition: var(--fast);
}

.modal span i:hover {
  color: var(--primary);
  transition: var(--fast);
}

.closeModal {
	position: absolute;
	z-index: 999;
	display: flex;
	right: 0px;
}

.modalLogo {
	position: absolute;
	z-index: 999;
	right: 15px;
	display: flex;
	bottom: 15px;
}

.modalLogo img {
	width: 70px;
}

.smallModal {
	width: 34vw;
	min-height: fit-content;
}

/* FOOTER */
.footer {
	width: 100vw;
	background: var(--secondary-light);
	padding: 7px;
	padding-left: 40px;
	padding-right: 40px;
	display: flex;
	justify-content: center;
  	color: var(--med-grey);
}

.date {
	font-size: var(--small);
}

.date a {
	color: var(--off-white);
}

.footer ul {
	display: flex;
	width: 100%;
	gap: 5px;
	justify-content: center;
  height:50px;
  align-items:center;
}

.footer li {
	float: left;
	padding: 5px;
  margin-bottom:0px;
}

.footer a {
  color:var(--primary);
}

.footer .textInput {
	width: 150px;
	padding: 3px;
	border: none;
	background: var(--grey);
}

.footer a:hover {
  color:var(--secondary);
}

/* ADD NEW CSS HERE */
.pinForm {
	height: 100vh;
}

.pinForm {
	height: 100vh;
	justify-content: center;
	align-items: center;
}

.insertPin {
	padding: 20px;
	width: 40vw;
	border-radius: var(--round-small);
}

.buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.recPage .Submit, .recPage button {
	flex: 0 0 calc(50% - 20px);
	margin: auto;
}

#container {
	width: 100vw;
	display: flex;
	justify-content: center;
	align-content: center;
	padding: 20px;
	padding-top: 20px;
	gap: 20px;
}

#gdpr-cookie-message {
	position: fixed;
	bottom: 0px;
	background: var(--primary);
	width: 100vw;
	padding: 10px 5vw 10px 5vw;
}

#gdpr-cookie-types ul {
	display: flex;
	gap: 10px;
}

#gdpr-cookie-types label {
	margin: 10px !important;
}

#gdpr-cookie-advanced {
	display: none;
}

#gdpr-cookie-types li {
	display: flex;
}

.cookieBtns button {
	padding: 10px;
	margin: 0px;
	background: var(--off-white);
	color: var(--primary);
}

.cookieBtns button:hover {
	background: var(--secondary);
	color: var(--off-white);
}

.cookieBtns {
	display: flex;
	gap: 20px;
}

.heygen {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin:auto;
}

#status {
	font-size:var(--large);
}

.greyed {
	background:var(--grey) !important;
}

table {
	table-layout:fixed;
	width:100%;
}

form {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 20px;
	background: var(--off-white);
}

.Submit {
	text-align: center !important;
}

.cookieDesc {
	margin: 10px;
	margin-left: 0px;
}

.loginForm {
	display: flex;
	width: calc(20rem + 96px);
	justify-content: center;
	align-content: center;
	margin: auto;
	background: var(--off-white);
	padding: 40px;
	border-radius: var(--round-small);
	flex-flow: column;
}

.loginForm form {
	width: 100%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-content: center;
}

.loginForm label {
	text-align: center;
	margin-top: 0px;
	border-bottom: solid 1px var(--secondary);
	color: var(--secondary);
}

.loginForm .textInput {
	border-bottom: 0px;
}

.loginForm h1 {
	text-align: center;
  color: var(--primary);
}

.loginForm h3 {
	font-size: var(--medium);
	font-weight: var(--light);
	text-align: center;
}

#regForm .Submit {
	width: 100%;
	margin: 0px;
}

.socialLogin {
	width: 100%;
	display: flex;
	padding-bottom: 10px;
}

.socialLogin .google {
	background: #4285f4;
	color: var(--off-white);
	width: 100%;
	text-align: center;
}

.socialLogin .facebook {
	background: #1877F2;
	color: var(--off-white);
	width: 100%;
	text-align: center;
}

.socialLogin .apple {
	background: #000000;
	color: var(--off-white);
	width: 100%;
	text-align: center;
}

.socialLogin .twitter {
	background: #1DA1F2;
	color: var(--off-white);
	width: 100%;
	text-align: center;
}

.socialLogin .linkedin {
	background: #0077B5;
	color: var(--off-white);
	width: 100%;
	text-align: center;
}

.google {
	background: #4285f4;
	color: var(--off-white);
	text-align: center;
}

.apple {
	background: #000000;
	color: var(--off-white);
	text-align: center;
}

.logBg {
	background-position: center;
 	 min-height: calc(100vh - 30px);
  	padding-bottom:20px;
}

.logBg .navbar {
	background: none;
}

.forgot {
	display: flex;
	padding-bottom: 20px;
	padding-top: 20px;
  justify-content:center;
}

.loginForm .lineBreak {
	margin: auto;
	margin-bottom: 20px;
}

.footNav {
  background: var(--secondary);
}

.footNav a:hover {
	color: var(--off-white);
}

.footNav a {
	font-size: var(--medium);
}

.footNav ul {
	display: flex;
	flex-flow: column;
	gap: 5px;
}

.footNav .socials {
	flex-flow: row;
	font-size: var(--large);
	padding-left: 3px;
}

.footNav .socials a {
	font-size: var(--xx-large);
	color: var(--off-white);
}

.categories {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
	color: var(--primary);
}

.search i {
	padding-left: 10px;
}

.search select {
  color:var(--primary);
  border:none;
  cursor: pointer;
  margin-right:10px;
}

.search input {
  margin-right:10px;
}

.icons {
	display: flex;
	gap: 20px;
	font-size: var(--x-large);
	color: var(--primary);
	height:25px;
}

.icons span {
	cursor: pointer;
	transition: var(--fast);
}

.icons .red {
	position: relative;
	border-radius: var(--circle);
	height: 20px;
	width: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--small);
	padding-top: 10px;
	top: -35px;
	left: 10px;
}

.geo {
	color: var(--primary);
	cursor: pointer;
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
  	transition: var(--fast);
	width:150px;
}

.geo i {
	font-size: var(--large);
}

.geo:hover {
	color: var(--secondary);
  transition: var(--fast);
}

.dropdown .pfp {
  width: 50px;
	cursor: pointer;
	border-radius: var(--circle);
}

.dropdown a {
  transition: var(--fast);
  cursor:pointer;
}

.dropdown a:hover {
  transition: var(--fast);
  cursor:pointer;
  opacity: 0.7;
}

.dropdown .toolMenu {
	gap: 15px;
	font-size: var(--large);
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.dropdown .toolMenu a {
	font-size: var(--medium);
}

.langs ul {
	display: flex;
	flex-flow: column;
	gap: 10px;
}

.icons span:hover {
	cursor: pointer;
  color:var(--secondary);
	transition: var(--fast);
}

.navbar button {
  margin:0px;
}

.rightnav {
	display: flex;
	gap: 20px;
	justify-content: right;
	align-items: center;
}

.logReg {
  display:flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.logReg span {
	color: var(--med-grey);
	font-size: var(--small);
}

.navbar {
	background: var(--white);
}

.headLinks ul {
	display: flex;
	gap: 20px;
	font-size: var(--large);
}

.headLinks {
	padding-top: 10px;
	padding-left: 5vw;
	padding-right: 5vw;
	box-shadow: 0px 3px 5px 1px var(--box-shadow);
	padding-bottom: 10px;
	background:var(--white);
}

.headLinks a {
	font-size: var(--medium);
}

.toolMenu {
	display: flex;
	flex-flow: column;
	border: solid 1px var(--trans-black);
	border-radius: var(--round-small);
	padding: 10px;
	position: absolute;
  z-index:999;
	background: var(--white);
	box-shadow: 0px 0px 5px var(--light-grey);
}

.mobMenu {
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	padding: 10px;
	font-size: var(--large);
	width: fit-content;
	aspect-ratio:1/1;
}

.mobMenu .toolMenu {
	width: 85vw;
	position: absolute;
	left: 5vw;
	top: 150px;
}

.mobMenu li {
	padding: 5px;
}

.mobSearch li a {
	font-size: var(--medium);
	padding: 10px;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.socials {
	display: flex;
	gap: 10px;
	padding-left: 10px;
}

.socials a {
	font-size: var(--xx-large);
	color: var(--off-white);
}

.socials a:hover {
	color: var(--primary);
}

.listings {
	display: flex;
	gap: 20px;
	width: 100%;
	padding: 0;
	padding-top: 10px;
	flex-wrap: wrap;
  	align-content: flex-start;
}

.listingsTable {
	padding: 0px;
	display: flex;
	flex-flow: column;
	gap: 20px;
}

.listingsTable.endless {
	margin-bottom: 120px;
}

.listingsTable .listing {
	flex: 0 0 100% !important;
	max-height:200px !important;
}

.listingsTable .listing img {
	min-height: 200px !important;
	max-height: 200px !important;
	border-radius: var(--round-small) 0px 0px var(--round-small);
	object-fit: cover;
	max-width: 300px;
	min-width: 300px;
}

.listingsTable a {
	display: flex;
	gap: 20px;
	height:200px
}

.listingsTable .Submit {
	height: 50px;
	justify-content: center;
	align-items: center;
	margin: 0px;
}

.listingsTable .details {
	display: flex;
	flex: 1;
	flex-flow: row;
	justify-content: space-between;
	flex-wrap:wrap;
}

.listingsTable .details div {
	flex: 0 0 70%;
}

.listingsTable p {
	color: var(--grey);
}

.listingsTable .price {
	font-size: var(--x-large);
	align-items: baseline;
}

.listingsTable .fav {
	display: flex;
	align-items: end;
}

.ban .squareSpace img {
	width: 100%;
	height: auto;
}

.ban a {
	height: auto;
}

.ban .squareSpace {
	height: auto;
	width: 90vw;
}

.ban {
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.squareSpace {
	width: 100%;
	height: 300px;
	max-height:300px !important;
	background: var(--secondary-light);
}

.listingsTable .squareSpace {
	width: 600px;
	height: 160px;
	background: var(--secondary-light);
}

.listingsTable .squareSpace a, .listingsTable .squareSpace img {
	width: 600px !important;
	height: 160px !important;
	max-height: 160px !important;
	max-width: 600px !important;
	min-height: 160px !important;
}

.squareSpace img {
	width: 100%;
	height: 300px;
	max-height: 300px !important;
}

.squareSpace a {
	height: 300px;
	display: block;
}

.listing:has(.squareSpace) {
	border: 0px;
	justify-content: center;
	display: flex;
	align-items: center;
}

.endless {
	margin-bottom: 40px;
}

.filters {
	flex: 0 0 calc(20% - 20px);
	width: 20%;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	padding: 15px;
	padding-top: 20px;
  margin-bottom:40px;
}

.filters li {
	padding-bottom: 7px;
}

.filters h3 {
	font-weight: var(--light);
	font-size: var(--medium);
	cursor:pointer;
	transition:var(--fast);
	color: var(--med-grey);
}

.filters h3:hover {
	color: var(--secondary);
	transition:var(--fast);
}

.searchItems {
	display: flex;
    gap:20px;
	align-items: flex-start;
}

.noBrokers {
	display: flex;
	flex-flow: column;
	color: var(--secondary);
	font-size: var(--xxx-large);
	justify-content: center;
	align-items: center;
}

.noBrokers h2{
	color: var(--secondary) !important;
	font-size: var(--xx-large);
}

.hot {
	color: var(--primary);
	position: absolute;
	margin: 10px;
	background: var(--off-white);
	border-radius: var(--round-small);
	padding: 5px;
	font-size: var(--small);
}

.listing {
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	cursor: pointer;
	transition:var(--fast);
	flex: 0 0 calc(20% - 16px);
}

.listing:hover {
	opacity: 0.7;
  	transition:var(--fast);
}

.noList i, .noList h2 {
	color: var(--secondary) !important;
	font-size: var(--xxx-large);
	border: 0px !important;
}

.noList {
	border: solid 0px !important;
	display: flex;
	flex-flow: column;
	gap: 20px;
	justify-content: center;
	align-items: center;
	flex: 0 0 100% !important;
	margin-bottom: 40px;
}


.listing img {
	padding: 0;
	border-radius: var(--round-small) var(--round-small) 0px 0px;
	object-fit: cover;
	min-height: 180px;
	max-height: 180px;
}

.searchPage .listing img {
	padding: 0;
	border-radius: var(--round-small) var(--round-small) 0px 0px;
	object-fit: cover;
	min-height: 120px;
	max-height: 120px;
}

.searchPage .details {
	justify-content: space-between;
	height: 175px;
}

.broker .details {
	height: inherit;
}

.details {
	padding: 10px;
	color: var(--black);
	display: flex;
	flex-direction: column;
}


.price {
	color: var(--med-grey);
	justify-content: space-between;
	display: flex;
	align-items: center;
	font-size: var(--large);
}

.itemLoc {
	color: var(--grey);
	font-size: var(--small);
	padding-bottom: 10px;
}

.listing h3 {
	color: var(--med-grey);
	font-weight: var(--light);
	font-size: var(--medium);
}

.containerInner {
	gap: 0px;
	width: 90vw;
	margin: auto;
}

.containerInner h2 {
	color: var(--med-grey);
    margin-bottom:10px;
}

.format {
	justify-content: right;
	display: flex;
	padding: 10px;
	padding-bottom: 10px;
	gap: 10px;
}

.format .link {
	font-size: var(--x-large);
}

.searchPage h2 {
  margin-bottom: 10px;
}

.searchPage .listing {
	flex: 0 0 calc(25% - 16px);
	max-height: 300px;
}

.searchPage .broker {
	max-height: 300px;
}

.searchPage h4 {
	font-size: var(--medium);
	color: var(--secondary);
	margin: 0px;
	flex: 0 0 100%;
	text-align: right;
}

.broker img {
	min-height: 170px !important;
	max-height: 170px;
}

.searchPage .broker .Submit {
	margin:0px;
}

.categorySection {
	display: flex;
	width: 100%;
	gap: 20px;
	padding:0px;
	margin-top:15px;
}

.category {
	border-radius: var(--circle);
	flex: 0 0 calc(20% - 16px);
	cursor:pointer;
	transition:var(--fast);
}

.category:hover {
	opacity: 0.7;
	transition: var(--fast);
}

.category img {
	padding: 0;
	border-radius: var(--round-small);
	border: solid 1px var(--secondary);
	aspect-ratio: 1;
}

.catTitle {
	color: var(--primary);
	position: relative;
	bottom: 50%;
	font-size: var(--med);
	background: var(--off-white);
	padding: 10px;
	width: fit-content;
	margin: auto;
	border-radius: var(--round-small);
}

.leftSide h2 {
	margin-top: 40px;
	font-weight: var(--light);
}

.bannerSpace {
	width: 160px;
	height: 600px;
	background: var(--secondary-light);
	float: right;
	top:88px;
	position:relative;
	cursor:pointer;
}

.bannerSpace img {
	padding: 0px;
}

.searchItems .listings {
	width: 80%;
	flex: 0 0 80%;
    padding-top:0px;
}

.icons a {
	font-size: var(--x-large);
}

/* terms / privacy css */
.pageTitle {
	height: 300px;
	justify-content: center;
	text-align: center;
	align-content: center;
	align-items: center;
  	background:var(--black);
	background: url("../src/images/privacy1.webp");
	background-position: center;
	background-size: cover;
}

.pageTitle h1 {
	color: var(--white);
	text-shadow: 5px 5px 10px var(--med-grey);
	font-size: var(--xxx-large);
}

/* modal css */
.geoData h3 {
	font-size: var(--medium);
	padding-bottom: 5px;
}

.locModal h2 {
	padding: 20px;
    padding-top: 30px;
	font-size: var(--large);
}

.geoData ul {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.geoData li {
	flex: 0 0 calc(25% - 10px);
}

.modalInfo {
	display: flex;
	gap: 20px;
}

.geoNav {
	flex: 0 0 25%;
	display: flex;
	flex-flow: column;
	align-items: center;
	border-right: solid 1px var(--light-grey);
  	gap:5px;
	height:340px;
	overflow:scroll;
}

.geoNav button {
	width: 160px;
	background: none;
	color: var(--black);
	padding: 10px;
}

.geoNav button:hover {
	background: var(--primary);
	color: var(--off-white);
}

.geoNav .selected {
	background: var(--light-grey);
	color: var(--off-white);
	color: var(--black);
}

/* bis finder css */
.finder {
	width: 100%;
	margin: auto;
	background: var(--primary);
	padding: 20px;
	color: var(--off-white);
	border-radius: var(--round-small);
	display: flex;
	flex-flow: column;
	margin-top: 0px;
}

.finder .errorMsg {
	margin-top: 20px;
	width: fit-content;
	margin-left: 0px;
}

.finder select {
	cursor:pointer;
}

.leftFinder {
	width:70%;
	flex: 0 0 70%;
}

.banner {
	min-height: 200px;
	display: flex;
	justify-content: center;
}

.banner .squareSpace {
	max-height: 160px !important;
	min-height: 160px;
	background: var(--secondary-light);
	width: 600px;
}

.banner img {
	height: 160px;
	padding: 0px;
}

.finderImg {
	width: calc(30% - 30px);
	flex: 0 0 calc(30% - 30px);
	padding-right: 0 !important;
}

.finder .underline {
	border-bottom: solid 1px var(--off-white);
}

.finder h1 {
	font-size: var(--xxx-large);
	color: var(--off-white) !important;
}

.finder h3 {
	padding-top: 15px;
	font-size: var(--x-large);
	font-weight: var(--light);
}

.finder .bold {
	padding: 0px;
	font-weight: var(--bold);
	color: var(--secondary);
	padding-bottom: 20px;
}

.finderForm {
	margin: auto;
	width: 100%;
}

.finderForm div {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	font-size: var(--large);
}

.finderForm .textInput {
	margin-left: 10px;
	margin-right:10px;
	border-bottom: solid 1px var(--off-white);
	color: var(--off-white);
	padding: 0px;
	padding-bottom: 3px;
  	width: auto;
	font-size: var(--large);
}

.finderForm .textInput::placeholder {
	color: var(--off-white);
	font-size: var(--large);
}

.finder .selection {
	border: none;
	border-bottom: solid 1px var(--off-white);
	border-radius: 0px;
	margin-left: 5px;
	margin-right: 5px;
	text-align: center;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 0px;
	padding-bottom: 3px;
}

.finderForm .Submit {
	background: var(--off-white);
	color: var(--primary);
  margin-top:20px;
}

.finderForm .Submit:hover {
	background: var(--secondary);
	color: var(--off-white);
}

/* banner hero */
.hero span, .hero i {
	color: var(--secondary);
}

.hero .All i {
	color: var(--primary);
}

.hero .Submit {
	margin: 0;
	padding: 19px;
	height: 100%;
	background: var(--primary);
	color: var(--off-white);
}

.hero .Submit:hover {
	background: var(--secondary);
	color: var(--off-white);
}

.hero .search {
	height: 60px;
	background: var(--off-white);
	border: 0px;
}

.hero {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 100vw;
	min-height: 25vw;
	flex-flow: column;
	padding-bottom: 0px;
}

.heroImg1 {
	background: url(../src/images/hero1.webp);
	background-position: center;
	background-size: cover;
}

.heroImg2 {
	background: url(../src/images/hero2.webp);
	background-position: center;
	background-size: cover;
}

.heroImg3 {
	background: url(../src/images/hero3.webp);
	background-position: center;
	background-size: cover;
}

.heroImg4 {
	background: url(../src/images/hero4.webp);
	background-position: center;
	background-size: cover;
}

.heroImg5 {
	background: url(../src/images/hero5.webp);
	background-position: center;
	background-size: cover;
}

.heroImg6 {
	background: url(../src/images/hero6.webp);
	background-position: center;
	background-size: cover;
}

.heroImg7 {
	background: url(../src/images/hero7.webp);
	background-position: center;
	background-size: cover;
}

.hero h1 {
	font-size: var(--xxx-large);
	text-shadow: 2px 2px 5px var(--grey);
	margin-bottom: 30px;
	color: var(--off-white) !important;
	position:relative;
	display: flex;
	flex-flow: row;
	width: 80vw;
	justify-content: space-around;
}

.txtFade-enter-from,
.txtFade-leave-to {
	opacity: 0;
    transition: opacity var(--very-slow);
}

.txtFade-enter-to,
.txtFade-leave-from {
	opacity: 1;
    transition: opacity var(--very-slow);
}

.heroFade {
	display: flex;
	width: 70vw;
	align-items: center;
	margin: 20px;
	margin-bottom: 30px;
	gap: 20px;
}

.heroFade h1 {
	flex: 0 0 35vw;
	margin: 0px !important;
}

.hero .txtFade {
	width: fit-content;
	color: var(--primary) !important;
	padding: 10px;
	height: 60px;
	border-bottom: solid 5px var(--off-white);
}

.txtFade span {
	color: var(--off-white);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	width: 35vw;
	text-align: center;
}

.stats {
	display: flex;
	margin-top: 80px;
	padding: 20px;
	padding-right: 5vw;
	padding-left: 5vw;
	background: var(--trans-black);
	width: 100vw;
	gap: 20px;
}

.stats h3 {
	font-weight: var(--light);
	font-size: var(--large);
	text-align: center;
	flex: 0 0 calc(25% - 20px);
}

/* broker marketing page */
.brokerBanner {
	background: url(../src/images/broker.webp);
	width: 100vw;
	height: 500px;
	background-position: top right;
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 10vw;
	font-family: helvetica;
}

.brokerBanner h1, .brokerBanner h3 {
	color: var(--off-white);
	font-weight: var(--light);
	text-align:right;
}

.brokerBanner h1, .advertiseBanner h1{
	font-size: var(--xxx-large);
}

.brokerBanner h3 {
	font-size: var(--x-large);
}

.brokerBanner span {
	text-align: right;
	padding-top: 20px;
}

.brokerBanner .Submit {
	width: fit-content;
}

.features {
	padding: 40px;
	padding-right: 10vw;
	padding-left: 10vw;
	font-family: helvetica;
	display: flex;
	flex-wrap: wrap;
	gap:30px 0px;
}

.featuresLeft {
	display:flex;
	flex-flow:column;
	flex: 1 1 50%;
	justify-content:center;
}

.featuresLeft h2 {
	margin-bottom: 0px;
}

.featuresLeft h3 {
	margin-bottom: 40px;
	margin-top:20px;
}

.features ul {
	display: flex;
	flex-flow: column;
	gap: 30px;
	font-size: var(--x-large);
}

.features img {
	flex: 1 1 50%;
	object-fit:contain;
	height:auto;
}

.features i {
	color: var(--primary);
}

.features h2 {
	margin-bottom: 40px;
	font-size: var(--xx-large);
	font-weight: var(--light);
}

.features p {
	padding-right: 40px;
	color: var(--grey);
	line-height: 36px;
	font-size: var(--medium);
}

.brokerBottom {
	display: flex;
	justify-content: center;
	padding: 40px;
	padding-top:0px;
}

/* advertise marketing page */
.advertiseBanner {
	background: url(../src/images/advertise.webp);
	width: 100vw;
	height: 500px;
	background-position: top;
	display: flex;
	justify-content: right;
	font-family: helvetica;
	color: var(--off-white);
	align-items: center;
}

.advertiseBanner div {
	display: flex;
	flex-flow: column;
	width: 50%;
	float:right;
}

.advertiseBanner .Submit {
	background: var(--off-white);
	color: var(--med-grey);
	width: fit-content;
	text-align: center;
}

.advertiseBanner .Submit:hover {
	background: var(--med-grey);
	color: var(--off-white);
	width: fit-content;
	text-align: center;
}

.advertiseBottom {
	display: flex;
	justify-content: left;
	padding: 40px 10vw 40px 10vw;
	flex-flow: column;
	background: var(--secondary-light);
}

.advertiseBottom h2{
	color:var(--med-grey);
}

.advertiseBottom textarea {
	border:solid 1px var(--secondary);
	color:var(--secondary) !important;
}

.contactBottom {
	display: flex;
	justify-content: left;
	padding: 0px 5vw 40px 5vw;
	flex-flow: column;
	background: none;
	margin-top:40px;
}

.contactBottom form {
	width: 50vw;
}

.contactBottom .textInput {
	width: 100%;
}

.contactBottom p {
	width: 50vw;
	color: var(--grey);
	margin: 10px;
	margin-left: 0px;
}

/* ADMIN PANEL CSS */
#sidePanel {
	background: var(--secondary);
	padding: 15px 15px 10px 15px;
	width: 185px;
	min-height: 100vh;
	box-shadow: 3px 0px 10px var(--light-grey);
	position:fixed;
	z-index:3;
}

.topBar {
	width: 100vw;
	height: 40px;
	display: flex;
	position: fixed;
	background: var(--white);
	box-shadow: 5px 1px 1px var(--medGrey);
	justify-content: space-between;
	padding-right: 20px;
	z-index: 3;
	flex-flow:column;
	color: var(--med-grey);
}

.completion {
	width: 100vw;
	flex: 0 0 100vw;
	background: var(--secondary-light);
}

.completion .green {
	position: absolute;
	left: 0vw;
	height: 40px;
	top: 40px;
	width: 100vw;
	flex: 0 0 100vw;
}

.listingPage .completion {
	height: 40px;
	position: relative;
	left: -5vw;
	top: -40px;
}

.listingPage .completion .green {
	position: absolute;
	left: 0vw;
	height: 40px;
	top:0px;
	width: 100vw;
	flex: 0 0 100vw;
}

.topBar div {
	display: flex;
	flex: 0 0 100%;
	justify-content: space-between;
	align-items: center;
}

.topBar h2 {
	font-size: var(--large);
	justify-content: center;
	align-items: center;
	display: flex;
	font-weight: var(--light);
	padding-left: 20px;
}

.logosm img {
	width: 100%;
	padding: 0px;
}

#logosm {
	width: 100%;
	display: block;
}

/* main menu */
.navigation {
  margin: 20px 0px 0px 0px;
}

.navigation h4 {
  color: var(--light-red);
}

.show .navOuter {
  overflow:scroll;
  max-height: 39vh;
  margin-bottom: 20px;
}

.hideMenu {
  width: 68px !important;
}

.hideMenu .navOuter {
  overflow-x:hidden;
  overflow-y: scroll;
  height:69vh;
}


ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.navLinks {
  padding: 10px;
  font-size: var(--small);
  color: var(--off-white);
  text-align: justify;
  margin: 5px 0px 5px 0px;
  border-radius: var(--round-small);
  cursor: pointer;
  transition: var(--slow);
}

.hidden {
  font-size: var(--medium);
  display:flex;
  justify-content:center;
}

.navLinks:hover {
  background: var(--primary);
  color: var(--off-white);
  transition: var(--fast);
}

/* nav icons */
.navLinks i {
  padding: 0px 5px 0px 0px;
  font-size: var(--small);
}

/* menu hidden */
.hideMenu .navLinks i {
  padding: 0px;
  font-size: var(--medium);
}

/* sub menu */
.sub .navLinks {
  margin: 0px 0px 0px 10px;
}

.sub .navLinks:hover {
  background: none;
  color: var(--light-red);
  transition: var(--fast);
}

.subSelected {
  color: var(--light-red);
  transition: var(--fast);
}

.subMenu-enter-from,
.subMenu-leave-to {
  height: 0px;
  opacity: 0;
  transition: height var(--slow), opacity var(--fast);
}

.subMenu-enter-to,
.subMenu-leave-from {
  transition: var(--fast);
  height: 75px;
  display: block;
}

/* sub menu hidden */
.hideMenu .sub .navLinks {
	margin: 0px;
	padding: 10px 0px 10px 0px;
	text-align: center;
  transition: var(--fast);
}

/* nav buttons */
.logout {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: space-between;
	position: absolute;
	bottom: 30px;
	background: var(--secondary);
	align-items:center;
}

.dashLangs {
	height: 30px;
	border: solid 1px var(--white);
	padding: 5px;
	border-radius: var(--round-small);
}

.dashLangs .toolMenu {
	top: -200px;
	background: var(--secondary);
	border: solid 1px var(--white);
}

.dashLangs ul {
	gap: 10px;
	display: flex;
	flex-flow: column;
}

.dashLangs .link {
	color: var(--white);
}

.dashLangs .link:hover {
	color: var(--primary);
}

.hideMenu .logout {
  width:68px;
  left:0px;
}

.logout button {
  margin-top:0px;
}

.navButton {
  background: none !important;
  border: 0px;
  color: var(--off-white);
  font-size: var(--medium);
  transition: var(--fast);
  cursor:pointer;
}

.navButton:hover {
  color: var(--primary);
  transition: var(--fast);
}

/* nav buttons hidden menu */
.hideMenu .navButton {
	width: 100%;
  padding:5px;
}

/* logo hidden menu */
.hideMenu .logo img {
  width: 40px;
}

/* profile */
.profile {
  margin: 20px 0px 10px 0px;
}

.avatar {
  display: flex;
  width: 155px;
  justify-content: center;
}

.avatar img {
	width: 130px;
	padding: 0;
	border-radius: var(--circle);
	height: 130px;
	object-fit: cover;
}

.profileDetails h2 {
  color:var(--off-white);
  text-align: center;
  padding: 10px 0px 0px 0px;
  word-wrap: break-word;
}

.email {
  font-size: var(--x-small);
  color: var(--light-red);
  display:block;
  width:100%;
  text-align: center;
}

/* profile hidden menu */
.hideMenu .profile {
  margin: 10px 0px 0px 0px;
}

.hideMenu .avatar {
  display: flex;
  width: 38px;
  justify-content: center;
}

.hideMenu .avatar img {
  width: 30px;
  height:30px;
}

/* right content */
.content {
	width: 100%;
	background: var(--off-white);
	min-height: calc(100vh - 40px);
	margin-top: 50px;
}

.section h1 {
	margin-top:20px;
	color: var(--black);
}

/* dashboard section */
.dashSettings {
	padding: 20px;
	display: flex;
	justify-content: right;
}

/* management section */
.editListings {
	width: 100%;
	padding: 40px;
}

/* .myListings {
	margin-top: 20px;
} */

.management h1 {
	color: var(--med-grey);
	margin-top: 40px;
}


li .Submit {
	margin: 0px;
}

/* .catNav span, .locNav span {
	padding: 10px;
} */

.catNav, .locNav {
	display: flex;
	flex-flow: column;
	gap: 6px;
  	margin-bottom:20px;
  	margin-top:10px;
}

.catNav li, .locNav li {
	cursor: pointer;
	transition: var(--fast);
	color: var(--primary);
}

.catNav li:hover, .countryHead, .locNav li:hover {
	color: var(--black);
}

.countryHead {
	cursor: pointer;
	color: var(--primary);
	display: flex;
	gap: 10px;
	transition: var(--fast);
	padding-bottom: 0px !important;
	padding-top: 0px !important;
	justify-content: space-between;
}

.countryHead span {
	padding: 0px;
	padding-top: 1px;
}

/* .locNav li {
	padding-left: 10px;
} */

.locShell li span {
	padding: 10px;
	padding-left: 10px;
}

.locShell li {
	padding: 3px;
	padding-left: 10px;
}

.locShell {
  height:200px;
  overflow:scroll;
}

.accShell-enter-from,
.accShell-leave-to {
  height: 0px;
  opacity: 0;
  transition: height var(--slow), opacity var(--fast);
}

.accShell-enter-to,
.accShell-leave-from {
  transition: var(--fast);
  height: 200px;
  display: block;
}

.industryShell-enter-active,
.industryShell-leave-active,
.locationShell-enter-active,
.locationShell-leave-active {
  overflow: hidden;
  transition: max-height var(--slow) ease, opacity var(--very-slow) ease;
}

.industryShell-enter-from,
.industryShell-leave-to,
.locationShell-enter-from,
.locationShell-leave-to  {
  max-height: 0;
  opacity: 0;
}

.industryShell-enter-to,
.industryShell-leave-from,
.locationShell-enter-to,
.locationShell-leave-from {
  max-height: 2000px;
  opacity: 1;
}

.priceFilter .textInput {
	border: solid 1px var(--secondary);
	width: 100%;
	border-radius: var(--round-small);
}

.priceFilter {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 10px;
}

/* account page */
.Account, .Security {
	padding-left: 40px;
	padding-top: 20px;
}

.userForm {
	display: flex;
	width: calc(100% - 40px);
	margin-bottom:60px;
	flex-wrap:wrap;
}

.userForm .selection {
	width: 20rem;
	border: solid 1px var(--black);
	color: var(--grey);
	margin: 20px;
	margin-left:0px;
}

.userForm h3, .editDet h3 {
	font-size: var(--large);
}

.userForm label {
	margin: 20px;
	margin-left: 0px;
	display: flex;
	flex-flow: column;
}

.userForm label {
	margin-top: 0px;
}

.userForm .imgInput {
	border: solid 1px;
	border-radius: var(--round-small);
	height: 250px;
	width: 250px;
	padding: 0px;
}

.userForm .imgInput img {
	transition: var(--fast);
	position: absolute;
	width: 250px;
	object-fit: cover;
	height: 250px;
}

.imgInput:hover i {
	z-index: 999;
	position: relative;
}

.imgInput:hover span {
	z-index: 999;
	position: relative;
}

.userForm .imgInput img:hover {
	opacity: 0.5;
	transition: var(--fast);
}

.colImg .Submit {
	width: 250px !important;
}

.userForm .Submit {
	width: 20rem;
	float: left;
	margin-left:0px;
}

.userForm .noEdit {
	border:none !important;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.userForm .col-input {
	display: flex;
	flex-flow: column;
	margin-top: 20px;
	flex: 0 0 33%;
}

.userForm span {
	color: var(--grey);
	font-size: var(--x-small);
	text-align: center;
}

.userForm select {
	margin-top: 0px !important;
}

.editDet {
	display: flex;
	gap: 20px;
	align-items: center;
}

.editDet span {
	border: solid 1px var(--primary);
	color:var(--primary);
	padding: 10px;
	border-radius: var(--round-small);
	transition: var(--fast);
	cursor: pointer;
}

.editDet span:hover {
	border: solid 1px var(--secondary);
	background:var(--secondary);
	transition: var(--fast);
	color: var(--off-white);
}

.uploadImg {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: 20px;
}

.uploadForm {
	align-items: flex-start;
	gap: 10px;
}

.uploadForm .uploadImg {
	margin-left: 0px;
	margin-bottom: 30px;
	margin-top:10px;
}

.uploadForm .imgInput {
	width: 100%;
	border: solid 1px var(--secondary);
	color: var(--secondary);
}

.uploadImg label {
	flex: 0 0 100px;
	height: 100px;
	margin: 0 !important;
}

.imgInput video {
	position: absolute;
	z-index: 999;
	object-fit: cover;
	height: 100px;
	width: 100px;
}

.createListing {
	margin: 40px;
}

.createListing .editDet {
	margin-top: 30px;
}

.createListing .col-input {
	width:21rem;
	flex: 0 0 21rem;
}

.createNav {
	padding: 0px 40px 0px 40px;
}

.createNav select {
	border: solid 1px var(--secondary);
	color: var(--med-grey);
}

.createNav h3 {
	margin: 30px 0px 0px 0px;
}

.createNav label {
	margin: 20px 0px 0px 0px;
}

.innerH3 {
	margin-top: 40px;
}

.uploadForm .col-3 {
	display: flex;
	flex-flow: row;
	gap: 20px;
	justify-content: right;
	flex: 0 0 calc(99% - 15px);
}

.uploadForm .selection {
	margin: 0px;
	border: solid 1px var(--secondary);
	color: var(--grey);
	height: 45px;
}

.uploadForm .textInput {
	border: solid 1px var(--secondary);
	color: var(--grey);
	font-size: var(--medium);
	border-radius: var(--round-small);
}

.uploadForn, select {
	font-size: var(--medium);
}

.uploadForm .textInput::placeholder {
	color: var(--grey);
	font-size: var(--medium);
}

.uploadForm label {
	margin-top: 10px;
}

.userForm .checkBox {
	display: flex;
	gap: 10px;
	width: 20rem;
	margin: 0px;
}

.userForm .textInput {
	color: var(--grey);
	font-size: var(--medium);
}

.userForm .textInput::placeholder, .userForm .firstOption {
	color: var(--secondary);
}

.sInput .textInput {
	border: none;
}

.sInput {
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	color: var(--grey);
	padding-right: 10px;
}

.userForm textarea {
	color: var(--grey) !important;
	font-size: var(--medium) !important;
}

.uploadImg img {
	width: 100px !important;
	height:100px !important;
	object-fit: cover;
	border: solid 1px var(--secondary);
}

.err .red {
	font-size: var(--medium);
	width: calc(100vw - 185px);
	border-radius:0px;
}

.err {
	position: fixed;
	top: 40px;
	width: 100vw;
	left: 0px;
}

.error {
	border: solid 2px var(--dark-red) !important;
}

/* edit listing */
.editHeading {
	display: flex;
	justify-content: space-between;
}

/* security page */
.security {
	display: flex;
	gap: 20px;
}

.security li {
	padding: 20px;
	border-bottom: solid 1px var(--light-grey);
	color: var(--med-grey);
	cursor: pointer;
	transition: var(--fast);
}

.security li:hover {
	background: var(--primary);
	color:var(--off-white);
	transition: var(--fast);
}

.security .selected {
	color:var(--off-white);
}

.security ul {
	border: solid 1px var(--light-grey);
	border-radius: var(--round-small);
}

.security .red {
	margin-bottom: 20px;
	width: 20rem;
}

.security .Submit {
	width: 90px;
}

.security .userForm .Submit {
	width: auto;
	text-align: center;
	margin-top: 10px;
}

.notifications li {
	justify-content: space-between;
	display: flex;
	gap: 20px;
	font-size: var(--medium);
	border: none;
	align-items: center;
	cursor: pointer;
}

.notifications i {
	font-size: var(--xx-large);
	color: var(--primary);
	transition: var(--fast);
}

.notifications li:hover i {
	color: var(--off-white);
	transition: var(--fast);
}

.notifications ul {
	width: 100%;
	border: none;
}

.notifications .green {
	padding:10px;
	margin-bottom:10px;
	color:var(--off-white);
	width:100%;
}

.not-enter-from,
.not-leave-to {
  opacity: 0;
  transition: opacity var(--fast);
}

.not-enter-to,
.not-leave-from {
  transition: var(--fast);
  display: block;
}

.Security .modal {
	width: 40vw;
	padding:20px;
	max-height: 90vh;
}

.Security .closeModal i {
	padding: 10px;
	padding-top: 0px;
	margin-right: 20px;
}

.Security .modalInfo {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.Security form {
	display: flex;
	justify-content: center;
	padding-bottom:20px;
}

.Security .Submit {
	margin-top:0px;
}

.Security p {
	color: var(--grey);
	font-size: var(--large);
	margin-bottom: 0px;
}

.whyTxt {
	text-align: center;
	font-size: var(--medium) !important;
	margin-top:10px;
	justify-content: center !important;
}

.whyTxt label {
	margin: 10px;
}

.why {
	display: flex;
	flex-flow: column;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
}

.why li {
	cursor: pointer;
	color: var(--grey);
	padding: 10px;
	transition: var(--fast);
	font-size: var(--medium);
	border-bottom: solid 1px var(--secondary);
}

.why li:hover {
	background: var(--primary);
	transition: var(--fast);
	color: var(--off-white);
}

.Security form {
	display: flex;
	justify-content: center;
	padding-bottom: 20px;
	flex-flow: column;
}

.Security .checkBox {
	display: flex;
	flex-flow: row;
	padding: 10px;
	padding-left: 0px;
	font-size: var(--large);
}

.Security .checkBox span{
	font-size: var(--medium) !important;
}

.Security .textInput {
	width: 100%;
}

.Security label {
	margin-right: 0px;
}

.sessionForm li {
	display: flex;
	gap: 10px;
	padding: 0px;
	padding-left:20px;
	justify-content: space-between;
	align-items: center;
}

.sessionForm li:hover {
	background: none;
}

.sessionForm .Submit {
	max-width: 120px;
	border-radius: 0px var(--round-small) var(--round-small) 0px;
	margin-top:0px !important;
}

/* users settings */
.userspage {
	padding: 20px;
}

.usersNav {
	display: flex;
	justify-content: left;
	gap:10px;
}

.usersNav li {
	padding: 20px;
	cursor: pointer;
	transition:var(--fast);
	border-radius:var(--round-small);
	color:var(--grey);
}

.usersNav li:hover {
	color: var(--off-white);
	background: var(--secondary);
	transition: var(--fast);
}

.userList {
	margin-top: 20px;
}

.userList ul {
	display: flex;
	border: solid 1px var(--primary);
	align-items: center;
	border-radius: var(--round-small);
	color: var(--grey);
	width: 100%;
	height: 60px;
}

.userHeadings {
	border: none !important;
}

.userList li {
	display: flex;
	flex: 0 0 calc(18% - 60px);
	justify-content: center;
}

.userList img {
	height: 100%;
	width: 53px;
	border-radius: 5px 0 0 5px;
	object-fit: cover;
}

.imgLi {
	height: 60px;
	flex: 0 0 100px !important;
	align-items: center;
	justify-content: left !important;
}

.buttonLi {
	flex: 0 0 300px !important;
	justify-content: right !important;
	gap: 10px;
	padding-right: 10px;
}


.regUsers {
	justify-content: space-between;
}

.regUsers .userHeadings {
	justify-content: space-between;
}

.userList .Submit {
	width: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--round-small);
	height: 40px;
}

.mTitle {
	text-align: center;
}

.userspage .search {
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

.userspage .search .Submit {
	margin: 0px;
	padding: 10px;
}

.pag {
	width: 100px;
	margin-right: 10px;
}

/* analytics page */
.analytics, .valuation {
	background: url(../src/images/analytics.webp);
	width: 100%;
	max-height: 100%;
	min-height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.valuation {
	background: url(../src/images/valuation.webp);
	background-size:cover;
}

.analytics h1, .valuation h1 {
	font-size: var(--xxx-large);
	font-weight: var(--light);
	color: var(--med-grey);
}

/* watchlist */
.watchlist {
	display: flex;
	gap: 10px;
	padding-left: 20px;
	padding-top: 20px;
}

.fav {
	color: var(--secondary);
	font-size: var(--x-large);
	transition:var(--fast);
}

.fav:hover {
	color: var(--yellow);
	transition: var(--fast);
}

.watchlist .price {
	font-size: var(--large);
}

/* mortgage calculator */
.mortgageForm .selection {
	color: var(--secondary);
	border: solid 1px var(--secondary);
	width: 20rem;
}

.mortgageForm .col-half {
	margin-bottom: 20px;
}

.mortgageForm {
	display: flex;
	gap: 10px;
}

.mortgageForm label {
	display: flex;
	justify-content: center;
	border-bottom: solid 1px var(--secondary);
	align-items: center;
	color: var(--secondary);
	width: 20rem;
	margin: 20px;
}

.mortgageFields {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.mortgageFields .Submit {
	width: 20rem;
}

.selectBorder {
	border-bottom: none !important;
}

.mortgageForm h1 {
	margin-top: 40px;
}

.mortgageHeader {
	margin: 40px auto auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	color: var(--med-grey);
}

.mortgageResults h1 {
	margin-top: 10px;
}

.mortgageResults {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	color: var(--med-grey);
	margin-top: 30px;
}

.mortgageResults h2 {
	margin-top: 20px;
}

.mortgageResults .search {
	padding: 10px;
	border: solid 1px var(--secondary);
	color: var(--secondary);
	width: 20rem;
}

.mortgageBrokers {
	margin-top: 10px;
	border: solid 1px var(--secondary);
	width: 19rem;
	border-radius: var(--round-small);
	height: 230px;
	overflow: scroll;
	width:20rem;
}

.mortgageBrokers img {
	padding: 10px;
	cursor: pointer;
	transition: var(--fast);
}

.mortgageBrokers img:hover {
	transition: var(--fast);
	opacity: 0.7;
}

.mortgageForm .textInput {
	border: none;
}

.mortgageResults span {
	font-size: var(--small);
}

.noBroker {
	justify-content: center;
	align-items: center;
	display: flex;
	flex-flow: column;
	font-size: var(--xx-large);
	color: var(--secondary);
}

.noBroker h2 {
	color: var(--secondary);
}

/* ADMIN CSS END */


/* broker page */
.brokerHero {
	width: 100vw;
	display: flex;
	padding: 5vw;
	padding-top: 20px;
	/* background: linear-gradient(to top, var(--off-white), var(--secondary-light)); */
	padding-bottom: 20px;
	max-height: 150px;
}

.proImg {
	width: 200px;
	position: relative;
}

.heroContent {
	display: flex;
	flex-flow: column;
	gap: 10px;
	padding-left: 20px;
	color: var(--med-grey);
}

.heroContent ul {
	display: flex;
	gap: 20px;
}

.heroContent li {
	color: var(--primary);
	cursor: pointer;
	transition: var(--fast);
}

.heroContent li:hover {
	color: var(--secondary);
	transition: var(--fast);
}

.heroContent h3 {
	font-size: var(--medium);
	font-weight: var(--light);
	min-height:16px;
}

.heroNav {
	position: relative;
	display: flex;
	gap:0px !important;
	border-radius: var(--round-small);
	align-items: center;
	margin-top: 10px;
}

.heroNav li {
	border-bottom: solid 1px var(--primary);
	padding: 20px;
	cursor:pointer;
	color: var(--primary);
	transition: var(--fast);
}

.heroNav li:hover {
	color: var(--secondary);
	transition: var(--fast);
}

.brokerPage {
	margin-top: 110px;
	min-height: 50vh;
	margin-bottom:40px;
}

.brokerPage .col-4 {
	position: relative;
	bottom: 300px;
}

.brokerPage .sideBot {
	bottom: 150px;
}

.brokerTitle {
	display: flex;
	gap: 20px;
}

.badges {
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px !important;
}

.badges span {
	background: var(--off-white);
	padding: 15px;
	position: relative;
	font-size: var(--small);
	color: var(--med-grey);
	width: fit-content;
	display: flex;
	position: absolute;
}

.badges img {
	width: 25px;
}

.heroContent .socials {
	padding-left: 0px;
	padding-bottom: 10px;
}

.brokerModal {
	width: 40vw;
	display: flex;
	max-height: 90vh;
	border-radius: var(--round-small);
	flex-flow: column;
	box-shadow: 0 4px 8px #0000001a,0 6px 20px #00000017;
	position: relative;
	z-index: 999;
	padding: 10px;
	background: var(--off-white);
	overflow: hidden;
}

.brokerModal span i {
	float: right;
	font-size: var(--x-large);
	padding: 20px;
    cursor:pointer;
    color: var(--secondary);
    transition: var(--fast);
	margin-right: 10px;
}

.brokerModal span i:hover {
  color: var(--primary);
  transition: var(--fast);
}

.brokerModal h2 {
	width: fit-content;
	font-size: var(--large);
	color: var(--med-grey);
	padding: 30px 20px 20px 20px;
}

.brokerModal .socialLogin {
	flex-flow: column;
	padding: 0px 20px 20px 20px;
	gap: 10px;
}

.heroContent a {
	font-size: var(--medium);
}

.aboutContent h4, .aboutContent p, .aboutContent span {
	color: var(--med-grey);
}

.aboutContent {
	display: flex;
	gap: 40px;
}

.aboutContent h4 {
	font-size: var(--large);
	margin-top: 20px;
}

.aboutContent .col-1 {
	flex-flow: column;
	display: flex;
	gap: 5px;
}

.aboutContent .bold {
	color: var(--primary);
}

.brokerModal form {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	align-items: center;
}

.brokerModal label {
	margin: 10px;
}

.emptyPage h1 {
	display: flex;
	flex-flow: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 20px;
	font-size: var(--xxx-large);
	color: var(--secondary);
}

.review {
	border: solid 1px var(--secondary);
	padding: 20px;
	border-radius: var(--round-small);
	color: var(--grey);
}

.reviewTitle ul {
	display: flex;
	gap: 10px;
	color: var(--yellow);
	font-size: var(--large);
	margin-top: 10px;
}

.brokerContent .listing {
	flex: 0 0 calc(25% - 16px);	
}

/* listing page */
.listingPage {
	margin-top:40px;
	margin-bottom:40px;
	min-height:50vh;
	flex-wrap:wrap;
}

.listingPage .proImg {
	width: 100%;
	height: 400px;
}

.listingPage .leftSide {
	display: flex;
	gap:20px;
	flex: 0 0 85%;
	align-items:flex-start;
}

.listingPage .proImg img {
	height: 400px;
	object-fit: cover;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.listingContent {
	flex: 0 0 calc(75% - 20px);
	width: calc(75% - 20px);
}

.contactSide {
	flex: 0 0 25%;
	width: 25%;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	margin-top: 104px;
	padding: 0 20px 20px;
	display: flex;
	flex-flow: column;
}

.contactSide .Submit {
	margin: 0px;
}

.contactSide h3 {
	font-weight: var(--light);
	font-size: var(--large);
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.brokerContact img {
	padding: 0px;
	width: 80px;
	height:80px;
	border-radius: var(--circle);
}

.brokerContact {
	display: flex;
	margin-top: 30px;
	gap: 20px;
}

.brokerContact h3 {
	font-size: var(--large);
	color: var(--grey);
}

.brokerContact a {
	font-size: var(--medium);
	margin: 10px 0px 10px 0px;
	display: block;
}

.brokerContact span {
	color: var(--secondary);
	padding-bottom: 5px;
	display: block;
	font-size: var(--medium);
}

.contactSide form {
	width: 100%;
}

.contactSide .textInput {
	width: 100%;
}

.contactSide h2 {
	margin-top: 20px;
	color: var(--med-grey);
}

.listingPage .col-4 {
	position: relative;
	bottom: 80px;
	flex: 0 0 15%;
}

.listingNav {
	padding: 20px 0px 20px 0px;
	display: flex;
	gap: 10px;
}

.listingNav li {
	cursor: pointer;
	color: var(--secondary);
	transition: var(--fast);
	width: fit-content;
	padding: 20px;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
}

.listingNav li:hover {
	color: var(--off-white);
	background: var(--primary);
	transition: var(--fast);
}

.listingPage .brokerTitle h1 {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brokerTitle .Submit {
	display: block;
	width: fit-content;
	float: right;
	margin: 0px;
}

.listingPage .brokerTitle {
	display: flex;
	flex-flow: column;
	padding-bottom: 20px;
	gap:0px;
}

.listingPage .brokerTitle span, .listingPage p {
	color: var(--grey);
}

.listingPage .underline {
	border-bottom: solid 1px var(--secondary);
	width: 100%;
	display: block;
	padding: 10px;
	margin-bottom:30px;
}

.listingDetails ul {
	display: flex;
	flex-flow: column;
	gap: 10px;
	margin-top: 20px;
	color: var(--grey);
}

.listingDetails ul span {
	color: var(--med-grey);
	font-weight: var(--bold);
}

.listingDetails li {
	display: flex;
	justify-content: space-between;
	width: 50%;
}

.listingDetails .value {
	font-weight: var(--light);
	color: var(--grey);
	text-align: left;
	min-width: 120px;
}

.listingDetails {
	margin-bottom: 30px;
}

.risk {
	margin-top: 40px;
	line-height: 25px;
	color: var(--secondary);
	font-size: var(--small);
	border-top: solid 1px var(--secondary);
	border-bottom: solid 1px var(--secondary);
	padding: 20px 0px 20px 0px;
}

.similar {
	width: 100%;
	margin: auto;
	display: flex;
	margin-top:20px;
	gap:10px;
}

.similar .listing {
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	cursor: pointer;
	transition: var(--fast);
	flex: 0 0 calc(25% - 7px);
}

.similar .details {
	justify-content: space-between;
	height: 175px;
}

.pricing ul {
	display: flex;
	flex-flow: revert;
	flex-wrap: wrap;
}

.pricing li {
	display: flex;
	/* justify-content: unset; */
	flex: 0 0 calc(50% - 20px);
	gap: 15px;
	align-items:center;
}

.pricing {
	margin-bottom: 40px;
	font-size: var(--large);
}

.listingPage .emptyPage {
	justify-content: center;
	display: flex;
	width: 100%;
}

.imgAni-enter-from,
.imgAni-leave-to {
	opacity: 0;
    transition: opacity var(--fast);
}

.imgAni-enter-to,
.imgAni-leave-from {
    transition: var(--fast);
}

.slider {
	width: 100%;
	display: flex;
	gap: 10px;
	margin-top:10px;
}

.slider img {
	width: calc(12.5% - 10px);
	flex: 0 0 calc(12.5% - 10px);
	height: 80px !important;
	object-fit: cover !important;
	cursor: pointer;
	transition: var(--fast);
	padding: 0px;
}

.slider img:hover {
	opacity: 0.5;
	transition: var(--fast);
}

/* messages page */
.messagesPage {
	margin: 20px;
	display:flex;
	gap:10px;
}

.messageNav {
	display: flex;
	flex-flow: column;
	gap: 10px;
	position:sticky;
	top:60px;
}

.messageNav li {
	background: var(--white);
	padding: 10px;
	cursor:pointer;
	transition:var(--fast);
}

.messageNav .selected {
	background:var(--primary);
}

.messageNav li:hover {
	background: var(--primary);
	transition:var(--fast);
	color:var(--off-white);
}

.message {
	display: flex;
	gap: 10px;
	color: var(--med-grey);
	border: solid 1px var(--secondary-light);
	background: var(--secondary-light);
	margin-right: 8px;
	cursor:pointer;
	transition:var(--fast);
}

.noMessage h1 {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
	gap: 20px;
	color: var(--secondary);
	min-height: calc( 100vh - 120px);
}

.message img {
	border-radius: var(--circle);
	width: 60px;
}

.message .col-4 {
	justify-content: center;
	align-items: self-start;
	display: flex;
	padding-top: 10px;
	flex: 0 0 10%;
	width:10%;
}

.unread {
	border-left: solid 10px var(--primary);
	background: none;
}

.read {
	border-left: solid 10px var(--secondary);
	opacity: 0.5;
}

.unread:hover {
	opacity:0.7;
}

.read:hover {
	opacity: 0.3;
}

.message .col-5 {
	width:90%;
	flex: 0 0 90%;
	padding-top:10px;
}

.message h4 {
	font-size: var(--large);
	margin-top:0px;
}

.message h3 {
	margin: 0px;
}

.message span {
	color: var(--primary);
}

.message p {
	color: var(--grey);
	margin: 0;
	padding-bottom: 10px;
	width: calc(100% - 20px);
}

.messageDetails {
	width: 70%;
	margin-bottom: 10px;
	border-radius: var(--round-small);
}

.messageDetails {
	width: 70%;
	margin-bottom: 20px;
	border-radius: var(--round-small);
}

.messageDetails a h4 {
	color: var(--med-grey);
}

.messageRight {
	float: right;
	background:var(--secondary);
	border:solid 1px var(--secondary);
}

.messagesPage form {
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: center;
	align-items: center;
	position: sticky;
	z-index: 999;
	bottom: 0;
	background: var(--off-white);
}

.messagesPage label {
	flex: 0 0 75%;
}

.messagesPage .textInput {
	width: 100%;
	color: var(--grey) !important;
}

.messagesPage .Submit {
	flex: 0 0 calc(25% - 20px);
	height: fit-content;
	margin: 0px;
}

.msgListing {
	height: 88px;
	background: var(--white);
	margin-bottom: 20px;
	position: sticky;
	top: 40px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 0px 10px 0px 10px;
}

.msgListing a {
	display: flex;
	gap: 10px;
}

.msgListing img {
	height: 70px;
	width: auto;
	cursor: pointer;
	transition: var(--fast);
}

.msgListing img:hover {
	opacity: 0.5;
	transition: var(--fast);
}

.msgListing h3 {
	color: var(--primary);
	cursor: pointer;
	transition: var(--fast);
}

.msgListing h3:hober {
	color: var(--secondary);
	transition: var(--fast);
}

.msgListing span {
	color: var(--grey);
	font-size: var(--large);
	font-weight: var(--bold);
}

.msgBtn .Submit {
	color: var(--off-white);
	font-size: var(--medium);
	width: fit-content;
	flex: 0 auto;
	font-weight: var(--light);
	max-height: 47px;
}

.msgBtn {
	display: flex;
	gap: 10px;
}

.messageModal .modalInfo {
	flex-flow: column;
	overflow: scroll;
	padding: 20px;
}

.messageModal {
	width: 60vw;
	display: flex;
	max-height: 90vh;
}

.messageModal img {
	width: 150px;
	margin: auto;
}

.messageModal h2 {
	padding: 0px;
	margin: 0px;
	margin-top: 10px;
}

.messageModal p {
	margin: 0px;
	color: var(--grey);
}

.messageModal h2 {
	padding: 0;
	margin: 10px 0 0;
	font-size: var(--x-large);
}

.messageModal h2, .messageModal h3 {
	color: var(--primary);
}

.messageModal h3 {
	margin: 0px;
}

.messageModal span {
	color: var(--grey);
	font-size: var(--medium);
	font-weight: var(--bold);
}

.messageModal form {
	display: flex;
	flex-flow: row;
	gap: 20px;
	justify-content: left;
}

.messageModal h4 {
	font-size: var(--medium);
	color: var(--grey);
}

.messageModal label {
	margin: 0px;
	margin-top: 10px;
}

.messageModal .green {
	color:var(--off-white) !important;
}

.ndaMsg {
	padding: 20px;
	color: var(--off-white) !important;
	width: 50%;
	margin: auto !important;
	display: block;
	margin-top: 10px !important;
	margin-bottom: 20px !important;
}

.sharedItem {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--grey);
}

.sharedItem li {
	display: flex;
	justify-content: space-between;
	font-size: var(--x-large);
	flex: 0 0 calc(33% - 10px);
	padding: 5px 15px 5px 15px;
	cursor:pointer;
	transition: var(--fast);
}

.sharedItem li:hover {
	transition: var(--fast);
	cursor:pointer;
	color: var(--primary);
}

.sharedItem .selected {
	background: none;
	color: var(--primary) !important;
}

.sharedModal h2 {
	color: var(--grey);
}

.noShare {
	color: var(--secondary) !important;
	font-size: var(--xx-large) !important;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100% !important;
}

.noShare i {
	font-size: var(--xxx-large);
	padding-bottom: 20px;
}

.sharedItems ul {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.sharedItems li {
	flex: 0 0 calc(50% - 15px);
	color: var(--grey);
}

.sharedItems li span {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: var(--light);
}

.sharedItems li h4 {
	font-weight: var(--bold);
	color: var(--med-grey);
	font-size:var(--medium) !important;
}

/* loading animation */
.loader {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	height: 100vh;
	position: fixed;
	top: 0px;
	z-index: 999;
	left: 0px;
	width: 100vw;
	background: var(--trans-black);
}

.loader span {
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border-radius: var(--circle);
  animation: pulse 1.2s infinite ease-in-out;
}

/* stagger animation for each dot */
.loader span:nth-child(1) { animation-delay: 0s; }
.loader span:nth-child(2) { animation-delay: 0.3s; }
.loader span:nth-child(3) { animation-delay: 0.6s; }
.loader span:nth-child(4) { animation-delay: 0.9s; }

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* privacy page */
.pritermTxt {
	margin: 40px 5vw 40px 5vw;
	color: var(--med-grey);
}

.pritermTxt h4 {
	margin-bottom: 10px;
	color:var(--primary);
	line-height:15px;
}

.pritermTxt h3 {
	font-size: var(--large);
}

.pritermTxt p {
	color: var(--grey);
}

.pritermTxt ul {
	color: var(--grey);
	display: flex;
	flex-flow: column;
	gap: 10px;
	padding-left: 20px;
	list-style: circle;
	margin-bottom:20px;
}

.pritermTxt h2, .pritermTxt h3 {
	margin-top: 30px;
}


.appPage {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
	margin-bottom: 40px;
}

.appImage img {
	width: 200px;
}

.app {
	display: flex;
	flex-flow: column;
	gap: 10px;
	justify-content: center;
}

.dashboardPage {
	display: flex;
	flex-flow: column;
	padding-left: 20px;
	gap:20px;
}

.topRow, .bottomRow {
	display: flex;
	gap: 20px;
}

.bottomRow {
	margin-bottom:40px;
}

.topRow {
	margin-top: 20px;
}

.topRow .col-1 {
	background: var(--white);
	min-height: 300px;
}

.bottomRow h2 {
	color: var(--med-grey);
}

.analyticsContent h2 {
	color: var(--secondary-grey) !important;
}

.infoHeader {
	background: var(--primary);
	height: 120px;
	display: flex;
	flex-flow: column;
	color: var(--off-white);
	background-image: url(../src/images/comperson.webp);
	background-repeat: no-repeat;
	background-position: bottom right;
}

.infoHeader h2 {
	font-size: var(--large);
	padding: 20px;
}

.infoHeader .avatar {
	width: 100px;
	padding-left: 20px;
}

.dashProfile {
	width: 100px !important;
	height: 100px !important;
	border: solid 7px var(--white);
}

.infoContent {
	display: flex;
	gap: 20px;
	justify-content: right;
	padding: 20px;
}


.infoContent h4 {
	color: var(--light-grey);
	font-size: var(--medium) !important;
}

.listCont span {
	font-weight: var(--bold);
	font-size: var(--large);
	color: var(--primary);
}

.listCont {
	display: flex;
	flex-flow: column;
}

.bottomRow .col-2, .topRow .col-2 {
	background: var(--white);
	flex: 0 0 calc(67% - 40px);
}

.bottomRow .col-2 {
	padding:10px 20px 10px 20px;
}

.bottomRow .col-1 {
	background: var(--white);
}

.bottomRow .col-1 h2 {
	font-size: var(--large);
	padding: 20px;
	padding-top: 10px;
}

.revenueChart {
	display: flex;
	flex-flow: row;
	gap:10px;
}

.revenue {
	padding-left: 20px;
	display: flex;
	flex-flow: column;
}

.revenue a {
	font-size: var(--small);
	padding: 10px;
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.revenue h3 {
	color: var(--grey);
	font-size: var(--small);
	margin-bottom:10px;
}

.revenue span {
	font-size: var(--x-large);
	color: var(--primary);
}

.graph {
	padding-right: 20px;
	position: relative;
	top: -40px;
}

.revenue, .graph {
	flex: 0 0 50%;
	width: calc(50% - 5px);
	padding-bottom:20px;
}
  
.analyticsHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.analyticsHeader h2 {
	font-size: var(--large);
}

.analyticsContent {
	background: url(../src/images/listingAnalytics.webp);
	min-height: 300px;
	justify-content: center;
	display: flex;
	background-position: top;
	align-items: center;
	background-repeat: no-repeat;
}

.latest {
	display: flex;
	flex-flow: column;
	max-height: 300px;
	position: relative;
	z-index: 0;
	transition: var(--fast);
	cursor: pointer;
	flex: 0 0 33%;
}

.latest:hover {
	opacity: 0.7;
	transition: var(--fast);
}

.topRow .dashListing {
	display: flex;
	border-radius: 0px;
	position: relative;
	bottom: 33px;
	border: 0px;
}

.noDash {
	width: 100%;
	flex-flow: column;
	padding: 20px;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.noDash h2 {
	padding-left: 0px !important;
	padding-bottom: 20px;
	color: var(--grey) !important;
	text-shadow: none !important;
	font-size: var(--xx-large) !important;
}

.topRow .col-2 {
	max-height: 300px;
}

.latest img {
	border-radius: 0px;
	min-height: 300px;
	object-fit: cover;
	position: relative;
	z-index: 0;
}

.latest h3 {
	position: relative;
	z-index: 2;
	font-size: var(--large);
	color: var(--white);
	text-shadow: 2px 2px 5px var(--black);
	padding-left:10%;
	bottom:130px;
}

.latest span {
	position: relative;
	z-index: 2;
	color: var(--white);
	text-shadow: 2px 2px 5px var(--black);
	padding-left: 10%;
	bottom:130px;
}

.latest .Submit {
	width: 80%;
	margin: auto;
	bottom: 122px;
	position: relative;
}

.topRow .col-2 h2 {
	font-size: var(--large);
	z-index: 2;
	position: relative;
	color: var(--white);
	text-shadow: 2px 2px 5px var(--black);
	padding-left: 20px;
	top:10px;
}

/* franchise page */
.franNav {
	margin-top: 40px;
	margin-bottom:20px;
}

.franNav h1 {
	color: var(--med-grey);
	margin-bottom: 20px;
}

.franNav ul {
	display: flex;
	gap: 10px;
}

.franNav li {
	padding: 20px;
	cursor: pointer;
	transition: var(--fast);
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	text-align: center;
	font-size: var(--large);
	color: var(--med-grey);
}

.franNav li:hover {
	background: var(--primary);
	color: var(--off-white);
	transition: var(--fast);
	border: solid 1px var(--secondary);
}

.noFran {
	min-height: 300px;
	display: flex;
	flex-flow: column;
	font-size: var(--xxx-large);
	gap: 20px;
	justify-content: center;
	align-items: center;
	color: var(--secondary);
}

/* NEW CSS END */


/* moile max 1024 */
@media screen and (max-width: 1024px) {

	iframe {
		height: 100vh;
		width: 178vh !important;
		margin-left:-110vw !important;
	}

  .mobdisabled {
    display:none !important;
  }

  .navbar {
    display: flex;
    width: 100vw;
    padding: 10px;
    flex-flow:column;
  }

  .search {
    flex: 0 0 70%;
  }

  .mobMenu {
    justify-content: center;
    align-items: center;
    display: flex;
	aspect-ratio: 1 / 1;
  }

  .mobSearch {
    display: flex;
    gap: 10px;
    width: 90vw;
    padding: 0px;
  }

  .mobSearch .Search {
    flex: 0 0 85%;
  }

  .mobSearch input {
    width:10rem;
  }

  .geo {
	width: 90vw;
  }

  .listing img {
	min-height: 120px;
	max-height: 120px;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-input {
    flex: 0 0 100%;
    width: 100%;
  }

  .col-input {
	justify-content: center;
	align-items: center;
  }

  .editDet {
	justify-content: center;
	align-items: center;
	width: 90vw;
  }

  .Account .userForm {
	width: 90vw;
	margin: auto;
  }

  .Account .userForm label {
	margin: 0px;
  }

  .Account .colImg {
	margin-bottom: 20px;
  }

  .Account h1 {
	text-align: center;
  }

  /* new css here */
  .locModal {
	width: 90vw;
  }

  .modalInfo {
	flex-flow: column;
  }

  .geoNav {
	flex-flow: row;
	margin-left:20px;
	margin-right:20px;
  }

  .geoNav button:hover {
	background: none;
	color: var(--primary);
  }

  .geoData li {
	flex: 0 0 calc(33% - 10px);
	text-align: center;
  }

  .listings {
	  flex-wrap:wrap;
  }

  .listing {
	  flex: 0 0 calc(50% - 10px);
  }

  .categorySection {
	  flex-wrap:wrap;
  }

  .category {
	flex: 0 0 calc(50% - 10px);
  }

  .searchItems .listings {
    width: 100%;
    flex: 0 0 100%;
    padding-top: 0;
  }

  .searchPage .listing {
    flex: 0 0 calc(50% - 10px);
  }

  .searchPage h4 {
	text-align: left;
  }

  /* broker page */
  .features {
	flex-flow: column;
  }

  .featuresLeft {
	margin-top: 20px;
	margin-bottom:40px;
  }

  .featuresLeft p, .features img{
	margin: auto;
	padding:0px;

  }

  .features li {
	font-size: var(--medium);
  }

  /* banner hero */
  .stats {
	flex-flow: column;
  }

  .hero h1 {
	text-align: center;
  }

  .footNav {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .footNav .col-4 {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column;
  }

  .footNav img {
	  padding: 0px !important;
  }
  .footNav .socials {
	padding-top: 20px;
	padding-left: 0px !important;
  }

  .socials {
	padding-top: 20px;
	padding-left: 0px;
  }

  .footNav li a {
	font-size: var(--large);
  }
  

  .footNav li {
	padding: 5px;
  }

  .socials li a {
	font-size: var(--xx-large) !important;
  }

  /* dashboard */
  #sidePanel {
	width: 75vw;
	min-height: 100vh;
	max-height: 100vh;
	position: fixed;
	left:-75vw;
	box-shadow: 3px 0px 10px var(--trans-black);
  }

  .logo {
	width: 200px;
	display: flex;
	justify-content: center;
	margin: auto;
  }

  .avatar {
	width: 60vw;
	margin: auto;
  }

  .avatar img {
	width: 45vw;
	height:45vw;
  }

  .show .navOuter {
	max-height: 35vh;
	padding-bottom:50px;
  }

  .profileDetails h2 {
	font-size: var(--xx-large);
  }

  .email {
	font-size: var(--medium);
  }

  .logout {
	width: calc(75vw - 30px);
	justify-content: space-around;
	background: var(--secondary);
  }

 .logout button {
	font-size: var(--x-large);
  }

  .navLinks {
	font-size: var(--medium);
  }

  .closeMenu {
	position: relative;
	left: 60vw;
	margin: 0px;
	padding: 10px;
	font-size: var(--x-small);
 }

 .burgerMenu {
	position: fixed;
	left: 0px;
	top: 0px;
	color: var(--grey);
	font-size: var(--xx-large);
	z-index: 3;
	cursor: pointer;
	transition: var(--fast);
	display: flex;
	height: 40px;
	justify-content: center;
	align-items: center;
	width: 45px;
  }

  .mobBg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 2;
	background: var(--trans-black);
  }

  .mobAni-enter-from,
  .mobAni-leave-to {
    opacity: 0;
    transition: opacity var(--fast);
  }

  .mobAni-enter-to,
  .mobAni-leave-from {
    transition: var(--fast);
    display: block;
  }

  .burgerMenu:hover {
	color: var(--secondary);
	transition: var(--fast);
  }

  #content {
	margin-left: 0px !important;
	overflow:hidden;
	padding-left:0px;
  }

  .topBar {
	padding-left: 40px !important;
  }

  .sidePanel .Submit {
	padding: 10px;
	background: none;
	font-size: var(--xx-large);
	margin: 0px;
	padding-top: 0px;
  }

  .sidePanel .Submit:hover {
	color: var(--grey);
  }

  /* manage listing */
  .userList ul {
	height: 200px;
	flex-wrap: wrap;
	margin-bottom:10px;
  }

  .userList li {
	flex: 0 0 50%;
  }

  .mTitle {
	font-size: var(--large);
  }

  .userList img {
	width: 100px;
	height: auto;
	border-radius: 0px;
  }

  .imgLi {
	height: auto !important;
  }

  .userList li {
	flex: 0 0 50%;
	justify-content: left;
  }

  .regUsers {
	padding: 10px;
	padding-top:5px;
  }

  .buttonLi {
	flex: 0 0 100% !important;
	justify-content: center !important;
	padding-top:10px;
  }

  /* add listing */
  .uploadForm {
	width: 100%;
  }

  .createListing {
	margin: 20px;
  }

  .uploadForm .col-3 {
	width: 100%;
	flex: 0 0;
  }

  .err .red {
	width: 100%;
  }

  .createListing .col-input {
	flex: 0 0 100%;
	width: 100%;
  }

  .analytics h1 {
	text-align: center;
  }

  .security {
	width: 90vw;
	flex-flow: column;
	margin: auto;
  }

  .Security h1 {
	text-align: center;
	margin-bottom: 10px;
  }

  .security .col-input {
	width: 90vw;
	display:flex;
	flex-flow:column;
	justify-content: center;
	align-items: center;
  }

  .security ul {
	width: 100%;
  }

  .Security .modal {
	width: 90vw;
  }

  .brokerTitle {
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap:5px;
  }

  .proImg {
	width: 33%;
	position: unset;
	flex: 0 0 33%;
  }

  .heroContent ul {
	flex-flow: column;
	justify-content: center;
	align-content: center;
	text-align: center;
  }

  .aboutContent {
	flex-flow: column;
  }

  .heroContent ul ul {
	display: flex;
	flex-flow: row;
  }

  .brokerTitle h1 {
	margin-bottom: 0px;
  }

  .noList {
	width: 100%;
	display: flex;
	flex: 0 0 100% !important;
	justify-content: center;
	align-items: center;
	text-align: center;
  }

  .badges, .heroNav {
	flex-flow: row !important;
  }

  .heroNav {
	justify-content: center;
  }

  .heroNav li {
	border-bottom: 0px;
  }

  .heroNav li:hover {
	color: var(--secondary);
  }

  .brokerHero {
	min-height: 280px;
  }

  .brokerPage, .listingPage {
	margin-top: 40px;
 }

 .brokerModal {
	width: 90vw;
  }

  .advertiseBanner {
	background-position: center;
	justify-content: center;
  }

  .advertiseBanner div {
	width: 90vw;
  }

  .advertiseBanner h1 {
	font-size: var(--xx-large);
  }

  .messagesPage {
	flex-flow: column;
  }

  .message .col-4 {
	flex: 0 0 30%;
  }

  .message {
	width: 90vw;
	margin-right: 0px;
	float:none !important;
  }

  .message .col-5 {
	display: flex;
	flex-flow: column;
	flex: 0 0 60%;
  }

  .message p {
	width: 100%;
	margin-top: 10px;
  }

  /* dashboard mobile */
  .infoHeader .avatar {
	margin: 0px;
  }

  .topRow .col-1 {
	width: 90vw;
  }

  .infoHeader, .infoContent {
	width: 90vw;
  }

  .dashboardPage {
	flex-flow: column;
	overflow: scroll;
	padding-left: 5vw;
	padding-right: 5vw;
  }

  .topRow, .bottomRow {
	flex-flow: row;
	flex-wrap: wrap;
  }

  .dashboardPage .col-1, .dashboardPage .col-2 {
	flex: 0 0 100%;
  }

  .latest {
	flex: 0 0 100%;
  }

  .topRow .dashListing {
	display: flex;
	flex-wrap:wrap;
  }

  .latest img {
	min-height: 300px;
  }

  .topRow .col-2 {
	max-height: none;
	background:none;
  }

  .revenueChart {
	flex-flow: column;
  }

  .revenue, .graph {
	flex: 0 0 100%;
	width: calc(100% - 5px);
	padding: 0px;
	padding-bottom: 20px;
  }

  .revenue {
	padding-left: 20px;
	padding-right: 20px;
  }

  /* franchise mobile */
  .franNav ul {
	flex-wrap: wrap;
	justify-content: center;
  }

  .franNav li {
	flex: 0 0 calc(50% - 10px);
  }

  .noFran h1 {
	text-align: center;
  }

  .franNav h1 {
	text-align: center;
  }

  /* mobile login */
  .loginForm {
	width: 90vw;
  }

  .loginForm .textInput {
	width: auto;
	border-bottom: 0px;
  }

  .loginForm label {
	border-bottom: solid 1px var(--secondary);
	color: var(--secondary);
	display: flex;
	justify-content: left;
	align-items: center;
  }

  .leftFinder, .finderImg {
	width: 100%;
	flex: 0 0 100%;
  }

  /* mobile listing page */
  .listingPage .leftSide {
	width: 100%;
	flex: 0 0 100%;
	flex-wrap: wrap !important;
	flex-flow: row;
  }

  .listingContent, .contactSide {
	flex: 0 0 100%;
	width: 100%;
  }
  
  
  .listingContent .proImg {
	position: relative;
  }

  .slider {
	flex-wrap: wrap;
  }

  .slider img {
	flex: 0 0 calc(25% - 10px);
  }

  .pricing li {
	flex: 0 0 100%;
	justify-content: space-between;
  }

  .listingDetails li {
	flex: 0 0 100%;
	justify-content: space-between;
	width: 100%;
  }

  .listingPage .leftSide {
	width: 100%;
	flex: 0 0 100%;
	flex-wrap: wrap;
  }

  .similar .listing {
	flex: 0 0 calc(50% - 5px);
  }

  .similar {
	flex-wrap: wrap;
  }

  .listingPage .proImg img {
	height: 200px;
  }

  .listingPage .proImg {
	height: 200px;
  }

  .squareSpace, .squareSpace img, .squareSpace a {
	height: auto;
  }

  /* mobile message */
  .msgListing {
	height: 120px;
  }

  .msgListing a {
	justify-content: center;
	align-items: center;
  }

  .msgBtn {
	flex-flow: column;
  }

  .msgBtn .Submit {
	flex: 0 0 100%;
	width: 100%;
	justify-content: space-between;
  }

  .msgListing .Submit {
	font-size: var(--small);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .sharedItem li {
	flex: 0 0 calc(50% - 10px);
  }

  .contactBottom {
	justify-content: center;
	align-items: center;
	padding: 0px 8vw 40px 8vw
  }

  .contactBottom p {
	width: 100%;
	margin-right: 0px;
	text-align: justify;
  }

  .contactBottom form {
	width: 100%;
  }

  .heroFade {
	flex-flow: column;
  }

  .txtFade {
	width: 90vw !important;
  }
}

@media screen and (max-width: 1024px) {
    input {
		width: 80vw !important;
	}

	.insertPin {
		padding: 20px;
		width: 90vw;
		border-radius: var(--round-small);
	}
}

@media screen and (min-width: 1343px) {
  @media screen and (max-width: 1366px) {
	iframe {
		height: 100vh;
		width: 178vh !important;
		margin-left:-110vw !important;
	}

	.All select{
		width: 11rem;
	}

	.search input {
		width: 14rem;
    }

    .geo {
	    width: 120px;
    }

	.show .navOuter {
		max-height: 37vh;
		padding-bottom:50px;
	}
  }
}

@media screen and (min-width: 1025px) {
	@media screen and (max-width: 1344px) {
		iframe {
			height: 100vh;
			width: 178vh !important;
			margin-left:-110vw !important;
		}

	  .All select{
		  width: 10rem;
	  }
  
	  .search input {
		  width: 12rem;
	  }
  
	  .geo {
		  width: 120px;
	  }

	  .show .navOuter {
		max-height: 37vh;
		padding-bottom:50px;
	  }
	}
  }

  /* print listing */
  @media print {
	body * {
		visibility: hidden;
	}
  
	.listingContent, .listingContent * {
		visibility: visible;
	}

	.listingContent {
		position: fixed;
		left: 5%;
		top: 0;
		width: 90%;
		margin: 0;
		padding: 0;
	}

	.similar, .print {
		display:none;
	}
  }iframe {
	width: 100vw;
	margin: auto;
	border: solid 0px;
	display: flex;
	overflow: hidden !important;
}