/* CSS Document */

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: #FFFFFF;
	font-size: 12pt;
	font-family: 'Titillium Web', sans-serif;
	color: #303030;
}

a {
	color: #3a4f75;
	text-decoration: underline;
}

a:hover {
	color: #2222AA;
}

input[type="text"], input[type="password"], select {
	letter-spacing: 1px;
}

td, th {
	text-align: left;
	vertical-align: top;
}

div#BodyWrapper {
	min-height: 100%;
	/* For the menu */
	/* height: 100%; */
	left: 0;
	top: 0;
	position: relative;
	min-width: 320px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
}

div#HeaderTop {
	min-width: 332px;
	width: 100%;
	height: 50px;
	background-color: #2a3f54;
}

/* Only seen when menu is collapsed for tablets and phones */
div#TopLogo {
	margin: 0 0 0 54px;
	padding: 0;
	width: 278px;
	height: 50px;
	/*background: transparent url(../images/msm-logo-white3.png) no-repeat right 5px;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/msm-logo-white2.png', sizingMethod='scale');*/
}

div#HeaderTopLinks {
	float: right;
	font-size: 12pt;
	font-weight: bold;
	padding-top: 20px;
}

div#HeaderBar {
	height: auto; /*76px;*/
	background-color: #c4ba98; /*url(../images/sb-graybar76.jpg) no-repeat center top;*/
	text-align:center;
	color: #EFEFEF;
}

div#HeaderBarH1 {
	padding: 14px 0 6px 0;
	font-size: 18px;
	font-weight: bold;
}

div#MsgCenterBar {
	min-height: 2px;
	padding: 5px 0 5px 0;
	background-color: #28A7AD; /* url(../images/sb-graybar76.jpg) no-repeat center top; */
	text-align: center;
	color: #FFF;
}

div.MCTitle {
	text-transform: uppercase;
	font-weight: bold;
}

div#HeaderBarH2 {
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
}

div#MainContent {
	position: relative;
	text-align: left;
	/*display: table;*/
	min-width: 320px;
	max-width: 1200px;
	/*margin: 0 auto; Center container on page*/
	padding-bottom: 120px;
}

div#HomeMainContent {
	position: relative;
	text-align: left;
	padding-bottom: 120px;
}

div#DynamicContentFixed {
	min-width: 770px;
	height: 100%; /* For browswers that don't understand calc() */
	height: -webkit-calc(100% - 167px);
	height: calc(100% - 167px);
	padding: 82px 0 0 0;
}

html.FullHeight, body.FullHeight, div.FullHeight {
    height: 100%;
    min-height: 100%;
}

div#FooterContainer {
	width: 100%;
	/* height: 120px; */ /* Take a risk and let this expand so it looks good */
	position: absolute;
	bottom: 0;
	left: 0;
	background: #2a3f54;
	padding: 0;
	text-align: center;
}

div#FooterLinkWrapper {
	padding: 8px;
}

.FooterLinks, .FooterLinks a:link, .FooterLinks a:visited, .FooterLinks a:active {
	color: #b6b6b6;
	font-size: 12px;
}

.FooterLinks a:hover {
	color: #e6e6e6;
}

/* Banner Page Specific (like home page) */
div#BannerPhoto {
	/* For the bg image */
	width: 100%;
	height: 100%;
}
div#BannerPhoto2 {
	/* For the bg image */
	width: 100%;
	min-height: 340px;
	background: url(../images/join-bg1.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div#BannerPhoto3 {
	/* For the bg image */
	width: 100%;
	min-height: 300px;
	background: url(../images/house-price-tag.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div#BannerNoPhoto {
	/* For the bg image */
	width: 100%;
	min-height: 300px;
	background: #277fb9; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div.BannerTitle {
	text-align: center;
	font-weight: bold;
	color: #FFF;
	padding-top: 80px;
}

div#HeaderBarBottom {
	height: 2px;
	background-color: #444;
}
div#BannerPhotoBottom {
	height: 4px;
	background-color: #ddd;
}
div#BannerContentWrapper {
	text-align: center;
	padding: 50px 0 100px 0;
	text-shadow: 0 0 8px #222;
	/*background-color: rgba(64,64,64,0.4);*/
}
div#BannerContentWrapper2 {
	text-align: center;
	padding: 10px 0 10px 0;
	min-height: 320px;
	text-shadow: 0 0 8px #222;
	/*background-color: rgba(64,64,64,0.4);*/
}
div#BannerContentWrapper3 {
	text-align: center;
	padding: 0;
	min-height: 300px;
}
div#BannerContentBox {
	min-width: 320px;
	display: table;
	margin: 0 auto;
}
div#BannerContentTitle {
	color: #FFF;
	font-size: 36px;
	font-weight: bold;
}
div#BannerContentSubTitle {
	font-size: 22px;
	font-weight: bold;
	color: #FFF;
}
span.BCSubStrong {
	font-weight: bold;
	color: #F6F6F6;
}
div#ButtonPadding {
	height: 28px;
	padding: 0;
	margin: 0;
}
div#BannerButtons {
	/*padding: 34px;*/
	width: 300px;
	margin: 0 auto;
}
a.SignupLoginButton {
	border-radius: 10px;
	text-align: center;
	margin: 0;
	padding: 14px 20px 14px 20px;
	background-color: #4994e0;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-shadow: 0 0 8px #333;
	box-shadow: 0 0 4px #444;
}
a.SignupLoginButton:hover {
	background-color: #50a2f5;
	color: #f3f3f3;
	text-decoration: none;
}
div.FloatButtonLeft {
	float: left;
}
div.FloatButtonRight {
	float: right;
}
div#StarDivider {
	text-align: center;
}
div#IconDivider {
	float: left;
	padding: 0 6px 0 0;
	height: 200px;
}
div#MainPoints {
	/*padding: 34px;*/
	max-width: 980px;
	margin: 0 auto;
	padding: 10px 0 10px 0;
}
div#PointBox1, div#PointBox2, div#PointBox3 {
	width: 294px;
	min-height: 200px;
	padding: 10px;
	background-color: rgba(255,255,255,.9);
	margin: 12px 6px 0 6px;
	float: left;
}
div.PointBoxTitle {
	font-weight: bold;
	font-size: 20px;
	background-color: rgba(42, 63, 84, 1);
	color: #FFF;
	padding: 8px;
	text-align: center;
}
div.PointBoxTitle img {
	float: left;
	height: 28px;
	display: none;
}
div.PointBoxContent {
	padding-top: 8px;
}
/*div#PointBox2 {
	background-color: rgba(230,230,230,.8);
}*/
div#TheBenefits {
	max-width: 800px;
	margin: 0 auto;
}
div.BenefitTitle {
	letter-spacing: 1px;
	font-size: 14pt;
	font-weight: bold;
	color: #555;
}
div.BenefitText {
	padding-bottom: 12px;
}
ul#BenefitsList {
	list-style-image: url(/images/teal-star.png);
}
div#BannerContentBottom {
	max-width: 800px;
	margin: 0 auto;
	padding: 4px;
}

div#RespPubBanner {
	padding-top: 80px;
	width: 300px;
	padding: 50px 15px 0 10px;
	color: #fff;
}

div#BenefitsRightCol {
	padding-top: 80px;
}

div.ProfileSubMenu {
	margin-bottom: 8px;
	border-bottom: 2px solid #555;
}

a.ProfileMenuLink {
	border-width: 1px 1px 0 1px;
	border-color: #555;
	background-color: #444;
	color: #fff;
	padding: 4px;
	border-radius: 4px 4px 0 0;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
	display: inline-block;
}

a.ProfileMenuLink:hover {
	background-color: #666;
}

/* Homepage Search */
a#PublicSearchForSaleButton, a#PublicSearchForRentButton {
	padding: 6px;
	font-weight: bold;
	font-size: 1em;
	border: 1px solid #333;
	background-color: rgba(37,97,147,.5);
	color: #FFF;
	display: inline-block;
	min-width: 100px;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
}

a#PublicSearchForSaleButton:hover, a#PublicSearchForRentButton:hover {
	background-color: rgba(67,127,177,.5);
}

td#SmartLocInputCell {
	background-color: #FFF; border-radius: 4px 0 0 4px; border: 1px solid #333;
}

td#SmartLocButtonCell {
	padding: 6px; height: 30px; background-color: #c4ba98; color: #FFF; font-weight: bold; border-radius: 0 4px 4px 0; border: 1px solid #333; vertical-align: middle; text-align: center;
}

input#Search_HomePageSearchButton {
	font-size: 18px; height: 24px; color: #FFF; background-color: transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none;
}

input#Search_HomePageSearchButton:hover, input#Search_HomePageSearchButton:focus {
	color: #F3F3F3;
}

table#HomePageMoreFiltersTable {
	margin-top: 6px; max-width: 800px; width: 100%;
}

div.HomePageBlockInput {
	display: block; background-color: rgba(240,240,240,.7); border: 1px solid #AAA; padding: 6px; margin: 0; border-radius: 4px;
}

div#COL_CBG_flt_cb_rent_period {
	-webkit-columns: 2 280px;
	-moz-columns: 2 280px;
	columns: 2 280px;
}

@media (max-width: 800px) {
	#LogoOnHPBanner {
		display: none;
	}
}

@media screen and (max-width: 692px)   {
    .LoginPopup fieldset > .ButtonWrapper{
        width: 100%!important;
        float:none;
        margin-bottom: 10px;
    }
    .LoginPopup fieldset > .ButtonWrapper input{
        width: 100%;
    }
    .LoginPopup fieldset > .ButtonWrapper > .FormButton{
        width: 100%!important;
    }

}


/* jQuery UI styles */
.ui-dialog-titlebar, .ui-dialog-titlebar.ui-widget-header {
	background: #28A7AD;
	background-color: #28A7AD;
	color: #FFF;
	font-weight: bold;
	line-height: 1;
}

.ui-dialog-title {
	color: #FFF;
	font-weight: bold;
}
.LoginPopup fieldset > .ButtonWrapper{
display: inline-block;
}

.LoginPopup fieldset > .ButtonWrapper > .FormButton{
	line-height: 20px;
	-webkit-appearance: none;
	font-weight: bold;
	font-size: 12pt;
	letter-spacing: 1px;
	border-radius: 0;
	padding: 10px;
	border: none;
	background-color: #28A7AD;
	color: #ffffff;
	font-family: 'Quicksand', Verdana, sans-serif;
    width: 140px;
}
.LoginPopup{
	z-index: 1500!important;
}

.LoginPopup.ui-dialog{
	border-radius: 0;
	box-shadow: 0 0 20px #555;
	background: #ffffff;
	color: #000000;
	margin: 20px 5px 5px 5px;
	overflow: hidden;
	/* position: absolute; */
	max-width: 734px;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}

::-webkit-input-placeholder {color:#aaa;}
::-moz-placeholder          {color:#aaa;}/* Firefox 19+ */
:-moz-placeholder           {color:#aaa;}/* Firefox 18- */
:-ms-input-placeholder      {color:#aaa;}

.LoginPopup:not(.ui-dialog){
	/*border: 1px solid #606060;*/
	/*box-shadow: 4px 4px 5px #505050;*/
	box-shadow: 0 0 20px #555;
	background: #ffffff;
	color: #000000;
	margin: 20px 5px 5px 5px;
	overflow: hidden;
	/* position: absolute; */
	max-width: 734px;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}

@media(max-width:734px) {
	.LoginPopup:not(.ui-dialog), .LoginPopup.ui-dialog{
		max-width: 367px;
	}
}

.LoginPopup fieldset{
	border:none;
	color: #000000;
	/*font-family: 'Quicksand', Verdana, sans-serif;*/
	font-size: 12pt;
	letter-spacing: 1px;
	margin: 0;
	padding: 0 30px 30px 30px;
	display: block;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.LoginPopup fieldset label{
	font-weight: normal;
	font-family: 'Titillium Web', sans-serif;
}
.LoginPopup input.text{
	line-height: 16px;
	font-size: 16px;
	width: 100%;
	max-width: 320px;
	border-radius: 0;
	padding: 12px;
	border: 1px solid #aaaaaa;
}



.LoginPopup > .ui-widget-content{
	background: none;
}
.LoginPopup > .ui-dialog-titlebar{
	/*display: none;*/
	background: none!important;
	border: none!important;
}


/* The container */
.hp-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.hp-container input {
	position: absolute;
	opacity: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.hp-container input:checked ~ .checkmark {
	background-color: #28A7AD;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.hp-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.hp-container .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


.LoginPopup a.LoginBoxLink:link, .LoginPopup a.LoginBoxLink:active, .LoginPopup a.LoginBoxLink:visited {
	font-size: .8em;
	color: #808080;
	text-decoration: none;
}
.LoginPopup a.LoginBoxLink:hover {
	color: #28A7AD;
	text-decoration: underline;
}

.LoginPopup a.ActionLink:link, .LoginPopup a.ActionLink:active, .LoginPopup a.ActionLink:visited {
	font-size: .8em;
	color: grey;
}
.LoginPopup a.ActionLink:hover {
	color: #28A7AD;
}
.LoginPopup .ui-dialog-buttonpane{
	border:none;
}
#LoginTips.StrongRed, #JoinTips.StrongRed{
	font-size: 10pt;
	color: #e84e4f;
	padding: 5px;
	border: 1px solid #e84e4f;
	max-width: 320px;
}
#LoginTips.validateTips{
	font-size: 10pt;
	color: #808080;
	margin-bottom: 0;
}

#dialog-form {
	padding: 0;
	font-family: 'Titillium Web', sans-serif;
	margin: 0;
	box-shadow: none;
}

#login-popup{
	background: none;
	border: none;
	border-radius: 0;
	margin:0;
	text-align: left;
}
#login-popup span{
	padding: 0;
	line-height: inherit;
}

.menu ul li:hover > a {
	text-decoration:underline!important;  }

#PublicFormWrapper td{
	line-height: 1;
}

#cssplay_menuwrap input{
	line-height: 1;
}


@media (min-width: 980px) and (max-width: 1601px) {  
	#at4-share {
		margin-right: 1.3vw !important;
	}
}

@media (min-width: 1602px) {  
	#at4-share {
		margin-right: 0.9vw !important;
	}
}

/** New Homepage Styles */
@media only screen and (min-width : 1200px) {
	#hero {
		min-height: 650px;
	}
}
#hero {
	padding-top: 2rem;
    padding-bottom: 2rem;
    height: 80vh;
	background-repeat: no-repeat;
    background-size: cover;
}
#hero .btn-primary, .showcase .btn-primary, .cta .btn-primary, .cta .btn-primary-outline, #pricing .btn-primary {
    text-decoration: none;
}
#hero h1, h2 {
    letter-spacing: normal !important;
	margin-bottom: 0;
}
h2, #agents h4 {
	letter-spacing: normal !important;
	line-height: 55px !important;
	text-transform: none !important;
	margin-bottom: 0;
}
#agents h4 {
	font-size: 24px;
}
#pricing h3 {
	letter-spacing: normal !important;
	line-height: 35px;
	font-size: 46px;
	text-transform: none;
	padding: 48px 0;
}
#pricing h3 small {
	letter-spacing: normal !important;
	line-height: 44px;
	font-size: 36px;
	text-transform: none;
	font-weight: 400;
	text-align: center;
}
.mls-max-width {
	max-width: 1320px !important; 
}
#whatismystatemls {
    margin-top: -5%;
}
.mls-checklist2 div {
    display: flex;
    padding: 0.5rem;
}
.mls-checklist2 .li {
    font-size: 38px;
    --size: 28px;
    display: inline-block;
    float: left;
    line-height: var(--size);
    padding: 16px 20px;
    border-radius: 100px;
    color: #6C4BA0;
    font-weight: 600;
    margin-right: 1rem;
    vertical-align: middle;
    position: relative;
}
.mls-checklist2 .list-content {
    width: calc( 100% - 102px);
}
.mls-checklist2 div>div {
    display: inline-block;
    font-size: 20px;
}
.mls-checklist2 div {
    display: flex;
    padding: 0.5rem;
	flex-wrap: wrap;
}
.mls-checklist3 div {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
.mls-checklist3 .li {
    font-size: 38px;
    --size: 28px;
    display: inline-block;
    float: left;
    line-height: var(--size);
    padding: 16px 20px;
    border-radius: 100px;
    background: #17224D;
    color: #8ED2C5;
    font-weight: 600;
    margin-right: 1rem;
    vertical-align: middle;
    position: relative;
}
.mls-checklist3 div>div {
    display: inline-block;
    font-size: 20px;
}
.mls-checklist3 div {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
.mls-checklist3 .list-content {
    width: calc( 100% - 102px);
}
.testimonials {
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.box-border-shadow {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0px 15px 30px 5px rgb(0 0 0 / 5%);
    position: relative;
    border: 1px solid #8ED2C5;
}
.carousel-dark .carousel-control-prev-icon, .carousel-dark .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-control-prev-icon, .carousel-dark .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
}
.joindiv {
	font-size: 46px;color:#17224D; margin-bottom: 0; margin-right: 10px;
}
.blurbs div > div {
    border: 2px solid #6C4BA0;
    border-radius: 10px;
}
.blurbs h3 {
    border-bottom: 2px solid #eeeeee;
    font-size: 24px !important;
    padding-bottom: 20px !important;
}
.social a i {
    background: #000000;
    color: #ffffff !important;
    padding: 14px 0 0 0px !important;
    border-radius: 100%;
	width: 65px;
    height: 63px;
}
.blurbs a, .social a {
	color: #007bff;
	text-decoration: none;
	background-color: transparent;
}
.blurbs h3, .social h4 {
	letter-spacing: normal;
	line-height: 1em;
	margin: 0 0 1em 0;
	font-size: 1.5em !important;
	text-transform: none;
}
footer.nb-footer {
	background: #f2f2f2;
	padding: 2em;
	margin-top: 5em;
}

.nb-footer a {
	color: #009E91;
	text-decoration: none;
}

footer.nb-footer .container {
	max-width: 100%;
}

footer.nb-footer h4 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 1.4em;
}

footer.nb-footer .social-media a i {
	background: #ffffff;
	color: #6c4ba0 !important;
	padding: 10px !important;
	border-radius: 100%;
	height: 38px;
	width: 38px;
	text-align: center;
}

footer.nb-footer ul.agents,
ul.listings {
	columns: 3;
}

footer.nb-footer ul.agents li a,
footer.nb-footer ul.listings li a {
	font-size: 14px;
}

footer.nb-footer .copyright {
	margin-top: 2em;
}
@media only screen and (max-width: 600px) {
	#hero h1 {
		font-size: 40px !important;
	}
	.footer-columns > :first-child {
		margin-left: -15px !important;
	}
}

@media only screen and (max-width: 1440px) {
	#hero {
		height: auto !important;
	}
}

@media only screen and (max-width: 1024px) {
	#hero {
		height: auto !important;
		padding-bottom: 15% !important;
	}
}