@charset "UTF-8";
/* ==========================================================================
   Site chrome: the top contact bar and the two floating buttons
   --------------------------------------------------------------------------
   Loaded after compiled.purged.min.css and style.min.css so it can override
   the legacy rules without editing those generated files.

   Margins rather than flex `gap` throughout — `gap` is unsupported in IE11,
   which still receives the html5shiv/respond.js shims this layout ships.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top contact bar

   Was a Bootstrap .row of floated columns whose children had three different
   heights (23px email image, 32px flags, 50px once a phone number wrapped), so
   nothing lined up. A single flex row on one baseline replaces it.
   -------------------------------------------------------------------------- */

.header-info .header-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 44px;
    padding: 5px 0;
}

.header-info .header-bar__email {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* .glyphicon (kept for the ✉ pseudo-element) sets top: 1px, which knocks
       the row a pixel out of alignment. */
    top: 0;
}

.header-info .header-bar__email img {
    display: block;
    width: 182px;
    height: 23px;
    margin-left: 6px;
}

.header-info .header-bar__contacts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 -12px;
}

.header-info .header-bar__contact {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 3px 12px;
    color: #c9c9c9; /* 8.0:1 on the #2d2d2d bar */
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 22px;
    text-decoration: none;
    /* The German number used to wrap under its flag and stretch the bar to 50px. */
    white-space: nowrap;
}

.header-info .header-bar__contact img {
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 3px;
}

.header-info .header-bar__contact .head-contact {
    margin-left: 8px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.header-info a.header-bar__contact:hover,
.header-info a.header-bar__contact:focus,
.header-info .header-bar__email:hover,
.header-info .header-bar__email:focus {
    color: #f4c000;
    text-decoration: none;
}

@media (max-width: 767px) {
    .header-info .header-bar {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .header-info .header-bar__email {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    .header-info .header-bar__contacts {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* Only the German office has a number in the DB today, so the other two
       flags render as bare 22px squares. On a phone that reads as a ragged run
       of flags with a phone number hanging off the last one, rather than as
       contact details — and neither flag is actionable. Drop them here and let
       the one real number centre itself; both are still in the markup for
       wider viewports and for the day the other numbers are filled in. */
    .header-info .header-bar__contact--flagonly {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Navbar header row (logo / language / burger)

   Below 992px the row is three floats — .navbar-brand left, .navbar-toggle
   right, #lang-wrapper-inline right — inside a 375px viewport that they add up
   to about 365px wide once padding is counted. Any wider logo, or a scrollbar,
   tips the language flag onto its own line under the burger, which is what
   made the flag sit alone and right-aligned below the header. One flex row
   with a flexible logo cell holds all three on the same baseline at any width.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .main-navbar .container-adaptive {
        padding-top: 10px;
    }

    .main-navbar .container-adaptive > .navbar-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        float: none;
        /* Bootstrap pulls the header 15px out of .container-adaptive's padding
           so a floated brand can sit flush; in a flex row that just hangs the
           logo off the left edge of the screen. */
        margin-right: 0;
        margin-left: 0;
    }

    /* Bootstrap's clearfix pseudo-elements are `display: table`, which turns
       them into flex items and opens a gap on each end of the row. */
    .main-navbar .container-adaptive > .navbar-header:before,
    .main-navbar .container-adaptive > .navbar-header:after {
        content: none;
    }

    /* Source order is brand, burger, language — which would put the flag on the
       far right, past the burger and hard against the viewport edge. Flex
       `order` restores the intended reading order without touching the markup,
       whose order the desktop float layout still depends on. */
    .main-navbar .navbar-brand {
        float: none;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        /* Without this a flex item refuses to shrink below its content width. */
        min-width: 0;
        height: auto;
        margin-top: 0;
        margin-left: 0;
        padding: 6px 0;
    }

    .main-navbar .navbar-brand img {
        max-width: 100%;
        max-height: 46px;
        height: auto;
    }

    .main-navbar #lang-wrapper-inline {
        float: none;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        margin: 0 14px 0 0;
    }

    .main-navbar .navbar-toggle {
        float: none;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        margin: 0;
    }

    /* The menu opens directly under the row now that the row is a fixed
       height; the 16px it inherited from the desktop layout left it floating. */
    .main-navbar .lang-wrapper .dropdown-menu {
        margin-top: 8px;
    }
}

/* ==========================================================================
   Floating "offer your property" call to action

   It sits at z-index 9 while .navbar is at 99, so the navbar paints over it.
   Raising it is only half the fix: at >=992px it is `position: fixed; top:
   115px` (+10px inline margin), which lands it on top of the navbar's search
   input — measured overlap 120x44px at 1151px wide, so lifting it would swallow
   clicks meant for that input. So: lift it above the navbar AND drop it clear
   of the navbar's bottom edge (186px at its tallest, 1151px viewport).

   Below 992px the CTA is the rotated side tab at `top: 30%`, which collides
   with nothing — it only needs the z-index.
   ========================================================================== */

.suggest-property {
    z-index: 100; /* over .navbar (99), under .back-to-top (999999) */
}

/* Navbar height steps at Bootstrap's 1200px breakpoint (it wraps to two rows
   below it): measured bottom edge is 186px at 992-1199 and 150px at >=1200.
   Clear it by ~10px in each band and keep the CTA as high as it can go, so it
   spends as little time as possible over the search card while scrolling. */
@media (min-width: 992px) {
    .suggest-property {
        top: 196px;
    }
}

@media (min-width: 1200px) {
    .suggest-property {
        top: 160px;
    }
}

/* ==========================================================================
   Back-to-top button

   The legacy rule pins it to `left: 1.5rem; bottom: 2rem` below 992px — the
   bottom-left corner, which is where the Tawk.to chat launcher parks itself.
   The two overlap, and the chat bubble is the one that wins the tap because it
   loads later and sits in its own iframe.

   Both `left` and `right` are set on the legacy rule, so `left` has to be
   cleared explicitly: with a width and both offsets specified the box is
   over-constrained, and `left` wins in a left-to-right document.

   The right-hand side is free at the bottom — .suggest-property lives there
   but at `top: 30%`, well clear of it.
   ========================================================================== */

@media (max-width: 991px) {
    .btn.back-to-top {
        right: 1.5rem;
        left: auto;
    }
}