/* 
red : # 77B49C
grey: #484c4c 

*/
html{  scroll-behavior: smooth;}

body{font-family: 'Poppins', sans-serif; font-size: 19px; font-weight:300; color: #333333; padding-top: 69px;}
a{-webkit-transition: all 0.32s ease-out; -moz-transition: all 0.32s ease-out; -o-transition: all 0.32s ease-out; -ms-transition:  all 0.32s ease-out; transition: all 0.32s ease-out; text-decoration:none;}
a:hover{color: #77B49C; text-decoration: none;}

h1{font-size: 24px;  }

/*COMMOM STYLES*/

.bg-grey{background-color: #484c4c!important; }
.bg-brand{background-color: #77B49C;}
.bg-red{background-color: #F6F5F4!important;}

.btn-brand{background-color: #77B49C;  transition: all 0.32s ease-out; color: #FFF; font-weight: bold; font-size: 14px; padding: 15px 25px; letter-spacing: 1.5px; }
.btn-brand:hover{background-color: #484c4c; color: #FFF!important;}

.text-brand{color:#77B49C!important;}
.text-black{color:#000!important;}
.text-grey{color: #999999!important;}



.has-bg{background-position: center; background-size: cover; }


.img-linked{-webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; -ms-transition:  all 0.12s ease-out; transition: all 0.12s ease-out;}
.img-linked:hover{transform: scale(1.1); cursor: pointer;}
.text-linked{color: inherit;}
.text-linked:hover{text-decoration: underline;}


.lh-2{line-height: 2;}
.lh-3{line-height: 3;}

.fw-sb{font-weight: 600;}

.fs-13{font-size: 13px;}
.fs-17{font-size: 17px;}
.fs-21{font-size: 21px;}
.fs-24{font-size: 24px;}
.fs-34{font-size: 34px;}
.fs-38{font-size: 38px;}

@media screen and (max-width: 767px){
    body{padding-top: 144px;}
}


/* NAVIGATION*/
.nav-links{color: #77B49C; font-size: 23px; font-weight: 400; letter-spacing: 1px; text-align: center; display: block;}
.is-active{color: #77B49C!important;}

.img-logo{z-index: 999;  border-radius: 50%; position: absolute; top:80%; left: 50%; transform: translate(-50%, -50%); transition: all 0.32s ease-out}
.img-logo:hover{transform: translate(-50%, -50%) scale(1.1);}



.nav-wrapper{background-color: #FFF; padding-top: 30px;}

@media screen and (max-width: 767px){
   
    .img-logo{border: none; margin-top: 10px; margin-bottom: 10px; width: 70px; position: relative; top: inherit; left: inherit; transform: none;}
    .img-logo:hover{transform: scale(1.1);}
    .nav-links{font-size: 12px;}
    .nav-wrapper .col{width: 25%; margin: 0; padding-top: 0!important;}
}



/*WELCOME PAGE*/
.hero-wrapper{position: relative; height: calc(100vh - 112px); width: 100%; background-image: url('/images/hero.jpg'); background-position: center; background-size: cover;}

#heroCaption{position: absolute; left: 5%; bottom: 10%;}
#heroCaption h1{font-size: 95px; color:#FFF; text-shadow: 1px 1px 11px #000;}

#testimonials{background-image: url('/images/bg_testimonials.jpg'); padding: 150px 50px;}
#testimonials .carousel{background-color: rgba(255,255,255,.85); padding: 25px;}
#testimonials .carousel .carousel-item p{min-height: 150px;}

#gallery{ background: url(/images/bg-gallery-top.png) top no-repeat, url(/images//bg-gallery-right.png) right no-repeat, url(/images//bg-gallery-bottom.png)left  bottom no-repeat;;}

.btn-register{position: fixed; top:68px;  right: 0; z-index: 9999; }
.btn-register:hover{right: 4px; transition: all 0.12s ease-out}

.content-wrapper{position: relative; overflow: hidden; }
.overlay{position: relative;   background-color: rgba(255,255,255, .9); width: 100%; max-width: 767px; height:900px;  z-index: 815;   }
.overlay-left{transform: skew(8deg); transform-origin: bottom right;}
.overlay-right{transform: skew(8deg); transform-origin: bottom left; float: right; margin-right: -75px;}
.content-text{z-index: 850; position: absolute; top: 50%; left: 45%;  max-width: 600px;}

.overlay-left .content-text{transform: translate(-50%, -50%) skew(-8deg);}
.overlay-right .content-text{transform: translate(-50%, -50%) skew(-8deg); text-align: right; }

.wrapper-sm, .wrapper-sm .overlay{height: 400px;}

.overlay-right .btn-brand{transform: skew(-8deg); transform-origin: bottom left; }

.box-wrapper{position: relative;  overflow: hidden;}
.box-wrapper .overlay{position: absolute; background-color: rgba(255,255,255, .9); top:0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; padding: 15px; z-index: 95; opacity: 0; transition: all .20s ease-in-out;}
.box-wrapper:hover  .overlay{opacity: 1;}
.box-wrapper .overlay p{text-align: center; color: #000!important; }
.box-wrapper .box-brand{position: absolute; bottom: 0px; right:-5px; color:#FFF; font-size: 13px; letter-spacing: 1.25px; background-color:#77B49C; z-index: 100; 
transform: skew(10deg); }
.box-wrapper .box-brand p{padding: 15px 15px 0 20px; text-transform: uppercase; transform: skew(-10deg);}

.inner-hero{min-height: 500px; position: relative;}
.inner-hero .overlay{height: 500px; background-color: rgba(255,255,255, .9); transform: skew(8deg); margin-left: -100px;}
.inner-hero .hero-caption{position: absolute; ; max-width: 450px; top: 50%; left: 50%; z-index: 999;     transform: translate(-50%, -50%) skew(-8deg);}
.hero-fp{height: 200px; min-height: 200px;}


@media screen and (max-width: 767px){
    .hero-wrapper .hero-caption{
        position: relative;
        left: inherit;
        top: inherit;
        max-width: 100%;
        padding: 25px;
    }
    .btn-register{
        position: fixed;
        top: -34px;
        right: inherit;
        left: 25px;
        transform: rotate(-90deg);
        width: 60px;
    }
    .overlay {
        position: relative;
        max-width: 100%;
        height: auto;
        background-color: #FFF;
      }
    .overlay-left, .overlay-right {transform: none; float: none;}
    
    .overlay-right .content-text,
    .overlay-left .content-text{transform: none; }

    .content-text {
        z-index: 850;
        position: relative;
        top: inherit;
        left: inherit;
        max-width: 100%;
        padding: 25px;
    }
    .wrapper-sm, .wrapper-sm .overlay{height: auto;}

    .inner-hero{height: auto; min-height: 50px;}
    .inner-hero .hero-caption{
        position: relative;
        left: inherit;
        top: inherit;
        max-width: 100%;
        padding: 25px;
        transform: none;
        
    }
    .inner-hero .overlay{transform: none; margin-left: 0; height: auto; background-color: #FFF;}
    /* .box-wrapper .overlay{opacity: 1;} */
}

@media(min-width:768px) and (max-width: 991px){
    .hero-wrapper .hero-caption{left:10%; top:10%; max-width: 80%;}
     .hero-wrapper .hero-caption img{max-width: 60%;}
     .overlay{max-width: 500px;}
     .inner-hero .overlay{max-width: 740px;}
}




/*THE PLANS */
#plans{background-image: url('/images/bg-plans-inner.jpg');}
#features{background-image: url('/images/bg-features-inner.jpg');}
#area{background-image: url('/images/bg-area-inner.jpg');}
#builder{background-image: url('/images/bg-builder-inner.jpg');}
#floorplans{background-image: url('/images/bg-floorplan.jpg');}
#register{background-image: url('/images/bg-register-inner.jpg');}
#privacy-policy{background-image: url('/images/bg-privacy-policy-inner.jpg');}

#filters-wrapper select{border: 10px solid #FFF;}
#filters-wrapper .btn{border: 3.5px solid #FFF; margin-top:-3px; margin-left: 15px; border-radius: 0; background-color: #FFF; transition: all .25s ease-in-out;}
#filters-wrapper .btn:hover{background-color: #77B49C; color: #FFF;}

.img-fp-ico{width: 28px; height: auto;; margin-right: 10px; margin-bottom: 5px;}
.fp-details{font-size: 12px; line-height: 32px;}
.fp-details strong{font-size: 18px; line-height: 60px;}

@media screen and (max-width: 767px){
    #filters-wrapper select{max-width: 45%; float: left; margin: 5px;}
    #filters-wrapper .btn{margin: 5px; display: block; }
}



/* FOOTER*/


/* THE FEATURES */
.featured_items{background-image: url('/images/bg-art.jpg');}

#carouselFeatures .carousel-control-next, #carouselFeatures .carousel-control-prev{opacity: 1; width: 100px;}
#carouselFeatures .carousel-control-next img{height: 100%; width: 100%;} 
#carouselFeatures .carousel-control-prev img{height: 100%; width: 100%; transform: rotate(180deg);} 
#carouselFeatures .carousel-control-next span{position: absolute; top: 15px; font-size: 14px; letter-spacing: 1.5px;}
#carouselFeatures .carousel-control-prev span{position: absolute; bottom: 15px;  font-size: 14px;  letter-spacing: 1.5px;}


@media(min-width:768px) and (max-width: 991px){
    #filters-wrapper .btn{margin: 7px; }
    .box-wrapper .box-brand{font-size: 10px;}
}

@media screen and (min-width:992px){
    .box-wrapper .box-brand{font-size: 16px;}
}

/*REGISTER*/
#email-form input,
#email-form select,
#email-form button{border-radius: 0!important;}
/**/
/**/
/**/
/**/