@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700');

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	text-rendering: optimizeLegibility;
	padding: 0;
}

a {
	text-decoration: none;
	outline: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus, a:active {
	outline: 0;
}

.main-container {
	position: absolute;
	top: 120px;
	bottom: 0;
	right: 0;
	left: 0;
}

.main-container.hide-header {
	top: 39px;
}

/*************** Map ****************/

#map-container {
	margin-right: 360px;
	height: 100%;
}

.touch #map-container {
	margin-right: 345px;
}

#map-listings-count {
	position: absolute;
	right: 370px;
	top: 10px;
	background: #fff;
	background: rgba(255, 255, 255, 0.85);
	padding: 4px 8px;
	font-size: 13px;
	border-radius: 3px;
}

#map-listings-count.pcs-showing{
	top: 0px;
	border-radius: 0 0 5px 5px;
	background-color: #54adff;
	background-color: rgba(25, 141, 249, 0.85);
	background-image: url('/XposurePortalIncludes/img/pcs-notify.png');
	background-size: auto 24px;
	background-repeat: no-repeat;
	background-position: center right;
    cursor: pointer;
    color: #fff;
    line-height: 18px;
    text-align: right;
    padding: 4px 43px 4px 8px;
    max-width: 230px;
    max-height: 56px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    transition: max-height 0.2s ease-out, max-width 0.2s ease-out, background-color 0.2s ease-out, padding 0.2s ease-out;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.no-backgroundsize #map-listings-count.pcs-showing{
	background-image: url('/XposurePortalIncludes/img/pcs-notify-small.png');	
}

#map-listings-count.pcs-showing:hover { padding: 8px 43px 6px 8px; }

#map-listings-count.expanded{
	padding: 10px 15px;
	cursor: default;
	max-width: 300px;
	max-height: 260px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background-image: none;
	text-align: left;
	line-height: 23px;
	background-color: rgba(25, 141, 249, 0.90);
}

#map-listings-count.pcs-showing.expanded:hover { padding: 10px 15px; }

.no-backgroundsize #map-listings-count.pcs-showing.expanded{
	background-image: none;	
}

#map-listings-count.expanded .pcs-notify-content{
	display: block;
}

#map-listings-count.expanded .pcs-notify-heading{
	display: none;
}

#map-listings-count.pcs-showing .count{
	font-weight: bold;
}

#map-listings-count.expanded .count{
	display: none;
}

#map-listings-count.pcs-showing .found{
	font-weight: bold;
}

#map-listings-count.expanded .found{
	display: none;
}

#map-listings-count span.loading {
	display: none;
}

#map-listings-count span.locate {
	display: none;
}

#drawing_tools {
	position: absolute;
	right: 370px;
	top: 42px;
}

.pcs-notify-content p{
	font-size: 14px;
}

#disclaimer{
	font-size: 12px;
	line-height: 18px;
	color: #555;
	background-color: #fff;
	background-color: rgba(255,255,255,.70);
	padding: 0px 5px;
	border-radius: 3px 3px 0 0;
	position: absolute;
	bottom: 0px;
	left: 100px;
	cursor: pointer;
}

#disclaimer:hover{
	background-color: #fff;
}

#disclaimer .contents{
	display: none;	
}

#disclaimer.open{
	background-color: #fff;
	right: 360px;
	left: 0px;
	border-radius: 0;
	padding: 10px;
	z-index: 10;
}

#disclaimer.open .title{
	display: none;	
}

#disclaimer.open .contents{
	display: inline;	
}

.marker {
	position: absolute;
	cursor: pointer;
	background: #9A9A9A;
	color: #fff;
	border-radius: 4px;
	border-color: #606060;
	border-width: 1px;
	border-style: solid;
	padding: 0px 5px;
	font-weight: bold;
	font-size: 12px;
	line-height: 19px;
	transition: background .3s ease 0s;
	text-align: center;
	transform: translate(-50%,-120%);
	-webkit-transform: translate(-50%,-120%);
}

.marker:after {
	content: "";
	width: 5px;
	height: 5px;
	border: 1px solid #606060;
	border-left: none;
	border-top: none;
	background: #9A9A9A;
	display: block;
	position: absolute;
	right: 46%;
	bottom: -4px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transition: background .3s ease 0s;
}

.marker.group {
	background: #C7622B;
	border-color: #752900;
}

.marker.group:after  {
	background: #C7622B;
}

.marker.comp {
	background: #0AA2EA !important;
	border-color: #0C5477 !important;
}

.marker.comp:after  {
	background: #0AA2EA !important;
}

.marker.subject {
	background: #1B37FB !important;
	border-color: #0A1A88 !important;
}

.marker.subject:after  {
	background: #1B37FB !important;
}

.no-csstransforms .marker:after {
	display: none;
}

.marker.cluster {
	width: 26px;
	height: 26px;
	line-height: 26px;
	border-radius: 13px;
	padding: 0;
	transform: translate(-50%,-50%);
	webkit-transform: translate(-50%,-50%);
}

.marker.cluster:after {
	display: none;
}

.marker.hover {
	background: #22C536;
	border-color: #0F7108;
	z-index: 1;
}

.marker.hover:after {
	background: #22C536;
	border-color: #0F7108;
}

.marker.interactive {
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.marker.sold {
	background: #d41212;
	border-color: #860606;
}

.marker.sold:after  {
	background: #d41212;
}

.marker.expired {
	background: #4d4d4d;
	border-color: #606060;
}

.marker.expired:after  {
	background: #4d4d4d;
}

.logged-in .marker{
	background: #9A9A9A;
	border-color: #606060;
}

.logged-in .marker:after {
	background: #9A9A9A;
}

.logged-in .marker.group{
	background: #C7622B;
}

.logged-in .marker.group:after{
	background: #C7622B;
}

.logged-in .marker.sold {
	background: #d41212;
	border-color: #860606;
}

.logged-in .marker.sold:after  {
	background: #d41212;
}

.logged-in .marker.expired {
	background: #4d4d4d;
	border-color: #606060;;
}

.logged-in .marker.expired:after  {
	background: #4d4d4d;
}

.marker.bounce {
	animation-duration: .6s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-name: bounce;
}

.mapboxgl-marker.marker.bounce {
	animation-name: bouncetranslated;
}

.marker.cluster.bounce {
	animation-duration: .6s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-name: bouncecluster;
}

.mapboxgl-marker.cluster.bounce {
	animation-name: bouncetranslated;
}

@keyframes bounce {
	 0% {
	   transform: translate(-50%,-100%);
	 }
	
	 60% {
	   transform: translate(-50%,-160%);
	 }
	
	 80% {
	   transform: translate(-50%,-100%);
	 }
	
	 100% {
	   transform: translate(-50%,-120%);
	 }
}

/**  mapbox uses translate to position markers, so we need to use top instead of translate to animate them  **/

@keyframes bouncetranslated {
	 0% {
	   top: 5px;
	 }
	
	 60% {
	   top: -10px;
	 }
	
	 80% {
	   top: 5px;
	 }
	
	 100% {
	   top: 0;
	 }
}

@keyframes bouncecluster {
	 0% {
	   transform: translate(-50%,-30%);
	 }
	
	 60% {
	   transform: translate(-50%,-90%);
	 }
	
	 80% {
	   transform: translate(-50%,-30%);
	 }
	
	 100% {
	   transform: translate(-50%,-50%);
	 }
}

/****** listings-list is used for both map listings popup
and  listings sidebar ************************************/

ul.listings-list {
	margin: 5px 0;
	padding: 0;
}

ul.listings-list li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.listings-list a {
	display: block;
	margin: 0;
	padding: 5px 10px;
	min-height: 92px;
	white-space: nowrap;
}

ul.listings-list img {
	width: 140px;
	height: 91px;
	float: left;
	margin-right: 10px;
}

ul.listings-list span {
	font-size: 14px;
	line-height: 23px;
	color: #777;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 0 6px 0 0;
}

ul.listings-list span.oh-date-header {
	margin-bottom: -6px;
	color: #fff;
    font-size: 13px;
    line-height: 23px;
    background-color: #348be9;
    border-radius: 4px 4px 0px 0px;
    padding: 0 10px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

ul.listings-list span.oh-time {
	position: absolute;
	margin-top: 68px;
	width: 135px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    line-height: 23px;
    background-color: #54adff;
    background-color: rgba(31, 147, 255, 0.75);
    border-radius: 4px 4px 0px 0px;
}

ul.listings-list span.oh-time.oh-date-time {
	display: none;
	margin-top: -29px;
	width: 100%;
    border-radius: 4px 4px 0px 0px;
}

.single-listing ul.listings-list span.oh-time.oh-date-time {
	display: block;	
}

.single-listing ul.listings-list span.oh-date-header, .single-listing ul.listings-list span.oh-time {
	display: none
}

ul.listings-list .bedrooms {
	display: inline;
}

ul.listings-list .bathrooms {
	display: inline;
}

ul.listings-list .size {
	display: inline;
}

ul.listings-list .agt {
	font-size: 12px;
}

ul.listings-list .name {
	color: #348be9;
	font-weight: 500;
}

ul.listings-list .price {
	font-size: 18px;
	color: #666;
}

ul.listings-list div.remove {
	display: none;
	float: right;
	margin-top: -3px;
	width: 25px;
	height: 25px;
	background-image: url("/XposurePortalIncludes/img/trash-red.png");
	background-size: 17px;
	background-repeat: no-repeat;
	background-position: center;
}

.no-touch ul.listings-list div.remove:hover, .no-touchevents ul.listings-list div.remove:hover  {
	background-image: url("/XposurePortalIncludes/img/trash-blue.png");
}

ul.listings-list div.favorite {
	display: none;
	float: right;
	margin-top: -3px;
	width: 26px;
	height: 26px;
	background-image: url("/XposurePortalIncludes/img/heart.png");
	background-size: 26px;
}

ul.listings-list div.remove.active {
	display: block;
}

ul.listings-list div.favorite.active {
	display: block;
}

ul.listings-list div.favorite.active:hover {
	background-image: url("/XposurePortalIncludes/img/heart-pink.png");
}

ul.listings-list div.favorite.active.favorited {
	background-image: url("/XposurePortalIncludes/img/heart-red.png");
}

ul.listings-list a.reciprocity{
	display: none;
}

ul.listings-list .status {
	display: block;
	position: absolute;
	color:#fff;
	text-shadow: none;
	line-height: 20px;
	font-size: 12px;
	padding: 1px 4px;
}

ul.listings-list .status.sold{
	background: red;
}

ul.listings-list .status.expired{
	background: #4d4d4d;
}

ul.listings-list .status.pending{
	background: #4ab44a;
}

/**************************************/

#map-listing-info {
	display: none;
	position: absolute;
	width: 360px;
	height: 380px;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
	z-index: 2;
}

.no-boxshadow #map-listing-info {
	border: 1px solid #999;
}

#map-listing-info .wrapper {
	-webkit-mask-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	border-radius: 10px;
}

#map-listing-info .loading-indicator {
	display: none;
	line-height: 200px;
	text-align: center;
	font-size: 18px;
	color: #bbb;
}

#map-listing-info .max-listings {
	display: none;
	padding: 5px 15px 0px 15px;
	font-size: 14px;
}

#map-listing-info.zoom-in {
	height: 100px;
	overflow-y: hidden;
	cursor: pointer;
}

#map-listing-info.zoom-in .max-listings {
	display: block;
}

#map-listing-info .max-listings p{
	text-align: center;
}

#map-listing-info .max-listings .click-to-zoom{
	color: #348be9;
	font-weight: bold;
}

#map-listing-info.single-listing {
	overflow-y: hidden;
}

#map-listing-info.showing {
	display: block;
}

#map-listing-info.loading .loading-indicator {
	display: block;
}

#map-listing-info.loading ul {
	display: none;
}

.single-listing ul.listings-list {
	margin: 0;
}

.single-listing ul.listings-list a {
	display: block;
	padding: 0 0 6px 0;
}

.single-listing ul.listings-list img {
	margin: 0 auto 6px auto;
	display: block;
	height: 270px;
	width: auto;
	float: none;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 1000;
}

.single-listing ul.listings-list span {
	padding: 0 12px;
}

.single-listing ul.listings-list .size {
	display: inline;
}

.single-listing ul.listings-list a.reciprocity{
	display: block;
	position: absolute;
	right: 10px;
	top: 299px;
	background-image: url('/XposurePortalIncludes/img/vreb.png');
	background-size: 95px 45px;
	background-repeat: no-repeat;
	min-width: auto;
    min-height: auto;
	width: 95px;
	height: 45px;
	opacity: .75;
	padding: 0;
}

.single-listing ul.listings-list .status {
	margin-left: 270px;
}

.single-listing ul.listings-list div.remove.active, .single-listing ul.listings-list div.favorite.active{
	margin-right: 10px;
}

.no-backgroundsize .single-listing ul.listings-list a.reciprocity{
	background-image: url('/XposurePortalIncludes/img/vreb-small.png');
}

/*************** Listings sidebar ****************/

#sidebar {
	width: 360px;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #fff;
	-webkit-overflow-scrolling: touch;
	border-left: 1px solid #aaa;
}

.touch #sidebar {
	width: 345px;
}

#sidebar .loading {
	display: none;
	width: 360px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.8);
	background-image: url(/XposurePortalIncludes/img/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: 50% 50px;
	z-index:1;
}

.touch #sidebar .loading {
	width: 345px;
}

#sidebar ul.listings-list {
	margin-bottom: 0;
}

#sidebar ul.listings-list a {
	border-top: 1px solid #e0e0e0;
	transition: background-color .75s ease 0s;
}

#sidebar ul.listings-list li:first-child a {
	border-top: none;
}

#sidebar ul.listings-list li.hover a {
	background-color: #efefef;
}

#sidebar-nav {
	text-align: center;
	background: #4d4d4d;
	color: #fff;
	line-height: 50px;
	font-size: 14px;
}

#sidebar-nav a {
	color: #fff;
	border-color: #737373;
	border-style: solid;
	font-variant: small-caps;
	transition: background .7s ease 0s;
	font-size: 18px;
	letter-spacing: 1px;
}

#sidebar-nav a.disabled {
	opacity: .40;
	cursor: default;
}

#sidebar-nav a:hover {
	background-color: #737373;
}

#sidebar-nav a.disabled:hover {
	background-color: #4d4d4d;
}

.touch #sidebar-nav a:hover {
	background-color: #4d4d4d;
}

#sidebar-nav a.prev {
	float: left;
	border-width: 0 1px 0 0;
}

#sidebar-nav a.next {
	float: right;
	border-width: 0 0 0 1px;
}

#sidebar-nav a span {
	background-repeat: no-repeat;
	background-size: 10px;
	padding: 0 18px;
}

#sidebar-nav a.prev span {
	background-position: left center;
	background-image:
		url(/XposurePortalIncludes/img/chevron-left-white@3x.png);
	margin-left: 10px;
}

#sidebar-nav a.next span {
	background-position: right center;
	background-image:
		url(/XposurePortalIncludes/img/chevron-right-white@3x.png);
	margin-right: 10px;
}

.no-backgroundsize #sidebar-nav a.prev span {
	background-image: url(/XposurePortalIncludes/img/chevron-left-white.png);
}

.no-backgroundsize #sidebar-nav a.next span {
	background-image:
		url(/XposurePortalIncludes/img/chevron-right-white.png);
}

/******** toolbar *********/

#toolbar {
	height: 39px;
	background: #4d4d4d;
	position: relative;
	border-top: 1px solid #5a5a5a;
	z-index: 1;
	overflow: hidden;
}

#restricted-ui{
	display: none;
	margin: 0 0 0 20px;
	line-height: 39px;
	font-size: 14px;
	color: #fff;
}

#toolbar.comp #restricted-ui{
	display: block;
}

#restricted-ui a{
	border-right: 1px solid #737373;
	border-left: 1px solid #737373;
	transition: background .7s ease 0s;
	text-decoration: none;
	font-size: 18px;
	font-variant: small-caps;
	letter-spacing: 1px;
	padding: 0 8px;
	margin: 0 5px;
	color: #fff;
	line-height: 39px;
    display: inline-block;
    outline: 0;
}

.no-touch #restricted-ui a:hover {
	background: #737373;
}

ul.buttons {
	padding: 0;
}

#toolbar.comp ul.buttons, #toolbar.emailLinkMode ul.buttons{
	display: none;
}

#toolbar.comp ul.buttons, #toolbar.emailLinkMode ul.buttons.small-screen{
	display: inline-block;
}

#toolbar.comp ul.buttons, #toolbar.emailLinkMode ul.buttons.email-favorites{
	display: inline-block;
}

#toolbar.comp ul.buttons, #toolbar.emailLinkMode ul.buttons li.filter{
	display: none;
}

ul.buttons.float-right {
	margin: 0 30px 0 0;
}

ul.buttons.float-left {
	margin: 0;
}

ul.buttons li {
	float: left;
	margin: 0;
	padding: 0 12px 0 0;
	list-style-type: none;
	border-right: 1px solid #737373;
	transition: background .7s ease 0s;
	cursor: pointer;
}

ul.buttons.float-right li:last-child {
	border-right: 0;	
}

ul.buttons li.active {
	background: #737373;
}

ul.buttons li a {
	outline: 0;
	padding: 0 20px 0 12px;
	line-height: 39px;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	display: inline-block;
	font-variant: small-caps;
	letter-spacing: 1px;
	background-image:
		url(/XposurePortalIncludes/img/chevron-down-white@3x.png);
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: right center;
	transition: background .7s ease 0s;
	-webkit-tap-highlight-color: transparent;
}

ul.buttons li.locate{
	padding: 0;
}

ul.buttons li.locate a {
	background-image:
		url(/XposurePortalIncludes/img/locate.png);
	background-size: 23px;
	background-position: center center;
	padding: 0 22px;
}

ul.buttons li.email{
	padding: 0;
	display: none;
}

ul.buttons li.email a {
	background-image:
		url(/XposurePortalIncludes/img/email2.png);
	background-size: 23px;
	background-position: center center;
	padding: 0 22px;
}

ul.buttons.email-favorites li{
	display: none;
}

ul.buttons.email-favorites li a {
	background-image:
		url(/XposurePortalIncludes/img/email-favorites.png);
	background-size: 23px;
	padding-right: 30px;
}

.no-backgroundsize ul.buttons li a {
	background-image: url(/XposurePortalIncludes/img/chevron-down-white.png);
}

ul.buttons li.active a {
	background-image:
		url(/XposurePortalIncludes/img/chevron-up-white@3x.png);
}

.no-backgroundsize ul.buttons li.active a {
	background-image: url(/XposurePortalIncludes/img/chevron-up-white.png);
}

.no-touch ul.buttons li:hover {
	background: #737373;
}

ul.buttons li.agt-login{
	padding: 0;
}

ul.buttons li.agt-login a {
	background-image:
		url(/XposurePortalIncludes/img/user@3x.png);
	background-size: 23px;
	background-position: center center;
	padding: 0 22px;
}

#toolbar.fullscreen .agt-login {
	display: none;
}

#toolbar li.agt-login.is-logged-in a{
	background-image:
		url(/XposurePortalIncludes/img/user-blue@3x.png);
}

.dropdown-container {
	display: none;
	position: absolute;
	top: 39px;
	z-index: 1;
	background: #737373;
	padding: 20px;
	min-width: 73px;
	border-radius: 0 0 10px 10px;
	white-space: nowrap;
}

.dropdown-container.active {
	display: block;
}

.dropdown-item {
	display: none;
}

.dropdown-item.active {
	display: block;
}

.dropdown-item h2 {
	font-size: 18px;
	font-weight: normal;
	line-height: 32px;
	margin: 0 0 10px 0;
	color: #fff;
	text-align: center;
}

.dropdown-column {
	float: left;
	margin: 0 10px 0 5px;
}

.dropdown-group {
	float: left;
	margin: 0 15px 0 15px;
}

.dropdown-column+.dropdown-column {
	margin-right: 0;
}

ul.options {
	margin: 0;
	padding: 0;
	min-width: 60px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul.options.long {
	height: 418px;
	overflow: scroll;
	overflow-x: hidden;
	min-width: 80px;
	-webkit-overflow-scrolling: touch;
}

ul.options li {
	margin: 1px 0;
	padding: 6px;
	list-style-type: none;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background: #4D4D4D;
	color: #fff;
	font-size: 14px;
}

ul.options li.selected {
	background: #a9a9a9;
}

/* for Lot Size acres/sqft */
select {
	background: #a9a9a9;
	color: #fff;
}

select option {
	background: #4D4D4D;
	color: #fff;
}

#size ul li.sqft {
	display: none;
}

.small-screen {
	display: none;
}

#search-by-text{
	float: left;
	color: #cacaca;
	line-height: 40px;
	padding: 0 0 0 16px;
}

.emailLinkMode #search-by-text{
	display: none;
}

#oh-dates{
	min-width: 200px;
}

/** The following styles apply to the toolbar when it's in fullscreen mode
(only happens on small screen devices) ****/

#toolbar-close{
	display: none;
	line-height: 40px;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	font-variant: small-caps;
	letter-spacing: 1px;
	text-align: left;
	padding: 0 0 0 8%;
	background-image: url(/XposurePortalIncludes/img/close.png);
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: 2% 50%;
	border-bottom: 1px solid #737373;
	cursor: pointer;
}

#toolbar.fullscreen {
	height: auto;
}

#toolbar.fullscreen #toolbar-close{
	display: block;
}

#toolbar.fullscreen ul.buttons {
	display: inline;
	float: none;
	margin: 0 !important;
}

#toolbar.fullscreen ul.buttons li {
	float: none;
	padding: 0;
	border: none;
	border-bottom: 1px solid #737373;
}

#toolbar.fullscreen ul.buttons li a {
	line-height: 40px;
	display: block;
	background-position: 97% 50%;
}

#toolbar.fullscreen ul.buttons li.active a {
	background-image: url(/XposurePortalIncludes/img/circle-ok-green@3x.png);
	background-size: 30px;
}

#toolbar.fullscreen .dropdown-container {
	right: 0px;
	left: 0px;
	padding-top: 6px;
}

#toolbar.fullscreen .dropdown-column {
	float: left;
	width: 45%;
}

#toolbar.fullscreen .dropdown-group {
	float: left;
	width: 45%;
}

#toolbar.fullscreen ul.options.long {
	height: auto;
	overflow: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: auto;
}

#toolbar.fullscreen ul.large-screen {
	display: block;
}

#toolbar.fullscreen div.large-screen {
	display: block;
}

#toolbar.fullscreen li.large-screen {
	display: list-item;
}

#toolbar.fullscreen .small-screen {
	display: none !important;
}

#toolbar.fullscreen .locate {
	display: none;
}

#toolbar.fullscreen #search-by-text {
	display: none;
}

#toolbar.fullscreen .email {
	display: none !important;
}

/*** map/list toggle button (mobile only) ***/

ul.buttons li.view-as{
	padding-right: 0px;
}

ul.buttons li.view-as a{
	background-image: none;
	padding-right: 12px;
}

.map-view-btn-txt{
	display: none;
}

.mobile-show-list .map-view-btn-txt{
	display: block;
}

.list-view-btn-txt{
	display: block;
}

.mobile-show-list .list-view-btn-txt{
	display: none;
}

/**** PCS *****/

#pcs-dialog-mask.showing{
	height: auto !important;	
}

/**** Search Box *****/
#search-box-container{
	position: absolute;
	top: 10px;
	right: 500px;
	left: 55px;
	max-width: 500px;
	padding: 0px 14px;
	background-color: rgba(255,255,255,0.90);
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.osm-mapping #search-box-container{
	left: 5px;
}

#search-box{
	display: block;
	background-color: transparent;
	width: 100%;
    line-height: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
   	-moz-appearance:    none;
   	appearance:         none;
	outline: none;
	font-size: 20px;
	color: #444;
}

#search-box-clear{
	position: absolute;
	right: 0;
	top: 0;
	width: 42px;
	height: 42px;
	background-image: url('/XposurePortalIncludes/img/close-black-thin.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	opacity: .4;
	cursor: pointer;
	display: none;
}

#search-box-loading{
	position: absolute;
	right: 42px;
	top: 0;
	width: 42px;
	height: 42px;
	background-image: url('/XposurePortalIncludes/img/ajax-loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	opacity: .4;
	display: none;
}

#search-box-clear:hover{
	opacity: .7;
}

#search-box-results{
	margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    display: block;
    border-radius: 0 0 5px 5px;
}

#search-box-results li{
	padding: 8px 16px 8px 3px;
	border-top: 1px solid #ddd;
	color: #666;
	cursor: pointer;
	transition: background-color .5s ease 0s;
}

#search-box-results li:last-child{
	margin-bottom: 12px;	
}

#search-box-results li.selected{
	background-color: rgba(39, 151, 255, 0.4);
    color: #333;
    background-image: url('/XposurePortalIncludes/img/arrow-right-white.png');
	background-repeat: no-repeat;
	background-position: 99% center;
	background-size: 16px 16px;
}

#search-box-container input.submit{
	position: absolute;
	visibility: hidden;
}

/**** Listing not-found notice ****/

#not-found{
	position: absolute;
	z-index: 1;
	top: 15px;
	left: 15px;
	right: 375px;
	background-color: rgba(234, 124, 124, 0.97);
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	line-height: 18px;
	font-size: 14px;
	padding: 10px;
	color: #fff;
}

#not-found{
    -moz-animation: fadeOut 1s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: fadeOut 1s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: fadeOut 1s ease-in 5s forwards;
    /* Opera */
    animation: fadeOut 1s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

/**** Area Sidebar Text *****/

#sidebar-text{
	font-size: 12px;
	line-height: 18px;
	color: #555;
	margin:0;
	padding: 0 10px;
}

/**** legend *****/

#legend{
	position: absolute;
	bottom: 35px;
	left: 10px;
	background: rgba(255,255,255,.90);
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	padding: 6px;
}

.reciprocity-label{
	text-align: right;
	line-height: 18px;
	font-size: 11px;
	padding-right: 23px;
	position: relative;
}

.reciprocity-label a{
	color: #000;
}

.reciprocity-label a:hover{
	color: #348be9;
}

.reciprocity-label img{
	height: 30px;
}

.reciprocity-dot, ul.listings-list .reciprocity-dot{
	position: absolute;
	right: 0px;
	top: 1px;
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	padding: 0;
	font-size: 10px;
    line-height: 16px;
    color: #fff;
    text-align: center;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: none;
}

.reciprocity-label.vreb-logo .reciprocity-dot{
	top: 8px;
}

.reciprocity-label.text-content{
	margin-bottom: 5px;
}

.reciprocity-dot{
	background: #9A9A9A;
}

.reciprocity-dot.group{
	background: #C7622B;	
}

ul.listings-list .reciprocity-dot{
	padding: 0;
	float: right;
    position: relative;
}

.single-listing ul.listings-list .reciprocity-dot{
	display: none;
}

/********** Agent login **************/

#login input{
	font-size: 15px;
	padding: 0 10px;
	background: #fff;
	color: #000;
	border: 0;
	-webkit-appearance: none;
    border-radius: 0;
    width: 180px;
    line-height: 35px;
    margin: 0 0 10px 0;
}

#login a.btn{
	background-color: #54adff;
	color: #fff;
	font-size: 15px;
	display: inline-block;
	line-height: 35px;
	padding: 0 10px;
	border-radius: 4px;
	margin: 0;
	transition: background-color .7s ease 0s;
}

#login a.btn.loading{
	opacity: .5;
}

#login a.btn:hover{
	background-color: #80c2ff;
}

#login a.forgot{
	color: #ddd;
	font-size: 12px;
	margin-top: 10px;
	transition: color .7s ease 0s;
	display: block;
}

#login a.forgot:hover{
	color: #fff;
}

#login p{
	white-space: normal;
	max-width: 200px;
	margin: 0 0 15px 0;
	color: #fff;
}

#login #agent-login-message{
	color: #e63232;
	margin: 10px 0 0 0;
	font-size: 12px;
	font-weight: bold;
	display: none;
}

#login .logged-in{
	font-size: 22px;
}

#login .login-title{
	font-size: 17px;
}

#login input.submit{
	position: absolute;
	visibility: hidden;
}

#email p, #email-favorites p{
	white-space: normal;
	max-width: 400px;
	margin: 0 0 15px 0;
	color: #fff;
}

#email input, #email-favorites input{
	width: 100%;
	border-radius: 5px;
	border: 0;
	padding: 5px;
    -webkit-appearance: none;
   	-moz-appearance:    none;
   	appearance:         none;
	outline: none;
	text-overflow: ellipsis;
}

.clipboard {
	display: inline-block;
    background-color: #008CBA; /* Blue */
    border: none;
    color: white;
    margin-top: 10px;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 12px;
}

.help-video{
	position: absolute;
	top: 15px;
	right: 15px;
	line-height: 48px;
	padding: 0 55px 0 0;
}

.help-video img{
	height: 46px;
	width: 46px;
	position: absolute;
	top: 3px;
	right: 3px;
}

.help-video a {
	color: #0A63A0;
}

/*** my location marker ****/

#my-location-container {
	position: absolute;
    width: 60px;
    height: 60px;
    z-index: 1;
}

.my-location-marker {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 23px;
    left: 23px;
    background: rgba(5, 124, 255, 1);    
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 10;
}

.my-location-pulse-effect {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: rgba(5, 124, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2200ms ease-out infinite;
}

@keyframes pulsate {
    0% {
    transform: scale(0.1);
    opacity: 0;
    }
    50% {
    opacity: .85;
    }
    100% {
    transform: scale(1.2);
    opacity: 0;
    }
}

/********** Utilities **************/

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/********** Responsive styles ********/

@media (max-width : 1024px) { /* ipad */
	ul.buttons.float-right {
		margin: 0 5px 0 0;
	}
	ul.buttons.float-left {
		margin: 0 0 0 5px;
	}
	ul.buttons li a {
		font-size: 16px;
	}
	
	/* increase touch target size of delete and favorite buttons on mobile */
	.remove, .favorite { 
	    position:relative; 
	}
	.remove:after, .favorite:after {
	    content:'';
	    position:absolute;
	    top:-10px; bottom:-10px; 
	    left:-10px; right:-10px; 
	}
}

@media (max-width: 860px) { /* portrait ipad or landscape medium phone */
	#search-box-container {
		right: 365px;
	}
	
	#map-listings-count {
		right: 365px;
	}
	#map-listings-count.search-box-showing{
		top: 60px;
	}
	#drawing_tools {
		top: 90px;
		right: 365px;
	}
	div#help_dialog {
		top: 165px;
	}
	.large-screen {
		display: none;
	}
	ul.medium-screen {
		display: inline-block;
	}
	li.medium-screen {
		display: list-item;
	}
	div.medium-screen {
		display: block;
	}
	li.filter{
		display: list-item;
	}
	
	#restricted-ui{
		margin: 0;
		text-align: center;
	}
	
	#restricted-ui span{
		display: none;
	}
	
	#restricted-ui a{
		font-size: 16px;
	}
	
	ul.options li {
		padding: 7px;
	}
}

@media (max-width : 760px) and (min-aspect-ratio: 13/9) {
	#search-box{
		font-size: 16px;
	}
}

@media (max-width : 670px) and (min-aspect-ratio: 13/9) {
	#search-box{
		font-size: 14px;
	}
	
	#toolbar.fullscreen .dropdown-group {
		float: left;
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media (max-width : 670px) and (max-aspect-ratio: 13/9) { /* Phone-ish */
	
	.main-container {
		top: 90px;
	}
	#map-container {
		margin-right: 0;
	}
	
	.mobile-show-list #map-container {
		visibility: hidden;
	}
	
	.touch #map-container {
		margin-right: 0;
	}
	#sidebar {
		width: 100%;
		border: none;
		height: auto;
		overflow-y: visible;
		overflow-x: hidden;
		-webkit-overflow-scrolling: auto;
		display: none;
	}
	
	#not-found{
		right: 15px;
	}
	
	.mobile-show-list #sidebar{
		display: block;
	}
	
	.touch #sidebar {
		width: 100%;
	}
	#sidebar .loading {
		width: 100%;
	}
	.touch #sidebar .loading {
		width: 100%;
	}
	#disclaimer{
		left: 75px;
		font-size: 11px;
	}
	#disclaimer.open{
		right: 0px;
		left: 0px;
		padding: 5px;
	}
	div.small-screen {
		display: block;
	}
	ul.small-screen {
		display: inline-block;
	}
	li.small-screen {
		display: list-item;
	}
	ul.medium-screen {
		display: none;
	}
	li.medium-screen {
		display: none;
	}
	div.medium-screen {
		display: none;
	}
	ul.medium-screen.small-screen {
		display: inline-block;
	}
	li.medium-screen {
		display: list-item;
	}
	#map-listing-info {
		width: 100%;
		height: 150px !important;
		bottom: 0px;
		top: auto !important;
		left: 0px !important;
		border-radius: 0px;
	}
	.single-listing ul.listings-list{

		margin: 0;
	}
	.single-listing ul.listings-list img {
		width: 200px;
		height: 150px;
		float: left;
		margin: 0 8px 0 0 !important;
	}
	
	.single-listing ul.listings-list span {
    	padding: 0 6px 0 0;
	}
	
	.single-listing ul.listings-list span.name {
    	padding: 30px 6px 0 0;
	}
	
	.single-listing ul.listings-list a.reciprocity{
		display: none;
	}
	
	.single-listing ul.listings-list .status {
		padding: 1px 4px;
		margin-left: 0px;
	}
	
	#map-listing-info .wrapper {
		-webkit-mask-image: none;
		border-radius: 0px;
	}
	
	#search-box-container{
		right: 5px;
		padding: 0 12px;
	}
	#map-listings-count {
		right: 5px;
	}
	#drawing_tools {
		right: 5px;
	}
	
	#legend{
		padding: 4px;
		bottom: 32px;
	}
	
	.reciprocity-label{
		line-height: 20px;
		padding-right: 20px;
	}
	
	#toolbar.fullscreen .dropdown-group {
		float: left;
		width: 100%;
		margin: 0 0 20px 0;
	}
	
	#email, #email-favorites {
		max-width: 250px
	}
	
	div#help_dialog {
		right: 5px;
		margin-right: 0px;
	}
}

@media (max-width: 380px) {
	ul.buttons li a {
	    font-size: 14px;
	}
}

@media ( max-width : 370px) and (max-aspect-ratio: 13/9) { /* medium screen Phones */

	ul.buttons li a {
		padding: 0 15px 0 12px;
	}
	
	ul.buttons li.email a {
		background-size: 23px;
		padding: 0px 18px;
	}
	
	ul.buttons li.locate a {
		background-size: 20px;
		padding: 0px 18px;
	}
	
	ul.buttons li.agt-login a {
		background-size: 20px;
		padding: 0px 18px;
	}
	
	#toolbar.fullscreen .dropdown-column.wide {
		float: left;
		width: 100%;
		margin-bottom: 10px;	
	}
	#toolbar.fullscreen .dropdown-column.wide {
		float: left;
		width: 100%;
		margin-bottom: 10px;	
	}
}

@media ( max-width : 320px) and (max-aspect-ratio: 13/9) { /* small screen Phones */

	.single-listing ul.listings-list{

		margin: 25px 0 0 0;
	}
	.single-listing ul.listings-list img {
		width: 150px;
		height: 105px;
	}
	
	.single-listing ul.listings-list span.name {
    	padding: 6px 6px 0 0;
	}
	
	ul.buttons li.email a {
		background-size: 20px;
		padding: 0px 15px;
	}
	
	ul.buttons li.locate a {
		background-size: 20px;
		padding: 0px 15px;
	}
	
	ul.buttons li.agt-login a {
		background-size: 20px;
		padding: 0px 15px;
	}
}