@charset "utf-8";
/* ==========================================================================
   socalcityproperties.com — responsive + form layer for the flattened build.

   The CMS never had a responsive stylesheet: it 302'd phones to a separate
   /mobile/ site. That site is not rebuilt; this replaces it.

   Two parts:
     1. BASE — applies at every width. Styling for markup that only exists in
        the flat build (the rebuilt forms, the <dialog> disclaimers, the blog
        links) plus display:none on everything scp-mobile.js injects, so none
        of it can leak onto the desktop layout.
     2. <=1023px — the responsive layer. 1023 rather than the usual 900
        because the CMS pins .headerRow, .converterRow and .contentTable to
        width:1024px, so the desktop layout has already broken by then.

   Design tokens are the site's own: #00ccda accent, #0b0b0b / #222222 darks,
   Hammersmith One headings over Open Sans body.
   ========================================================================== */

:root {
  --scp-accent: #00ccda;
  --scp-accent-dark: #00a8b4;
  --scp-ink: #222222;
  --scp-dark: #0b0b0b;
  --scp-bar: #222222;
  --scp-line: #d8d8d8;
  --scp-muted: #666666;
  --scp-err: #c0392b;
  --scp-ok: #1e7a4b;
  --scp-head: "Hammersmith One", "Segoe UI", Arial, sans-serif;
  --scp-body: "Open Sans", "Segoe UI", Arial, sans-serif;
  --scp-gutter: 20px;
  /* one value for BOTH the column gap inside a listing row and the margin
     between rows — see #rowHome .scpTileRow below */
  --scp-tile-gap: 18px;
}

/* ==========================================================================
   1. BASE — every width
   ========================================================================== */

/* Injected by scp-mobile.js. Hidden here at base level and only revealed
   inside the media query, so the desktop layout is byte-for-byte unchanged. */
#scpBurger,
#scpNav,
#scpBackdrop,
#scpHero,
#scpUtility { display: none; }

/* Nothing on this site ever wants a horizontal scrollbar on the document. */
html { -webkit-text-size-adjust: 100%; }

/* Hero video, injected by scp-mobile.js as a sibling directly after the
   slide's still image: it covers the still, and the slider's own .ls-l* text
   layers come later in the DOM so they keep painting on top of it. */
#layerslider .ls-slide > video.scpHeroVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.scp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 18px;
  background: var(--scp-accent);
  color: #ffffff !important;
  font-family: var(--scp-body);
  text-decoration: none;
}
.scp-skip:focus { left: 0; }

/* Focus must stay visible: the CMS stylesheet never defined a focus style and
   the burger/nav are keyboard-operated. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--scp-accent);
  outline-offset: 2px;
}

/* --- rebuilt forms ------------------------------------------------------ */
.scpFormWrap { max-width: 780px; }

.scpForm { font-family: var(--scp-body); }

/* Honeypot. Kept in the layout tree (a display:none field is not submitted by
   some older browsers) but pushed out of sight and out of the tab order. */
.scpHp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.scpFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 20px;
  align-items: start;
}

.scpRow { display: block; min-width: 0; }
.scpRow--wide { grid-column: 1 / -1; }

.scpRow > label,
.scpRow--check > label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--scp-ink);
}

.scpReq {
  color: var(--scp-err);
  text-decoration: none;
  border: 0;
  font-weight: 700;
}

.scpForm input[type="text"],
.scpForm input[type="email"],
.scpForm input[type="tel"],
.scpForm input[type="date"],
.scpForm input[type="file"],
.scpForm select,
.scpForm textarea {
  /* border-box, because every one of these is width:100% with padding */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--scp-line);
  border-radius: 3px;
  background: #ffffff;
  font-family: var(--scp-body);
  font-size: 16px;   /* 16px or iOS Safari zooms the page on focus */
  line-height: 1.4;
  color: var(--scp-ink);
}
.scpForm textarea { min-height: 150px; resize: vertical; }
.scpForm select { height: 46px; }

.scpForm input:focus,
.scpForm select:focus,
.scpForm textarea:focus {
  border-color: var(--scp-accent);
  outline: 2px solid rgba(0, 204, 218, 0.35);
  outline-offset: 0;
}

.scpRow--check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.scpRow--check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}
.scpRow--check > label { margin: 0; }

.scpLink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--scp-accent);
  text-decoration: underline;
  cursor: pointer;
}

.scpHint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--scp-muted);
}

.scpFormHead {
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--scp-accent);
  font-family: var(--scp-head);
  font-size: 20px;
  line-height: 1.3;
  font-weight: normal;
  color: var(--scp-ink);
}
.scpForm > .scpFormHead:first-of-type { margin-top: 0; }

.scpFormNote {
  margin: 24px 0 0;
  padding: 16px;
  border-left: 4px solid var(--scp-line);
  background: #f6f6f6;
  font-size: 14px;
  line-height: 1.6;
  color: var(--scp-muted);
}

.scpSubmit { margin-top: 24px; }

.scpBtn {
  display: inline-block;
  min-width: 200px;
  min-height: 48px;
  padding: 13px 28px;
  border: 0;
  border-radius: 3px;
  background: var(--scp-accent);
  font-family: var(--scp-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.scpBtn:hover,
.scpBtn:focus { background: var(--scp-bar); }

.scpMsg {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-left: 4px solid;
  font-family: var(--scp-body);
  font-size: 16px;
  line-height: 1.5;
}
.scpMsgOk { border-color: var(--scp-ok); background: #eef8f2; color: #17552f; }
.scpMsgErr { border-color: var(--scp-err); background: #fdeeec; color: #8a281c; }

/* --- disclaimers (were Telerik RadWindows) ------------------------------ */
.scp-dialog {
  width: min(600px, calc(100vw - 40px));
  padding: 24px 26px 20px;
  border: 0;
  border-top: 5px solid var(--scp-accent);
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  font-family: var(--scp-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--scp-ink);
}
.scp-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.scp-dialog h2 {
  margin: 0 0 14px;
  font-family: var(--scp-head);
  font-size: 22px;
  line-height: 1.25;
  font-weight: normal;
}
.scp-dialog ul { margin: 0 0 4px; padding-left: 20px; }
.scp-dialog li { margin-bottom: 10px; }
.scp-dialog p { margin: 0 0 12px; }
.scp-dialog form { margin-top: 18px; text-align: right; }

/* --- blog previous/next (were __doPostBack buttons) --------------------- */
.scp-blognav {
  display: inline-block;
  box-sizing: border-box;
  min-width: 125px;
  padding: 9px 18px;
  border-radius: 3px;
  background: var(--scp-bar);
  font-family: var(--scp-body);
  font-size: 14px;
  text-align: center;
  color: #ffffff !important;
  text-decoration: none !important;
}
.scp-blognav:hover { background: var(--scp-accent); }
.scp-blognav.is-disabled {
  background: #e4e4e4;
  color: #9a9a9a !important;
  cursor: default;
}

.scp-grid-total {
  margin: 10px 0 0;
  font-family: var(--scp-body);
  font-size: 15px;
  text-align: right;
  color: var(--scp-muted);
}

/* Images must not push their cell wider than the page. */
img { max-width: 100%; }

/* ...but max-width alone DISTORTS them. The CMS writes a fixed pair - e.g.
   style="width:500px;height:281px" - on 184 images across the site, and those
   cells are narrower than 500px inside a 1024px content table. Capping the
   width without releasing the height leaves a 500x281 photo drawn at 314x281:
   37% too tall for its width. Inline styles beat a stylesheet, hence the
   !important.

   Scoped to img[width][height] so it can only reach images the CMS gave a
   full pixel box (fp_polish copies that box onto the attributes). The banner
   logo, which carries an inline height and no width, is untouched. */
img[width][height] { height: auto !important; }

/* The CMS pins these to a hard width:1024px. At a viewport of exactly 1024 the
   scrollbar leaves only ~1009 usable, so the page overflowed by 15px and got a
   horizontal scrollbar — on the live site too. Identical at any width with
   room for 1024; it only gives way when there isn't. */
.contentTable,
.headerRow {
  box-sizing: border-box;
  width: 100%;
  max-width: 1024px;
}

/* --- listing grids ------------------------------------------------------
   Every grid emits each ROW as its own <table>, so each row sized its own
   columns independently: a full row of three settled at 330/330/330, the
   partial last row at 248/248/495 (250/749 on the two-up projects gallery),
   and the tiles that finished a grid came out visibly smaller than every tile
   above them. fp_polish tags the row tables .scpTileRow and writes the grid's
   column count into --scp-cols; laying them out on that fixed track count
   means a short last row leaves a gap instead of resizing its tiles.

   Applies at EVERY width — this is the CMS's own desktop layout being wrong,
   not a small-screen problem. */
#rowHome .scpTileRow,
#rowHome .scpTileRow > tbody { display: block; width: 100%; }

#rowHome .scpTileRow > tbody > tr {
  display: grid;
  grid-template-columns: repeat(var(--scp-cols, 3), minmax(0, 1fr));
  gap: var(--scp-tile-gap);
  align-items: start;
}

/* The column gap above only reaches INSIDE a row. Rows are separate <table>
   elements, and display:block on them dropped the cellspacing="8" that used to
   hold them apart — so the grids ran together vertically with no row gap at
   all. Both gaps read the same variable now, so they cannot drift again.
   Adjacent-sibling, so the last row adds no trailing space. */
#rowHome .scpTileRow + .scpTileRow { margin-top: var(--scp-tile-gap); }

#rowHome .scpTileRow > tbody > tr > td {
  display: block;
  width: auto !important;
  min-width: 0;
  padding: 0;
  vertical-align: top;
}

/* a properties-managed tile wraps its photo and caption in a table of its own,
   pinned to width:331px — which does not fit a 330px track */
#rowHome .scpTileRow td table { width: 100% !important; }

/* Uniform tiles. The sources are almost all 16:9 already (29 of the 48 on
   properties-managed are 650x364); cover crops the three odd ones rather than
   letting them set a taller row and push their captions out of line. */
#rowHome .scpTileRow img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 900px) {
  #rowHome .scpTileRow > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  :root { --scp-tile-gap: 14px; }
  #rowHome .scpTileRow > tbody > tr { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   2. <=1023px — the responsive layer
   ========================================================================== */
@media (max-width: 1023px) {

  body { overflow-x: hidden; }

  /* ---- shell: un-table the page skeleton ------------------------------ */
  .bigTable,
  .bigTable > tbody,
  .bigTable > tbody > tr,
  .bigTable > tbody > tr > td {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
  }

  /* .headerRow / .converterRow / .contentTable are all width:1024px, which is
     what actually breaks below this breakpoint. */
  .headerRow,
  .converterRow,
  .contentTable {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* ---- header --------------------------------------------------------- */
  /* #rowHome > td is (1,0,1); a class-only selector loses to it, so the
     shell rows are addressed by their own ids where the CMS gave them one. */
  .header {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 12px var(--scp-gutter);
  }
  .headerHeight { height: auto; }

  .headerRow,
  .headerRow > tbody,
  .headerRow > tbody > tr,
  .headerRow > tbody > tr > td {
    display: block;
    width: auto;
    height: auto;
    text-align: left;
  }

  #imgBannerLogo {
    height: 56px !important;
    width: auto !important;
    display: block;
  }

  /* The phone / portal / tenant-application tables are rebuilt as #scpUtility
     by the JS; the originals would otherwise stack as three ragged rows. */
  .headerRow > tbody > tr > td:last-child > div[align="right"] { display: none; }

  #scpBurger {
    display: flex;
    position: absolute;
    top: 14px;
    right: var(--scp-gutter);
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 12px;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    background: transparent;
    font-family: var(--scp-body);
    font-size: 13px;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
  }
  #scpBurger .scpBars {
    display: block;
    width: 22px;
    height: 16px;
    position: relative;
  }
  #scpBurger .scpBars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    transition: transform .2s ease, opacity .2s ease;
  }
  #scpBurger .scpBars span:nth-child(1) { top: 0; }
  #scpBurger .scpBars span:nth-child(2) { top: 7px; }
  #scpBurger .scpBars span:nth-child(3) { top: 14px; }
  #scpBurger[aria-expanded="true"] .scpBars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #scpBurger[aria-expanded="true"] .scpBars span:nth-child(2) { opacity: 0; }
  #scpBurger[aria-expanded="true"] .scpBars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- utility strip (call / portals / application) -------------------- */
  #scpUtility {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
    padding: 10px var(--scp-gutter) 12px;
    background: var(--scp-dark);
    font-family: var(--scp-body);
  }
  #scpUtility a {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #333333;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
  }
  #scpUtility a.scpUtilCall {
    border-color: var(--scp-accent);
    background: var(--scp-accent);
    font-weight: 700;
  }

  /* ---- the CMS's own horizontal menu ----------------------------------- */
  .converter { display: none; }

  /* ---- slide-in panel -------------------------------------------------- */
  #scpBackdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  #scpBackdrop.open { opacity: 1; visibility: visible; }

  #scpNav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1500;
    box-sizing: border-box;
    width: min(340px, 88vw);
    height: 100%;
    padding: 18px 0 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--scp-dark);
    font-family: var(--scp-body);
    transform: translateX(100%);
    transition: transform .24s ease;
  }
  #scpNav.open { transform: translateX(0); }
  body.scpNavOpen { overflow: hidden; }

  #scpNav a,
  #scpNav .scpNavToggle {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 22px;
    border: 0;
    border-bottom: 1px solid #1e1e1e;
    background: none;
    font-family: var(--scp-body);
    font-size: 15px;
    letter-spacing: 1px;
    text-align: left;
    text-decoration: none !important;
    color: #ffffff !important;
  }
  #scpNav a[aria-current="page"] { color: var(--scp-accent) !important; }
  #scpNav a:hover,
  #scpNav .scpNavToggle:hover { background: #171717; }

  #scpNav .scpNavToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
  }
  #scpNav .scpNavToggle::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--scp-accent);
    border-bottom: 2px solid var(--scp-accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  #scpNav .scpNavToggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-3px, -3px);
  }

  #scpNav .scpNavSub { display: none; background: #141414; }
  #scpNav .scpNavSub.open { display: block; }
  #scpNav .scpNavSub a {
    padding-left: 40px;
    font-size: 14px;
    letter-spacing: .5px;
    color: #d9d9d9 !important;
  }

  /* ---- hero (LayerSlider is replaced, not restyled) -------------------- */
  /* LayerSlider renames .ls-s1/.ls-s2 to .ls-l1/.ls-l2 on init and keeps the
     desktop pixel offsets inline, so there is nothing stable to style. The JS
     rebuilds the hero from the slide's own image and text instead. */
  /* #scpHero is injected as a sibling INSIDE this row's cell, so hide the
     slider itself - not the row, which would take the hero with it. */
  #layerslider-container-fw,
  #layerslider { display: none !important; }
  .slideshowRow { height: auto; }
  #rowSlideshow > td { padding: 0; }

  #scpHero {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 230px;
    padding: 40px var(--scp-gutter);
    background-color: var(--scp-dark);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
  }
  #scpHero.scpHero--home { min-height: 340px; }
  .scpHeroInner {
    max-width: 620px;
    padding: 26px 22px;
    background: rgba(11, 11, 11, .62);
  }
  .scpHeroInner h1 {
    margin: 0;
    font-family: var(--scp-head);
    font-size: clamp(26px, 7vw, 40px);
    line-height: 1.15;
    letter-spacing: 2px;
    color: #ffffff;
  }
  .scpHeroInner p {
    margin: 14px 0 0;
    font-size: clamp(14px, 3.6vw, 17px);
    line-height: 1.45;
    letter-spacing: 1px;
    color: #ffffff;
  }
  .scpHeroCtas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }
  .scpHeroCtas a {
    box-sizing: border-box;
    min-height: 46px;
    padding: 13px 22px;
    background: var(--scp-accent);
    font-family: var(--scp-body);
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none !important;
    color: #ffffff !important;
  }
  .scpHeroCtas a:hover { background: #ffffff; color: var(--scp-ink) !important; }

  /* ---- content --------------------------------------------------------- */
  #rowHome > td.homeCell {
    box-sizing: border-box;
    padding: 26px var(--scp-gutter) 28px;
  }
  /* the 404's first content row carries the same id but no .homeCell */
  #rowHome > td {
    box-sizing: border-box;
    padding-left: var(--scp-gutter);
    padding-right: var(--scp-gutter);
  }
  #rowHome > td.homeCell > table.contentTable { padding: 0; }

  /* Un-table content. A <table> will not render below its min-content width,
     so width:auto alone only shrinks it to that same minimum — the cells have
     to become blocks. */
  #rowHome table,
  #rowHome tbody,
  #rowHome tr,
  #rowHome td,
  #rowFooter1 table,
  #rowFooter1 tbody,
  #rowFooter1 tr,
  #rowFooter1 td {
    display: block;
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ...except the ones the JS identified as real columns, which become a
     wrapping flex row so tiles keep sitting side by side where there is room. */
  #rowHome .scpCols > tbody > tr,
  #rowFooter1 .scpCols > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
  }
  #rowHome .scpCols > tbody > tr > td,
  #rowFooter1 .scpCols > tbody > tr > td {
    flex: 1 1 240px;
    min-width: 0;
  }
  /* Spacer cells are how FlexSite insets things: empty rail cells either side
     of the copy. Un-tabled they become full-width empty blocks. */
  #rowHome td.scpEmptyCell,
  #rowFooter1 td.scpEmptyCell { display: none !important; }

  #rowHome img,
  #rowFooter1 img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* fixed pixel geometry set as attributes rather than CSS */
  #rowHome iframe,
  #rowFooter1 iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 320px;
    border: 0;
  }

  #rowHome center,
  #rowFooter1 center { display: block; }

  #rowHome h1.pageHeader { font-size: 24px; line-height: 1.3; }
  #rowHome h1 { font-size: clamp(26px, 7vw, 44px); line-height: 1.15; }
  #rowHome h2 { font-size: 22px; line-height: 1.3; }
  #rowHome h3 { font-size: 20px; line-height: 1.3; }
  #rowHome ul, #rowHome ol { padding-left: 22px; }

  /* Photo-gallery thumbnails (VisualLightBox) are inline-block anchors in a
     fixed-width container. */
  #vlightbox1 {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: auto !important;
  }
  #vlightbox1 a { display: block; margin: 0 !important; }
  #vlightbox1 img { display: block; }

  /* ---- footer ---------------------------------------------------------- */
  .footerRow { height: auto; }
  #rowFooter1 > td.footerCell {
    box-sizing: border-box;
    padding: 8px var(--scp-gutter) 24px;
  }
  #rowFooter1 br { line-height: 1; }
  /* the social row is a 2-cell table; keep the icons wrapping, not stacked */
  #rowFooter1 a > img { display: inline-block; }

  /* ---- forms ----------------------------------------------------------- */
  .scpFields { grid-template-columns: 1fr; }
  .scpBtn { width: 100%; }
  /* the contact page puts the map in a second column beside the form */
  #ContentPlaceHolder1_colRight { padding-top: 24px; }

  /* ---- blog nav -------------------------------------------------------- */
  .scp-blognav { min-width: 0; width: 100%; }
}

@media (max-width: 560px) {
  :root { --scp-gutter: 14px; }

  #scpBurger .scpLabel { display: none; }
  /* the call button gets its own full-width row; the rest pair up */
  #scpUtility a { flex: 1 1 calc(50% - 4px); font-size: 12px; }
  #scpUtility a.scpUtilCall { flex: 1 1 100%; font-size: 15px; }

  #rowHome .scpCols > tbody > tr > td,
  #rowFooter1 .scpCols > tbody > tr > td { flex: 1 1 100%; }

  #rowHome iframe, #rowFooter1 iframe { height: 260px; }
  #scpHero { min-height: 190px; padding: 30px var(--scp-gutter); }
  #scpHero.scpHero--home { min-height: 280px; }
}