﻿.map-label1, .map-label2, .map-label3, .map-label4, .map-label5,
.map-label6, .map-label7, .map-label8, .map-label9, .map-label10,
.map-label11, .map-label12, .map-label13, .map-label14, .map-label15,
.map-label16, .map-label17, .map-label18, .map-label19, .map-label20,
.map-label21, .map-label22, .map-label23, .map-label24, .map-label0 {
	width: 49px;
	height: 26px;
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 26px;
}

#phover0:hover ~ #phover1, #ContentPlaceHolder1_phover0:hover ~ #ContentPlaceHolder1_phover1 {
    border: solid 5px red;
}

#list-view #phover0:hover ~ #map, #ContentPlaceHolder1_list-view #ContentPlaceHolder1_phover0:hover ~ #ContentPlaceHolder1_map {
    border: solid 5px red;
}

#phover0:hover ~ .map.map-label0, #ContentPlaceHolder1_phover0:hover ~ .map.map-label0 {
    border: solid 5px red;
}

.map-label0:hover {
	border: solid 5px red;
}

/* ---------------------- */
.banner {
    background: #2F3E52 url(/images/bg-banner-searchMLS.jpg) no-repeat;
    color: white;
}

.addressLine {
	padding: 10px;
}

.agent {
	display: flex;
	justify-content: space-between;
}

#agentImage, #ContentPlaceHolder1_agentImage {
    width: 200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/* jquery cal*/
.fa-calendar-plus {
    margin-left: 3px;
}

.extraDetails {
    display: block;
    margin-left: 5%;
}

h1, h2 {
    font-size: 2rem;
}

hr {
    width: 100%;
    text-align: center;
    border-top: 3px solid lightgrey;
    margin: 2rem .9rem;
}

.horizontal_line {
    visibility: visible;
    display: block;
}

.horizontal_line_mobile {
    visibility: hidden;
    display: none;
}

.imgContainer {
    /* this is myModalPic which holds each image/caption in pparlfm GetphotoGalleryLarge() */
    overflow: hidden;
    position: relative;
}

.imgCaption {
    z-index: 30;
    position: relative;
    color: black;
    width: 100%;
    bottom: 0;
    font-size: 20px;
    text-align: center;
    margin-bottom: 2vw;
}

.media-body {
	width: 50%;
	flex: unset;
}

#newReportColumn0, #ContentPlaceHolder1_newReportColumn0 {
    margin-left: 2%;
}

#officeImage, #ContentPlaceHolder1_officeImage {
    max-height: 150px;
    max-width: 150px;
    margin: 15px auto;
    padding-top: 15px;
}

#officeWebsite, #ContentPlaceHolder1_officeWebsite {
    font-size: smaller;
    margin-left: -2rem;
}

#openhouses, #ContentPlaceHolder1_openhouses {
    padding: 5px;
    text-align: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#plainListPrice, #ContentPlaceHolder1_plainListPrice {
    margin-left: 8%;
}

#plainMLSNumber, #ContentPlaceHolder1_plainMLSNumber {
    font-style: italic;
    font-size: 14px;
}

#plainStatus, #ContentPlaceHolder1_plainStatus {
    padding: 5px 0;
}

.property-details-sm {
	list-style: none;
	font-size: 18px;
    margin-left: -2%;
}

.propertyDetails {
    margin-left: -1%;
    padding-left: 2% !important;
    border-left: 3px solid lightgray;
}

    .propertyDetails h4 {
        padding-top: 10px;
    }

    .propertyDetails ul li {
        padding-bottom: 10px;
    }


.property-listing-agent {
    position: unset;
    display: block;
}

    .property-listing-agent ul {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }


.propertyOverview {
	padding: 1%;
}

.propDetailHead {
    font-weight: bold;
    font-size: 1.5rem;
    padding-top: 10px;
}

#shareHidden, #ContentPlaceHolder1_shareHidden {
    display: none;
}

#tours, #ContentPlaceHolder1_tours {
    padding-top: 5px;
}

ul {
	margin-bottom: 1.75rem;
}

.unitDetails, .unitDetails th, .unitDetails td {
    border: 1px solid lightgray;
    border-collapse: collapse;
}
    .unitDetails td {
        vertical-align: bottom;
        text-align: center;
        width: 20%;
        padding: 2px 4px;
    }

#vertical_line, #ContentPlaceHolder1_vertical_line {
    background: lightgrey;
    width: 3px;
    margin-right: 34px;
    height: 100%;
}

#viewonmap1, #requestInfo, #requestInfo2, #mortcalc, #openhouses, #ShowMoreBtn,
#ContentPlaceHolder1_viewonmap1, #ContentPlaceHolder1_requestInfo,
#ContentPlaceHolder1_requestInfo2, #ContentPlaceHolder1_mortcalc,
#ContentPlaceHolder1_openhouses, #ContentPlaceHolder1_ShowMoreBtn {
    background-color: #2F3E52;
    color: white;
    border: 1px solid #2F3E52;
    vertical-align: bottom;
    padding: 5px;
    margin-bottom: 4px;
    font-size: 14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#goldenkey, #ContentPlaceHolder1_goldenkey {
    color: white;
    vertical-align: bottom;
    padding: 5px;
    margin-bottom: 4px;
    font-size: 14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#openhouses, ContentPlaceHolder1_#openhouses {
    padding: 15px;
}
    #openhouses a, #openhouses a:hover, #openhouses a:focus, #openhouses a:active,
    #ContentPlaceHolder1_openhouses a, #ContentPlaceHolder1_openhouses a:hover, #ContentPlaceHolder1_openhouses a:focus, #ContentPlaceHolder1_openhouses a:active {
        color: white;
        text-decoration: underline;
    }

#requestInfo, #requestInfo2, #ContentPlaceHolder1_requestInfo, #ContentPlaceHolder1_requestInfo2 {
    background: #ffff00;
    color: #000;
    margin-top: 15px;
}

#requestInfo2, #ContentPlaceHolder1_requestInfo2 {
    font-size: large;
    padding: 10px;
}

#tours, #ContentPlaceHolder1_tours {
    padding-top: 15px;
}

.walkResults {
	display: flex;
}


.walkResults {
	display: flex;
}


/* Photo Slider */
/* images sized and cropped to display a 16:9 aspect ratio  - 89:50*/
/* option images sized and cropped to display a 4:3 aspect ratio - perhaps for mobile adjustments?  - 89:67*/
.property-slider {
    padding: 20px;
    width: 100%;
    max-height: 50vh !important; /* testing height limits */
}

.property-slider-count {
    position: absolute;
    top: -10px;
    right: 4rem;
    color: black;
    font-size: small;
    height: 40px;
}

.property-slider-wrap {
    position: relative;
    width: 100%;
    max-height: 65vh;
    min-height: 30vh;
    margin-bottom: calc(65vh * .2);
}

.slick-list {
    margin-top: 1vw;
}

.slick-next {
    padding: calc(25vh) 0;
    margin-right: -1.25rem;
    width: calc(10vw);
    margin-top: calc(10vh);
}
    .slick-next:before {
        content: ">";
        font-size: 30px;
        font-weight: bold;
        padding: 7px;
        background: #DFDCDC;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }

.slick-prev {
    padding: calc(25vh) 0;
    margin-left: -.5rem;
    width: calc(10vw);
    margin-top: calc(10vh);
}
    .slick-prev:before {
        content: "<";
        font-size: 30px;
        font-weight: bold;
        padding: 7px;
        background: #DFDCDC;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }


/* Modal Styling */
.btn-info:focus, .btn-info.focus {
    box-shadow: 0 0 0 2px navy;
}

.modal-content {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.modal-header {
    border: none !important;
    padding-bottom: 0 !important;
}

.modal-content {
    background: #42617E !important;
    color: white !important;
    border: 2px solid white !important;
}

.modal-footer {
    justify-content: flex-start !important;
    border: none !important;
    padding-top: 0 !important;
}

    .modal-footer button {
        background: #42617E;
        color: white;
        border: 2px solid white;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

#requestMoreInfo, #ContentPlaceHolder1_requestMoreInfo {
    background: #42617E;
    color: white;
    border: 2px solid white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}


/* for the mortgage calculator */
#myModalCalc, ContentPlaceHolder1_#myModalCalc {
    margin-right: 15%;
    overflow-y: hidden;
}

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    height: 750px;
    width: 100%;
}

.resp-iframe {
    background: white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* Social Media Share Buttons  */
.printPg {
    width: 35px;
    height: 35px;
    vertical-align: text-bottom;
    margin-bottom: 4px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
ul.share-buttons {
	list-style: none;
	padding: 0;
    margin: 10px 0 0 10%;
}

	ul.share-buttons li {
		display: inline;
	}

	ul.share-buttons .sr-only {
		position: absolute;
		clip: rect(1px 1px 1px 1px);
		clip: rect(1px, 1px, 1px, 1px);
		padding: 0;
		border: 0;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}

.share-buttons {
	vertical-align: bottom;
}

	.share-buttons .sr-only {
		position: absolute;
		clip: rect(1px 1px 1px 1px);
		clip: rect(1px, 1px, 1px, 1px);
		padding: 0;
		border: 0;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}

/* Bug 451 - IE 11 and earlier don't support ECMASCRIPT ES6 or modern styles - patch styles */
@media all and (-ms-high-contrast:none) {
	figure img {
		width: 300px
	}
	/* IE10 */
	*::-ms-backdrop, figure img {
		width: 300px
	}
	/* IE11 */
}

.img-caption-overlay {
	display: block;
	margin-bottom: 2.5rem;
}



/* The ModalPic (background) */
.modalPic {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 1vw; /* Location of the box */
    padding-left: 1vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255, 0.95); /* White w/ opacity */
}

/* ModalPic Content (image) */
    .modalPic-content, .modalPic img, .modalPic-content img {
        display: block;
        padding: 10px;
        margin-bottom: 1vw;
        margin-left: auto;
        margin-right: auto;
        touch-action: pinch-zoom;
        overflow: scroll;
    }


/* Close Text */
#close, #ContentPlaceHolder1_close {
    position: absolute;
    margin-left: calc(50%);
    font-weight: bold;
    color: white;
    background: #2F3E52;
    padding: 5px;
    display: block;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 5px;
}
/* Used on the Gallery Modal to keep Close visible above the entire scroll */
#closePic, #ContentPlaceHolder1_closePic {
    position: fixed;
    top: 0;
    margin-left: 1px;
    margin-top: 5px;
    font-weight: bold;
    color: white;
    background: #2F3E52;
    padding: 5px;
    display: block;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 5px;
    z-index: 9999;
    cursor: pointer;
}

/* Add Animation */
.modalPic-content, #captionPic, #ContentPlaceHolder1_captionPic {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@media print {
    /* CNTL P will print the images page. This just prevents bleed through from the base page. */
    .modalPic {
        background-color: rgb(255,255,255);
    }

        .modalPic-content, .modalPic img, .modalPic-content img {
            width: calc(30vh);
            height: auto !important;
        }

    .container {
        width: 80% !important;
    }
}


@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.fixIt {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.imgGallery {
    margin: 0 auto;
    max-width: calc(100vh);
    max-height: calc(60vh);
    min-width: calc(40vh);
    min-height: calc(20vh);
    /*width: 100%;*/        /* removed - distorting portrait images */
    /*height: auto;*/
}

/*Removed because results are inconsistent*/ 
/*.portrait {
    height: 100% !important;
    width: auto;
}

.landscape {
    width: 100% !important;
    height: auto;
}

.square {
    width: 100% !important;
    height: auto;
}*/

#closePic, ContentPlaceHolder1_#closePic {
    position: fixed;
    top: 0;
    margin-left: 1px;
    margin-top: 5px;
    font-weight: bold;
    color: white;
    background: #2F3E52;
    padding: 5px;
    display: block;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 5px;
    z-index: 9999;
    cursor: pointer;
}

.disclaimer {
    font-size: smaller;
}

#biography, #ContentPlaceHolder1_biography {
    width: 90%;
    margin-left: 20px;
    margin-right: 10px;
}

#bio, #ContentPlaceHolder1_bio {
    text-align: left;
    font-size: small;
}

#agentLogo, #ContentPlaceHolder1_agentLogo {
    float: right;
    width: 75px;
}

    #agentLogo img, #ContentPlaceHolder1_agentLogo img, .agentLogo {
        border-radius: 5px;
        margin: 0 auto;
    }

/* -------------- Media Adjustments -------------- */


@media only screen and (max-width: 950px) and (min-width: 500px) and (orientation : portrait) {
    /* 
        Don't muck about with all the variations 
        just go for anything below a certain point for mobile 
    */
    .imgGallery {
        max-width: calc(50vh);
        max-height: calc(30vh);
        min-width: calc(40vh);
        min-height: calc(20vh);
    }
}


@media only screen and (min-width: 1008px) and (max-width: 1253px) {
    /*body {
        background: green;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 5px;
    }

    .propertyDetails {
        margin-left: 0;
    }

    .horizontal_line_mobile {
        visibility: visible;
        display: block;
    }

    .property-slider-wrap {
        margin-bottom: 3vh;
    }
}

@media only screen and (max-width: 1007px) {
    /*body {
        background: yellow;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 5px;
    }

    .property-header {
        text-align: center;
    }

    .propertyOverview {
        text-align: center;
    }

    .addressLine h1, h2 {
        font-size: 1.25rem;
        margin-top: 1rem;
    }

    .walkResults {
        margin: 6px 0;
    }

    /* for the mortgage calculator */
    #myModalCalc, #ContentPlaceHolder1_myModalCalc {
        margin-right: 0;
    }

    .modal-body > iframe {
        width: 100%;
        height: 650px;
    }

}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (orientation: portrait) 
{
    /*body {
        background: PaleGoldenRod;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 5px;
    }

    .propertyOverview, .propertyDesc, .agent {
        border: none;
        margin: 0 auto;
    }

    .propertyDetails {
        margin-left: 0;
        border-left: none;
    }

    .horizontal_line, hr, .horizontal_line_mobile {
        visibility: visible;
        display: block;
    }

    .property-slider-wrap {
        max-height: 55vh;
        margin-bottom: 3vh;
    }

}

@media only screen and (max-width: 665px) {
    /*body {
        background: gray;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 5px;
        font-size: 12px;
    }

    .propertyOverview, .propertyDetails, .propertyDesc, .agent {
        border: none;
    }

    .horizontal_line_mobile, .horizontal_line {
        visibility: visible;
        display: block;
    }

    .property-slider-wrap {
        margin-bottom: 3vh;
    }
}

@media only screen and (min-width: 560px) and (max-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {

    /*body {
        background: CornflowerBlue;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 15px;
        font-size: 14px;
    }

    .propertyOverview {
        margin: 10px auto;
    }

    .property-slider-wrap {
        max-height: 60vh;
        margin-bottom: 45vh;
    }
}

@media only screen and (min-width: 560px) and (max-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

    /*body {
        background: Lime;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 5px;
        font-size: 12px;
    }

    .propertyDesc {
        padding-top: 2.75rem;
    }
}

@media only screen and (max-width: 350px) {
    /*body {
        background: teal;
    }*/
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 5px;
        font-size: 10px;
    }

    .property-slider-wrap {
        max-height: 65vh;
        margin-bottom: 3vh;
    }
}


@media (min-width: 992px) {
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 15px;
        margin-top: 8vw;
    }

}

@media (min-width: 992px) and (orientation: landscape) {
    #openhouses, #ContentPlaceHolder1_openhouses {
        padding: 15px;
        margin-top: 0;
    }

}


@media only screen and (max-width: 1366px) and (orientation : portrait) {
    /* LANDSCAPE:
	Microsoft Surface 
	Apple Ipad Pro */
    .imgGallery {
        margin: 0 auto;
        max-width: calc(70vh);
        max-height: calc(30vh);
        min-width: calc(40vh);
        min-height: calc(20vh);
    }
}

@media only screen and (max-width: 768px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* PORTRAIT:
	Apple iPad 1,2,3,4,Air, Mini
	Microsoft Surface
	HP Touchpad
	LG Optimus Pad  */

    .imgGallery {
        max-width: calc(80vh);
        max-height: calc(40vh);
        min-width: calc(40vh);
        min-height: calc(20vh);
    }
}



@media only screen and (max-width: 855px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* LANDSCAPE:
	Apple iPad 1,2,3,4,Air, Mini
	Microsoft Surface
	HP Touchpad
	LG Optimus Pad  */

    .imgGallery {
        max-width: calc(140vh);
        max-height: calc(70vh);
        min-width: calc(40vh);
        min-height: calc(20vh);
    }
}