@charset "UTF-8";

/*=======================================
             START CSS RESET
=========================================*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126articl
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/*=======================================
             END CSS RESET
=========================================*/

/*=======================================
           TYPOGRAPHY - GLOBAL
=========================================*/

/*  TYPOGRAPHY SETTINGS  */

/* GLOBAL */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Sets the base font-size at 16px. All subsequent rem values are relative to this. */
html {background: #ffffff; font-size: 16px;}


/* Sets the base font-size at 16px. All subsequent em values are relative to this. */
body {
    background-color: transparent;
    font-family: 'Source-Sans-Pro-Regular', Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.6180339887498948482;
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #333;
    font-size: 16px;
    background-color: #ffffff;
}

i, em, cite, dfn {
  font-family: 'SSource-Sans-Pro-Italic', Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: italic;
}

b {
  font-family: 'Source-Sans-Pro-Bold', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
}

strong {
  font-family: 'Source-Sans-Pro-Black', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-style: normal;
}

b i, b em {
  font-family: 'Source-Sans-Pro-Bold-Italic', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-style: italic;
}

strong i, strong em {
  font-family: 'Source-Sans-Pro-Black-Italic', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-style: italic;
}

.inline > * {
    display: inline-block;
    vertical-align: middle;
}

.material-icons {font-size: 1.5em; vertical-align: middle; margin: 0 0.25em;}

/* define hover state color */
a:link, a:visited, a:active {color: inherit; text-decoration:none; border: 0; outline: none;}

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

.text-right {text-align:right;}

.text-centered {text-align: center;}

.text-uppercase {text-transform: uppercase;}

.text-lowercase {text-transform: lowercase;}

.text-capitalize {text-transform: capitalize;}

.all-white {color: #ffffff !important;}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Source-Sans-Pro-Regular', Verdana, Arial, Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.3;
    color: #686765;
    margin-bottom: 0.7em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: color .15s ease;
    -moz-transition: color .15s ease;
    -ms-transition: color .15s ease;
    -o-transition: color .15s ease;
    transition: color .15s ease;
}

.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel li, .panel dl {color: #686765; margin-bottom: 0.7em;}

h1 i, h2 i, h3 i, h4 i, h5 i, h6 i, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    font-family: 'Source-Sans-Pro-Bold-Italic', Verdana, Arial, Helvetica, sans-serif;
}

h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
    font-family: 'Source Sans Pro Black', Verdana, Arial, Helvetica, sans-serif;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    font-family: 'Source-Sans-Pro-Black-Italic', Verdana, Arial, Helvetica, sans-serif;
}

h1, .panel h1 {font-size: 2.75em;}

h2, .panel h2 {font-size: 2.3125em;}

h3, .panel h3 {font-size: 1.6875em;}

h4, .panel h4 {font-size: 1.4375em;}

h5, .panel h5 {font-size: 1.125em;}

h6, .panel h6 {font-size: 1em;}

h1.shorty:after, h2.shorty:after, h3.shorty:after, h4.shorty:after, h5.shorty:after, h6.shorty:after {
    display: block;
    height: 0.2rem;
    background-color: #686765;
    content: " ";
    margin-left: auto;
    margin-right: auto;
    width: 6rem;
    margin-top: 0.5rem;
}

h1.punch.shorty:after, h2.punch.shorty:after, h3.punch.shorty:after, h4.punch.shorty:after, h5.punch.shorty:after, h6.punch.shorty:after {
    background-color: #d6d387 !important;
}

h1.light-punch.shorty:after, h2.light-punch.shorty:after, h3.light-punch.shorty:after, h4.light-punch.shorty:after, h5.light-punch.shorty:after, h6.light-punch.shorty:after {
    background-color: #ffa0b7 !important;
}

h1.shorty, h2.shorty, h3.shorty, h4.shorty, h5.shorty, h6.shorty {text-align: center; margin-bottom: 1.5rem;}

/* DOWNSIZING HEADINGS */
/* Down 1 size */
h1.down1 {font-size: 2.3125em;}
h2.down1 {font-size: 1.6875em;}
h3.down1 {font-size: 1.4375em;}
h4.down1 {font-size: 1.125em;}
h5.down1 {font-size: 1em;}

/* Down 2 sizes */
h1.down2 {font-size: 1.6875em;}
h2.down2 {font-size: 1.4375em;}
h3.down2 {font-size: 1.125em;}
h4.down2 {font-size: 1em;}

/* Down 3 sizes */
h1.down3 {font-size: 1.4375em;}
h2.down3 {font-size: 1.125em;}
h3.down3 {font-size: 1em;}

/* Down 4 sizes */
h1.down4 {font-size: 1.125em;}
h2.down4 {font-size: 1em;}

p, .panel p {
  font-family: 'Source-Sans-Pro-Regular', Verdana, Arial, Helvetica, sans-serif;
  color: #71716e;
  font-size: 1em;
  line-height: 1.6180339887498948482;
  margin-bottom: 1.6180339887498948482em;
}

q {display: inline;}f

q:before {content: open-quote;}

q:after {content: close-quote;}

big {font-size: 1.5em;}

small {font-size: 0.75em;}

.fineprint {font-size: 0.75em;}

.smaller {font-size: 85%;}

.punch {color: #d6d387 !important;}

.no-bottom-margin, .no-bottom-margin > * {margin-bottom: 0 !important;}

.thin-bottom-margin, .thin-bottom-margin > * {margin-bottom: 0.25em !important;}

.force-bottom-margin {margin-bottom: 1.6180339887498948482em !important;}

.half-bottom-margin {margin-bottom: 0.46875em !important;}

.force-large-bottom-margin {margin-bottom: 2.5em !important;}

.force-huge-bottom-margin {margin-bottom: 8.125em !important;}

.pad360 {padding: 0.9375rem !important;}

.force-lr-pad {padding-left: 0.9375rem !important; padding-right: 0.9375rem !important;}

.lr-half-pad {padding-left: 0.46875rem !important; padding-right: 0.46875rem !important;}

.half-pad {padding-left: 0.46875em !important; padding-right: 0.46875em !important;}

.lr-slim-pad {padding-left: 0.3125rem !important; padding-right: 0.3125rem !important;}

.fat-pad {padding: 3.5em 2.5em !important;}

.no-lr-pad {padding-left: 0 !important; padding-right: 0 !important;}

.no-moat {padding: 0em !important; margin: 0em !important;}

.no-pad {padding: 0em !important;}

.no-margin {margin: 0em !important;}

.no-height, .squashed {height: 0 !important; padding: 0 !important; margin: 0 !important;}

.spare-on-mobile {display: none;}

main.all-page-content a {
  position: relative;
  color: #ee5991;
  text-decoration: none;
  padding-bottom: 3px;
}

main.all-page-content a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ee5991;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

main.all-page-content a:hover:before, main.all-page-content a:focus:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

main.all-page-content a.button:hover:before, main.all-page-content a.button:focus:before {visibility: hidden; padding-bottom: 0.6em !important;}

.thin {font-family: 'Source-Sans-Pro-Extra-Light', Verdana, Arial, Helvetica, sans-serif;}

strong.thin, .thin strong, b.thin {font-family: 'Source-Sans-Pro-Light', Verdana, Arial, Helvetica, sans-serif;}

*::selection, .highlight {background-color: #d6d387; color: #000;}

.disabled {pointer-events: none; opacity: 0.5;}

section {
    padding: 1em 0;
    margin-bottom: 1em;
}

section > *:last-child {margin-bottom: 0;}

/*=======================================
         END TYPOGRAPHY - GLOBAL
=========================================*/

/*=======================================
                HEADER
=========================================*/

header {
    background: url(../images/bgr_header.jpg) no-repeat center top;
    background-size: cover;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

header .logo {
    width: 156px;
    height: 69px;
    float: left;
    background: #1e1e1e;
    padding: 36px 20px 4px 20px;
    margin-left: 8px;
}

header .right-column {
    width: calc(100% - 164px);
    padding-right: 1.5em;
}

header ul {
    float:  right;
    margin-top: 2em;
}

header ul li {
    margin-left: 3em;
}

header ul li a {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}

header ul li a:hover, header ul li a:focus {
    color: #d6d387 !important;
}

header .hamburger {
    margin-top: 1.2em;
}

header .hamburger .button {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

header .hamburger .line {
    display: block;
    width: 100%;
    height: 2px;
    left: 0;
    top: 0;
    margin-bottom: 10px;
    background-color: #ffffff;
    text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}

header .hamburger:hover .line, header .hamburger:focus .line {
    background-color: #d6d387;
}

header .hamburger .line:last-child {
    margin-bottom: 0;
}

.off-canvas ul.vertical.menu {
    margin-top: 3em;
}

ul.menu.submenu {
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(16px);
    border-radius: 8px;
    -moz-box-shadow: 0px 0px 20px 0px rgba(50,58,59,0.25);
    -webkit-box-shadow: 0px 0px 20px 0px rgb(50 58 59 / 25%);
    box-shadow: 0px 0px 20px 0px rgb(50 58 59 / 25%);
}


header .right-column ul.dropdown.menu {
    margin-top: 1em;
}


.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-color: #ffffff transparent transparent;
}

.menu .is-active > a {
    background: rgba(0,0,0,0.5) !important;
    /*backdrop-filter: blur(16px);*/
}

/* Recolor arrows */
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
    border-color: transparent transparent transparent #ffffff;
}

/* Recolor arrows */
.dropdown-menu > li.is-dropdown-submenu-parent > a::after {
    border-color: #ffffff transparent transparent !important;
}

ul.menu li.is-active > ul.menu li:hover,
ul.menu li.is-active > ul.menu li:focus, {
    background: #000000 !important;
    /*backdrop-filter: blur(16px);*/
}

ul.menu.is-dropdown-submenu li.is-dropdown-submenu-parent:first-child a {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

ul.menu.is-dropdown-submenu li.is-dropdown-submenu-parent:last-child a {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

header .menu.submenu.is-dropdown-submenu, .is-submenu-item.is-dropdown-submenu-item {
    margin-left: 0;
}

/*=======================================
             MAIN CONTENT
=========================================*/

.main-content.grid-container {
    min-height: calc(100vh - 273px);
    height: auto;
}

body#home .main-content.grid-container {
    min-height: calc(100vh - 721px);
    height: auto;
    margin-top: 32px;
}

.hero-image {
    width: 100%;
    height: 590px;
    background-color: #efefef;
    margin-top: -110px;
}

body#home .hero-image {
    background-image: url(../images/hp_banner.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.map {
    margin-bottom: 1em;
}

.main-blurb {
    margin-bottom: 2em;
}

.menu-tile {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 2em;
    border-radius: 4px;
}

.menu-tile img.spacer {
    opacity: 0;
}

.menu-tile.housing {
    background-image: url(../images/housing.jpeg);
}

.menu-tile.community {
    background-image: url(../images/community.jpeg);
}

.menu-tile.current-housing {
    background-image: url(../images/properties/china_basin/4.jpg);
}

.menu-tile.fdh {
    background-image: url(../images/properties/fdh/4.jpg);
}

.menu-tile.bhg {
    background-image: url(../images/properties/bayview–hill-gardens.jpg);
}

.menu-tile.fillmore_park {
    background-image: url(../images/properties/fillmore_park/9.jpg);
}

.menu-tile.third_condos {
    background-image: url(../images/properties/third_condos/1.jpg);
}

.menu-tile.recent-housing {
    background-image: url(../images/properties/fillmore_park/banner_b5.jpg);
}

.menu-tile.past-housing {
    background-image: url(../images/properties/Midtown-Park-4.jpg);
}

.menu-tile.current-community {
    background-image: url(../images/banner_1.jpg);
}

.menu-tile.recent-community-facilities {
    background-image: url(../images/banner_2.jpg);
}

.menu-tile.past-community {
    background-image: url(../images/past-community-banner.jpeg);
}

.menu-tile.college-track {
    background-image: url(../images/properties/college_track/2.jpg);
}

.menu-tile.kapor-center {
    background-image: url(../images/properties/kapor_center/1.jpg);
}

.menu-tile.cal-endowment {
    background-image: url(../images/properties/cal_endowment/7.jpg);
}

.menu-tile.banner img {
    height: 300px;
}

.menu-tile .text {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    padding: 0.6em 1em;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.menu-tile .text > * {
    color:  #ffffff !important;
    text-align: center;
    margin-bottom: 0.5rem;
}

.menu-tile .text a {
    color:  #ffffff !important;
    text-decoration: underline;
}

.menu-tile .text a:hover,
.menu-tile .text a:focus {
    color: #d6d387 !important;
}

.menu-tile .text ul li {padding: 0.5em;}


.property-tile {
    border: 2px solid transparent;
    background-color: #efefef;
    text-align: center;
    height: 100%;
    padding-bottom: 0.1rem;
    margin-bottom: 0rem;
    border-radius: 6px;
    transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
}

.property-tile:hover,
.property-tile:focus {
    border: 2px solid #d6d387;
    box-shadow: 0px 0px 20px 0px rgb(50 58 59 / 25%);
}

.property-tile .spacer {
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.property-tile .title {
    min-height: 45px;
    height: auto;
    line-height: 1.3;
    padding: 0;
    margin: 1rem 0.5rem;
}

.property-tile .spacer.china_basin {
    background-image: url(../images/properties/china_basin/4.jpg);
}

.property-tile .spacer.fdh {
    background-image: url(../images/properties/fdh/1.jpg);
}

.property-tile .spacer.bhg {
    background-image: url(../images/properties/bayview–hill-gardens.jpg);
}

.property-tile .spacer.fillmore_park {
    background-image: url(../images/properties/fillmore_park/9.jpg);
}

.property-tile .spacer.third_condos {
    background-image: url(../images/properties/third_condos/1.jpg);
}

.property-tile .spacer.college-track {
    background-image: url(../images/properties/college_track/2.jpg);
}

.property-tile .spacer.kapor-center {
    background-image: url(../images/properties/kapor_center/1.jpg);
}

.property-tile .spacer.cal-endowment {
    background-image: url(../images/properties/cal_endowment/7.jpg);
}


/*=======================================
                FOOTER
=========================================*/

footer {
    background-color: #1e1e1e;
    color: #8b8b8b;
    padding-top: 1em;
    margin-top: 20px;
    height: 9em;
}

footer .right-column {
    text-align: right;
}


/*=======================================
              OWL CAROUSEL
=========================================*/

#owl-demo.owl-carousel {
    margin-bottom: 3em;
}


#owl-demo.owl-carousel .owl-controls {
    text-align: center;
}

#owl-demo.owl-carousel .owl-item .item img {
    width: 100%;
    height: auto;
}

#owl-demo.owl-carousel .owl-controls .owl-buttons {
    position: relative;
    margin-top: -32px;
}

#owl-demo.owl-carousel .owl-controls .owl-buttons .owl-prev {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 26px;
}

#owl-demo.owl-carousel .owl-controls .owl-buttons .owl-next {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 26px;
}

/*=======================================
               BREAKPOINTS
=========================================*/

/* 768px and above */
@media only screen and (min-width: 769px) {

    .kill-on-desktop {display: none;}
    .spare-on-desktop {display: block;}

}

/* 768px and below */
@media only screen and (min-width: 10px) and (max-width: 768px) {

    .kill-on-mobile {display: none;}
    .spare-on-mobile {display: block;}

}

/* 640px (medium) and below */
@media only screen and (min-width: 10px) and (max-width: 639px) {

    .property-tile {
        height: auto;
        margin-bottom: 2rem;
    }

    footer .left-column, footer .right-column {
        text-align: center;
        margin-bottom: 1em;
    }
}