﻿

.g-area-detail { width: 100%; display: flex; justify-content: center; flex-wrap: nowrap; align-items: flex-start; }
.g-area-detail > div { display: flex; flex-direction: column; }

.g-flex-table { display: flex; flex-direction: row !important; flex-wrap: wrap; font-family: 'Apercu'; width: 550px; flex-shrink: 0; height: auto; }
.g-flex-table > div { width: 25%; margin-bottom: 4rem }
.g-flex-table > div:nth-of-type(8) ~ div { margin-bottom: 0; }
.g-flex-table > div span { display: block; font-size: 14px; line-height: 1; white-space: nowrap; }
.g-flex-table > div span:first-child { margin-bottom: 1rem; }

.g-p-name-box { padding-right: 4%; align-self: stretch; }
.g-p-name-box div { margin-bottom: 4rem; position: relative; font-family: 'TG Hagia',sans-serif; }
.g-p-name-box div p { width: 100%; max-width: 290px; overflow: visible; word-break: break-word; white-space: pre-wrap; line-height: 1.2; }
.g-p-name-box .g-property-address { font-size: 200%; }
.g-p-name-box .g-property-area { margin-bottom: 2rem; }

.g-p-detail-table { padding-left: 4%; align-self: stretch; width: 28%; }
.g-p-detail-table > div { margin-bottom: 4rem; }
.g-p-detail-table > div > span { display: block; font-size: 14px; line-height: 1.5; }
.g-p-detail-table > div > span:first-child { margin-bottom: 1rem; line-height: 1 }

.g-p-button-box { display: flex; justify-content: flex-start; align-items: center; margin: auto 0 0; margin-bottom: 0; }
.g-p-button-box > div:first-child { width: 100%; }
.g-p-detail-table .g-icon-box { width: 36px; height: 31px; flex-shrink: 0; position: relative; }


.g-share-box { width: 50px; height: 50px; margin: 0 2%; flex-shrink: 0; position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid transparent; border-left: none; z-index: 20;cursor:pointer; }
.g-share-box > img { height: 67%; }

.g-p-button-box { flex-wrap: wrap; }
.g-p-detail-table .g-btn { width: 44%; margin-bottom: 2rem; }

.g-share-icons { display: flex; justify-content: space-between; align-items: center; position: absolute; height: calc(100% + 2px); right: 100%; width: 300%; max-width: 0; top: -1px; background: #fff; transition: all 250ms ease-in-out; box-sizing: border-box; border: 1px solid transparent; border-right: none; }

.g-share-icons button { height: 100%; }
.g-share-icons img { height: 67%; width: auto; }

.g-p-button-box > div:first-child button:first-child { margin-right: 6%; border: 2px solid #171f2d; position:relative;}
.g-p-button-box > div:first-child button:first-child > span { position: absolute; top: 150%; left: -35%; padding: 4rem; background-color: #fafafa; width: 170%; z-index: 50; box-shadow: -2px -6px 17px 0px rgba(0, 0, 0, 0.05), 0 3px 4px 0 rgba(0, 0, 0, 0.15), 0 3px 14px 0 rgba(0, 0, 0, 0.15); font-size:133%;opacity:0;visibility:hidden;transition:opacity 250ms ease-in-out;}
.g-p-button-box > div:first-child button:first-child:hover > span {opacity:1;visibility:visible; }

.g-p-button-box > div:first-child button:first-child > span > span:first-child { position: absolute; bottom: 100%; left: 0; right: 0; margin: auto; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fafafa; padding: 0; }

.g-user-loggedin .g-p-button-box > div:first-child button:first-child > span > span {text-transform:capitalize }
.g-user-loggedin .g-p-button-box > div:first-child button:first-child > span > span > span{ display:none;}

.g-show-share-icons.g-share-box { border: 1px solid #ddd; border-left: none; }
.g-show-share-icons .g-share-icons { max-width: 300%; border: 1px solid #ddd; padding: 0 15%; border-right: none; }

.g-area-detail > div.g-property-status-card { width: 100%; height: 28px; display: block; }
.g-property-status-tag { height: 28px !important; width: auto; font-size: 14px; padding: 0 15px; line-height: 2; color: #fff; position: absolute; z-index: 50;letter-spacing:4px; }
.g-p-name-box div > .g-property-status-tag { top: -40px; font-size: 14px; position: absolute; }

.g-property-status-tag[data-tag=new] { background-color: #02a072 }
.g-property-status-tag[data-tag=sold] { background-color: #d76666 }
.g-property-status-tag[data-tag=under-contract] { background-color: #979797 }
.g-property-status-tag[data-tag=reduced] { background-color: #A76D60 }
.g-property-status-tag[data-tag=updated] { background-color: #A76D60 }
			

@media screen and (max-width:1620px) {
    .g-p-detail-table > div > span, .g-flex-table > div span { font-size: 88%; }
}


@media screen and (max-width: 1440px) {
    .g-p-detail-table { min-width: 150px; }
    .g-p-detail-table .g-icon-box { width: 26px; height: 24px; }
    .g-share-box { width: 40px; height: 40px; margin-left: 5%; }
    .g-p-button-box .g-btn { height: 40px; }
    .g-property-print img { width: 33px }
}

@media screen and (max-width:1320px) {

    .g-p-name-box { padding-right: 3%; }
    /*.g-flex-table { width: 430px; }*/
}

@media screen and (max-width: 1220px) {
    .g-flex-table { width: 390px; }
    .g-flex-table > div { width: 33%; }


    .g-p-detail-table { padding-left: 0; }
}


@media screen and (max-width: 1024px) {
    .g-area-detail { flex-wrap: wrap; position: relative; justify-content: flex-start; }
    .g-p-name-box { width: 100%; margin-bottom: 5rem; border-bottom: 1px solid rgba(151,151,151, .4); }
    .g-area-detail .g-property-price { margin-bottom: 4rem; }
    .g-p-name-box div p { max-width: 60% }

    .g-p-button-box { position: absolute; top: 8rem; right: 8rem; justify-content: flex-end; width: 32%; }
    .g-flex-table { width: 60%; min-width: 380px; }
    .g-p-button-box > div:first-child { display: flex; justify-content: flex-end; }
    .g-p-button-box .g-btn { height: 35px; min-width: inherit; }
}

@media screen and (max-width: 767.5px) {

    .g-p-button-box { top: 6rem; right: 6rem; }
    .g-p-name-box { margin-bottom: 4rem; margin-top: 2rem; }


    .g-share-icons button { width: 30px; }
    .g-p-name-box .g-property-address { font-size: 170%; }
    .g-flex-table { width: 60%; min-width: 274px; }
    .g-p-detail-table > div > span, .g-flex-table > div span { font-size: 10px; white-space: pre-wrap; }
    .g-flex-table > div, .g-p-detail-table > div { margin-bottom: 2rem; }

    .g-p-detail-table { min-width: inherit }
    .g-p-detail-table .g-btn { width: 48%; }
    .g-p-button-box > div:first-child button:first-child { margin-right: 2%; }

    .g-p-button-box > div:first-child button:first-child:hover > span {opacity:0;visibility:hidden; }
}

@media screen and (max-width:590px) {
    .g-p-button-box > div:first-child { display: block; width: 100%; text-align: right; }
    .g-p-detail-table .g-btn { width: 78%; }
    .g-p-button-box > div:first-child button:first-child { margin-right: 0; }
}

@media screen and (max-width:480px) {

    .g-p-name-box { margin-bottom: 3rem; margin-top: 0; }
    .g-flex-table { border-bottom: 1px solid rgba(151,151,151, .4); padding-bottom: 1rem; margin-bottom: 3rem; width: 100%; min-width: inherit }
    .g-area-detail { display: table; }
    .g-area-detail > div { width: 100%; }
    .g-p-button-box { flex-wrap: wrap; justify-content: flex-end; width: 100px; }
    .g-p-button-box .g-btn { width: 100%; margin: 5px 0 0 0; }
    .g-p-name-box div { margin-bottom: 0; }
    .g-p-detail-table > div > span:first-child { margin-bottom: 1rem; }
    .g-p-detail-table > div > span:last-child { font-size: 16px; }

    .g-p-button-box { top: 5rem; right: 5rem; }

    .g-p-name-box div > img { display: none; }



    .g-p-button-box > div:first-child { position: fixed; width: 100%; bottom: 0; left: 0; display: flex; padding: 4rem; box-shadow: 0 -3px 4px 0 rgba(0,0,0,.15); background-color: #fff; z-index: 999; transform: translate3d(0,0,0) ;transition:transform 250ms ease-in-out;}

    .g-up-fixed-menu .g-p-button-box > div:first-child { transform: translate3d(0,100%,0) }
    .g-p-button-box > div:first-child button:first-child { margin-right: 2%; }


    .g-property-print, .g-p-name-box div > .g-property-status-tag { display: none; }
}



@media screen and (max-width: 375px) {

    .g-p-button-box { width: 72px; }
    .g-p-button-box .g-btn span { display: none; }
}
