/* 
red : # 3C8FC6
grey: #484c4c 

*/

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Light.otf') format('opentype');
    font-weight: 300;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Book.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Bold.otf') format('opentype');
    font-weight: 600;
}


body{
    font-family: 'Gotham', sans-serif;
    font-size: 18px; 
    color: #000;
    font-weight: 300;
}

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: #3C8FC6; text-decoration: none;}

::placeholder { color: 000; opacity: 1; }
:-ms-input-placeholder { color: 000;}
::-ms-input-placeholder { color: 000;}

/*COMMOM STYLES*/

.bg-brand{background-color: #3C8FC6!important; }
.bg-grey{background-color: #AEAFB0!important; }
.bg-light{background-color: #C9CACA!important;}
.bg-black{background-color: #000!important;}
.bg-green{background-color: #28702A!important;}


.text-brand{color:#3C8FC6!important;}
.text-black{color:#000!important;}
.text-grey{color:#6D6E70!important;}


.btn-brand{background-color: #FFF;  display: block; transition: all 0.32s ease-out; color: #28702A; font-weight: 600; font-size: 17px; padding: 30px 10px; text-align: center; border: 1px solid #28702A; }
.btn-brand:hover{background-color: #28702A; color: #FFF!important;}


.btn-form{background-color: #28702A;  display: inline-block; transition: all 0.32s ease-out; color: #FFF; font-weight: 500; font-size: 16px; padding: 10px 20px; text-align: center; border: 1px solid #28702A; }
.btn-form:hover{background-color: #FFF; color: #28702A!important;}



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


.img-linked{
    -webkit-transition: all 0.42s ease-out;
    -moz-transition: all 0.42s ease-out;
    -o-transition: all 0.42s ease-out;
    -ms-transition:  all 0.42s ease-out;
    transition: all 0.42sv ease-out;
}
.img-linked:hover{
    transform: scale(1.1);
    cursor: pointer;
}
.text-grey{color: #545850;}
.text-linked{color: #0080a9;}
.text-linked:hover{text-decoration: underline;}

.disclaimer{font-size: 12.5px;}

.accordion_head{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  }
.accordion_head:hover{cursor: pointer;}

.accordion_body{display: none; border-bottom: 1px solid #656565!important;  }

.accordion_head  .showHide{width: 30px;  height: 30px;background-image: url('../images/misc/more.png'); background-position: right; background-size: cover; background-repeat: no-repeat; display: inline-block; transition: all .30s linear;}
.accordion_head.active .showHide{background-image: url('../images/misc/less.png'); transform: rotate(360deg);}

.fw-li{font-weight: 300!important;}
.fw-re{font-weight: 400!important;}
.fw-me{font-weight: 500!important;}
.fw-bo, strong{font-weight: 600!important;}

.lh-15{line-height: 1.5;}
.lh-25{line-height: 2.5;}

.fs-50{font-size: 50px;}
.fs-36{font-size: 36px;}
.fs-32{font-size: 32px;}
.fs-24{font-size: 24px;}
.fs-19{font-size: 19px;}
.fs-18{font-size: 18px;}
.fs-16{font-size: 16px;}
.fs-14{font-size: 14px;}
.fs-12{font-size: 12px;}
.fs-10{font-size: 10px;}

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

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

@media screen and (max-width: 992px){
     .fs-19{font-size: 18px;}
     .fs-36{font-size: 32px; line-height: 1;}
}

@media screen and (max-width: 767px){
    body{font-size: 17 px;}
    .fs-36{font-size: 28px; line-height: 1;}
    .fs-19{font-size: 17px;}

    
}

@media screen and (max-width: 576px){
    body{font-size: 16px;}
    .fs-50{font-size: 26px;}
    .fs-36{font-size: 24px; line-height: 1;}
    .fs-32{font-size: 22px;}
    .fs-24{font-size: 20px;}
    .fs-19{font-size: 16px;}
    .fs-16{font-size: 15px;}
  
}


@media screen and  (min-width: 1450px){
   .container{max-width: 1400px;}
   
}
@media screen and  (min-width: 768px){
   .border-md-left{border-left: 1px solid #000;}
}
@media screen and  (min-width: 992px){
   .border-lg-left {border-left: 1px solid #6D6E70;}
}

.bd-top{border-top: 1px solid #000;}
.bd-bottom{border-bottom: 1px solid #000;}
.mx-991{max-width: 991px;}
.mx-500{max-width: 500px;}

.customList{margin-left: -20px;}
.customList li{margin-bottom: 7px;}

.bg-blue{background-color:#3c85b7}

/* Navigation */
.navbar-brand img{width: 330px;}
.btn-menu:hover{cursor: pointer;}

.menu-wrapper{position: fixed; right: -120vw; opacity: 0; transition: all .40s linear; top: 0; width:0; height: 100%;  z-index: 999;   background-color: rgba(255,255,255, .7);;}
.menu{width: 360px; background-color: #28702A; height: 100%; display: flex; align-items: center; float: right; overflow: auto; position: relative;}

.menu-wrapper #btn-close{position: absolute; right: 15px; top: 15px;}
.menu-wrapper #btn-close:hover{cursor: pointer;}

.menu-items{list-style-type: none; }
.menu .nav-link{color: #FFF; font-size: 17px; font-weight: 600; margin-bottom: 12px;}
.menu .nav-link:hover{color: #989A9B;}
.menu .activeNav{color: #000;}

.ShowMenu{right: 0!important; opacity: 1!important; width: 100%;}
.menu-open{overflow: hidden;}

@media screen and (max-width: 767px){
    .navbar-brand img{width: 175px;}
    .btn-menu{width: 42px; height: auto;}
    .menu .nav-link{font-size: 15px; margin-bottom: 5px; }
}

@media screen and (max-width: 576px){
    .btn-menu{width: 36px; }
    .menu .nav-link{font-size: 14px; margin-bottom: 5px; }
}






/*WELCOME */
#intro{position: fixed; top:0; left:0; background-color: #FFF; z-index: 199; height: 100vh; width: 100%; display: flex; align-items: center;}
#skipVideo{position: absolute; right: -2px; bottom: 100px; display:block; background-color: rgba(0,0,0, .6); color: #FFF;font-weight: 600;padding: 15px; border-radius: 5px 0 0 5px;
    border: 1px solid #FFF;}
#skipVideo:hover{background-color: #000; cursor: pointer;}
.hero-wrapper{position: relative;}
.hero-wrapper .caption{position: absolute; left: 15px; bottom: 0; width: calc(100% - 30px);}
.hero-wrapper .register-now{position: absolute; right: 15px; bottom: 0;  text-align: center; padding: 11px 7px; display: flex; align-items: center; border-left: 8px solid #989A9B; width: 160px;}
.hero-wrapper .register-now:hover{color: #000!important;}




.img-caption{position: relative; display: table; width: 100%;}
.img-caption .bg-grey{ float: left; padding: 18px  15px 4px; width: 100%;}
.learn-more{background-color: #28702A; color: #FFF; font-size: 16px; font-weight: 600; text-align: center; width: 100px; height: 100%; display: table-cell; vertical-align: middle; transition: all .32s linear;  }
.img-caption:hover .learn-more{color: #000;}
.with-video .learn-more{height: 100px; position: absolute; right: 0; bottom: 0; padding-top: 25px;}
.with-video .amm-video{width: 450px; height: 253px;}
.amm-right{background-image: url('../images/amenities.jpg'); min-height: 400px; height: 742px;}
.amm-1{background-image: url('../images/amm-1.jpg'); height: 100%; min-height: 400px;}


@media (min-width: 1200px) {
    .cus-height {
        min-height: 110px;
        align-items: center;
        display: flex;
    }
}


@media (min-width: 1200px) and (max-width: 1449px){
    .img-caption .fs-16{font-size: 15px;}
    .amm-right{height: 564px;}
}

@media screen and (max-width: 1199px){
    .amm-right{height: 419px;}
    .fs-16 {
        font-size: 13px;
    }
}



@media screen and (max-width: 992px){
    .hero-wrapper .caption{bottom: 60px;}
    .hero-wrapper .register-now{position: relative; right: 0; padding: 15px 7px; width: 100%;}

}

@media screen and (max-width: 767px){
   .learn-more{display: inline-block; padding: 15px; width: 100%;}
    .with-video .learn-more{height: auto; padding: 15px; position: relative;}
    .with-video .amm-video{width: 450px; height: 253px;}
}

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



.accordion_head .border-bottom{border-bottom: 1px solid #000!important;}
.blockTitle{background-image: url('../images/misc/less.png'); background-repeat: no-repeat; background-position:  91% 51%;}

.fp-block{width: 300px; float: left; height: 100%;}
.rend-block{width: calc(100% - 300px); float: left;}
.img-rendering{float: left; position: relative;}
.img-selected{filter: brightness(50%);}
.block-name{position: absolute; right: 30px; top: 15px; color: #FFF; font-size: 26px; font-weight: 600; z-index: 99;}

.img-rendering .caption{position: absolute; bottom: 0; text-align: center; font-size: 10px; left: 50%; transform: translate(-50%); width: 100%; color :#FFF;}
.fp-link{transition: all .20s ease-in-out; border-bottom: 1px solid #000; display: block; padding: 15px 5px 1px; background-image: url('../images/misc/zoom.png'); background-position: 95%  95%; background-repeat: no-repeat;}
.fp-link:hover{background-color: #4C604C; counter-reset: #FFF!important;}
.fp-link p{color: #000; }
.fp-selected{background-color: #4C604C; background-image: url('../images/misc/zoom-out.png'); }
.fp-selected p{color: #FFF;}

.unit-rend{float: left; width: 175px; position: relative;}
.unit-rend .caption{position: absolute; bottom: 0; text-align: center; font-size: 10px; left: 50%; transform: translate(-50%); width: 100%;}
.fp-wrapper{float: left; width: calc(100% - 175px);}


.hero-inner{height: 750px; width: 100%; position: relative; background-position: center; background-size: cover;}
.hero-inner .caption{position: absolute; width: 100%; bottom: 20px; text-align: center; color: #FFF;font-weight: 600; font-size: 75px; line-height: 75px;}

#about-us .hero-inner{background-image: url('../images/hero/about-us.jpg');}
#contact-us .hero-inner{background-image: url('../images/hero/contact-us.jpg');}
#amenities .hero-inner{background-image: url('../images/hero/amenities.jpg');}
#the-sonoma-difference .hero-inner{background-image: url('../images/hero/the-sonoma-difference.jpg');}
#thank-you .hero-inner{background-image: url('../images/hero/thank-you.jpg');}

#neighbourhood-place{background-image: url('../images//amenities-neighbourhood.jpg')!important;}

.ff-block{width: 300px; float: left; height: 100%;}
.ff-link{color: #000; font-size: 14px; display: block; font-weight: 600; background-color: #BFC0C1; padding-top: 10px; background-image: url('../images/misc/zoom.png'); background-repeat: no-repeat; background-position: 95% 70%;  }
.ff-link.activeNav,
.ff-link:hover{background-color: #4C604C; color:#FFF; background-image: url('../images/misc/zoom-out.png');}
#tableUpgradesList td{font-size: 15px; padding: 0 5px 10px;}
.upgNum-badge{width: 25px; height: 25px; border-radius: 50%; background-color: #4C604C; color: #FFF; display: inline-block; text-align: center; padding-top: 4px;    font-size: 11px; font-weight: 600;}

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

  
}

@media screen and (max-width: 1450px){
    .fs-24 {
        font-size: 20px;
    }
}

@media screen and (max-width: 1199px){
    .block-name{font-size: 19px; right: 5px; top: 5px;}
    .img-rendering .caption p{font-size: 11px;}
    .fs-24 {
        font-size: 15px;
    }
}


@media screen and (max-width: 992px){
    .hero-inner {height: 560px;}
    .hero-inner .caption{font-size: 45px; line-height: 45px;} 

    .block-name{font-size: 15px;}
    .img-rendering .caption{position: relative; color: #000;}
    .img-rendering .caption p{font-size: 12px; padding-top: 5px;}

    .unit-rend{float: none; width: 100%; }
    .unit-rend img{width: auto!important; margin: 0 auto; display: block;}
    .fp-wrapper{width: 100%; margin-top: 20px;}
    .upgNum{width: 100px; text-align: center    ;}
    
}

@media screen and (max-width: 767px){
    .hero-inner {height: 420px;}
    .hero-inner .caption{font-size: 35px; line-height: 36px;}  

    .fp-block{display: none;}
    .rend-block{width: 100%;}
    
    .block-name{font-size: 15px; left: 0px; color: #000; position: relative;}
    .img-rendering .caption p{font-size: 10px;}

    .ff-block{height: auto; display: none;}
    #btnUpgrade{background-image: url('../images/misc/zoom.png'); background-repeat: no-repeat; background-position: right;}

   
    
}

@media screen and (max-width: 576px){
    .hero-inner {height: 320px;}
    .hero-inner .caption{font-size: 25px; line-height: 25px;}  
    .img-rendering .caption p{font-size: 8px;}
}


@media(min-width:768px) and (max-width: 991px){
}

@media screen and (min-width:992px){
   
}

/* NEIGHBOURHOOD MAP */

.desc_box {
	position: absolute;
	background: #FFF;
    padding: 15px 15px 0 15px;
	border: 3px solid #4C604C;
    display: none;
    min-width:190px;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translate(-50% , -100%);

}
area:focus{outline: none;}
.PopUPText{font-size: 12px; color: #000;  }
.PopUPText .badge{ background-color: #4C604C; color: #FFF; border-radius: 50%; font-size: 14px;}

@media screen and (max-width: 576px){
   .desc_box{display:none!important;}
   }
/* NEIGHBOURHOOD MAP ENDS */


/* SLICK SLIDER */
.slider-for{position: relative;}
.slider-nav div{background-position: center; background-size: cover; border-top: 10px solid #FFF;}
.slider-nav div .slick-current{opacity: .5;}
.slider-nav div:focus{outline: none;}
.slider-for div{background-position: center; background-size: cover;}
.slick-prev:hover, .slick-next:hover{ opacity: .9;}
.slick-next {right: 10px; background-image: url('../images//misc/next.png');}
.slick-prev{left: 10px;}
.slick-next:before {content: '»';}
.slick-prev:before {content: '«';}
.slick-prev:before, .slick-next:before {font-size: 20px;color: #000;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

/* Slider */
.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:25px;height:25px;padding:10px 0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:#FFF;border-radius:50%;z-index:89}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;position:relative;display:block;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:auto;min-height:1px}[dir='rtl'] .slick-slide{float:right}
.slick-slide img{display:block; max-width:100%; height:auto;}
.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
.slider-Wrapper{position: relative;}

/* SLICK SLIDER  ENDS*/

.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(/images/misc/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(/images/misc/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(/images/misc/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:50px;height:50px;background:url(/images/misc/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
.lightboxOverlay{background-color: #FFF; opacity: 1;}

.showMore{
    position: absolute;
    bottom: 20px;
    text-align: center;
    left: 49%;
    z-index: 15;
     -webkit-animation: bounce 2s infinite ease-in-out;
    -o-animation: bounce 2s infinite ease-in-out;
    -ms-animation: bounce 2s infinite ease-in-out; 
    -moz-animation: bounce 2s infinite ease-in-out; 
    animation: bounce 2s infinite ease-in-out;
}


@-webkit-keyframes bounce {
    0% { transform: translateY(-15px)  }
    50% { transform: translateY(20px) }
    100% { transform: translateY(-15px) }
}

@keyframes bounce {
    0% { transform: translateY(-15px)  }
    50% { transform: translateY(20px) }
    100% { transform: translateY(-15px) }
}


#registrationForm{max-width: 1140px; margin: 0 auto;}
#registrationForm .form-control{border-radius: 0; border: 1px solid #6D470F;}
#registrationForm .form-control::placeholder { color: #495057; opacity: 1; font-weight: 300; }
#registrationForm .form-control:-ms-input-placeholder { color: #495057;  font-weight: 300; }
#registrationForm .form-control::-ms-input-placeholder { color: #495057;  font-weight: 300; }
#registrationForm  select {
    display: block;
   line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236D470F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
     font-weight: 300; 
}



/*MAP STYLES*/
#highlands  .img-map-arrow{display: none;}
#highlands .map-images .map-image .item-name{font-size: 13px; font-weight: 500; letter-spacing: .75px;}
#highlands .map-images .map-image .item-num .item-count{padding-top: 5px!important;}
#ryanDesignCommunityMap-Wrapper .map-images::-webkit-scrollbar-track{background-color: #28702A!important;}
#ryanDesignCommunityMap-Wrapper .map-icons{scrollbar-width: none!important; background-color: #28702A; }
#ryanDesignCommunityMap-Wrapper .map-images{scrollbar-color:#FFF #28702A;}
#ryanDesignCommunityMap-Wrapper .map-images .caption {display: none!important;}
#ryanDesignCommunityMap-Wrapper .map-icons .iconSelected{background-color: #FFF!important;}
#ryanDesignCommunityMap-Wrapper .map-icons .iconSelected i{color: #28702A!important;}
#ryanDesignCommunityMap-Wrapper .map-icons .iconSelected .icon-label {color: #28702A!important; font-size: 10px!important; font-weight: 400!important; line-height: 16px!important;}
#ryanDesignCommunityMap-Wrapper .map-icons .map-icon:hover{background-color: #FFF;}
#ryanDesignCommunityMap-Wrapper .map-icons .map-icon:hover i,
#ryanDesignCommunityMap-Wrapper .map-icons .map-icon:hover .icon-label{color: #28702A!important;}

.img-qmi{position: absolute; left: 50%; top: 50px; transform:translate(-50%);}
.img-qmi-bar{float: right;}
@media screen and (max-width:991px) {
   .img-qmi{width: 40px; top: 5px;} 
}