

/*********************** Demo - 8 *******************/
.box8{overflow:hidden}
.box8 .icon,.box8 .title{margin-bottom:25px; position:absolute}
.box8{box-shadow:0 0 3px rgba(0, 0, 0, 0.849);position:relative; border:1px solid #BBB; background: rgba(0, 0, 0, 0.849)} 
.box8 img{width:100%; height:300px; background: rgba(0, 0, 0, 0.849) }
.box8 .icon li,.box8 .title{display:inline-block}
.box8 .box-content{width:100%;height:100%;background:rgba(0,0,0,.8);opacity:0;position:absolute;top:0;left:0;transform:perspective(400px) rotateX(-90deg);transform-origin:center top 0;transition:all .5s ease 0s}
.box8 .icon li a,.box8 .title{background:#f6f6f6;font-size:15px;color:#A77400}
.box8 .location{font-size:15px;color:#fff; font-weight: 600; float: right !important; position:absolute;}
.box8:hover .box-content{opacity:1;transform:perspective(400px) rotateX(0)}
.box8 .title, .box8 .location{padding:5px 7px;border-radius:5px;font-weight:600;bottom:20px;left:20px;transition:all .9s ease 0s}
.box8 .icon li a,.box9 .box-content,.box9 .icon li,.box9 img{transition:all .35s ease 0s}
.box8:hover .title{bottom:-40px}
.box8 .icon{list-style:none;padding:0;top:42%;left:0;right:0}
.box8 .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;margin-right:7px}
.box9 .icon,.box9 .title{width:100%;font-size:22px}
.box8 .icon li a:hover{background:#fff;color:#000}
.box8 .description{font-size:14px;font-style:italic;padding:0 10px;margin:15px 0}
.box8 .read-more{display:block;width:120px;background:#178993;border-radius:5px;font-size:14px;color:#fff;text-transform:capitalize;padding:10px 0;margin:0 auto; text-align: center}
.box8 p{font-size: 15px; margin: 20px; color: #fff; text-align: center}
@media only screen and (max-width:990px){.box8{margin-bottom:20px}
}


.mt-30{
    padding-top: 10px
}

 .corner-ribbon{
    width: 200px;
    background: #e43;
    position: absolute;
    top: 30px;
    left: -50px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    letter-spacing: 1px;
    color: #f0f0f0;
    text-transform: uppercase;
    font-weight: 700;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
  }

.ready{background: #39d;}
.planned{background: #2c7;}
.constructing{background: #1b9;}
.sold{background: #e43;}

.sold-property{background: #be072e;}
.available{background: #3b0da7;}
.new{background: #06bf16;}

.project-content{overflow:hidden}
.project-content .icon,.project-content .title{margin-bottom:25px; position:absolute}
.project-content{box-shadow:0 0 3px rgba(0,0,0,.5);position:relative; border:1px solid #BBB;} 
.project-content img{width:100%; height:180px}
.project-content .icon li,.project-content .title{display:inline-block}
.project-content .box-content{width:100%;height:100%;background:rgba(0,0,0,.4);opacity:0;position:absolute;top:0;left:0;transform:perspective(400px) rotateX(-90deg);transform-origin:center top 0;transition:all .5s ease 0s}
.project-content .icon li a,.project-content .title{background:#f6f6f6;font-size:15px;color:#A77400}
.project-content .location{font-size:15px;color:#fff; font-weight: 600; float: right !important; position:absolute;}
.project-content:hover .box-content{opacity:1;transform:perspective(400px) rotateX(0)}
.project-content .title, .project-content .location{padding:5px 7px;border-radius:5px;font-weight:600;bottom:20px;left:20px;transition:all .9s ease 0s}
.project-content .icon li a,.box9 .box-content,.box9 .icon li,.box9 img{transition:all .35s ease 0s}
.project-content:hover .title{bottom:-40px}
.project-content .icon{list-style:none;padding:0;top:42%;left:0;right:0}
.project-content .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;margin-right:7px}
.box9 .icon,.box9 .title{width:100%;font-size:22px}
.project-content .icon li a:hover{background:#fff;color:#000}
.project-content .description{font-size:14px;font-style:italic;padding:0 10px;margin:15px 0}
.project-content .read-more{display:block;width:120px;background:#178993;border-radius:5px;font-size:14px;color:#fff;text-transform:capitalize;padding:10px 0;margin:0 auto; text-align: center}
.project-content p{font-size: 15px; margin-top: 20px; color: #fff}
@media only screen and (max-width:990px){.project-content{margin-bottom:20px}
}

.properties{overflow:hidden}
.properties .icon,.properties .title{margin-bottom:25px; position:absolute}
.properties{box-shadow:0 0 3px rgba(0,0,0,.5);position:relative; border:1px solid #BBB;} 
.properties img{width:100%; height:300px}
.properties .icon li,.properties .title{display:inline-block}
.properties .box-content{width:100%;height:100%;background:rgba(0,0,0,.4);opacity:0;position:absolute;top:0;left:0;transform:perspective(400px) rotateX(-90deg);transform-origin:center top 0;transition:all .5s ease 0s}
.properties .icon li a,.properties .title{background:#f6f6f6;font-size:15px;color:#A77400}
.properties .location{font-size:15px;color:#fff; font-weight: 600; float: right !important; position:absolute;}
.properties:hover .box-content{opacity:1;transform:perspective(400px) rotateX(0)}
.properties .title, .properties .location{padding:5px 7px;border-radius:5px;font-weight:600;bottom:20px;left:20px;transition:all .9s ease 0s}
.properties .icon li a,.box9 .box-content,.box9 .icon li,.box9 img{transition:all .35s ease 0s}
.properties:hover .title{bottom:-40px}
.properties .icon{list-style:none;padding:0;top:42%;left:0;right:0}
.properties .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;margin-right:7px}
.box9 .icon,.box9 .title{width:100%;font-size:22px}
.properties .icon li a:hover{background:#fff;color:#000}
.properties .description{font-size:14px;font-style:italic;padding:0 10px;margin:15px 0}
.properties .read-more{display:block;width:120px;background:#178993;border-radius:5px;font-size:14px;color:#fff;text-transform:capitalize;padding:10px 0;margin:0 auto; text-align: center}
.properties p{font-size: 15px; margin-top: 20px; color: #fff}
@media only screen and (max-width:990px){.properties{margin-bottom:20px}
}
