/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 28 Dec, 2017, 11:06:16 AM
    Author     : Yap
*/
#header ul{
    width: 75%;
    display: inline-block;
    vertical-align: top;
}
#header ul li{
    display: inline-block;
    padding: 34px 19px;
}
#header ul li a{
    text-decoration: none;
    padding-bottom: 10px;
}
#header ul li a:hover{
    color: white !important;
}
.logo{
    width: 15%;
    display: inline-block;
}
.blue{
    color: #15B1AA;
}
.blue2{
    color: #4FB8C6;
}
.blue3{
    color: #81C9C7;
}
.green{
    color: #7DBB6E;
}
.green2{
    color:#AED1A1;
}
.green3{
    color: #C5E0A9;
}
.green4 {
    color: #E8F4EE;
}
.freehold{
    font-family: "Circe-Light";
    position: absolute;
    bottom: 5%;
    right: 5%;
    padding: 10px 27px;
    background-color: #106980;
    font-size: 23px;
    letter-spacing: 8px;
}
.concept-section .content p{
    font-family: "Facto-Regular";
    color: #1D1D1B;
    margin-top: 30px;
    text-align: justify;
}
.detail{
    margin-top: 30px;
    background-color: #7AB66F;
    color: #F3F4C2;
    display: inline-block;
    padding: 10px 25px;
}
.detail span{
    border-bottom: 1px solid #F3F4C2;
    padding:10px 0px;
    display: inline-block;
    line-height: 1.5;
    font-family: "Facto-Medium";
}
.detail span:last-child{
    border-bottom: none;
}
.backcolor{
    background-color: #57B7BA;
    display: inline-block;
    /* padding-top: 100px; */
    margin-top: -90px;
    z-index: 99;
    padding: 7% 19% 2% 19%;
}
.backcolor .content h2.teal{
    font-size: 25px;
    font-family: "Circe-Light";
}
.backcolor .content h2.teal .ONE{
    font-size: 42px;
    padding-left: 4.2em;
}
.half-content{
    padding-left: 14.2em;
    display: inline-block;
    padding-bottom: 20px;
    font-family: "Facto-Medium";
}
.half, .half-right{
    /*width: 47.5%;*/
    text-align: justify;
    color: #F3F4C2;
}
.half{
    /*float:left;*/
}
.half-right{
    top: 20%;
    position: absolute;
    /*float: right;*/
}
.fortext{
    color:#57B7BA; 
}
.forimage{
    width: 25%;
    display: inline-block;
    padding: 10px 30px 10px 80px;
}
.fortext{
    vertical-align: top;
    width: 58%;
    display: inline-block;
    font-family: "Facto-Bold";
    font-size: 20px;
    padding-top: 15px;
}
.content1{
    position: relative;
    padding: 0 19%;
    display: inline-block;
    padding-top: 7%;
}
.backcolor .teal .THREE{
    padding-left: 6%;
}
.teal .ONE{
    padding-left: 12%;
}
.ONE,.TWO,.THREE{
    font-family: "Circe-Light";
    font-weight: normal;
}
.backcolor .teal .line, .test .line,.strategy .line{
    background-repeat: no-repeat;
    background-position: 100% 109%;
    background-size: 65%;
    width: 99%;
    display: inline-block;
}
.backcolor .teal .line2, .test .line2,.strategy .line2{
    background-repeat: no-repeat;
    background-position: 0 118%;
    background-size: 100%;
    width: 63%;
    display: inline-block;
    position: absolute;
}
.backcolor2 {
    padding-top: 0;
    margin-top: -120px;
}
.backcolor2 .teal{
    width: 62%;
    display: inline-block;
}
.backcolor2 .teal .line2{
    background-position: 0 117%!important;
    width:32%;
}
.backcolor2 .teal .line{
    background-position: 100% 100% !important;
    width: 74.5%;
}
@media(min-width:1600px){
    .backcolor .teal .line2, .test .line2{
        background-position: 0 154%;
    }
    .backcolor .teal .line .test .line{
        background-position: 100% 111%;
    }
    .concept-section .content-sect1 .col-wrapper .col-rt-2 .content-wrapper{
        width: 60%;
    }
}
.forimage1{
    width: 35%;
    display: inline-block;
    padding: 0px;
}
.fortext1{
    color: #57B7BA;
    vertical-align: top;
    width: 40%;
    display: inline-block;
    font-family: "Facto-Bold";
    font-size: 20px;
    padding-top: 15px;
    padding-left: 10.2em;
    text-align: right;
    padding-right: 2em;
}
.test{
    background-color: #57B7BA;
    width: 100%;
    height: 50%;
    display: inline-block;
    padding: 0 19%;
}
.test p , .test .detail{
    width: 45.5%;
    display: inline-block;
}
.test .content{
    width: 1200px;
    font-family: "Facto-Medium";
    display: inline-block;
}
.test .detail{
    margin-left: 4%;
    width:280px;
}
.test .content p{
    margin-left: 13.2em;
    vertical-align: top;
}
.test .detail span{
    width: 100%;
}
.test .content-wrapper{
    width: 100%;
    display: inline-block;
}
.test .line, .strategy .line{
    background-position: 0 122%;
}
.flexslider li.strategy{
    /*background-color: #57B7BA;*/
    height: 100%;
    display: inline-block;
    width: 100%;
    /*padding: 8% 19%;*/
}
.strategycontain{
}
.strategycontain .content-wrapper{
    font-family: "Facto-Medium";
    width: 1000px;
    padding-left: 5.4em;
}
.strategy .line2{
    background-size: 47%;
    background-position: 0 98%;
}
.flexslider .facilities-wrapper .planimg{
    width: 55%;
    float: left;
    display: inline-block;
    margin-left: 6%;
}
.flexslider .facilities-wrapper .planimg2{
    width: 40%;
    float: left;
    display: inline-block;
    margin-left: 15%;
    margin-top: 6%;
}
.flexslider .facilities-wrapper .planlist2{
    position: absolute;
    width: 35%;
    float: right;
    display: inline-block;
    top: 56%;
    right: 7%;
}
.flexslider .facilities-wrapper .planlist3{
    top: 51%;
}
.flexslider .facilities-wrapper .planlist{
    position: absolute;
    width: 81%;
    float: right;
    display: inline-block;
    bottom: 40%;
    left: 45%;
}
.planlist2 .plan{
    left: 0;
}
.plan{
    position: absolute;
    top: -230px;
    left: 16%;
    /* color: #2C8F9A; */
    font-size: 20px;
    font-family: "Facto-Medium";
}
.plan .faciplan{
    margin-right: 30px;
    font-size: 18px;
    color: #c6c6c6;
    font-family: "Facto-Medium";
}
.plan .floorplan{
    font-size: 18px;
    font-family: "Facto-Medium";
}
.plan .faciplan:hover, .plan .floorplan:hover{
    color: #106980;
}
.titt{
    color: #2C8F9A;
    font-size: 20px;
    font-family: "Facto-Medium";
}
#facilities .flex-direction-nav .flex-next{

}
#facilities .flex-direction-nav .flex-prev{

}
.plan-section .col-lf-2{

}
.plan-section .col-rt-2{
    margin-left: 10%;
}
.plan-section .col-rt-2 img{
    height: 80%;
    position: relative;
    width: 80% !important;
}
.plan-section .smallletter{
    position: absolute;
    width: 461px;
    margin: 10% 0;
    color: #1D1D1B;
    font-size: x-small;
}
.plan-section .plantitle{
    color: #3F333F;
}
#plan .dropdownPlan{
    font-family: "Facto-Medium";
}
.plan-section .point{
    padding-bottom: 5px;
    color: #00B495;
}
.positionnorth{
    position: absolute;
    bottom: 61px;
    left: 100px;
    width: 40px;
    z-index: 9;
    height: 40px;
}
.plan-section .faciplan, .plan-section .floorplan,#location .faciplan,#location .floorplan{
    font-size: 18px;
    padding-bottom: 20px;
    font-family: "Facto-Medium";
    display: inline-block;
}
.plan-section .faciplan,#location .faciplan{
    margin-right: 30px;
}
.plan-section .faciplan:hover, .plan-section .floorplan:hover,#location .faciplan:hover,#location .floorplan:hover{
    color: #106980;
}
.plan-section .plantype{
    color: #00A98C;
    font-family: "Facto-Medium";
    font-size: 20px;
    padding-bottom: 15px;
}
.selected{
    color: #106980 !important;
}
.plan a, .plan-section a{
    text-decoration: none;
}
.plan .floorplan, .plan-section a,#location a{
    color: #c6c6c6;
}
.plan-section .type1{
    width: 30.5%;
    float: left;
    display: inline-block;
}
#location .col-12{
    width: 100%;
}
/*.complex .col-lf-2{
    width: 100% !important;
    float: none;
    height: 50%;
    display: inline-block;
}*/
.complex .col-lf-2 .backstretch{
    height: 100% !important;
    width:100% !important;
}
.complex{
    padding: 0 !important;
    background-color: #57B6B9;
}
/*.complex .col-lf-2 .backstretch img{
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
}*/
.concept-section.complex .content p, 
.concept-section.leisure .content p, 
.concept-section.relax .content p, 
.concept-section.vistas .content p, 
.concept-section.exp .content p, 
.concept-section.exp2 .content p,
.concept-section.activity .content p, 
.concept-section.strategy .content p{
    margin-top: 0;
    padding: 4px 0% 0 12.5%;
    font-size: 12px;
}
#concept .exp .content ul{
    padding: 30px 0 0 16.5%;
}
#location .col-3{
    width: 24%;
    display: inline-block;
    vertical-align: top;
}
#location .col-4{
    width: 53%;
    display: inline-block;
    vertical-align: top;
}
#location .col-3.details p{
    color: #706F6F;
    font-family: "Circe-Regular";
    text-align: justify;
}
#location .col-3.bgcontent{
    background-color: #00B495;
    padding: 20px;
}
#location .col-3.bgcontent p{
    color: black;
    -webkit-margin-before: 0;
    font-family: "Circe-Regular";
}
.loc-sect1{
    margin-left: 9%;
    padding: 100px 0;
}
#developer .develop{
    position: relative;
    width: 1100px;
    margin: 0 auto;
    padding-top: 100px;
}
#developer .develop .col-6{
    width: 45%;
    display: inline-block;
    padding-top: 10px;
}
#developer .develop .col-4{
    width: 31%;
    vertical-align: top;
    display: inline-block;
    text-align: justify;
    padding: 5px;
    margin-right: 12px;
}
#developer .develop .col-4 p{
    color:white;
    font-family: "Circe-Regular";
}
#developer .develop .col-6 img {
    width: 97%;
    padding-top: 10px;
}
#developer .develop .is{
    vertical-align: top;
    padding-top: 14px;
    width: 54%;
}
#developer .develop .is img {
    width: auto;
    height: 129px;
}
#developer .develop .is p{
    font-family: "Circe-Regular";
    color: white;
    font-size: 16px;
    padding-bottom: 20px;
}
#contact .col-lf-2{
    margin-left: 10%;
    width: 44%;
}
#contact .col-rt-2{
    padding-top: 6%;
    padding-left: 40px;
}
.title-desc li{
    font-size: 24px;
    color: #00FFAD;
    list-style-type: none;
    font-family: 'Facto-Medium';
}
#contact p{
    color: white;
}
ul.title-desc{
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}
.left1{
    left: -1%;
}
.left2{
    left: -2%;
}
.left25{
    left: -2.5%;
}
.left3{
    left: -3%;
}
/*.relax .content-wrapper{
    background-color: #ffffffbd;
}
.vistas .content-wrapper{
    background-color: #ffffff85;
}*/
#home .flex-control-nav, #concept .flex-control-nav{
    display: block;
}
#facilities .flex-control-nav{
    bottom:70px;
}
.flex-control-paging li a{
    background: white !important;
}
.flex-control-paging li a.flex-active{
    background: rgba(210, 204, 204, 0.72) !important;
}
#concept .content ul{
    font-family: "Facto-Regular";
    /*padding-top: 30px;*/
}
#concept .content ul li{
    padding: 2px 0;
    font-size: 12px;
}
.leisure{
    background-color: #57B7BA;
}
.activity {
    width: 100% !important;
}
/*.activity .content-sect1{
    padding: 20px 10% !important;
    width: 1200px;
    display: inline-block;
}*/
.acticicon .content p{
    margin-top: 0px;
}
#concept .acticicon .content ul{
    padding-top: 0;
}
#concept .acticicon .content ul li{
    width: 50%;
    padding: 5px 0;
}
#concept .acticicon .content ul li:nth-child(odd){
    float: left;
}
#concept .acticicon .content ul li:nth-child(even){
    float: right;
}
.activity h2.teal{
    -webkit-margin-after: 0em;
}
.relax .backstretch img, .leisure .backstretch img, .activity .backstretch img,.complex .backstretch img,.strategy .backstretch img{
    /*    height: 60% !important;
        width: 100% !important;
        left: 0 !important;
        top: 20% !important;*/
}
.last{
    font-size: 20px;
    color: black;
}
.flexslider .slides .strategy .half-right img{
    width: 49%;
    display: inline-block;
    padding-right: 4px;
    padding-bottom: 2px;
}
.strategy ul.listplace{

}
.strategy ul.listplace li{
    display: block;
    font-size: 12px;
}
.strategy ul.listplace li span{
    background-color: #003D4A;
    border-radius: 100%;
    padding: 3px 8px;
    margin-right: 5px;
}
ul.listfaci{
    display: inline-block;
    width: 20%;
    -webkit-padding-start: 0px;
    vertical-align: top;
}
ul.park{
    width: 48%;
}
ul.listfaci li{
    font-family:  'Circe-Regular';
    display: block;
    padding-bottom: 3px;
    color: black;
}
ul.listfaci li span{
    background-color: black;
    border-radius: 100%;
    padding: 1px 4px;
    color: white;
}
ul.listfaci li span.sma{
    padding: 1px 7px;
}
.deck{
    position: absolute;
    width: 100%;
    display: block;
}
.smallimg img{
    width: 105px;
    min-height: 95px;
}
.smallimg img.special{
    width: 160px;
    min-height: 102px;
}
.next-page-img{
    /*background-image: url(../img/btns/next.png);*/
    background-size: 100%;
    width: 100%;
    height: 100%;
    /* background-position: 94%; */
    display: inline-block;
}
.next-img{
    background-image: url(../img/btns/next.png);
}
.top-img{
    background-image: url(../img/btns/top.png);
}
.floorplan {
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdownPlan, #header ul.dropdownPlan{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

#header ul.dropdownPlan{
    -webkit-padding-start: 0;
    text-align: left;
    min-width: 120px;
}

.dropdownPlan a, .dropdownPlan li {
    color: #c6c6c6;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    text-align: left;
}

.dropdownPlan a:hover, .dropdownPlan li:hover {background-color: #f1f1f1;    color: #106980 !important;}

.dropdown:hover .dropdownPlan, .dropdown:hover ul.dropdownPlan {
    display: block !important;
}
#header ul.dropdownPlan li{
    padding: 10px;
    color: #86ADAC;
    cursor: pointer;
    min-width: 100px;
}
#header ul.dropdownPlan a{
    padding: 0;
    text-align: left;
}
#header ul.dropdownPlan li a:hover{
    color:#106980 !important
}
@media (max-width:1380px){
    .concept-section .content-sect1 .col-wrapper .col-rt-2 .content-wrapper{
        top: 16%;
    }
    .content1{
        padding: 0 5%;
    }
    .backcolor{
        padding: 7% 17% 2% 5%;
        margin-top: -210px;
    }
    .backcolor2{
        margin-top: -240px;
        padding: 1% 17% 2% 5%;
    }
    .fortext1{
        padding-left: 8.2em;
    }
    .backcolor2 .teal .line2{
        width: 45%;
    }
    .backcolor2 .teal .line{
        width: 79.5%;
    }
    .test{
        padding: 0 10%;
        height: 57%;
    }
    .test .line, .strategy .line{
        width: 117%;
        background-position: 0% 100%;
    }
    .flexslider li.strategy{
        /*padding: 0 10%;*/
    }
    .strategycontain .content-wrapper{
        width: 965px;
    }
    .acticicon .content-wrapper{
        width: 850px;
    }
    .plan{
        left: 20%;
    }
    /*    .flexslider .facilities-wrapper .planlist2{
            top:376px;
        }*/
    /*    #concept{
            min-height: 840px;
        }*/
    .content1{
        padding: 7% 5%;
    }
    /*    .plan{
            left: 28%;
        }*/
    .planlist2 .plan{
        left: 0%;
    }
}
/*@media (max-width:1830px){
    .plan .faciplan,.plan .floorplan{
        font-size: 18px;
    }
}
@media (max-width:1680px){
    .plan .faciplan{
        margin-right: 15px;
    }
}
@media (max-width:1570px){
    .plan{
        left: 30%;
    }
}
@media(max-width:1480px){
    .plan{
        top:-320px;
    }
    .plan .faciplan,.plan .floorplan{
        font-size: 17px;
    }
}
@media(max-width:1410px){
    .plan{
        top:-220px;
    }
    .plan .faciplan{
        margin-right: 10px;
    }
}
@media (max-width:1370px){
    .plan{
        left: 17%;
    }
}*/
@media (min-width:1390px){
    .planlist .plan{
        top: -240px;
    }
    #contact .col-rt-2{
        padding-left: 6%;
    }
    #developer .develop{
        padding-top: 193px;
    }
    #developer .upbg{
        height: 350px;
    }
    .loc-sect1{
        padding: 130px 8%;
    }
    /*    .activity .content-sect1{
            padding: 20px 19% !important;
        }*/
}
@media (max-width:1300px){
    .plan{
        left: 24%;
        /*top: -200px;*/
    }
}
@media (max-width:1250px){
    #developer .develop{
        margin: 0 8% auto;
    }
    .smallimg img{
        width: 100px;
    }
    .smallimg img.special{
        width: 156px;
    }
}
@media (max-width:1210px){
    #header ul li{
        padding: 34px 24px;
    }
}
#developer{
    min-height: 705px;
}
#contact{
    min-height: 660px;
}
#location{
    min-height: 600px;
}
#facilities{
    min-height: 470px;
}
#concept{
    min-height: 580px;
}
#plan .flexslider{
    min-height: 740px;
}
@media (max-width:550px){
    #developer{
        max-height: 705px;
        min-height: 400px;
    }
    #contact{
        max-height: 660px;
        min-height: 400px;
    }
    #location{
        max-height: 600px;
        min-height: 400px;
    }
    #facilities{
        max-height: 470px;
        min-height: 400px;
    }
    #concept{
        max-height: 580px;
        min-height: 400px;
    }
    #plan .flexslider{
        max-height: 740px;
        min-height: 400px;
    }
}
.maxheight{
    max-height: 740px !important;
}
.maxheight2{
    max-height: 830px !important;
}
.minheight{
    min-height: 1200px !important;
}
.minheight2{
    min-height: 1000px !important;
}
/***** pin location *********/
#ppp, #ppp2,#ppp3, #ppp4, #ppp5{
    position: absolute;
}
#p1, #p2,#p3, #p4{
    position: absolute;
}
.pin.b {
    margin-top: 40px;
    background: transparent;
    display: inline-block;
    border-radius: 14px 14px 14px 0;
    width: 8px;
    height: 8px;
    border: 6px solid #f33;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: -1px 1px 2px rgba(0,0,0,.2);
    box-shadow: -1px 1px 2px rgba(0,0,0,.2);
}
.listfaci li:hover{
    background-color: #ccc;
}
.bgcontent p span{
    border: 1px dotted black;
    padding: 0px 6px;
    margin-bottom: 0.5px;
    display: inline-block;
}