/*font-face*/

@font-face {
    font-family: 'db adman x';
    src: url('../fonts/db adman x.ttf') format('truetype');
}

@font-face {
    font-family: 'Kanit-Regular';
    src: url('../fonts/Kanit-Regular.woff') format('woff');
}

/*************** TYPE ***************/


.blog-type {
    margin: 0 auto;
    /*margin-top: -90px;*/
    padding: 2rem .5rem .5rem .5rem;
    display: block;
    background-color: rgb(54, 73, 90);
    color: #fff;
}

.blog-type .icon-project {
    display: block;
    position: relative;
    margin: auto;
    text-align: center;
    width:100%;
}

/*************** TYPE by piak ***************/
.wrap-propertytype {
    width: 10%;
    display: inline-block;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.wrap-propertytype:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.propertytype {
    position: relative
}

    .propertytype .icon {
        text-indent: -9999px;
        display: block;
        height: 50px;
        background-color: #364959;
        background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
    }

    .propertytype > .condo {
        background-image: url(/images/icon/type/ic-condo.svg);
    }

.propertytype > .houses {
    background: url(/images/icon/type/ic-house.svg);
}

.propertytype > .apartment {
    background: url(/images/icon/type/ic-apartment.svg);
}

.propertytype > .townhome {
    background: url(/images/icon/type/ic-townhome.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype > .hotel {
    background: url(/images/icon/type/ic-hotel.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype > .commercial {
    background: url(/images/icon/type/ic-commercial.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype > .homeoffice {
    background: url(/images/icon/type/ic-home-office.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype > .officebuilding {
    background: url(/images/icon/type/ic-office-bulding.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype > .shopping {
    background: url(/images/icon/type/ic-shopping.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype > .tooktee {
    background: url(/images/tooktee.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.propertytype .title {
    padding-top: 3px;
    text-transform: uppercase;
}

.propertytype .title::after {
    display: block;
    content: "";
    width: 25%;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    border-bottom: 2px solid #c82021;
}

.propertytype .dropdown-menu {
    /*width: 100%;*/
    border-radius: 0;
}

.numberproperty { /******************* Comment Num of Property *********************/
    display: none;
}

.numberproperty span.number {
    font-size: .8rem;
    font-weight: 800;
    padding-right: 3px;
}

.numberproperty span.unit {
    font-size: .6rem;
}

.numberproperty.list {
    cursor: pointer;
}

.numberproperty.list::after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

#keyword {
    padding: 10px;
    height:42px;
}

.sale-rent-box {
    margin: 0px;
    padding: 0px;
    float: left;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: -10px;
    display: none;
    z-index: 1000;
}



.sale-box, .rent-box {
    width: 45%;
    display: inline-block;
    color: #fff;
    /*border: solid 1px #fff;*/
}

.sale-box {
    position: absolute;
    left: 0;
    width: 50%;
    color: #fff;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    background-color: #c72429;
}

.rent-box {
    position: absolute;
    right: 0;
    width: 50%;
    color: #fff;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    background-color: #6c899d;
}

    .sale-box:hover{
        background-color: #e52026;
    }
.rent-box:hover {
    background-color: #5a85a3;
}
.commercial .rent-box {
    position: absolute;
    left: 0;
    width: 100%;
    color: #fff;
    /*-webkit-transform: translate(0%, -50%);
   transform: translate(0%, -50%);*/
    background-color: #6c899d;
}


/********************* About **********************/
.blog-about {
    /*padding: 3rem;
    position: relative;*/
    margin: 0 auto;
    padding: 2rem .5rem 2rem .5rem;
    display: block;
    min-height: 500px;
}

.drescription-about {
    text-align: left;
}

.space-box-detail-about {
    text-align: center;
    padding: 0 2rem !important;
}

.space-box-detail-about > div {
    padding: 1rem 1rem;
}

@media(max-width:767px) {
    .space-box-detail-about {
        padding: 0 !important;
    }
}

.img-about {
    padding: 1.25rem;
}

.img-about img {
    display: initial;
    height: 80px;
    margin-bottom: 1rem;
}

.title-type-about {
    font-weight: bold;
    font-size: 1.3rem;
}

.btn-readmore {
    background-color: #c72429;
    color: #fff;
}


@media(max-width:840px){
    .blog-about{
        padding:1.5rem 1rem;
    }
    .space-box-detail-about {       
        padding:0 !important;
    }
}

/********************* Banner ETC ***********************/

.bg-interested {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 20%;
    left: 50%;
}
.bg-realnews {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top:20%;
    left:50%;
}

.box-recommend, .box-interested, .box-news {
    position: relative;
}

.bg-banner-img{
    position:relative;
}

.bg-banner-img img {
    width: 100%;
}

.bg-banner-interested {
    background-image: url('/images/mockup/banner-interested.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-realnews {
    background-image: url('/images/mockup/banner-real-news.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/********************* Blog ***********************/

.blog-deal {
    margin: 0 auto;
    padding: 2rem .5rem 2rem .5rem;
    display: block;
    background-color: #f2f2f2;
    /*color: #fff;*/
    min-height: 500px;
}
.blog-review {
    margin: 0 auto;
    padding: 2rem .5rem 2rem .5rem;
    display: block;
    background-color: rgb(54, 73, 90);
    color: #fff;
    min-height: 500px;
}
.blog-interested {
    margin: 0 auto;
    padding: 2rem .5rem 2rem .5rem;
    display: block;
    /*background-color: #f2f2f2;*/
    /*color: #fff;*/
    min-height: 500px;
}
.blog-news {
    margin: 0 auto;
    padding: 2rem .5rem 2rem .5rem;
    display: block;
    background-color: rgb(54, 73, 90);
    color: #fff;
    min-height: 500px;
}

/********************* Grid ***********************/

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax( 160px, 1fr));
    grid-gap: 10px;
    /*grid-auto-rows: minmax(180px, auto);*/
    grid-auto-flow: dense;
    padding: 10px;
}

    .grid-container .grid-item:first-child {
        grid-row-end: span 3;
    }

    .grid-container .card:first-child {
        grid-row-end: span 3;
    }

.grid-container-news {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax( 350px, 1fr));*/
    grid-gap: 10px;
    grid-auto-flow: dense;
    padding: 10px;
}
    .grid-container-news .card:hover {
        transform: translateY(-0.05rem) scale(1.0000);
        box-shadow: 0 0.5em 3rem -1rem rgba(0,0,0,0.5);
        cursor: pointer;
    }
.grid-container-interested {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax( 200px, 1fr));*/
    /*grid-template-rows: repeat(3, 200px) !important;*/
    grid-gap: 10px;
    grid-auto-flow: dense;
    padding: 10px;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-gap: 10px;
    /*grid-auto-rows: minmax(180px, auto);*/
    grid-auto-flow: dense;
    padding: 10px;
}

.grid-item {
    /*padding: 1rem;*/
    /*font-size: 14px;
            font-weight: bold;*/
    /*text-transform: uppercase;*/
    /*color: #929796;*/
    /*background-color: #36495a;*/
    box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.7);
    border-radius: .25rem;
    cursor: pointer;
}
    .grid-item:hover {
        transform: translateY(-0.05rem) scale(1.0000);
        box-shadow: 0 0.5em 3rem -1rem rgba(0,0,0,0.5);
    }
    /*.grid-item:nth-child(odd) {
                background-color: #424242;
            }*/
    .grid-row-sp-2 {
        grid-row-end: span 2;
    }

.grid-row-sp-3 {
    grid-row-end: span 3;
}

.grid-column-sp-2 {
    grid-column-end: span 2;
}

.grid-column-sp-3 {
    grid-column-end: span 3;
}

.grid-column-sp-4 {
    grid-column-end: span 4;
}
.span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.span-3 {
    grid-column-end: span 3;
    grid-row-end: span 3;
}
@media(max-width:1200px) {
    .grid-container .grid-item-3 {
        grid-column-end: span 3 !important;
    }
    .grid-container .grid-item-6 {
        grid-column-end: span 5 !important;
    }
    .grid-layout .grid-item-2 {
        grid-column-end: span 4 !important;
    }
    .grid-container-news .grid-item-1 {
        grid-column-end: span 4 !important;
    }
    .grid-container-news .grid-item-2, .grid-container-news .grid-item-3 {
        grid-column-end: span 2 !important;
    }
    .grid-container-news .grid-item-4 {
        grid-column-end: span 4 !important;
    }
}
@media(max-width:991px) {
    .grid-container .grid-item-4, .grid-container .grid-item-5 {
        grid-row-end: span 2 !important;
        grid-column-end: span 2 !important;
    }

    .grid-container .grid-item-3 {
        grid-column-end: span 2 !important;
    }

    .grid-container .grid-item-6 {
        grid-column-end: span 4 !important;
    }
    .grid-layout .grid-item-2 {
        grid-column-end: span 2 !important;
    }
    .grid-layout .grid-item-6 {
        grid-column-end: span 4 !important;
    }
    .grid-layout .grid-item-3 .flex-row {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
}
@media(max-width:768px) {
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax( 300px, 1fr));
    }

        .grid-container .grid-item {
            grid-row-end: unset !important;
            grid-column-end: unset !important;
        }

        .grid-container .grid-img-top {
            height: 10rem !important;
        }
        .grid-container .grid-item .img-result {
            height: 250px !important;
        }
        .grid-container .grid-item .flex-row {
            -webkit-box-orient: vertical !important;
            -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
            flex-direction: column !important;
        }

    .grid-layout {
        grid-template-columns: repeat(auto-fill, minmax( 300px, 1fr));
    }
       
        .grid-layout .grid-item {
            grid-row-end: unset !important;
            grid-column-end: unset !important;
        }

            .grid-layout .grid-item .img-result {
                height: 250px !important;
            }

            .grid-layout .grid-item .flex-row {
                -webkit-box-orient: vertical !important;
                -webkit-box-direction: normal !important;
                -ms-flex-direction: column !important;
                flex-direction: column !important;
            }
        .grid-layout .grid-item-1 {
            grid-row-end: unset !important;
            grid-column-end: 2 !important;
        }

        .grid-layout .grid-item-2 {
            grid-column-end: 2 !important;
        }
        
    .grid-container-news .card {
        grid-row-end: span 2 !important;
        /*grid-column-end: span 2 !important;*/
    }

        .grid-container-news .card.flex-row {
            -webkit-box-orient: vertical !important;
            -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
            flex-direction: column !important;
        }
}

@media(max-width:375px) {
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax( 200px, 1fr));
    }
    .grid-container-news {
        grid-template-columns: repeat(auto-fill, minmax( 200px, 1fr));
    }
    .grid-layout {
        grid-template-columns: repeat(auto-fill, minmax( 200px, 1fr));
    }
}