@charset "UTF-8";
/*doc
---
title: Colour palette
name: Colour palette
category: Basics
---

```html_example

<ul class="small-block-grid-2 medium-block-grid-4">
    <li>
        <span class="colorBlock" style="background-color: #DB0C41;"></span>
        <p><strong>Brand Red</strong><br />
        $color-brand-red</p>
    </li>

    <li>
        <span class="colorBlock" style="background-color: #DCDCDC;"></span>
        <p><strong>Brand Light Grey</strong><br />
        $color-brand-grey-light</p>
    </li>

    <li>
        <span class="colorBlock" style="background-color: #333333; "></span>
        <p><strong>Brand Dark Grey</strong><br />
        $color-brand-grey-dark</p>
    </li>

    <li>
        <span class="colorBlock" style="background-color: #F9F9F9; "></span>
        <p><strong>Brand Ghost Grey</strong><br />
        $color-brand-grey-ghost</p>
    </li>

</ul>

```

*/
/*doc
---
title: Intro
name: Intro
category: Helper Classes
---

A series of helper classes to use arbitrarily. Only use a helper class if an element/component doesnÔÇÖt already have a class to which you could apply this styling, e.g. if you need to float `.main-nav` left then add `float:left;` to that ruleset as opposed to adding the `.float--left` class to the markup.

A lot of these classes carry `!important` as you will always want them to win out over other selectors.

*/
/*doc
---
title: Add/remove Floats
name: Add/remove Floats
category: Helper Classes
---

* .float--none
* .float--right and 
* .float--left

*/
.float--right {
  float: right !important; }

.float--left {
  float: left !important; }

.float--none {
  float: none !important; }

/*doc
---
title: Text alignment
name: Text alignment
category: Helper Classes
---

* .text--left 
* .text--center and
* .text--right

*/
.text--left {
  text-align: left  !important; }

.text--center {
  text-align: center !important; }

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

/*doc
---
title: Font weights
name: Font weights
category: Helper Classes
---

* .weight--light
* .weight--normal 
* .weight--semibold
* .weight--bold

*/
.weight--light {
  font-weight: 300 !important; }

.weight--normal {
  font-weight: 400 !important; }

.weight--semibold {
  font-weight: 600 !important; }

.weight--bold {
  font-weight: bold !important; }

/*doc
---
title: Add/remove margins
name: Add/remove margins
category: Helper Classes
---

Adds `$base-spacing-unit` margins

* .push
* .push--top
* .push--right
* .push--bottom
* .push--left
* .push--ends
* .push--sides

*/
.push {
  margin: 2.30769rem !important; }

.push--top {
  margin-top: 2.30769rem !important; }

.push--right {
  margin-right: 2.30769rem !important; }

.push--bottom {
  margin-bottom: 2.30769rem !important; }

.push--left {
  margin-left: 2.30769rem !important; }

.push--ends {
  margin-top: 2.30769rem !important;
  margin-bottom: 2.30769rem !important; }

.push--sides {
  margin-right: 2.30769rem !important;
  margin-left: 2.30769rem !important; }

/*doc
---
title: Add Half Margins
name: Add Half Margins
category: Helper Classes
---

Adds `$half-spacing-unit` margins

* .push-half
* .push-half--top
* .push-half--right
* .push-half--bottom
* .push-half--left
* .push-half--ends
* .push-half--sides

*/
.push-half {
  margin: 1.15385rem !important; }

.push-half--top {
  margin-top: 1.15385rem !important; }

.push-half--right {
  margin-right: 1.15385rem !important; }

.push-half--bottom {
  margin-bottom: 1.15385rem !important; }

.push-half--left {
  margin-left: 1.15385rem !important; }

.push-half--ends {
  margin-top: 1.15385rem !important;
  margin-bottom: 1.15385rem !important; }

.push-half--sides {
  margin-right: 1.15385rem !important;
  margin-left: 1.15385rem !important; }

/*doc
---
title: Remove Margins
name: Remove Margins
category: Helper Classes
---

Takes away margins

* .flush
* .flush--top
* .flush--right
* .flush--bottom
* .flush--left
* .flush--ends
* .flush--sides

*/
.flush {
  margin: 0 !important; }

.flush--top {
  margin-top: 0 !important; }

.flush--right {
  margin-right: 0 !important; }

.flush--bottom {
  margin-bottom: 0 !important; }

.flush--left {
  margin-left: 0 !important; }

.flush--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.flush--sides {
  margin-right: 0 !important;
  margin-left: 0 !important; }

/*doc
---
title: Add Full Paddings
name: Add Full Paddings
category: Helper Classes
---

Adds `$base-spacing-unit` paddings

* .soft
* .soft--top
* .soft--right
* .soft--bottom
* .soft--left
* .soft--ends
* .soft--sides

*/
.soft {
  padding: 2.30769rem !important; }

.soft--top {
  padding-top: 2.30769rem !important; }

.soft--right {
  padding-right: 2.30769rem !important; }

.soft--bottom {
  padding-bottom: 2.30769rem !important; }

.soft--left {
  padding-left: 2.30769rem !important; }

.soft--ends {
  padding-top: 2.30769rem !important;
  padding-bottom: 2.30769rem !important; }

.soft--sides {
  padding-right: 2.30769rem !important;
  padding-left: 2.30769rem !important; }

/*doc
---
title: Add Half Padding
name: Add Half Padding
category: Helper Classes
---

Adds `$half-spacing-unit` padding

* .soft-half
* .soft-half--top
* .soft-half--right
* .soft-half--bottom
* .soft-half--left
* .soft-half--ends
* .soft-half--sides

*/
.soft-half {
  padding: 1.15385rem !important; }

.soft-half--top {
  padding-top: 1.15385rem !important; }

.soft-half--right {
  padding-right: 1.15385rem !important; }

.soft-half--bottom {
  padding-bottom: 1.15385rem !important; }

.soft-half--left {
  padding-left: 1.15385rem !important; }

.soft-half--ends {
  padding-top: 1.15385rem !important;
  padding-bottom: 1.15385rem !important; }

.soft-half--sides {
  padding-right: 1.15385rem !important;
  padding-left: 1.15385rem !important; }

/*doc
---
title: Remove Padding
name: Remove Padding
category: Helper Classes
---

Takes away padding

* .hard
* .hard--top
* .hard--right
* .hard--bottom
* .hard--left
* .hard--ends
* .hard--sides

*/
.hard {
  padding: 0 !important; }

.hard--top {
  padding-top: 0 !important; }

.hard--right {
  padding-right: 0 !important; }

.hard--bottom {
  padding-bottom: 0 !important; }

.hard--left {
  padding-left: 0 !important; }

.hard--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.hard--sides {
  padding-right: 0 !important;
  padding-left: 0 !important; }

/*doc
---
title: Accessibility
name: Accessibility
category: Helper Classes
---

Hide content off-screen without resorting to `display:none;`, also provide breakpoint specific hidden elements. Classes include:

* .accessibility
* .visuallyhidden

An example of use is for form fields where the design calls for no visible label, just placeholder text but the label is still required for accessibility.

```html_example
<label class="accessibility">Search field</label>
<div class="search-field clearfix">
  <input type="search" placeholder="Country, region, city or postcode">
  <input type="submit" value="search" class="search-icon">
</div>

```

*/
.accessibility,
.visuallyhidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

meta.foundation-version {
  font-family: "/5.2.2/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:62.001em)/";
  width: 62.001em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }

html, body {
  height: 100%; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  font-size: 13px; }

body {
  background: white;
  color: #333333;
  padding: 0;
  margin: 0;
  font-family: verdana, arial;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

a:hover {
  cursor: pointer; }

img {
  max-width: 100%;
  height: auto; }

img {
  -ms-interpolation-mode: bicubic; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
  max-width: none !important; }

.left {
  float: left !important; }

.right {
  float: right !important; }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }
.clearfix:after {
  clear: both; }

.hide {
  display: none; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  display: inline-block;
  vertical-align: middle; }

textarea {
  height: auto;
  min-height: 50px; }

select {
  width: 100%; }

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 79.23077rem; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }
  .row.collapse > .column,
  .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .row.collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .row .row {
    width: auto;
    margin-left: -1.15385rem;
    margin-right: -1.15385rem;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none; }
    .row .row:before, .row .row:after {
      content: " ";
      display: table; }
    .row .row:after {
      clear: both; }
    .row .row.collapse {
      width: auto;
      margin: 0;
      max-width: none; }
      .row .row.collapse:before, .row .row.collapse:after {
        content: " ";
        display: table; }
      .row .row.collapse:after {
        clear: both; }

.column,
.columns {
  padding-left: 1.15385rem;
  padding-right: 1.15385rem;
  width: 100%;
  float: left; }

@media only screen {
  .small-push-0 {
    position: relative;
    left: 0%;
    right: auto; }

  .small-pull-0 {
    position: relative;
    right: 0%;
    left: auto; }

  .small-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .small-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .small-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .small-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .small-push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .small-pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .small-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .small-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .small-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .small-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .small-push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .small-pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .small-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .small-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .small-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .small-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .small-push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .small-pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .small-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .small-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .small-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .small-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; }

  .column,
  .columns {
    position: relative;
    padding-left: 1.15385rem;
    padding-right: 1.15385rem;
    float: left; }

  .small-1 {
    width: 8.33333%; }

  .small-2 {
    width: 16.66667%; }

  .small-3 {
    width: 25%; }

  .small-4 {
    width: 33.33333%; }

  .small-5 {
    width: 41.66667%; }

  .small-6 {
    width: 50%; }

  .small-7 {
    width: 58.33333%; }

  .small-8 {
    width: 66.66667%; }

  .small-9 {
    width: 75%; }

  .small-10 {
    width: 83.33333%; }

  .small-11 {
    width: 91.66667%; }

  .small-12 {
    width: 100%; }

  [class*="column"] + [class*="column"].end {
    float: right; }

  .small-offset-0 {
    margin-left: 0% !important; }

  .small-offset-1 {
    margin-left: 8.33333% !important; }

  .small-offset-2 {
    margin-left: 16.66667% !important; }

  .small-offset-3 {
    margin-left: 25% !important; }

  .small-offset-4 {
    margin-left: 33.33333% !important; }

  .small-offset-5 {
    margin-left: 41.66667% !important; }

  .small-offset-6 {
    margin-left: 50% !important; }

  .small-offset-7 {
    margin-left: 58.33333% !important; }

  .small-offset-8 {
    margin-left: 66.66667% !important; }

  .small-offset-9 {
    margin-left: 75% !important; }

  .small-offset-10 {
    margin-left: 83.33333% !important; }

  .small-offset-11 {
    margin-left: 91.66667% !important; }

  .small-reset-order,
  .small-reset-order {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }

  .column.small-centered,
  .columns.small-centered {
    margin-left: auto;
    margin-right: auto;
    float: none; }

  .column.small-uncentered,
  .columns.small-uncentered {
    margin-left: 0;
    margin-right: 0;
    float: left !important; }

  .column.small-uncentered.opposite,
  .columns.small-uncentered.opposite {
    float: right; } }
@media only screen and (min-width: 40.063em) {
  .medium-push-0 {
    position: relative;
    left: 0%;
    right: auto; }

  .medium-pull-0 {
    position: relative;
    right: 0%;
    left: auto; }

  .medium-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .medium-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .medium-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .medium-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .medium-push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .medium-pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .medium-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .medium-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .medium-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .medium-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .medium-push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .medium-pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .medium-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .medium-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .medium-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .medium-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .medium-push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .medium-pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .medium-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .medium-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .medium-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .medium-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; }

  .column,
  .columns {
    position: relative;
    padding-left: 1.15385rem;
    padding-right: 1.15385rem;
    float: left; }

  .medium-1 {
    width: 8.33333%; }

  .medium-2 {
    width: 16.66667%; }

  .medium-3 {
    width: 25%; }

  .medium-4 {
    width: 33.33333%; }

  .medium-5 {
    width: 41.66667%; }

  .medium-6 {
    width: 50%; }

  .medium-7 {
    width: 58.33333%; }

  .medium-8 {
    width: 66.66667%; }

  .medium-9 {
    width: 75%; }

  .medium-10 {
    width: 83.33333%; }

  .medium-11 {
    width: 91.66667%; }

  .medium-12 {
    width: 100%; }

  [class*="column"] + [class*="column"].end {
    float: right; }

  .medium-offset-0 {
    margin-left: 0% !important; }

  .medium-offset-1 {
    margin-left: 8.33333% !important; }

  .medium-offset-2 {
    margin-left: 16.66667% !important; }

  .medium-offset-3 {
    margin-left: 25% !important; }

  .medium-offset-4 {
    margin-left: 33.33333% !important; }

  .medium-offset-5 {
    margin-left: 41.66667% !important; }

  .medium-offset-6 {
    margin-left: 50% !important; }

  .medium-offset-7 {
    margin-left: 58.33333% !important; }

  .medium-offset-8 {
    margin-left: 66.66667% !important; }

  .medium-offset-9 {
    margin-left: 75% !important; }

  .medium-offset-10 {
    margin-left: 83.33333% !important; }

  .medium-offset-11 {
    margin-left: 91.66667% !important; }

  .medium-reset-order,
  .medium-reset-order {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }

  .column.medium-centered,
  .columns.medium-centered {
    margin-left: auto;
    margin-right: auto;
    float: none; }

  .column.medium-uncentered,
  .columns.medium-uncentered {
    margin-left: 0;
    margin-right: 0;
    float: left !important; }

  .column.medium-uncentered.opposite,
  .columns.medium-uncentered.opposite {
    float: right; }

  .push-0 {
    position: relative;
    left: 0%;
    right: auto; }

  .pull-0 {
    position: relative;
    right: 0%;
    left: auto; }

  .push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; } }
@media only screen and (min-width: 62.001em) {
  .large-push-0 {
    position: relative;
    left: 0%;
    right: auto; }

  .large-pull-0 {
    position: relative;
    right: 0%;
    left: auto; }

  .large-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .large-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .large-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .large-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .large-push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .large-pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .large-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .large-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .large-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .large-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .large-push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .large-pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .large-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .large-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .large-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .large-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .large-push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .large-pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .large-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .large-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .large-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .large-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; }

  .column,
  .columns {
    position: relative;
    padding-left: 1.15385rem;
    padding-right: 1.15385rem;
    float: left; }

  .large-1 {
    width: 8.33333%; }

  .large-2 {
    width: 16.66667%; }

  .large-3 {
    width: 25%; }

  .large-4 {
    width: 33.33333%; }

  .large-5 {
    width: 41.66667%; }

  .large-6 {
    width: 50%; }

  .large-7 {
    width: 58.33333%; }

  .large-8 {
    width: 66.66667%; }

  .large-9 {
    width: 75%; }

  .large-10 {
    width: 83.33333%; }

  .large-11 {
    width: 91.66667%; }

  .large-12 {
    width: 100%; }

  [class*="column"] + [class*="column"].end {
    float: right; }

  .large-offset-0 {
    margin-left: 0% !important; }

  .large-offset-1 {
    margin-left: 8.33333% !important; }

  .large-offset-2 {
    margin-left: 16.66667% !important; }

  .large-offset-3 {
    margin-left: 25% !important; }

  .large-offset-4 {
    margin-left: 33.33333% !important; }

  .large-offset-5 {
    margin-left: 41.66667% !important; }

  .large-offset-6 {
    margin-left: 50% !important; }

  .large-offset-7 {
    margin-left: 58.33333% !important; }

  .large-offset-8 {
    margin-left: 66.66667% !important; }

  .large-offset-9 {
    margin-left: 75% !important; }

  .large-offset-10 {
    margin-left: 83.33333% !important; }

  .large-offset-11 {
    margin-left: 91.66667% !important; }

  .large-reset-order,
  .large-reset-order {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }

  .column.large-centered,
  .columns.large-centered {
    margin-left: auto;
    margin-right: auto;
    float: none; }

  .column.large-uncentered,
  .columns.large-uncentered {
    margin-left: 0;
    margin-right: 0;
    float: left !important; }

  .column.large-uncentered.opposite,
  .columns.large-uncentered.opposite {
    float: right; }

  .push-0 {
    position: relative;
    left: 0%;
    right: auto; }

  .pull-0 {
    position: relative;
    right: 0%;
    left: auto; }

  .push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; } }
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
/* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555 #fff;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container.fade li {
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      -ms-transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container.fade li.animate-in {
        opacity: 1;
        z-index: 20;
        transition: opacity 500ms ease-in-out; }
      .orbit-container .orbit-slides-container.fade li.animate-out {
        z-index: 10;
        transition: opacity 500ms ease-in-out; }
    .orbit-container .orbit-slides-container.swipe-next li {
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-next li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-next li.animate-out {
        -ms-transform: translate(-100%, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container.swipe-prev li {
      -ms-transform: translate(-100%, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-out {
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container li.active {
        opacity: 1;
        position: relative;
        top: 0;
        left: 0;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container li .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 0.76923rem 1.07692rem;
        font-size: 1.07692rem; }
  .orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: transparent;
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.38462rem; }
  .orbit-container .orbit-timer {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 6px;
    width: 100px;
    z-index: 10; }
    .orbit-container .orbit-timer .orbit-progress {
      height: 3px;
      background-color: rgba(255, 255, 255, 0.3);
      display: block;
      width: 0%;
      position: relative;
      right: 20px;
      top: 5px; }
    .orbit-container .orbit-timer > span {
      display: none;
      position: absolute;
      top: 0px;
      right: 0;
      width: 11px;
      height: 14px;
      border: solid 4px #fff;
      border-top: none;
      border-bottom: none; }
    .orbit-container .orbit-timer.paused > span {
      right: -4px;
      top: 0px;
      width: 11px;
      height: 14px;
      border: inset 8px;
      border-left-style: solid;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      border-color: transparent #fff transparent transparent; }
      .orbit-container .orbit-timer.paused > span.dark {
        border-color: transparent #333 transparent transparent; }
  .orbit-container:hover .orbit-timer > span {
    display: block; }
  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: white;
    background-color: transparent;
    text-indent: -9999px !important;
    z-index: 10; }
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      background-color: rgba(0, 0, 0, 0.3); }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: white; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: white; }
  .orbit-container .orbit-bullets-container {
    text-align: center; }
  .orbit-container .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;
    float: none;
    text-align: center;
    display: block; }
    .orbit-container .orbit-bullets li {
      display: inline-block;
      width: 0.69231rem;
      height: 0.69231rem;
      background: #cccccc;
      float: none;
      margin-right: 6px;
      border-radius: 1000px; }
      .orbit-container .orbit-bullets li.active {
        background: #999999; }
      .orbit-container .orbit-bullets li:last-child {
        margin-right: 0; }

.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative !important;
    margin-left: 0% !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    transition: none !important; }
  .orbit-stack-on-small .orbit-timer {
    display: none; }
  .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
    display: none; }
  .orbit-stack-on-small .orbit-bullets {
    display: none; }
  .orbit-stack-on-small .orbit-slide-number {
    display: none; } }
.accordion {
  margin-bottom: 0; }
  .accordion:before, .accordion:after {
    content: " ";
    display: table; }
  .accordion:after {
    clear: both; }
  .accordion dd, .accordion h1 {
    display: block; }
    .accordion dd > a, .accordion h1 > a {
      background: #efefef;
      color: #222222;
      padding: 0.76923rem 1.15385rem;
      display: block;
      font-size: 14px; }
      .accordion dd > a:before, .accordion h1 > a:before {
        content: "\f067";
        font-family: FontAwesome;
        font-size: 14px;
        display: inline-block;
        padding-right: 10px; }
      @media only screen and (min-width: 40.063em) {
        .accordion dd > a, .accordion h1 > a {
          background: none; } }
      @media only screen and (min-width: 62.001em) {
        .accordion dd > a, .accordion h1 > a {
          font-size: 1.23077rem; } }
  .accordion.active h1 a:before {
    content: "\f068"; }
  .accordion .content {
    display: none; }
    .accordion .content.active {
      display: block; }
  @media only screen and (min-width: 40.063em) {
    .accordion.inactive-for-desktop > .content {
      display: block !important; }
    .accordion.inactive-for-desktop > dd a:before, .accordion.inactive-for-desktop > h1 a:before {
      display: none !important; } }
  @media only screen and (min-width: 62.001em) {
    .accordion.active-for-tablet > .content {
      display: block !important; }
    .accordion.active-for-tablet > dd a:before, .accordion.active-for-tablet > h1 a:before {
      display: none !important; } }

/*doc
---
title: Accordion
name: Accordion
category: Interactive elements
---

Add class "show-for-small-only" to show only for mobile. Removed in this example so it can be seen in the style guide.

```html_example
<section class="property-search accordion" data-accordion>
    <h1><a href="#collapsable-property-search">property search</a></h1>
    <div id="collapsable-property-search" class="content">
        <ul class="tabs" data-tab>
            <li class="tab-title active"><a href="#search-residential">Residential</a></li>
            <li class="tab-title"><a href="#search-commercial">Commercial</a></li>
        </ul>
        <div class="tabs-content">
            <div class="content active" id="search-residential">

                <dl class="form-fields">
                    <dt><label for="" class="accessibility">Type of property purchase</label></dt>
                    <dd class="form-field--padded form-field--borderless">
                    <label for="residential" class="accessibility">Residential property type</label>
                        <ul class="inline-list form-options">
                          <li><input type="radio" name="residential" value="buy" id="residential-buy"><label for="residential-buy">Buy</label></li>
                          <li><input type="radio" name="residential" value="rent" id="residential-rent"><label for="residential-rent">Rent</label></li>
                          <li><input type="radio" name="residential" value="invest" id="residential-invest"><label for="residential-invest">Invest</label></li>
                      </ul>
                    </dd>
                    <dt><label for="" class="accessibility">Search by Country, region, city or postcode</label></dt>
                    <dd class="form-field--borderless">
	                    <div class="search-field clearfix">
                            <input type="search" placeholder="Country, region, city or postcode">
                            <input type="submit" class="search-icon" value="search">
                        </div>
	                </dd>
                </dl>                                    
            </div>
            <div class="content" id="search-commercial">
                <dl class="form-fields">
                    <dt><label for="" class="accessibility">Type of property purchase</label></dt>
                    <dd class="form-field--padded form-field--borderless">
                    <label for="" class="accessibility">Residential property type</label>
                        <ul class="inline-list form-options">
                          <li><input type="radio" name="" value="buy" id="residential-buy"><label for="residential-buy">Buy</label></li>
                          <li><input type="radio" name="" value="rent" id="residential-rent"><label for="residential-rent">Rent</label></li>
                          <li><input type="radio" name="" value="invest" id="residential-invest"><label for="residential-invest">Invest</label></li>
                      </ul>
                    </dd>
                    <dt><label for="" class="accessibility">Search by Country, region, city or postcode</label></dt>
                    <dd class="form-field--borderless">
	                    <div class="search-field clearfix">
                            <input type="search" placeholder="Country, region, city or postcode">
                            <input type="submit" class="search-icon" value="search">
                        </div>
	                </dd>
                </dl> 
            </div>
            
        </div>
    </div>
</section>
```

*/
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-weight: normal;
  margin-bottom: 1.53846rem;
  position: relative;
  padding: 1.07692rem 1.84615rem 1.07692rem 1.07692rem;
  font-size: 1rem;
  transition: opacity 300ms ease-out;
  background-color: #db0c41;
  border-color: #bc0a38;
  color: white; }
  .alert-box .close {
    font-size: 1.69231rem;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -0.84615rem;
    right: 0.30769rem;
    color: #333333;
    opacity: 0.3; }
    .alert-box .close:hover, .alert-box .close:focus {
      opacity: 0.5; }
  .alert-box.radius {
    border-radius: 3px; }
  .alert-box.round {
    border-radius: 1000px; }
  .alert-box.success {
    background-color: #43ac6a;
    border-color: #3a945b;
    color: white; }
  .alert-box.alert {
    background-color: #f04124;
    border-color: #de2d0f;
    color: white; }
  .alert-box.secondary {
    background-color: gainsboro;
    border-color: #bdbdbd;
    color: #4b4b4b; }
  .alert-box.warning {
    background-color: #f08a24;
    border-color: #de770f;
    color: white; }
  .alert-box.info {
    background-color: #a0d3e8;
    border-color: #74bfdd;
    color: #4b4b4b; }
  .alert-box.alert-close {
    opacity: 0; }

[class*="block-grid-"] {
  display: block;
  padding: 0;
  margin: 0 -0.76923rem; }
  [class*="block-grid-"]:before, [class*="block-grid-"]:after {
    content: " ";
    display: table; }
  [class*="block-grid-"]:after {
    clear: both; }
  [class*="block-grid-"] > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 0.76923rem 1.53846rem; }

@media only screen {
  .small-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .small-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .small-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .small-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .small-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .small-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .small-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .small-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .small-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .small-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .small-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .small-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .small-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .small-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .small-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .small-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .small-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .small-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .small-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .small-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .small-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .small-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .small-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .small-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 40.063em) {
  .medium-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .medium-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .medium-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .medium-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .medium-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .medium-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .medium-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .medium-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .medium-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .medium-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .medium-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .medium-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .medium-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .medium-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .medium-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .medium-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .medium-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .medium-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .medium-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .medium-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .medium-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .medium-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .medium-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .medium-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 62.001em) {
  .large-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .large-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .large-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .large-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .large-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .large-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .large-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .large-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .large-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .large-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .large-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .large-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .large-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .large-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .large-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .large-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .large-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .large-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .large-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .large-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .large-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .large-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .large-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .large-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
/*doc
---
title: Breadcrumbs
name: Breadcrumbs
category: Lists
---

Breadcrumbs, as used on sub pages of the site.

```html_example

<div class="breadcrumbs">
  <p>You are here:</p>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Residential Property</a></li>
  </ul>
</div>

```

*/
.breadcrumbs {
  display: none;
  padding: 0;
  overflow: hidden;
  margin-left: 0;
  border-style: solid;
  border-width: 0;
  background-color: white;
  border-color: #e6e6e6;
  border-radius: 3px;
  font-size: 0.92308rem; }
  @media only screen and (min-width: 62.001em) {
    .breadcrumbs {
      display: block; } }
  .breadcrumbs ul {
    list-style: none;
    margin: 0;
    float: left; }
    .breadcrumbs ul > * {
      margin: 0;
      float: left;
      font-size: 0.84615rem;
      text-transform: none;
      color: #565656; }
      .breadcrumbs ul > * a {
        color: #565656; }
      .breadcrumbs ul > *:hover a, .breadcrumbs ul > *:focus a {
        color: #333333; }
      .breadcrumbs ul > *.current {
        cursor: default;
        color: #333333; }
        .breadcrumbs ul > *.current a {
          cursor: default;
          color: #333333; }
        .breadcrumbs ul > *.current:hover, .breadcrumbs ul > *.current:hover a, .breadcrumbs ul > *.current:focus, .breadcrumbs ul > *.current:focus a {
          text-decoration: none;
          color: #333333; }
      .breadcrumbs ul > *.unavailable {
        color: #999999; }
        .breadcrumbs ul > *.unavailable a {
          color: #999999; }
        .breadcrumbs ul > *.unavailable:hover, .breadcrumbs ul > *.unavailable:hover a, .breadcrumbs ul > *.unavailable:focus,
        .breadcrumbs ul > *.unavailable a:focus {
          text-decoration: none;
          color: #999999;
          cursor: default; }
      .breadcrumbs ul > *:before {
        content: "/";
        color: #aaaaaa;
        margin: 0 0.38462rem;
        position: relative;
        top: 1px; }
      .breadcrumbs ul > *:first-child:before {
        content: " ";
        margin: 0; }
    .breadcrumbs ul li {
      padding: 0; }
      .breadcrumbs ul li a {
        text-decoration: none; }
  .breadcrumbs p {
    color: #333333;
    float: left;
    font-size: 11px;
    margin-right: 3px;
    margin-bottom: 0;
    display: block;
    white-space: nowrap; }

/*doc
---
title: Buttons
name: button
category: Basics
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

  <a class="button">This is a link styled as a button</a>
  
  <button class="button">This is a button</button>

```

*/
button, .button {
  border-style: solid;
  border-width: 0px;
  cursor: pointer;
  font-family: verdana, arial;
  font-weight: bold;
  line-height: 25px;
  margin: 0 0 1.15385rem;
  position: relative;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  display: inline-block;
  padding-top: 0.76923rem;
  padding-right: 0.76923rem;
  padding-bottom: 0.84615rem;
  padding-left: 0.76923rem;
  font-size: 0.92308rem;
  background-color: #db0c41;
  border-color: #af0a34;
  color: white; }
  @media only screen and (min-width: 40.063em) {
    button, .button {
      line-height: normal;
      margin: 0 0 1.53846rem; } }
  button:hover, button:focus, .button:hover, .button:focus {
    background-color: #333333; }
  button:hover, button:focus, .button:hover, .button:focus {
    color: white; }
  button.secondary, .button.secondary {
    background-color: #333333;
    border-color: #292929;
    color: white;
    color: white; }
    button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
      background-color: #333333; }
    button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
      color: white; }
    button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
      background-color: gainsboro;
      color: #333333; }
  button.success, .button.success {
    background-color: #43ac6a;
    border-color: #368a55;
    color: white; }
    button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
      background-color: #333333; }
    button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
      color: white; }
  button.alert, .button.alert {
    background-color: #f04124;
    border-color: #cf2a0e;
    color: white; }
    button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
      background-color: #333333; }
    button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
      color: white; }
  button.large, .button.large {
    padding-top: 1.38462rem;
    padding-right: 1.38462rem;
    padding-bottom: 1.46154rem;
    padding-left: 1.38462rem;
    font-size: 1.53846rem; }
  button.small, .button.small {
    padding-top: 1.07692rem;
    padding-right: 1.07692rem;
    padding-bottom: 1.15385rem;
    padding-left: 1.07692rem;
    font-size: 1rem; }
  button.tiny, .button.tiny {
    padding-top: 0.76923rem;
    padding-right: 0.76923rem;
    padding-bottom: 0.84615rem;
    padding-left: 0.76923rem;
    font-size: 0.92308rem; }
  button.expand, .button.expand {
    padding-right: 0;
    padding-left: 0;
    width: 100%; }
  button.left-align, .button.left-align {
    text-align: left;
    text-indent: 0.92308rem; }
  button.right-align, .button.right-align {
    text-align: right;
    padding-right: 0.92308rem; }
  button.radius, .button.radius {
    border-radius: 3px; }
  button.round, .button.round {
    border-radius: 1000px; }
  button.disabled, button[disabled], .button.disabled, .button[disabled] {
    background-color: #db0c41;
    border-color: #af0a34;
    color: white;
    cursor: default;
    opacity: 0.7;
    box-shadow: none; }
    button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
      background-color: #333333; }
    button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
      color: white; }
    button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
      background-color: #db0c41; }
    button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary {
      background-color: gainsboro;
      border-color: #b0b0b0;
      color: #333333;
      cursor: default;
      opacity: 0.7;
      box-shadow: none; }
      button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
        background-color: #333333; }
      button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
        color: #333333; }
      button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
        background-color: gainsboro; }
    button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success {
      background-color: #43ac6a;
      border-color: #368a55;
      color: white;
      cursor: default;
      opacity: 0.7;
      box-shadow: none; }
      button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
        background-color: #333333; }
      button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
        color: white; }
      button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
        background-color: #43ac6a; }
    button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert {
      background-color: #f04124;
      border-color: #cf2a0e;
      color: white;
      cursor: default;
      opacity: 0.7;
      box-shadow: none; }
      button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
        background-color: #333333; }
      button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
        color: white; }
      button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
        background-color: #f04124; }

.button--full-width {
  width: 100%; }

@media only screen and (min-width: 40.063em) {
  button, .button {
    display: inline-block; } }
.button-group {
  list-style: none;
  margin: 0;
  left: 0; }
  .button-group:before, .button-group:after {
    content: " ";
    display: table; }
  .button-group:after {
    clear: both; }
  .button-group li {
    margin: 0;
    float: left; }
    .button-group li > button, .button-group li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group li:first-child button, .button-group li:first-child .button {
      border-left: 0; }
    .button-group li:first-child {
      margin-left: 0; }
  .button-group.radius > * > button, .button-group.radius > * .button {
    border-left: 1px solid;
    border-color: rgba(255, 255, 255, 0.5); }
  .button-group.radius > *:first-child button, .button-group.radius > *:first-child .button {
    border-left: 0; }
  .button-group.radius > *:first-child, .button-group.radius > *:first-child > a, .button-group.radius > *:first-child > button, .button-group.radius > *:first-child > .button {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .button-group.radius > *:last-child, .button-group.radius > *:last-child > a, .button-group.radius > *:last-child > button, .button-group.radius > *:last-child > .button {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }
  .button-group.round > * > button, .button-group.round > * .button {
    border-left: 1px solid;
    border-color: rgba(255, 255, 255, 0.5); }
  .button-group.round > *:first-child button, .button-group.round > *:first-child .button {
    border-left: 0; }
  .button-group.round > *:first-child, .button-group.round > *:first-child > a, .button-group.round > *:first-child > button, .button-group.round > *:first-child > .button {
    border-bottom-left-radius: 1000px;
    border-top-left-radius: 1000px; }
  .button-group.round > *:last-child, .button-group.round > *:last-child > a, .button-group.round > *:last-child > button, .button-group.round > *:last-child > .button {
    border-bottom-right-radius: 1000px;
    border-top-right-radius: 1000px; }
  .button-group.even-2 li {
    width: 50%; }
    .button-group.even-2 li > button, .button-group.even-2 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-2 li:first-child button, .button-group.even-2 li:first-child .button {
      border-left: 0; }
    .button-group.even-2 li button, .button-group.even-2 li .button {
      width: 100%; }
  .button-group.even-3 li {
    width: 33.33333%; }
    .button-group.even-3 li > button, .button-group.even-3 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-3 li:first-child button, .button-group.even-3 li:first-child .button {
      border-left: 0; }
    .button-group.even-3 li button, .button-group.even-3 li .button {
      width: 100%; }
  .button-group.even-4 li {
    width: 25%; }
    .button-group.even-4 li > button, .button-group.even-4 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-4 li:first-child button, .button-group.even-4 li:first-child .button {
      border-left: 0; }
    .button-group.even-4 li button, .button-group.even-4 li .button {
      width: 100%; }
  .button-group.even-5 li {
    width: 20%; }
    .button-group.even-5 li > button, .button-group.even-5 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-5 li:first-child button, .button-group.even-5 li:first-child .button {
      border-left: 0; }
    .button-group.even-5 li button, .button-group.even-5 li .button {
      width: 100%; }
  .button-group.even-6 li {
    width: 16.66667%; }
    .button-group.even-6 li > button, .button-group.even-6 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-6 li:first-child button, .button-group.even-6 li:first-child .button {
      border-left: 0; }
    .button-group.even-6 li button, .button-group.even-6 li .button {
      width: 100%; }
  .button-group.even-7 li {
    width: 14.28571%; }
    .button-group.even-7 li > button, .button-group.even-7 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-7 li:first-child button, .button-group.even-7 li:first-child .button {
      border-left: 0; }
    .button-group.even-7 li button, .button-group.even-7 li .button {
      width: 100%; }
  .button-group.even-8 li {
    width: 12.5%; }
    .button-group.even-8 li > button, .button-group.even-8 li .button {
      border-left: 1px solid;
      border-color: rgba(255, 255, 255, 0.5); }
    .button-group.even-8 li:first-child button, .button-group.even-8 li:first-child .button {
      border-left: 0; }
    .button-group.even-8 li button, .button-group.even-8 li .button {
      width: 100%; }

.button-bar:before, .button-bar:after {
  content: " ";
  display: table; }
.button-bar:after {
  clear: both; }
.button-bar .button-group {
  float: left;
  margin-right: 0.76923rem; }
  .button-bar .button-group div {
    overflow: hidden; }

/*doc
---
title: Buttons
name: button
category: Basics
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

  <a class="button">This is a link styled as a button</a>
  
  <button class="button">This is a button</button>

```

*/
/* Clearing Styles */
.clearing-thumbs, [data-clearing] {
  margin-bottom: 0;
  margin-left: 0;
  list-style: none; }
  .clearing-thumbs:before, .clearing-thumbs:after, [data-clearing]:before, [data-clearing]:after {
    content: " ";
    display: table; }
  .clearing-thumbs:after, [data-clearing]:after {
    clear: both; }
  .clearing-thumbs li, [data-clearing] li {
    float: left;
    margin-right: 10px; }
  .clearing-thumbs[class*="block-grid-"] li, [data-clearing][class*="block-grid-"] li {
    margin-right: 0; }

.clearing-blackout {
  background: #333333;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 998; }
  .clearing-blackout .clearing-close {
    display: block; }

.clearing-container {
  position: relative;
  z-index: 998;
  height: 100%;
  overflow: hidden;
  margin: 0; }

.clearing-touch-label {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #aaa;
  font-size: 0.6em; }

.visible-img {
  height: 95%;
  position: relative; }
  .visible-img img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50%;
    max-height: 100%;
    max-width: 100%; }

.clearing-caption {
  color: #cccccc;
  font-size: 0.875em;
  line-height: 1.3;
  margin-bottom: 0;
  text-align: center;
  bottom: 0;
  background: #333333;
  width: 100%;
  padding: 10px 30px 20px;
  position: absolute;
  left: 0; }

.clearing-close {
  z-index: 999;
  padding-left: 20px;
  padding-top: 10px;
  font-size: 30px;
  line-height: 1;
  color: #cccccc;
  display: none; }
  .clearing-close:hover, .clearing-close:focus {
    color: #ccc; }

.clearing-assembled .clearing-container {
  height: 100%; }
  .clearing-assembled .clearing-container .carousel > ul {
    display: none; }

.clearing-feature li {
  display: none; }
  .clearing-feature li.clearing-featured-img {
    display: block; }

@media only screen and (min-width: 40.063em) {
  .clearing-main-prev,
  .clearing-main-next {
    position: absolute;
    height: 100%;
    width: 40px;
    top: 0; }
    .clearing-main-prev > span,
    .clearing-main-next > span {
      position: absolute;
      top: 50%;
      display: block;
      width: 0;
      height: 0;
      border: solid 12px; }
      .clearing-main-prev > span:hover,
      .clearing-main-next > span:hover {
        opacity: 0.8; }

  .clearing-main-prev {
    left: 0; }
    .clearing-main-prev > span {
      left: 5px;
      border-color: transparent;
      border-right-color: #cccccc; }

  .clearing-main-next {
    right: 0; }
    .clearing-main-next > span {
      border-color: transparent;
      border-left-color: #cccccc; }

  .clearing-main-prev.disabled,
  .clearing-main-next.disabled {
    opacity: 0.3; }

  .clearing-assembled .clearing-container .carousel {
    background: rgba(51, 51, 51, 0.8);
    height: 120px;
    margin-top: 10px;
    text-align: center; }
    .clearing-assembled .clearing-container .carousel > ul {
      display: inline-block;
      z-index: 999;
      height: 100%;
      position: relative;
      float: none; }
      .clearing-assembled .clearing-container .carousel > ul li {
        display: block;
        width: 120px;
        min-height: inherit;
        float: left;
        overflow: hidden;
        margin-right: 0;
        padding: 0;
        position: relative;
        cursor: pointer;
        opacity: 0.4;
        clear: none; }
        .clearing-assembled .clearing-container .carousel > ul li.fix-height img {
          height: 100%;
          max-width: none; }
        .clearing-assembled .clearing-container .carousel > ul li a.th {
          border: none;
          box-shadow: none;
          display: block; }
        .clearing-assembled .clearing-container .carousel > ul li img {
          cursor: pointer !important;
          width: 100% !important; }
        .clearing-assembled .clearing-container .carousel > ul li.visible {
          opacity: 1; }
        .clearing-assembled .clearing-container .carousel > ul li:hover {
          opacity: 0.8; }
  .clearing-assembled .clearing-container .visible-img {
    background: #333333;
    overflow: hidden;
    height: 85%; }

  .clearing-close {
    position: absolute;
    top: 10px;
    right: 20px;
    padding-left: 0;
    padding-top: 0; } }
/*doc
---
title: Countries list
name: Countries list
category: Lists
---

Countries list as seen on the .com homepage. The lists would sit within a containing div with the relevant column specification classes to control layout.

Shown below within a blue block since the text and links are white and would otherwise not be visible.

```html_example

<div style="background-color: blue">
    <dl class="countries-list">
        <dt>Africa</dt>
        <dd><a href="http://bw.knightfrank.com/" id="cpBanners_ucc4_ctl00_hlHyperlink1">Botswana</a></dd>
        <dd><a href="http://www.knightfrank.co.ke/" id="cpBanners_ucc4_ctl00_hlHyperLink2">Kenya</a></dd>
        <dd><a href="http://www.knightfrank.mw/" id="cpBanners_ucc4_ctl00_hlHyperLink3">Malawi</a></dd>
        <dd><a href="http://www.knightfrank.com.ng/" id="cpBanners_ucc4_ctl00_hlHyperLink5">Nigeria</a></dd>
        <dd><a href="http://www.knightfrank.co.za" id="cpBanners_ucc4_ctl00_hlHyperLink6">South Africa</a></dd>
        <dd><a href="http://www.knightfrank.co.tz/" id="cpBanners_ucc4_ctl00_hlHyperLink7">Tanzania</a></dd>
        <dd><a href="http://www.knightfrank.ug/" id="cpBanners_ucc4_ctl00_hlHyperLink8">Uganda</a></dd>
        <dd><a href="http://zm.knightfrank.com/" id="cpBanners_ucc4_ctl00_hlHyperLink9">Zambia</a></dd>
        <dd><a href="http://www.knightfrank.co.zw/" id="cpBanners_ucc4_ctl00_hlHyperLink10">Zimbabwe</a></dd>
    </dl>
</div>

```

*/
.countries-list {
  position: relative; }
  .countries-list dt {
    font-size: 15px;
    color: #fff;
    padding: 0 5px 0 15px;
    font-weight: bold;
    /*&:before {
        content: "\f0da";
        color:$primary-color;
        font-family: FontAwesome;
        font-size:14px;
        display:inline-block;
        position:absolute;
        top:2px;
        left:0;
    }*/ }
  .countries-list dd {
    padding: 0 5px 0 15px; }
    .countries-list dd a {
      color: #fff; }

/* Foundation Dropdowns */
.f-dropdown {
  display: none;
  position: absolute;
  left: -9999px;
  list-style: none;
  margin-left: 0;
  width: 50%;
  max-height: none;
  height: auto;
  background: white;
  border: solid 1px #cccccc;
  font-size: 0.84615rem;
  padding: 15px;
  z-index: 1300;
  margin-top: 2px;
  max-width: none; }
  .f-dropdown > *:first-child {
    margin-top: 0; }
  .f-dropdown > *:last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 40.063em) {
    .f-dropdown {
      display: block; }
      .f-dropdown + select {
        display: none; } }
  .f-dropdown#country-dropdown-list {
    width: 292%; }
  .f-dropdown#currency-dropdown-list {
    width: 200%; }
  .f-dropdown ul {
    list-style: none;
    margin-left: 0; }
  .f-dropdown:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-color: transparent transparent white transparent;
    border-bottom-style: solid;
    position: absolute;
    top: -12px;
    left: 10px;
    z-index: 99; }
  .f-dropdown:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 7px;
    border-color: transparent transparent #cccccc transparent;
    border-bottom-style: solid;
    position: absolute;
    top: -14px;
    left: 9px;
    z-index: 98; }
  .f-dropdown.right:before {
    left: auto;
    right: 10px; }
  .f-dropdown.right:after {
    left: auto;
    right: 9px; }
  .f-dropdown.drop-right {
    display: none;
    position: absolute;
    left: -9999px;
    list-style: none;
    margin-left: 0;
    width: 50%;
    max-height: none;
    height: auto;
    background: white;
    border: solid 1px #cccccc;
    font-size: 0.84615rem;
    padding: 15px;
    z-index: 1300;
    margin-top: 0;
    margin-left: 2px;
    max-width: none; }
    .f-dropdown.drop-right > *:first-child {
      margin-top: 0; }
    .f-dropdown.drop-right > *:last-child {
      margin-bottom: 0; }
    @media only screen and (min-width: 40.063em) {
      .f-dropdown.drop-right {
        display: block; }
        .f-dropdown.drop-right + select {
          display: none; } }
    .f-dropdown.drop-right#country-dropdown-list {
      width: 292%; }
    .f-dropdown.drop-right#currency-dropdown-list {
      width: 200%; }
    .f-dropdown.drop-right ul {
      list-style: none;
      margin-left: 0; }
    .f-dropdown.drop-right:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 6px;
      border-color: transparent white transparent transparent;
      border-right-style: solid;
      position: absolute;
      top: 10px;
      left: -12px;
      z-index: 99; }
    .f-dropdown.drop-right:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 7px;
      border-color: transparent #cccccc transparent transparent;
      border-right-style: solid;
      position: absolute;
      top: 9px;
      left: -14px;
      z-index: 98; }
  .f-dropdown.drop-left {
    display: none;
    position: absolute;
    left: -9999px;
    list-style: none;
    margin-left: 0;
    width: 50%;
    max-height: none;
    height: auto;
    background: white;
    border: solid 1px #cccccc;
    font-size: 0.84615rem;
    padding: 15px;
    z-index: 1300;
    margin-top: 0;
    margin-left: -2px;
    max-width: none; }
    .f-dropdown.drop-left > *:first-child {
      margin-top: 0; }
    .f-dropdown.drop-left > *:last-child {
      margin-bottom: 0; }
    @media only screen and (min-width: 40.063em) {
      .f-dropdown.drop-left {
        display: block; }
        .f-dropdown.drop-left + select {
          display: none; } }
    .f-dropdown.drop-left#country-dropdown-list {
      width: 292%; }
    .f-dropdown.drop-left#currency-dropdown-list {
      width: 200%; }
    .f-dropdown.drop-left ul {
      list-style: none;
      margin-left: 0; }
    .f-dropdown.drop-left:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 6px;
      border-color: transparent transparent transparent white;
      border-left-style: solid;
      position: absolute;
      top: 10px;
      right: -12px;
      left: auto;
      z-index: 99; }
    .f-dropdown.drop-left:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 7px;
      border-color: transparent transparent transparent #cccccc;
      border-left-style: solid;
      position: absolute;
      top: 9px;
      right: -14px;
      left: auto;
      z-index: 98; }
  .f-dropdown.drop-top {
    display: none;
    position: absolute;
    left: -9999px;
    list-style: none;
    margin-left: 0;
    width: 50%;
    max-height: none;
    height: auto;
    background: white;
    border: solid 1px #cccccc;
    font-size: 0.84615rem;
    padding: 15px;
    z-index: 1300;
    margin-top: -2px;
    margin-left: 0;
    max-width: none; }
    .f-dropdown.drop-top > *:first-child {
      margin-top: 0; }
    .f-dropdown.drop-top > *:last-child {
      margin-bottom: 0; }
    @media only screen and (min-width: 40.063em) {
      .f-dropdown.drop-top {
        display: block; }
        .f-dropdown.drop-top + select {
          display: none; } }
    .f-dropdown.drop-top#country-dropdown-list {
      width: 292%; }
    .f-dropdown.drop-top#currency-dropdown-list {
      width: 200%; }
    .f-dropdown.drop-top ul {
      list-style: none;
      margin-left: 0; }
    .f-dropdown.drop-top:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 6px;
      border-color: white transparent transparent transparent;
      border-top-style: solid;
      position: absolute;
      top: auto;
      bottom: -12px;
      left: 10px;
      right: auto;
      z-index: 99; }
    .f-dropdown.drop-top:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 7px;
      border-color: #cccccc transparent transparent transparent;
      border-top-style: solid;
      position: absolute;
      top: auto;
      bottom: -14px;
      left: 9px;
      right: auto;
      z-index: 98; }
  .f-dropdown li {
    font-size: 0.84615rem;
    cursor: pointer;
    line-height: 1.38462rem;
    margin: 0;
    padding-bottom: 10px;
    padding-top: 10px; }
    .f-dropdown li a {
      display: block;
      color: #555555; }
      .f-dropdown li a:hover, .f-dropdown li a:focus, .f-dropdown li a.selected {
        color: #db0c41; }
  .f-dropdown.content {
    display: none;
    position: absolute;
    left: -9999px;
    list-style: none;
    margin-left: 0;
    padding: 1.53846rem;
    width: 100%;
    height: auto;
    max-height: none;
    background: white;
    border: solid 1px #cccccc;
    font-size: 0.84615rem;
    z-index: 99;
    max-width: none; }
    .f-dropdown.content > *:first-child {
      margin-top: 0; }
    .f-dropdown.content > *:last-child {
      margin-bottom: 0; }
    @media only screen and (min-width: 40.063em) {
      .f-dropdown.content {
        display: block; }
        .f-dropdown.content + select {
          display: none; } }
  .f-dropdown.tiny {
    max-width: 200px; }
  .f-dropdown.small {
    max-width: 300px; }
  .f-dropdown.medium {
    max-width: 500px; }
  .f-dropdown.large {
    max-width: 800px; }

.f-dropdown#country-dropdown-list .row {
  margin: 0; }
.f-dropdown#country-dropdown-list > li {
  text-align: center; }
  .f-dropdown#country-dropdown-list > li:hover {
    text-decoration: underline;
    background: none; }
  .f-dropdown#country-dropdown-list > li span {
    font: 16px "KfDisplayReg", Helvetica, Arial, sans-serif;
    padding-bottom: 10px;
    padding-top: 10px; }
  .f-dropdown#country-dropdown-list > li li {
    width: 101px;
    padding: 10px;
    height: 80px; }
  .f-dropdown#country-dropdown-list > li a {
    line-height: 14px; }
.f-dropdown#country-dropdown-list > li > ul {
  border-top: solid 1px #cccccc;
  clear: both;
  padding-top: 10px; }
  .f-dropdown#country-dropdown-list > li > ul:before, .f-dropdown#country-dropdown-list > li > ul:after {
    content: " ";
    display: table; }
  .f-dropdown#country-dropdown-list > li > ul:after {
    clear: both; }
  .f-dropdown#country-dropdown-list > li > ul .flagImg {
    background-image: url("../Images/Flags.jpg");
    background-repeat: no-repeat;
    display: block;
    height: 34px;
    width: 48px;
    margin: 0 auto; }
  .f-dropdown#country-dropdown-list > li > ul [class*="column"] + [class*="column"]:last-child {
    float: left; }
  .f-dropdown#country-dropdown-list > li > ul .bw .flagImg {
    background-position: -337px 0; }
  .f-dropdown#country-dropdown-list > li > ul .ke .flagImg {
    background-position: -145px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .ml .flagImg {
    background-position: -337px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .ng .flagImg {
    background-position: -433px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .za .flagImg {
    background-position: -240px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .tz .flagImg {
    background-position: -913px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .ug .flagImg {
    background-position: -97px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .zm .flagImg {
    background-position: -289px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .zw .flagImg {
    background-position: -336px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .ba .flagImg {
    background-position: -96px 0; }
  .f-dropdown#country-dropdown-list > li > ul .bd .flagImg {
    background-position: -144px 0; }
  .f-dropdown#country-dropdown-list > li > ul .bm .flagImg {
    background-position: -288px 0; }
  .f-dropdown#country-dropdown-list > li > ul .ca .flagImg {
    background-position: -384px 0; }
  .f-dropdown#country-dropdown-list > li > ul .cd .flagImg {
    background-position: -577px -76px; }
  .f-dropdown#country-dropdown-list > li > ul .mu .flagImg {
    background-position: -433px -76px; }
  .f-dropdown#country-dropdown-list > li > ul .bvi .flagImg {
    background-position: -480px -76px; }
  .f-dropdown#country-dropdown-list > li > ul .an .flagImg {
    background-position: -528px -76px; }
  .f-dropdown#country-dropdown-list > li > ul .stb .flagImg {
    background-position: -673px 0; }
  .f-dropdown#country-dropdown-list > li > ul .us .flagImg {
    background-position: -145px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .au .flagImg {
    background-position: -48px 0; }
  .f-dropdown#country-dropdown-list > li > ul .kh .flagImg {
    background-position: -192px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .cn .flagImg {
    background-position: -480px 0; }
  .f-dropdown#country-dropdown-list > li > ul .hk .flagImg {
    background-position: -817px 0; }
  .f-dropdown#country-dropdown-list > li > ul .in .flagImg {
    background-position: -1px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .id .flagImg {
    background-position: -865px 0; }
  .f-dropdown#country-dropdown-list > li > ul .jp .flagImg {
    background-position: -97px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .my .flagImg {
    background-position: -385px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .nz .flagImg {
    background-position: -529px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .sg .flagImg {
    background-position: -816px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .kr .flagImg {
    background-position: -241px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .th .flagImg {
    background-position: -865px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .tw .flagImg {
    background-position: -385px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .vn .flagImg {
    background-position: -193px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .be .flagImg {
    background-position: -193px 0; }
  .f-dropdown#country-dropdown-list > li > ul .cz .flagImg {
    background-position: -529px 0; }
  .f-dropdown#country-dropdown-list > li > ul .fr2 .flagImg {
    background-position: -673px 0; }
  .f-dropdown#country-dropdown-list > li > ul .de2 .flagImg {
    background-position: -577px 0; }
  .f-dropdown#country-dropdown-list > li > ul .ie .flagImg {
    background-position: -913px 0; }
  .f-dropdown#country-dropdown-list > li > ul .it .flagImg {
    background-position: -49px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .mc .flagImg {
    background-position: -289px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .nl .flagImg {
    background-position: -481px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .pl .flagImg {
    background-position: -577px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .pt .flagImg {
    background-position: -625px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .ro .flagImg {
    background-position: -720px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .ru .flagImg {
    background-position: -769px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .es .flagImg {
    background-position: -625px 0; }
  .f-dropdown#country-dropdown-list > li > ul .ch .flagImg {
    background-position: -433px 0; }
  .f-dropdown#country-dropdown-list > li > ul .ua .flagImg {
    background-position: 4px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .gb2 .flagImg {
    background-position: -721px 0; }
  .f-dropdown#country-dropdown-list > li > ul .bh .flagImg {
    background-position: -241px 0; }
  .f-dropdown#country-dropdown-list > li > ul .qa .flagImg {
    background-position: -673px -37px; }
  .f-dropdown#country-dropdown-list > li > ul .uae .flagImg {
    background-position: -50px -75px; }
  .f-dropdown#country-dropdown-list > li > ul .global .flagImg {
    background-position: -769px 0; }
  .f-dropdown#country-dropdown-list > li > ul span.value {
    display: none; }

.dropdown.button, button.dropdown {
  position: relative;
  padding-right: 4.38462rem; }
  .dropdown.button:before, button.dropdown:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 50%; }
  .dropdown.button:before, button.dropdown:before {
    border-width: 0.46154rem;
    right: 1.73077rem;
    margin-top: -0.19231rem; }
  .dropdown.button:before, button.dropdown:before {
    border-color: white transparent transparent transparent; }
  .dropdown.button.tiny, button.dropdown.tiny {
    padding-right: 3.23077rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-width: 0.46154rem;
      right: 1.38462rem;
      margin-top: -0.15385rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.small, button.dropdown.small {
    padding-right: 3.76923rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-width: 0.53846rem;
      right: 1.61538rem;
      margin-top: -0.19231rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.large, button.dropdown.large {
    padding-right: 4.46154rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-width: 0.38462rem;
      right: 2.11538rem;
      margin-top: -0.19231rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.secondary:before, button.dropdown.secondary:before {
    border-color: #333333 transparent transparent transparent; }

.inline-list {
  list-style: none;
  margin: 0 auto 1.30769rem auto;
  margin-left: 0;
  margin-right: 0;
  padding: 0; }
  .inline-list > li {
    padding: 5px 0; }
  @media only screen and (min-width: 62.001em) {
    .inline-list > li {
      list-style: none;
      float: left;
      margin-left: 0;
      display: block;
      padding: 0; } }

.flex-video {
  position: relative;
  padding-top: 1.92308rem;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 1.23077rem;
  overflow: hidden; }
  .flex-video.widescreen {
    padding-bottom: 56.34%; }
  .flex-video.vimeo {
    padding-top: 0; }
  .flex-video iframe,
  .flex-video object,
  .flex-video embed,
  .flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*doc
---
title: Form Fields
name: Form Fields
category: Forms
---
```html_example
<form action="#">
  <fieldset>
      <legend>New Form Styles</legend>

      <dl class="form-fields">

        <dt><label for="text" class="accessibility">Text Input <abbr title="Required">*</abbr></label></dt>
        <dd>
          <input type="text" id="text" placeholder="Form label text as a placeholder">
          <small class="error">Error message text here</small>
        </dd>

        <dt><label for="password" class="accessibility">Password</label></dt>
        <dd>
          <input type="password" id="password" placeholder="Password field label text as a placeholder">
          <small class="error">Error message text here</small>
        </dd>

        <dt><label for="url" class="accessibility">Web Address</label></dt>
        <dd>
          <input type="url" placeholder="URL field label text as a placeholder" id="url">
          <small class="error">Error message text here</small>
        </dd>

        <dt><label for="email" class="accessibility">Email Address</label></dt>
        <dd>
            <input type="email" placeholder="Email address field label text as a placeholder" id="email">
            <small class="error">Error message text here</small>
        </dd>

        <dt><label for="url" class="accessibility">Web Address</label></dt>
        <dd>
            <input type="url" placeholder="Web address field label text as a placeholder" id="url">
            <small class="error">Error message text here</small>
        </dd>

        <dt><label class="accessibility">Search field</label></dt>
        <dd>
            <div class="search-field clearfix">
                <input type="search" placeholder="Search terms, Country, region, city or postcode">
                <input type="submit" value="search" class="search-icon">
            </div>
            <small class="error">Error message text here</small>
        </dd>

        <dt><label for="textarea" class="accessibility">Textarea</label></dt>
        <dd>
            <textarea id="textarea" rows="8" cols="48" placeholder="Text area field label text as a placeholder"></textarea>
            <small class="error">Error message text here</small>
        </dd>

        <dt class="form-field--padded"><label for="checkbox">Single Checkbox</label></dt>
        <dd class="form-field--padded">
            <label for="checkbox"><input type="checkbox" id="checkbox" class="checkbox"> Label</label>
            <small class="error">Error message text here</small>
        </dd>

        <dt class="form-field--padded"><label for="select" class="accessibility">Select</label></dt>
        <dd>
            <select id="select">
                <option>Select from the following options</option>
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
            </select>
            <small class="error">Error message text here</small>
        </dd>

        <dt class="form-field--padded"><label>Choose from multiple radio buttons</label></dt>
        <dd class="form-field--padded">
            <ul class="form-options">
                <li><input type="radio" name="color" value="red" id="red"><label for="red">Red</label></li>
                <li><input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label></li>
                <li><input type="radio" name="color" value="pink" id="pink"><label for="pink">Pink</label></li>                
            </ul>
            <small class="error">Error message text here</small>
        </dd>

        <dt class="form-field--padded"><label>Choose from multiple checkboxes</label></dt>
        <dd class="form-field--padded">
            <ul class="form-options">
                <li><input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label></li>
                <li> <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label></li>
                <li><input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label></li>
            </ul>
            <small class="error">Error message text here</small>
        </dd>

        <dt class="form-field--padded"><label>Select image to upload:</label></dt>
        <dd class="form-field--padded"><input type="file" name="fileToUpload" id="fileToUpload"></dd>

    </dl>

    <div class="form-actions">
        <input type="submit" class="button" value="Post Comment">
        <input type="button" class="button" value="Preview">
        <a href="#">Cancel</a>
    </div>

  </fieldset>
</form>
```
*/
/*doc
---
title: Buttons
name: button
category: Basics
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

  <a class="button">This is a link styled as a button</a>
  
  <button class="button">This is a button</button>

```

*/
/* Standard Forms */
form {
  margin: 0 0 1.23077rem; }

/* Using forms within rows, we need to set some defaults */
form:not(body > &) .row .row {
  margin: 0 -0.61538rem; }
  form:not(body > &) .row .row .column,
  form:not(body > &) .row .row .columns {
    padding: 0 0.61538rem; }
  form:not(body > &) .row .row.collapse {
    margin: 0; }
    form:not(body > &) .row .row.collapse .column,
    form:not(body > &) .row .row.collapse .columns {
      padding: 0; }
    form:not(body > &) .row .row.collapse input {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0; }
form:not(body > &) .row input.column,
form:not(body > &) .row input.columns,
form:not(body > &) .row textarea.column,
form:not(body > &) .row textarea.columns {
  padding-left: 0.61538rem; }

/* Label Styles */
label {
  font-size: 1.07692rem;
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 0;
  /* Styles for required inputs */ }
  label.right {
    float: none;
    text-align: right; }
  label.inline {
    margin: 0 0 1.23077rem 0;
    padding: 0.69231rem 0; }
  label small {
    text-transform: capitalize;
    color: #676767; }

select::-ms-expand {
  display: none; }

@-moz-document url-prefix() {
  select {
    background: #fafafa; }

  select:hover {
    background: #f3f3f3; } }
/* Attach elements to the beginning or end of an input */
.prefix,
.postfix {
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  font-size: 1.07692rem;
  height: 2.84615rem;
  line-height: 2.84615rem; }

/* Adjust padding, alignment and radius if pre/post element is a button */
.postfix.button {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  line-height: 2.61538rem;
  border: none; }

.prefix.button {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  line-height: 2.61538rem;
  border: none; }

.prefix.button.radius {
  border-radius: 0;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px; }

.postfix.button.radius {
  border-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px; }

.prefix.button.round {
  border-radius: 0;
  border-bottom-left-radius: 1000px;
  border-top-left-radius: 1000px; }

.postfix.button.round {
  border-radius: 0;
  border-bottom-right-radius: 1000px;
  border-top-right-radius: 1000px; }

/* Separate prefix and postfix styles when on span or label so buttons keep their own */
span.prefix, label.prefix {
  background: #f2f2f2;
  border-right: none;
  color: #333333;
  border-color: #cccccc; }
  span.prefix.radius, label.prefix.radius {
    border-radius: 0;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }

span.postfix, label.postfix {
  background: #f2f2f2;
  border-left: none;
  color: #333333;
  border-color: #cccccc; }
  span.postfix.radius, label.postfix.radius {
    border-radius: 0;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }

/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  background-color: white;
  font-family: inherit;
  border: none;
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 1.07692rem;
  padding: 0.61538rem 1.15385rem;
  height: 2.84615rem;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.15s linear; }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="time"]:focus,
  input[type="url"]:focus,
  textarea:focus {
    background: #fafafa;
    border-color: #999999;
    outline: none; }
  input[type="text"][disabled], fieldset[disabled] input[type="text"],
  input[type="password"][disabled], fieldset[disabled]
  input[type="password"],
  input[type="date"][disabled], fieldset[disabled]
  input[type="date"],
  input[type="datetime"][disabled], fieldset[disabled]
  input[type="datetime"],
  input[type="datetime-local"][disabled], fieldset[disabled]
  input[type="datetime-local"],
  input[type="month"][disabled], fieldset[disabled]
  input[type="month"],
  input[type="week"][disabled], fieldset[disabled]
  input[type="week"],
  input[type="email"][disabled], fieldset[disabled]
  input[type="email"],
  input[type="number"][disabled], fieldset[disabled]
  input[type="number"],
  input[type="search"][disabled], fieldset[disabled]
  input[type="search"],
  input[type="tel"][disabled], fieldset[disabled]
  input[type="tel"],
  input[type="time"][disabled], fieldset[disabled]
  input[type="time"],
  input[type="url"][disabled], fieldset[disabled]
  input[type="url"],
  textarea[disabled], fieldset[disabled]
  textarea {
    background-color: #dddddd; }
  input[type="text"].radius,
  input[type="password"].radius,
  input[type="date"].radius,
  input[type="datetime"].radius,
  input[type="datetime-local"].radius,
  input[type="month"].radius,
  input[type="week"].radius,
  input[type="email"].radius,
  input[type="number"].radius,
  input[type="search"].radius,
  input[type="tel"].radius,
  input[type="time"].radius,
  input[type="url"].radius,
  textarea.radius {
    border-radius: 3px; }

input[type="submit"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border: none;
  border-style: solid;
  border-width: 0px;
  cursor: pointer;
  font-family: verdana, arial;
  font-weight: bold;
  line-height: 25px;
  margin: 0 0 1.15385rem;
  position: relative;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  display: inline-block;
  padding-top: 0.76923rem;
  padding-right: 0.76923rem;
  padding-bottom: 0.84615rem;
  padding-left: 0.76923rem;
  font-size: 0.92308rem;
  background-color: #db0c41;
  border-color: #af0a34;
  color: white;
  clear: both;
  margin: 0; }
  @media only screen and (min-width: 40.063em) {
    input[type="submit"] {
      line-height: normal;
      margin: 0 0 1.53846rem; } }
  input[type="submit"]:hover, input[type="submit"]:focus {
    background-color: #333333; }
  input[type="submit"]:hover, input[type="submit"]:focus {
    color: white; }

/* Respect enforced amount of rows for textarea */
textarea[rows] {
  height: auto; }

/* Add height value for select elements to match text input height */
select {
  -webkit-appearance: none !important;
  background-color: #fafafa;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: 99% center;
  border: none;
  padding: 0.61538rem;
  font-size: 1.07692rem;
  color: rgba(0, 0, 0, 0.75);
  line-height: normal;
  border-radius: 0;
  height: 2.84615rem; }
  select.radius {
    border-radius: 3px; }
  select:hover {
    background-color: #f3f3f3;
    border-color: #999999; }

/* Adjust margin for form elements below */
input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
  margin: 0 0 1.23077rem 0; }
  #pnlRadioButtons input[type="file"], #pnlRadioButtons
  input[type="checkbox"], #pnlRadioButtons
  input[type="radio"], #pnlRadioButtons
  select {
    margin-bottom: 0.30769rem; }

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
  margin-left: 0.61538rem;
  margin-right: 0.61538rem;
  margin-bottom: 0;
  vertical-align: baseline; }

/* Normalize file input width */
input[type="file"] {
  width: 100%; }

/* We add basic fieldset styling */
fieldset {
  background: white;
  border: 1px solid #cccccc;
  padding: 0;
  margin: 1.38462rem 0; }
  fieldset legend {
    font-size: 1.23077rem;
    font-family: KFMeta, Arial, Helvetica, sans-serif;
    float: left;
    color: #555555;
    background: #cccccc;
    padding: 0.76923rem 1.15385rem;
    width: 100%;
    line-height: 1.4;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  fieldset dl {
    clear: both; }

/* Error Handling */
[data-abide] .error small.error, [data-abide] span.error, [data-abide] small.error {
  display: block;
  font-size: 0.92308rem;
  font-weight: normal;
  font-style: italic;
  color: #f04124!important;
  color: #333333; }
[data-abide] span.error, [data-abide] small.error {
  display: none; }

span.error, small.error {
  display: block;
  font-size: 0.92308rem;
  font-weight: normal;
  font-style: italic;
  color: #f04124!important;
  color: #333333; }

.error input,
.error textarea,
.error select {
  margin-bottom: 0; }
.error input[type="checkbox"],
.error input[type="radio"] {
  margin-bottom: 1.23077rem; }
.error label,
.error label.error {
  color: #f04124; }
.error small.error {
  display: block;
  font-size: 0.92308rem;
  font-weight: normal;
  font-style: italic;
  color: #f04124!important;
  color: #333333; }
.error > label > small {
  color: #676767;
  background: transparent;
  padding: 0;
  text-transform: capitalize;
  font-style: normal;
  font-size: 60%;
  margin: 0;
  display: inline; }
.error span.error-message {
  display: block; }

input.error,
textarea.error {
  margin-bottom: 0;
  background-color: rgba(219, 12, 65, 0.1); }

label.error {
  color: #f04124; }

abbr[title="Required"] {
  color: #db0c41; }

.search-field {
  position: relative; }
  .search-field .search-icon {
    background: url(../Images/SearchSubmitBg.png);
    height: 35px;
    text-indent: -99999px;
    margin-bottom: 0;
    width: 35px;
    position: absolute;
    top: 1px;
    right: 1px; }

/*doc
---
title: Form Example - Request a Free Market Appraisal
name: Form Example
category: Forms
---

Example of the use of form elements for the Request a Free Market Appraisal form, which appears on the 3-column layout in the right sidebar.

It will adjust to fit the space available.

```html_example
<form action="#" data-ui-component="request-a-market-appraisal-form">
  <fieldset class="appraisal">
      <legend>Request a free market appraisal</legend>
      <dl class="form-fields">
          <dt><label>Name</label></dt>
          <dd><input type="text" placeholder="Name" /></dd>
          <dt><label>Postcode</label></dt>
          <dd><input type="text" placeholder="Postcode" /></dd>
          <dt><label>Telephone</label></dt>
          <dd><input type="tel" placeholder="Telephone" /></dd>
          <dt><label>Email</label></dt>
          <dd><input type="email" placeholder="Email" /></dd>
          <dt><label class="accessibility">What is your area of interest?</label></dt>
          <dd class="form-field--padded">
              <ul class="inline-list">
                  <li><input type="radio" value="sales" name="appraisal-subject" id="appraisal-sales"><label for="appraisal-sales">Sales</label></li>
                  <li><input type="radio" value="lettings" name="appraisal-subject" id="appraisal-lettings"><label for="appraisal-lettings">Lettings</label></li>    
              </ul>
          </dd>
      </dl>
      <div class="form-actions">
          <input type="submit" value="submit" class="button--full-width" />
      </div>
  </fieldset>
</form>
```

*/
dl.form-fields dt {
  margin-bottom: 0;
  border-bottom: solid 1px #cccccc; }
  dl.form-fields dt label {
    padding: 0.61538rem 1.15385rem; }
dl.form-fields dd {
  border-bottom: solid 1px #cccccc; }
  dl.form-fields dd:before, dl.form-fields dd:after {
    content: " ";
    display: table; }
  dl.form-fields dd:after {
    clear: both; }
  dl.form-fields dd.form-field--borderless {
    border-bottom: none; }
dl.form-fields dt.error,
dl.form-fields dd.error {
  background-color: rgba(219, 12, 65, 0.1); }
dl.form-fields small.error {
  display: none;
  position: relative;
  clear: left;
  padding: 0.61538rem 1.15385rem; }
dl.form-fields .form-options {
  list-style: none;
  margin: 0 auto 0 auto;
  margin-left: 0;
  margin-right: 0;
  padding: 0; }
  dl.form-fields .form-options > li {
    padding: 5px 0;
    display: inline-block; }
  dl.form-fields .form-options input[type="checkbox"],
  dl.form-fields .form-options input[type="radio"] {
    margin-bottom: 0; }
dl.form-fields .form-field--padded {
  padding: 0.61538rem 1.15385rem; }
  dl.form-fields .form-field--padded .error {
    padding: 0; }

.form-actions {
  padding: 1.15385rem; }
  .form-actions input, .form-actions button {
    margin-bottom: 0; }

/* Foundation Joyride */
.joyride-list {
  display: none; }

/* Default styles for the container */
.joyride-tip-guide {
  display: none;
  position: absolute;
  background: #333333;
  color: white;
  z-index: 101;
  top: 0;
  left: 2.5%;
  font-family: inherit;
  font-weight: normal;
  width: 95%; }

.lt-ie9 .joyride-tip-guide {
  max-width: 800px;
  left: 50%;
  margin-left: -400px; }

.joyride-content-wrapper {
  width: 100%;
  padding: 1.38462rem 1.53846rem 1.84615rem; }
  .joyride-content-wrapper .button {
    margin-bottom: 0 !important; }

/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
.joyride-tip-guide .joyride-nub {
  display: block;
  position: absolute;
  left: 22px;
  width: 0;
  height: 0;
  border: 10px solid #333333; }
  .joyride-tip-guide .joyride-nub.top {
    border-top-style: solid;
    border-color: #333333;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    top: -20px; }
  .joyride-tip-guide .joyride-nub.bottom {
    border-bottom-style: solid;
    border-color: #333333 !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    bottom: -20px; }
  .joyride-tip-guide .joyride-nub.right {
    right: -20px; }
  .joyride-tip-guide .joyride-nub.left {
    left: -20px; }

/* Typography */
.joyride-tip-guide h1,
.joyride-tip-guide h2,
.joyride-tip-guide h3,
.joyride-tip-guide h4,
.joyride-tip-guide h5,
.joyride-tip-guide h6 {
  line-height: 1.25;
  margin: 0;
  font-weight: bold;
  color: white; }

.joyride-tip-guide p {
  margin: 0 0 1.38462rem 0;
  font-size: 1.07692rem;
  line-height: 1.3; }

.joyride-timer-indicator-wrap {
  width: 50px;
  height: 3px;
  border: solid 1px #555555;
  position: absolute;
  right: 1.30769rem;
  bottom: 1.23077rem; }

.joyride-timer-indicator {
  display: block;
  width: 0;
  height: inherit;
  background: #666666; }

.joyride-close-tip {
  position: absolute;
  right: 12px;
  top: 10px;
  color: #777777 !important;
  text-decoration: none;
  font-size: 24px;
  font-weight: normal;
  line-height: .5 !important; }
  .joyride-close-tip:hover, .joyride-close-tip:focus {
    color: #eee !important; }

.joyride-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: transparent;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
  cursor: pointer; }

.joyride-expose-wrapper {
  background-color: #ffffff;
  position: absolute;
  border-radius: 3px;
  z-index: 102;
  box-shadow: 0 0 15px #ffffff; }

.joyride-expose-cover {
  background: transparent;
  border-radius: 3px;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0; }

/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 40.063em) {
  .joyride-tip-guide {
    width: 300px;
    left: inherit; }
    .joyride-tip-guide .joyride-nub.bottom {
      border-color: #333333 !important;
      border-bottom-color: transparent !important;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      bottom: -20px; }
    .joyride-tip-guide .joyride-nub.right {
      border-color: #333333 !important;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      top: 22px;
      left: auto;
      right: -20px; }
    .joyride-tip-guide .joyride-nub.left {
      border-color: #333333 !important;
      border-top-color: transparent !important;
      border-left-color: transparent !important;
      border-bottom-color: transparent !important;
      top: 22px;
      left: -20px;
      right: auto; } }
.keystroke,
kbd {
  background-color: #ededed;
  border-color: #dddddd;
  color: #222222;
  border-style: solid;
  border-width: 1px;
  margin: 0;
  font-family: "Consolas", "Menlo", "Courier", monospace;
  font-size: inherit;
  padding: 0.15385rem 0.30769rem 0;
  border-radius: 3px; }

.label {
  font-weight: normal;
  font-family: verdana, arial;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  margin-bottom: inherit;
  padding: 0.30769rem 0.61538rem 0.46154rem;
  font-size: 0.84615rem;
  background-color: #db0c41;
  color: white; }
  .label.radius {
    border-radius: 3px; }
  .label.round {
    border-radius: 1000px; }
  .label.alert {
    background-color: #f04124;
    color: white; }
  .label.success {
    background-color: #43ac6a;
    color: white; }
  .label.secondary {
    background-color: gainsboro;
    color: #333333; }

/*doc
---
title: Contacts Listing
name: Contacts Listing
category: Lists
---

A Contacts List is an unordered list of items:

```html_example
    <ul class="list-group contacts row">
        <li class="column">
            <article>
            <img src="http://placehold.it/100x120" />
            <h2>London</h2>
            <h1><a href="">Philip Selway</a></h1>
                Partner, Department Head
            <dl>
            <dt><i class="fa fa-phone"></i><span>Telephone</span></dt>
            <dd>+44 20 7861 1071</dd>
                </dl>
            </article>
        </li>
        <li class="column">
            <article>
            <img src="http://placehold.it/100x120" />
            <h2>London</h2>
            <h1><a href="">Philip Selway</a></h1>
                Partner, Department Head
            <dl>
            <dt><i class="fa fa-phone"></i><span>Telephone</span></dt>
            <dd>+44 20 7861 1071</dd>
                </dl>
            </article>
        </li>
    </ul>
```

*/
/*doc
---
title: News listing
name: News listing
category: Lists
---

News items are listed using a list-group. This can be extended by adding column specifications to the list items ( li ) as seen on the homepage.

```html_example

<ul class="list-group row">
    <li class="">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
    <li class="">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
    <li class="">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
</ul>


```

*/
/*doc
---
title: News listing with columns
name: News listing with columns
category: Lists
---

News items are listed using a list-group. This can be extended by adding column specifications to the list items ( li ) as seen on the homepage.

```html_example

<ul class="list-group row">
    <li class="column medium-6">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
    <li class="column medium-6">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
    <li class="column medium-6">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
    <li class="column medium-6">
        <a href="">
            <time datetime="2014-0<time datetime="2014-05-27">27 May 2014</time>
            <p>200,000 New Homes a Year is an “Unachievable” Figure - Building</p>
        </a>
    </li>
</ul>


```

*/
/*doc
---
title: Extended news listing with columns
name: Extended news listing with columns
category: Lists
---

An example of how the news listings can be extended for the full news list.

```html_example

<ul class="list-group row">
    <li class="column medium-6">
        <a href="">
            <h2>Tax concerns dampen demand for prime country sales</h2>
            <time datetime="2014-10-13">13 October 2014</time>
            <p>Tax concerns dampen demand for prime country sales</p>
            <span class="cta"><i class="fa fa-caret-right"></i>Read all news</span>
        </a>
    </li>
</ul>


```

*/
ul.list-group {
  list-style: none;
  margin: 0 0 10px;
  padding: 0; }
  ul.list-group > li {
    border: solid gainsboro;
    border-width: 0 0 1px;
    padding: 1.15385rem; }
    ul.list-group > li:hover {
      background: #f9f9f9; }
  ul.list-group > li > a {
    color: #333333;
    display: block; }
    ul.list-group > li > a * {
      margin: 0; }
    ul.list-group > li > a:hover {
      color: #db0c41; }
  ul.list-group time {
    font-weight: bold; }
  ul.list-group.row {
    margin-bottom: 10px; }
  ul.list-group.list-news li {
    padding: 0; }
    ul.list-group.list-news li a {
      padding: 1.15385rem;
      display: block; }
      @media only screen and (max-width: 40em) {
        .homepage ul.list-group.list-news li a {
          padding: 1.15385rem 0; } }
      ul.list-group.list-news li a h2 {
        color: #565656;
        font-size: 1.10769rem;
        line-height: 1.3;
        padding: 0 0 0.84615rem 0;
        text-decoration: underline;
        transition: 0 ease 0.3s; }
        ul.list-group.list-news li a h2:hover {
          color: #db0c41; }
      ul.list-group.list-news li a p {
        padding: 0.84615rem 0 0 0; }
        @media only screen and (min-width: 62.001em) {
          ul.list-group.list-news li a p {
            font-size: 0.95rem; } }
      @media only screen and (min-width: 62.001em) {
        ul.list-group.list-news li a time {
          font-size: 0.94rem; } }
  ul.list-group.contacts {
    margin-bottom: 0; }
    ul.list-group.contacts li ul {
      margin: 0;
      padding: 0; }
    ul.list-group.contacts li ul li {
      list-style-type: none;
      margin-bottom: 1.53846rem;
      padding-right: 6.53846rem; }
      ul.list-group.contacts li ul li:last-child {
        margin-bottom: 0; }
      ul.list-group.contacts li ul li article.no-image {
        margin-right: -34.9794%; }
      @media only screen and (min-width: 62.001em) {
        ul.list-group.contacts li ul li article {
          font-size: 0.925rem; } }
      ul.list-group.contacts li ul li article:before:after {
        content: "";
        display: table; }
      ul.list-group.contacts li ul li article:after {
        clear: both; }
      ul.list-group.contacts li ul li img {
        float: right;
        margin-right: -5.38462rem;
        max-width: 60px; }
        @media only screen and (min-width: 62.001em) {
          ul.list-group.contacts li ul li img {
            margin-right: -6.53846rem; } }
        ul.list-group.contacts li ul li img:before:after {
          content: "";
          display: table; }
        ul.list-group.contacts li ul li img:after {
          clear: both; }
      ul.list-group.contacts li ul li h1, ul.list-group.contacts li ul li h2 {
        font: bold 14px verdana, arial; }
      ul.list-group.contacts li ul li h2 {
        margin: 0; }
      ul.list-group.contacts li ul li h1 a {
        color: #db0c41; }
      ul.list-group.contacts li ul li:hover {
        background: none; }
      ul.list-group.contacts li ul li dl dt, ul.list-group.contacts li ul li dl dd {
        float: left;
        width: 78%; }
        @media only screen and (min-width: 62.001em) {
          ul.list-group.contacts li ul li dl dt, ul.list-group.contacts li ul li dl dd {
            font-size: 0.925rem; } }
        ul.list-group.contacts li ul li dl dt span, ul.list-group.contacts li ul li dl dd span {
          text-indent: -99999px;
          display: inline-block; }
      ul.list-group.contacts li ul li dl dt {
        /* clear:both; */
        width: 1.5rem; }
  ul.list-group.key-contacts li {
    list-style-type: none;
    padding-right: 6.53846rem; }
    ul.list-group.key-contacts li article.no-image {
      margin-right: -34.9794%; }
    @media only screen and (min-width: 62.001em) {
      ul.list-group.key-contacts li article {
        font-size: 0.925rem; } }
    ul.list-group.key-contacts li article:before:after {
      content: "";
      display: table; }
    ul.list-group.key-contacts li article:after {
      clear: both; }
    ul.list-group.key-contacts li img {
      float: right;
      margin-right: -5.38462rem;
      max-width: 60px; }
      @media only screen and (min-width: 62.001em) {
        ul.list-group.key-contacts li img {
          margin-right: -6.53846rem; } }
      ul.list-group.key-contacts li img:before:after {
        content: "";
        display: table; }
      ul.list-group.key-contacts li img:after {
        clear: both; }
    ul.list-group.key-contacts li h1, ul.list-group.key-contacts li h2 {
      font: bold 14px verdana, arial; }
    ul.list-group.key-contacts li h2 {
      margin: 0; }
    ul.list-group.key-contacts li h3 a {
      color: #db0c41;
      text-decoration: none; }
    ul.list-group.key-contacts li:hover {
      background: none; }
    ul.list-group.key-contacts li dl dt, ul.list-group.key-contacts li dl dd {
      float: left;
      width: 78%; }
      @media only screen and (min-width: 62.001em) {
        ul.list-group.key-contacts li dl dt, ul.list-group.key-contacts li dl dd {
          font-size: 0.925rem; } }
      ul.list-group.key-contacts li dl dt span, ul.list-group.key-contacts li dl dd span {
        text-indent: -99999px;
        display: inline-block; }
    ul.list-group.key-contacts li dl dt {
      /* clear:both; */
      width: 1.5rem; }

.homepage-news h1 {
  color: #db0c41; }
@media only screen and (min-width: 62.001em) {
  .homepage-news ul.list-news li:nth-child(odd) a {
    padding: 0.76923rem 0.76923rem 0.76923rem 0; }
  .homepage-news ul.list-news li:nth-child(even) a {
    padding: 0.76923rem 0 0.76923rem 0.76923rem; } }
.homepage-news ul.list-news li a p {
  color: #333333;
  padding: 0; }

/*doc
---
title: CTA listing
name: CTA listing
category: Lists
---

A CTA list is an unordered list of links, styled with a class of "cta-list":

```html_example
    <ul class="cta-list row">
        <li class="column small-6"><a href="http://www.knightfrank.co.uk/contact/ascot-estate-agents/">Ascot</a>*</li>
        <li class="column small-6"><a href="http://www.knightfrank.co.uk/contact/basingstoke-estate-agents/">Basingstoke</a></li>
        <li class="column small-6"><a href="http://www.knightfrank.co.uk/contact/bath-estate-agents/">Bath</a></li>
        <li class="column small-6"><a href="http://www.knightfrank.co.uk/contact/beaconsfield-estate-agents/">Beaconsfield</a>*</li>
        <li class="column small-6"><a href="http://www.knightfrank.co.uk/contact/berkhamsted-estate-agents/">Berkhamsted</a></li>
        <li class="column small-6"><a href="/contact/oxford-estate-agents/">Oxford</a></li>
    </ul>
```

*/
.cta-list, .info-list, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) {
  list-style: none;
  margin: 0 0 20px; }
  .cta-list:before, .cta-list:after, .info-list:before, .col-1 ul:not(.slick-dots, #officeSearch, .list-news):before, .info-list:after, .col-1 ul:not(.slick-dots, #officeSearch, .list-news):after {
    content: " ";
    display: table; }
  .cta-list:after, .info-list:after, .col-1 ul:not(.slick-dots, #officeSearch, .list-news):after {
    clear: both; }
  .cta-list li, .info-list li, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li {
    padding: 5px 0 5px 15px;
    position: relative; }
    .cta-list li:before, .info-list li:before, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li:before {
      content: "\f0da";
      color: #db0c41;
      font-family: FontAwesome;
      font-size: 14px;
      display: inline-block;
      position: absolute;
      top: 5px;
      left: 0; }
    @media only screen and (min-width: 40.063em) {
      .cta-list li, .info-list li, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li {
        padding: 0 5px 0 15px; }
        .cta-list li:before, .info-list li:before, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li:before {
          top: 0; } }
    @media only screen and (max-width: 40em) {
      .cta-list li, .info-list li, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li {
        padding-right: 5px; }
        .cta-list li.small-6:nth-of-type(odd), .info-list li.small-6:nth-of-type(odd), .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li.small-6:nth-of-type(odd) {
          clear: both; } }
  .cta-list a, .info-list a, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) a {
    color: #333333; }
    .cta-list a:hover, .info-list a:hover, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) a:hover {
      color: #db0c41; }
  .cta-list ul, .info-list ul, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) ul {
    list-style: none; }
  .cta-list.row, .row .cta-list.row, .info-list.row, .col-1 ul.row:not(.slick-dots, #officeSearch, .list-news), .row .info-list.row, .row .col-1 ul.row:not(.slick-dots, #officeSearch, .list-news), .col-1 .row ul.row:not(.slick-dots, #officeSearch, .list-news) {
    margin-left: 0;
    margin-right: 0; }

/*doc
---
title: Info list
name: Info list
category: Lists
---

An info list is an unordered list, styled with a class of "info-list":

```html_example
    <ul class="info-list">
        <li>Vestibulum id ligula porta felis euismod semper.</li>
        <li>Nulla vitae elit libero, a pharetra augue.</li>
        <li>Etiam porta sem malesuada magna mollis euismod.</li>
        <li>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
    </ul>

```

*/
.info-list li:before, .col-1 ul:not(.slick-dots, #officeSearch, .list-news) li:before {
  content: "\f0c8";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  font-size: 8px;
  padding-top: 4px; }

/*doc
---
title: Nav list
name: Nav list
category: Lists
---

An info list is a list of links, styled with a class of "nav-list":

```html_example
    <ul class="nav-list">
        <li><a href="http://search.knightfrank.co.uk/property-for-sale/uk">For sale</a></li>
        <li><a href="http://search.knightfrank.co.uk/property-for-sale/uk?buyrent=buy&soldrented=true">Recently sold</a></li>
        <li><a href="http://search.knightfrank.co.uk/property-to-let/uk">To let</a></li>
        <li><a href="http://search.knightfrank.co.uk/property-to-let/uk?buyrent=rent&soldrented=true">Recently let</a></li>
        <li><a href="http://www.knightfrank.co.uk/property-auctions/default.aspx">Property auctions </a></li>
    </ul>

```

*/
.nav-list {
  list-style: none;
  margin: 0 0 20px; }
  .nav-list li:first-child {
    padding-top: 0; }
  @media only screen and (min-width: 40.063em) {
    .nav-list li {
      margin-bottom: 10px; } }
  .nav-list a {
    display: block;
    font-weight: bold; }
    @media only screen and (max-width: 40em) {
      .nav-list a {
        padding: 5px 0; }
        .tertiary-menu .nav-list a {
          background: #db0c41;
          color: #fff;
          margin-bottom: 0.38462rem;
          padding: 1.15385rem 0.38462rem;
          font-size: 1rem; } }
    @media only screen and (min-width: 40.063em) {
      .nav-list a {
        background: #db0c41;
        color: #fff;
        padding: 2px 10px; } }
    @media only screen and (min-width: 40.063em) {
      .nav-list a:hover, .nav-list a:active, .nav-list a:focus {
        background: #333;
        color: #fff; } }

[data-magellan-expedition], [data-magellan-expedition-clone] {
  background: white;
  z-index: 50;
  min-width: 100%;
  padding: 10px; }
  [data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
    margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
      margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
      line-height: 1.8em; }

figure#masthead {
  padding: 0;
  margin: 0 -1.15385rem 2.30769rem;
  position: relative;
  width: 100%; }
  figure#masthead h1, figure#masthead p {
    color: #FFFFFF;
    font-size: 36px;
    font-family: "KfDisplayReg";
    left: 27px;
    top: 49px;
    position: absolute;
    z-index: 5;
    line-height: 1em;
    text-shadow: 1px 1px 1px #000;
    text-align: left;
    width: 100%; }
    @media only screen and (min-width: 40.063em) {
      figure#masthead h1, figure#masthead p {
        font-size: 36px;
        left: 2.30769rem;
        top: 5.38462rem; } }
    @media only screen and (min-width: 40.063em) and (max-width: 62em) {
      figure#masthead h1, figure#masthead p {
        top: 20%; } }
  figure#masthead img {
    /*max-width:none;*/
    position: relative; }
  figure#masthead.variant-a h1 {
    color: #fff; }
  @media only screen and (max-width: 40em) {
    figure#masthead h1, figure#masthead p {
      color: black;
      left: 15px;
      top: 0px;
      font-size: 30px;
      display: block;
      position: relative;
      margin-bottom: 50px;
      line-height: 35px; }
    figure#masthead img {
      display: none; }
    a.back + figure#masthead {
      margin-top: 20px; } }
  @media only screen and (min-width: 40.063em) {
    figure#masthead {
      margin: 0; } }
  @media only screen and (min-width: 62.001em) {
    figure#masthead:before {
      border-left: solid 100px transparent;
      border-bottom: solid 100px transparent;
      border-top: solid 100px #fff;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10; } }
  figure#masthead + .sub-nav {
    margin-top: -2.30769rem;
    padding-top: 0; }
    @media only screen and (min-width: 40.063em) {
      figure#masthead + .sub-nav {
        margin: 0;
        position: absolute;
        bottom: 2.30769rem;
        left: 2.30769rem; } }
    @media only screen and (max-width: 40em) {
      figure#masthead + .sub-nav {
        margin-left: -1.15385rem;
        margin-right: -1.15385rem; } }

/*doc
---
title: Default title banner
name: Banner style 1 - Default title banner
category: Banners
---

There are two styles of masthead, this is the default.

```html_example
	<figure id="masthead">
	    <img alt="" src="http://placehold.it/1000x210" />
	    <h1>Title</h1>
	</figure>
```

*/
/*doc
---
title: Title Banner with white text
name: Banner style 2 - Title Banner with white text
category: Banners
---

There are two styles of masthead, this is the variation, with white text.

```html_example
	<figure id="masthead" class="variant-a">
	    <img alt="" src="http://placehold.it/1000x210" />
	    <h1>Title</h1>
	</figure>
```

*/
/*doc
---
title: Title banner with sub nav
name: Banner style 3 - Title banner with sub nav
category: Banners
---

Sometimes there is a sub nav included, which when used in conjuntion with the title banner, is positioned over the banner, at the bottom of it.

```html_example

<div class="row">
	<div class="column">
		<figure id="masthead" class="variant-a">
		    <img alt="residential property" src="http://placehold.it/1000x210" />
		    <h1>The Buying Solution</h1>
		</figure>
		<ul class="sub-nav">
		    <li><a href="" title="">Find property to buy</a></li>
		    <li><a href="" title="">Financing your property</a></li>
		    <li class="active"><a href="" title="">Our buying services</a></li>
		    <li><a href="" title="">Russian, Chinese and Indian desks</a>
		        <ul>
		            <li><a href="/residential/buying/international-buyers/india/" title="">South Asia Desk</a></li>
		            <li><a href="/residential/buying/international-buyers/chinese-property-investors/" title="">China Desk</a></li>
		            <li><a href="/residential/buying/international-buyers/china/" title="">中国业务部</a></li>
		            <li><a href="/residential/buying/international-buyers/russia-investors/" title="">Russian Desk</a></li>
		            <li><a href="/residential/buying/international-buyers/russia/" title="">Русский отдел</a></li>
		        </ul>
		    </li>
		</ul>
	</div>
</div>

```

*/
ul.pagination {
  display: block;
  height: 1.84615rem;
  margin: 20px 0 0; }
  @media only screen and (min-width: 40.063em) {
    ul.pagination {
      float: right;
      margin-top: 0; } }
  ul.pagination li {
    color: #222222;
    font-size: 1rem; }
    ul.pagination li a {
      display: block;
      padding: 0.53846rem 1.07692rem 0.53846rem;
      color: #333333; }
      ul.pagination li a i.fa {
        padding: 0 5px; }
    ul.pagination li:hover a,
    ul.pagination li a:focus {
      color: #db0c41; }
    ul.pagination li.unavailable a {
      cursor: default;
      color: #999999; }
    ul.pagination li.current a {
      color: #db0c41;
      font-weight: bold;
      cursor: default; }
      ul.pagination li.current a:hover, ul.pagination li.current a:focus {
        color: #565656; }
  ul.pagination li {
    float: left;
    display: block; }

/* Pagination centred wrapper */
.pagination-centered {
  background: #f9f9f9;
  padding: 14px 0; }
  .row .pagination-centered {
    margin: 0 0 15px; }
  .pagination-centered ul.pagination {
    text-align: right; }
    .pagination-centered ul.pagination li {
      float: none;
      display: inline-block; }

/*doc
---
title: Property panel
name: Property panel
category: Property pages
---

The property listing page uses the panel style for each property. These are nested within divs with the relevant columns layout required. In the example below we have used 4 columns at the largest size, to show the component at a similar size as used on the page.

```html_example

<div class="column medium-6 large-4">
	<article class="panel">
		<a href="">
		    <header>
		        <h1>Charters, Charters Road, Sunninghill, Ascot, Berkshire, SL5</h1>
		        <h2>United Kingdom</h2>
		    </header>
		    <img sizes="(min-width: 40em) 640vw, 240vw"
		         srcset="../../Assets/System/Images/charters-sm.jpg 240w, Assets/System/Images/charters-lg.jpg 640w" src="../../Assets/System/Images/charters-lg.jpg" alt=" charters, charters road, sunninghill, ascot, berkshire, sl5" />
		    <dl class="price">
		        <dt>Guide Price</dt>
		        <dd>£6,500,000</dd>
		    </dl>
		    <dl class="amenities">
		        <dt>Bedrooms</dt>
		        <dd>4</dd>
		        <dt>Bathrooms</dt>
		        <dd>4</dd>
		    </dl>
		</a>
	</article>
</div>

```

*/
/* Panels */
.panel {
  padding: 15px 0;
  background: white; }
  @media only screen and (max-width: 40em) {
    .panel {
      padding-left: 1.15385rem;
      padding-right: 1.15385rem;
      margin-left: -1.15385rem;
      margin-right: -1.15385rem; } }
  .panel > :first-child {
    margin-top: 0; }
  .panel > :last-child {
    margin-bottom: 0; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #333333; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    line-height: 1;
    margin-bottom: 0.76923rem; }
    .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
      line-height: 1.4; }
  .panel.callout {
    padding: 15px 0;
    background: #feeff3; }
    @media only screen and (max-width: 40em) {
      .panel.callout {
        padding-left: 1.15385rem;
        padding-right: 1.15385rem;
        margin-left: -1.15385rem;
        margin-right: -1.15385rem; } }
    .panel.callout > :first-child {
      margin-top: 0; }
    .panel.callout > :last-child {
      margin-bottom: 0; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p {
      color: #333333; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
      line-height: 1;
      margin-bottom: 0.76923rem; }
      .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
        line-height: 1.4; }
    .panel.callout a:not(.button) {
      color: #db0c41; }
  .panel.radius {
    border-radius: 3px; }
  hr + .column > .panel:first-child {
    border: 0;
    padding-top: 0; }

article.panel {
  border-width: 1px;
  border-color: gainsboro;
  border-style: solid;
  font-size: 11px;
  padding: 6px;
  position: relative;
  margin-bottom: 2.30769rem;
  margin-left: 0;
  margin-right: 0;
  background: #f9f9f9;
  overflow: hidden; }
  article.panel:hover {
    background: linear-gradient(to bottom, #ededed 0%, #f9f9f9 100%); }
  @media only screen and (max-width: 40em) {
    article.panel {
      margin-bottom: 1.53846rem; } }
  article.panel a {
    color: #333333; }
  article.panel header {
    height: 55px; }
  article.panel h1, article.panel h2 {
    font: 11px/14px verdana, arial; }
  article.panel h1, article.panel h2 {
    font-weight: bold;
    margin-bottom: 3px; }
  article.panel dl {
    clear: both;
    font-size: 11px;
    margin-bottom: 6px; }
    article.panel dl:before, article.panel dl:after {
      content: " ";
      display: table; }
    article.panel dl:after {
      clear: both; }
    article.panel dl dt, article.panel dl dd {
      float: left;
      font-weight: normal;
      margin-bottom: 0; }
    article.panel dl.price dd {
      float: right; }
      article.panel dl.price dd:nth-of-type(2), article.panel dl.price dd:nth-of-type(3), article.panel dl.price dd:nth-of-type(4) {
        color: #db0c41;
        clear: both;
        font-style: italic; }
    article.panel dl.amenities dt {
      background: url(../images/bedrooms-icon.png) no-repeat;
      height: 24px;
      text-indent: -99999px;
      width: 28px; }
      article.panel dl.amenities dt.bathDetails {
        background-image: url(../images/bathrooms-icon.png); }
      article.panel dl.amenities dt.pawDetails {
        background-image: url(../Images/pets-icon.png); }
      article.panel dl.amenities dt.parkingDetails {
        background-image: url(../Images/parking-icon.png); }
    article.panel dl.amenities dd {
      padding: 0 15px 0 10px;
      line-height: 28px; }
  article.panel span.info {
    display: block;
    text-align: right; }
  article.panel span.offer {
    top: 70px;
    left: 0;
    right: 0; }
  article.panel img {
    left: -1px;
    margin: 0 -5.9701% 7px;
    max-width: 1000px;
    position: relative;
    width: 113.131313%; }

/* Pricing Tables */
.pricing-table {
  border: solid 1px #dddddd;
  margin-left: 0;
  margin-bottom: 1.53846rem; }
  .pricing-table * {
    list-style: none;
    line-height: 1; }
  .pricing-table .title {
    background-color: #333333;
    padding: 1.15385rem 1.53846rem;
    text-align: center;
    color: #eeeeee;
    font-weight: normal;
    font-size: 1.23077rem;
    font-family: verdana, arial; }
  .pricing-table .price {
    background-color: #f6f6f6;
    padding: 1.15385rem 1.53846rem;
    text-align: center;
    color: #333333;
    font-weight: normal;
    font-size: 2.46154rem;
    font-family: verdana, arial; }
  .pricing-table .description {
    background-color: white;
    padding: 1.15385rem;
    text-align: center;
    color: #777777;
    font-size: 0.92308rem;
    font-weight: normal;
    line-height: 1.4;
    border-bottom: dotted 1px #dddddd; }
  .pricing-table .bullet-item {
    background-color: white;
    padding: 1.15385rem;
    text-align: center;
    color: #333333;
    font-size: 1.07692rem;
    font-weight: normal;
    border-bottom: dotted 1px #dddddd; }
  .pricing-table .cta-button {
    background-color: white;
    text-align: center;
    padding: 1.53846rem 1.53846rem 0; }

/* Progress Bar */
.progress {
  background-color: #f6f6f6;
  height: 1.92308rem;
  border: 1px solid white;
  padding: 0.15385rem;
  margin-bottom: 0.76923rem; }
  .progress .meter {
    background: #db0c41;
    height: 100%;
    display: block; }
  .progress.secondary .meter {
    background: gainsboro;
    height: 100%;
    display: block; }
  .progress.success .meter {
    background: #43ac6a;
    height: 100%;
    display: block; }
  .progress.alert .meter {
    background: #f04124;
    height: 100%;
    display: block; }
  .progress.radius {
    border-radius: 3px; }
    .progress.radius .meter {
      border-radius: 2px; }
  .progress.round {
    border-radius: 1000px; }
    .progress.round .meter {
      border-radius: 999px; }

.range-slider {
  display: block;
  position: relative;
  width: 100%;
  height: 1.23077rem;
  border: 1px solid #dddddd;
  margin: 1.53846rem 0;
  -ms-touch-action: none;
  touch-action: none;
  background: #fafafa; }
  .range-slider.vertical-range {
    display: block;
    position: relative;
    width: 100%;
    height: 1.23077rem;
    border: 1px solid #dddddd;
    margin: 1.53846rem 0;
    -ms-touch-action: none;
    touch-action: none;
    display: inline-block;
    width: 1.23077rem;
    height: 15.38462rem; }
    .range-slider.vertical-range .range-slider-handle {
      margin-top: 0;
      margin-left: -0.61538rem;
      position: absolute;
      bottom: -12.92308rem; }
    .range-slider.vertical-range .range-slider-active-segment {
      width: 1.07692rem;
      height: auto;
      bottom: 0; }
  .range-slider.radius {
    background: #fafafa;
    border-radius: 3px; }
    .range-slider.radius .range-slider-handle {
      background: #db0c41;
      border-radius: 3px; }
      .range-slider.radius .range-slider-handle:hover {
        background: #c10b39; }
  .range-slider.round {
    background: #fafafa;
    border-radius: 1000px; }
    .range-slider.round .range-slider-handle {
      background: #db0c41;
      border-radius: 1000px; }
      .range-slider.round .range-slider-handle:hover {
        background: #c10b39; }

.range-slider-active-segment {
  display: inline-block;
  position: absolute;
  height: 1.07692rem;
  background: #dadada; }

.range-slider-handle {
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: -0.38462rem;
  width: 2.46154rem;
  height: 1.69231rem;
  border: 1px solid none;
  cursor: pointer;
  background: #db0c41; }
  .range-slider-handle:hover {
    background: #c10b39; }

.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: black;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99;
  display: none;
  top: 0;
  left: 0; }

dialog, .reveal-modal {
  visibility: hidden;
  display: none;
  position: absolute;
  z-index: 100;
  width: 100vw;
  top: 0;
  left: 0;
  background-color: white;
  padding: 1.53846rem;
  border: solid 1px #666666;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
  @media only screen and (max-width: 40em) {
    dialog, .reveal-modal {
      min-height: 100vh; } }
  @media only screen and (min-width: 40.063em) {
    dialog, .reveal-modal {
      left: 50%; } }
  dialog .column,
  dialog .columns, .reveal-modal .column,
  .reveal-modal .columns {
    min-width: 0; }
  dialog > :first-child, .reveal-modal > :first-child {
    margin-top: 0; }
  dialog > :last-child, .reveal-modal > :last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 40.063em) {
    dialog, .reveal-modal {
      margin-left: -40%;
      width: 80%; } }
  @media only screen and (min-width: 40.063em) {
    dialog, .reveal-modal {
      top: 7.69231rem; } }
  dialog .close-reveal-modal, .reveal-modal .close-reveal-modal {
    font-size: 3.07692rem;
    line-height: 1;
    position: absolute;
    top: 0.61538rem;
    right: 0.84615rem;
    color: #aaaaaa;
    font-weight: bold;
    cursor: pointer; }

dialog[open] {
  display: block;
  visibility: visible; }

@media only screen and (min-width: 40.063em) {
  dialog, .reveal-modal {
    padding: 2.30769rem; }
    dialog.radius, .reveal-modal.radius {
      border-radius: 3px; }
    dialog.round, .reveal-modal.round {
      border-radius: 1000px; }
    dialog.collapse, .reveal-modal.collapse {
      padding: 0; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.tiny, .reveal-modal.tiny {
      margin-left: -15%;
      width: 30%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.small, .reveal-modal.small {
      margin-left: -20%;
      width: 40%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.medium, .reveal-modal.medium {
      margin-left: -30%;
      width: 60%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.large, .reveal-modal.large {
      margin-left: -35%;
      width: 70%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.xlarge, .reveal-modal.xlarge {
      margin-left: -47.5%;
      width: 95%; } }

@media only screen and (min-width: 40.063em) {
  dialog.full, .reveal-modal.full {
    top: 0;
    left: 0;
    height: 100vh;
    min-height: 100vh;
    margin-left: 0 !important; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.full, .reveal-modal.full {
      margin-left: -50vw;
      width: 100vw; } }

@media print {
  dialog, .reveal-modal {
    background: #fff !important; } }
.side-nav {
  display: block;
  margin: 0;
  list-style-type: none;
  list-style-position: inside;
  font-family: verdana, arial; }
  .side-nav li {
    font-size: 1.15385rem;
    padding: 1.15385rem 0; }
    .side-nav li a:not(.button) {
      /*display: block;*/
      color: #fff;
      padding: 0 0 1rem; }
      .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
        color: white; }
      @media only screen and (min-width: 40.063em) {
        .side-nav li a:not(.button) {
          padding: 0; } }
    .side-nav li.active > a:first-child:not(.button) {
      color: #b8b8b8;
      font-weight: normal;
      font-family: verdana, arial; }
    .side-nav li.divider {
      border-top: 1px solid;
      height: 0;
      padding: 0;
      list-style: none;
      border-top-color: white; }
    @media only screen and (min-width: 40.063em) {
      .side-nav li {
        font-size: 0.92308rem; } }
  .side-nav h3 {
    font-size: 1.23077rem; }
    @media only screen and (min-width: 40.063em) {
      .side-nav h3 {
        font-size: 1rem; } }
  .side-nav ul {
    list-style-type: none;
    list-style-position: inside;
    margin: 0; }
    .side-nav ul li {
      padding: 0; }
      .side-nav ul li a:not(.button) {
        color: #999999; }

/*doc
---
title: Buttons
name: button
category: Basics
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

  <a class="button">This is a link styled as a button</a>
  
  <button class="button">This is a button</button>

```

*/
.split.button {
  position: relative;
  padding-right: 6.23077rem; }
  .split.button span {
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-left: solid 1px; }
    .split.button span:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      display: block;
      border-style: inset;
      top: 50%;
      left: 50%; }
    .split.button span:active {
      background-color: rgba(0, 0, 0, 0.1); }
  .split.button span {
    border-left-color: rgba(255, 255, 255, 0.5); }
  .split.button span {
    width: 3.80769rem; }
    .split.button span:before {
      border-top-style: solid;
      border-width: 0.46154rem;
      top: 48%;
      margin-left: -0.46154rem; }
  .split.button span:before {
    border-color: white transparent transparent transparent; }
  .split.button.secondary span {
    border-left-color: rgba(255, 255, 255, 0.5); }
  .split.button.secondary span:before {
    border-color: white transparent transparent transparent; }
  .split.button.alert span {
    border-left-color: rgba(255, 255, 255, 0.5); }
  .split.button.success span {
    border-left-color: rgba(255, 255, 255, 0.5); }
  .split.button.tiny {
    padding-right: 4.61538rem; }
    .split.button.tiny span {
      width: 2.76923rem; }
      .split.button.tiny span:before {
        border-top-style: solid;
        border-width: 0.46154rem;
        top: 48%;
        margin-left: -0.46154rem; }
  .split.button.small {
    padding-right: 5.38462rem; }
    .split.button.small span {
      width: 3.23077rem; }
      .split.button.small span:before {
        border-top-style: solid;
        border-width: 0.53846rem;
        top: 48%;
        margin-left: -0.46154rem; }
  .split.button.large {
    padding-right: 6.76923rem; }
    .split.button.large span {
      width: 4.23077rem; }
      .split.button.large span:before {
        border-top-style: solid;
        border-width: 0.38462rem;
        top: 48%;
        margin-left: -0.46154rem; }
  .split.button.expand {
    padding-left: 2rem; }
  .split.button.secondary span:before {
    border-color: #333333 transparent transparent transparent; }
  .split.button.radius span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }
  .split.button.round span {
    border-bottom-right-radius: 1000px;
    border-top-right-radius: 1000px; }

/*doc
---
title: Sub Nav
name: Sub Nav
category: Navigation
---

```html_example

<ul class="sub-nav clearfix">
    <li><a href="" title="">Find property to buy</a></li>
    <li><a href="" title="">Financing your property</a></li>
    <li class="active"><a href="" title="">Our buying services</a></li>
    <li><a href="" title="">Russian, Chinese and Indian desks</a>
        <ul>
            <li><a href="/residential/buying/international-buyers/india/" title="">South Asia Desk</a></li>
            <li><a href="/residential/buying/international-buyers/chinese-property-investors/" title="">China Desk</a></li>
            <li><a href="/residential/buying/international-buyers/china/" title="">õ©¡Õø¢õ©ÜÕèíÚâ¿</a></li>
            <li><a href="/residential/buying/international-buyers/russia-investors/" title="">Russian Desk</a></li>
            <li><a href="/residential/buying/international-buyers/russia/" title="">ðáÐâÐüÐüð║ð©ð╣ ð¥Ðéð┤ðÁð╗</a></li>
        </ul>
    </li>
</ul>

```

*/
.sub-nav {
  display: block;
  width: auto;
  margin: -0.30769rem 0 1.38462rem;
  padding-top: 0.30769rem; }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .sub-nav {
      border-top: 1px solid #262626; } }
  @media only screen and (max-width: 40em) {
    .sub-nav {
      margin: 0;
      padding: 0; } }
  .sub-nav dt {
    text-transform: uppercase; }
  .sub-nav dt,
  .sub-nav dd,
  .sub-nav li {
    font-family: verdana, arial;
    font-weight: normal;
    font-size: 1.23077rem;
    float: left;
    display: inline;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 2px; }
    @media only screen and (max-width: 40em) {
      .sub-nav dt,
      .sub-nav dd,
      .sub-nav li {
        min-width: 100%; }
        .sub-nav dt > a:first-child,
        .sub-nav dd > a:first-child,
        .sub-nav li > a:first-child {
          border-top: none;
          padding-right: 7.5rem; } }
    .sub-nav dt:hover ul, .sub-nav dt.active ul,
    .sub-nav dd:hover ul,
    .sub-nav dd.active ul,
    .sub-nav li:hover ul,
    .sub-nav li.active ul {
      display: block; }
    .sub-nav dt a,
    .sub-nav dd a,
    .sub-nav li a {
      background: #aeaeae;
      border-left: 5px solid #565656;
      border-top: 1px solid #ccc;
      display: block;
      text-decoration: none;
      color: #515151 !important;
      padding: 1.15385rem; }
      @media only screen and (min-width: 40.063em) {
        .sub-nav dt a,
        .sub-nav dd a,
        .sub-nav li a {
          background: rgba(0, 0, 0, 0.6);
          border: none;
          color: #fff !important; } }
    .sub-nav dt a:hover, .sub-nav dt.active a,
    .sub-nav dd a:hover,
    .sub-nav dd.active a,
    .sub-nav li a:hover,
    .sub-nav li.active a {
      background: #ccc;
      color: #333;
      border-left: 5px solid #db0c41;
      border-top: none; }
      @media only screen and (min-width: 40.063em) {
        .sub-nav dt a:hover, .sub-nav dt.active a,
        .sub-nav dd a:hover,
        .sub-nav dd.active a,
        .sub-nav li a:hover,
        .sub-nav li.active a {
          background: #fff;
          border: none;
          color: #333 !important; } }
    @media only screen and (min-width: 62.001em) {
      .sub-nav dt a:hover,
      .sub-nav dd a:hover,
      .sub-nav li a:hover {
        background: gainsboro; } }
    .sub-nav dt ul,
    .sub-nav dd ul,
    .sub-nav li ul {
      margin: 0;
      display: none; }
      .sub-nav dt ul a,
      .sub-nav dd ul a,
      .sub-nav li ul a {
        background: #565656;
        font-size: 1rem;
        padding: 0.57692rem 1.15385rem; }
      @media only screen and (min-width: 40.063em) {
        .sub-nav dt ul,
        .sub-nav dd ul,
        .sub-nav li ul {
          position: absolute;
          display: none;
          top: 100%;
          left: 0;
          right: 0;
          padding: 5px 0;
          background: white; }
          .sub-nav dt ul a, .sub-nav dt ul a:hover,
          .sub-nav dd ul a,
          .sub-nav dd ul a:hover,
          .sub-nav li ul a,
          .sub-nav li ul a:hover {
            background: none;
            border-right: solid 1px #333333;
            color: #333333;
            padding: 0 10px; }
          .sub-nav dt ul li:last-child a,
          .sub-nav dd ul li:last-child a,
          .sub-nav li ul li:last-child a {
            border: none; } }

div.switch {
  position: relative;
  padding: 0;
  display: block;
  overflow: hidden;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 1.53846rem;
  height: 2.76923rem;
  background: white;
  border-color: #cccccc; }
  div.switch label {
    position: relative;
    left: 0;
    z-index: 2;
    float: left;
    width: 50%;
    height: 100%;
    margin: 0;
    font-weight: bold;
    text-align: left;
    transition: all 0.1s ease-out; }
  div.switch input {
    position: absolute;
    z-index: 3;
    opacity: 0;
    width: 100%;
    height: 100%;
    -moz-appearance: none; }
    div.switch input:hover, div.switch input:focus {
      cursor: pointer; }
  div.switch span:last-child {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
    display: block;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    transition: all 0.1s ease-out; }
  div.switch input:not(:checked) + label {
    opacity: 0; }
  div.switch input:checked {
    display: none !important; }
  div.switch input {
    left: 0;
    display: block !important; }
  div.switch input:first-of-type + label,
  div.switch input:first-of-type + span + label {
    left: -50%; }
  div.switch input:first-of-type:checked + label,
  div.switch input:first-of-type:checked + span + label {
    left: 0%; }
  div.switch input:last-of-type + label,
  div.switch input:last-of-type + span + label {
    right: -50%;
    left: auto;
    text-align: right; }
  div.switch input:last-of-type:checked + label,
  div.switch input:last-of-type:checked + span + label {
    right: 0%;
    left: auto; }
  div.switch span.custom {
    display: none !important; }
  form.custom div.switch .hidden-field {
    margin-left: auto;
    position: absolute;
    visibility: visible; }
  div.switch label {
    padding: 0;
    line-height: 2.3rem;
    font-size: 1.07692rem; }
  div.switch input:first-of-type:checked ~ span:last-child {
    left: 100%;
    margin-left: -2.69231rem; }
  div.switch span:last-child {
    width: 2.76923rem;
    height: 2.76923rem; }
  div.switch span:last-child {
    border-color: #b3b3b3;
    background: white;
    background: linear-gradient(to bottom, white 0%, #f2f2f2 100%);
    box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.07), 1000px 0 0 980px #f3faf6, -2px 0 10px 0 rgba(0, 0, 0, 0.07), -1000px 0 0 1000px whitesmoke; }
  div.switch:hover span:last-child, div.switch:focus span:last-child {
    background: white;
    background: linear-gradient(to bottom, white 0%, #e6e6e6 100%); }
  div.switch:active {
    background: transparent; }
  div.switch.large {
    height: 3.38462rem; }
    div.switch.large label {
      padding: 0;
      line-height: 2.3rem;
      font-size: 1.30769rem; }
    div.switch.large input:first-of-type:checked ~ span:last-child {
      left: 100%;
      margin-left: -3.30769rem; }
    div.switch.large span:last-child {
      width: 3.38462rem;
      height: 3.38462rem; }
  div.switch.small {
    height: 2.15385rem; }
    div.switch.small label {
      padding: 0;
      line-height: 2.1rem;
      font-size: 0.92308rem; }
    div.switch.small input:first-of-type:checked ~ span:last-child {
      left: 100%;
      margin-left: -2.07692rem; }
    div.switch.small span:last-child {
      width: 2.15385rem;
      height: 2.15385rem; }
  div.switch.tiny {
    height: 1.69231rem; }
    div.switch.tiny label {
      padding: 0;
      line-height: 1.9rem;
      font-size: 0.84615rem; }
    div.switch.tiny input:first-of-type:checked ~ span:last-child {
      left: 100%;
      margin-left: -1.61538rem; }
    div.switch.tiny span:last-child {
      width: 1.69231rem;
      height: 1.69231rem; }
  div.switch.radius {
    border-radius: 4px; }
    div.switch.radius span:last-child {
      border-radius: 3px; }
  div.switch.round {
    border-radius: 1000px; }
    div.switch.round span:last-child {
      border-radius: 999px; }
    div.switch.round label {
      padding: 0 0.69231rem; }

table {
  background: white;
  margin-bottom: 1.53846rem;
  border: solid 1px #dddddd; }
  table thead,
  table tfoot {
    background: whitesmoke; }
    table thead tr th,
    table thead tr td,
    table tfoot tr th,
    table tfoot tr td {
      padding: 0.61538rem 0.76923rem 0.76923rem;
      font-size: 1.07692rem;
      font-weight: bold;
      color: #222222;
      text-align: left; }
  table tr th,
  table tr td {
    padding: 0.69231rem 0.76923rem;
    font-size: 1.07692rem;
    color: #222222; }
  table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: #f9f9f9; }
  table thead tr th,
  table tfoot tr th,
  table tbody tr td,
  table tr td,
  table tfoot tr td {
    display: table-cell;
    line-height: 1.38462rem; }

.table--full-width {
  width: 100%; }

.table--grid {
  table-layout: fixed; }

.officeResaultsHeader th {
  background-color: #77787B;
  color: white !important; }

/*doc
---
title: Base typography - Headings
name: Base typography - Headings
category: Basics
---

```html_example

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h2>Heading level 3</h2>

```

*/
/*doc
---
title: Base typography - Paragraphs
name: Base typography - Paragraphs
category: Basics
---

```html_example

<p>Paragraph text. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>

<p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.</p>

```

*/
/*doc
---
title: Base typography - Unordered List
name: Base typography - Unordered List
category: Basics
---

```html_example

<ul>
  <li>Vestibulum id ligula porta felis euismod semper.</li>
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Etiam porta sem malesuada magna mollis euismod.</li>
  <li>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
</ul>

```

*/
/*doc
---
title: Base typography - Ordered List
name: Base typography - Ordered List
category: Basics
---

```html_example

<ol>
  <li>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</li>
  <li>Donec sed odio dui.</li>
  <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
  <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</li>
</ol>

```

*/
/*doc
---
title: CTA link
name: CTA link
category: Basics
---



```html_example

<a class="cta" href="#"><i class="fa fa-caret-right"></i>Read all news</a>

```

*/
/*doc
---
title: CTA link - Back
name: CTA link - Back
category: Basics
---



```html_example

<a class="cta back" href=""><i class="fa fa-caret-left"></i>Back to property listings</a>

```

*/
/*doc
---
title: Linked image
name: Linked image
category: Basics
---



```html_example

<a class="link-image" href="">
    <img src="../../Assets/System/Images/mortgage-banner.jpg">
</a>

```

*/
/*doc
---
title: RSS link
name: RSS link
category: Basics
---

```html_example

<a href="http://search.knightfrank.co.uk/feeds/feedhandler.ashx?buyrent=buy&amp;locale=en&amp;locids=1978&amp;format=rss" title="Save as RSS feed" class="cta">
  <i class="fa fa-rss"></i>Save as RSS feed
</a>
```

*/
/*doc
---
title: Time
name: Time
category: Basics
---

```html_example

<time datetime="2014-10-13">13 October 2014</time>

```

*/
.text-left {
  text-align: left !important; }

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

.text-center {
  text-align: center !important; }

.text-justify {
  text-align: justify !important; }

@media only screen and (max-width: 40em) {
  .small-only-text-left {
    text-align: left !important; }

  .small-only-text-right {
    text-align: right !important; }

  .small-only-text-center {
    text-align: center !important; }

  .small-only-text-justify {
    text-align: justify !important; } }
@media only screen {
  .small-text-left {
    text-align: left !important; }

  .small-text-right {
    text-align: right !important; }

  .small-text-center {
    text-align: center !important; }

  .small-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 40.063em) and (max-width: 62em) {
  .medium-only-text-left {
    text-align: left !important; }

  .medium-only-text-right {
    text-align: right !important; }

  .medium-only-text-center {
    text-align: center !important; }

  .medium-only-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 40.063em) {
  .medium-text-left {
    text-align: left !important; }

  .medium-text-right {
    text-align: right !important; }

  .medium-text-center {
    text-align: center !important; }

  .medium-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 62.001em) and (max-width: 90em) {
  .large-only-text-left {
    text-align: left !important; }

  .large-only-text-right {
    text-align: right !important; }

  .large-only-text-center {
    text-align: center !important; }

  .large-only-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 62.001em) {
  .large-text-left {
    text-align: left !important; }

  .large-text-right {
    text-align: right !important; }

  .large-text-center {
    text-align: center !important; }

  .large-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  .xlarge-only-text-left {
    text-align: left !important; }

  .xlarge-only-text-right {
    text-align: right !important; }

  .xlarge-only-text-center {
    text-align: center !important; }

  .xlarge-only-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 90.063em) {
  .xlarge-text-left {
    text-align: left !important; }

  .xlarge-text-right {
    text-align: right !important; }

  .xlarge-text-center {
    text-align: center !important; }

  .xlarge-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 120.063em) and (max-width: 99999999em) {
  .xxlarge-only-text-left {
    text-align: left !important; }

  .xxlarge-only-text-right {
    text-align: right !important; }

  .xxlarge-only-text-center {
    text-align: center !important; }

  .xxlarge-only-text-justify {
    text-align: justify !important; } }
@media only screen and (min-width: 120.063em) {
  .xxlarge-text-left {
    text-align: left !important; }

  .xxlarge-text-right {
    text-align: right !important; }

  .xxlarge-text-center {
    text-align: center !important; }

  .xxlarge-text-justify {
    text-align: justify !important; } }
/* Typography resets */
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

/* Default Link Styles */
a {
  color: #db0c41;
  text-decoration: none;
  line-height: inherit;
  transition: all 0.3s ease; }
  a:hover, a:focus {
    color: #333333; }
  a img {
    border: none; }
  a.cta {
    color: #333333;
    display: inline-block;
    font-weight: bold;
    padding: 5px 0; }
    a.cta i {
      color: #db0c41;
      font-size: 14px;
      padding-right: 5px; }
    a.cta:hover, a.cta:focus {
      color: #db0c41; }

/* Default Link Styles */
span ul li a {
  color: #565656;
  outline-style: none;
  text-decoration: underline; }

span ul li {
  padding: 2px 0 2px 0px; }

.large-2 ul {
  list-style-type: none;
  margin: 0 !important; }

.large-2 li a {
  background-color: #DB0C41;
  color: #FFFFFF;
  display: block;
  padding: 3px 9px 3px 9px;
  text-decoration: none;
  font-weight: bold; }

.large-2 ul.grey li a {
  background-color: #77787B !important; }

/*Main Content Link Styles*/
/* Default paragraph styles */
p {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.53846rem;
  text-rendering: optimizeLegibility; }
  p.lead {
    font-size: 1.26923rem;
    line-height: 1.6; }
  p aside {
    font-size: 1.07692rem;
    line-height: 1.35;
    font-style: italic; }

/* Default header styles */
h1, h2, h3, h4, h5, h6 {
  font-family: Verdana,Geneva,sans-serif;
  font-weight: bold;
  font-style: normal;
  color: #222222;
  text-rendering: optimizeLegibility;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4; }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 60%;
    color: #6f6f6f;
    line-height: 0; }

h4, h5, h6 {
  font-family: verdana, arial; }

.row h6 {
  color: #db0c41; }

h3 > a {
  color: #565656;
  outline-style: none;
  text-decoration: underline; }

.subheader {
  line-height: 1.4;
  color: #6f6f6f;
  font-weight: normal;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem; }

hr {
  border: solid gainsboro;
  border-width: 3px 0 0;
  clear: both;
  margin: 1.53846rem 0 1.30769rem;
  height: 0; }
  @media only screen and (min-width: 40.063em) {
    .row > hr {
      margin-left: 1.15385rem;
      margin-right: 1.15385rem; } }
  @media only screen and (max-width: 40em) {
    hr {
      border-width: 0;
      margin: 1.15385rem 0; }
      hr.show-for-small, hr.show-for-small-up {
        border-width: 1px 1px 0;
        margin-left: -1.15385rem;
        margin-right: -1.15385rem; } }
  hr.alternative {
    border-color: #db0c41;
    margin: 0; }
  .column > hr:first-child {
    margin-top: 0; }

/* Helpful Typography Defaults */
em,
i {
  font-style: italic;
  line-height: inherit; }

strong,
b {
  font-weight: bold;
  line-height: inherit; }

small {
  font-size: 60%;
  line-height: inherit; }

code {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: bold;
  color: #bd260d; }

/* Lists */
ul,
ol,
dl {
  font-size: 1rem;
  line-height: 1.6;
  list-style-position: outside;
  font-family: inherit; }

ul {
  margin-left: 1.1rem;
  margin-bottom: 1.1rem; }
  ul.no-bullet {
    margin-left: 0; }
    ul.no-bullet li ul,
    ul.no-bullet li ol {
      margin-left: 1.53846rem;
      margin-bottom: 0;
      list-style: none; }

/* Unordered Lists */
ul li ul,
ul li ol {
  margin-left: 1.53846rem;
  margin-bottom: 0; }
ul.square li ul, ul.circle li ul, ul.disc li ul {
  list-style: inherit; }
ul.square {
  list-style-type: square;
  margin-left: 1.1rem; }
ul.circle {
  list-style-type: circle;
  margin-left: 1.1rem; }
ul.disc {
  list-style-type: disc;
  margin-left: 1.1rem; }
ul.no-bullet {
  list-style: none; }

/* Ordered Lists */
ol {
  margin-left: 1.4rem; }
  ol li ul,
  ol li ol {
    margin-left: 1.53846rem;
    margin-bottom: 0; }

/* Definition Lists */
dl dt {
  margin-bottom: 0.3rem; }
  dl dt a i.fa {
    margin-left: 0.38462rem; }
    @media only screen and (max-width: 40em) {
      dl dt a i.fa {
        display: none; } }
  dl dt a span {
    color: #333333;
    padding: 0 5px; }

/* Abbreviations */
abbr,
acronym {
  text-transform: uppercase;
  font-size: 90%;
  color: #333333;
  border-bottom: 1px dotted #dddddd;
  cursor: help; }

abbr {
  text-transform: none; }

/* Blockquotes */
blockquote {
  margin: 0 0 1.53846rem;
  padding: 0.69231rem 1.53846rem 0 1.46154rem;
  border-left: 1px solid #dddddd; }
  blockquote cite {
    display: block;
    font-size: 1rem;
    color: #555555; }
    blockquote cite:before {
      content: "\2014 \0020"; }
    blockquote cite a,
    blockquote cite a:visited {
      color: #555555; }

blockquote,
blockquote p {
  line-height: 1.6;
  color: #6f6f6f; }

/* Microformats */
.vcard {
  display: inline-block;
  margin: 0 0 1.53846rem 0;
  border: 1px solid #dddddd;
  padding: 0.76923rem 0.92308rem; }
  .vcard li {
    margin: 0;
    display: block; }
  .vcard .fn {
    font-weight: bold;
    font-size: 1.15385rem; }

.vevent .summary {
  font-weight: bold; }
.vevent abbr {
  cursor: default;
  text-decoration: none;
  font-weight: bold;
  border: none;
  padding: 0 0.07692rem; }

h1 {
  font-size: 1.4em; }

h2 {
  font-size: 1.33077rem; }

h3 {
  font-size: 1.17692rem; }

h4 {
  font-size: 14px; }

h5 {
  font-size: 14px; }

h6 {
  font-size: 14px; }

@media only screen and (min-width: 40.063em) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.4; }

  h1 {
    font-size: 1.35em; }

  h2 {
    font-size: 1.23077rem; }

  h3 {
    font-size: 1.07692rem; }

  h4 {
    font-size: 13px; }

  h5 {
    font-size: 13px; }

  h6 {
    font-size: 13px; } }
			/*
       * Print styles.
       *
       * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
       * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
      */
.print-only {
  display: none !important; }

@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group;
    /* h5bp.com/t */ }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; }

  .hide-on-print {
    display: none !important; }

  .print-only {
    display: block !important; }

  .hide-for-print {
    display: none !important; }

  .show-for-print {
    display: inherit !important; } }
.heading--blocked {
  	/*background:transparentize($black, 0.3);
    color: white;
    padding: $half-spacing-unit;
    margin-bottom: $base-spacing-unit;
  
    .ie8 & { background-color: $color-brand-grey-dark};*/
  display: block;
  padding: 0 0 5px 5px;
  background: #c6c6c6; }

#divProgress {
  margin: 10px;
  text-align: center; }

div#keyMatch {
  border-top: 1px dotted #6A6A6A;
  border-bottom: 1px dotted #6A6A6A; }

.siteSearchHeader {
  height: 42px;
  overflow: hidden; }

.clear, h1, h2, p {
  display: block;
  clear: both; }

.tabs {
  margin-bottom: 0;
  margin-left: 0; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd, .tabs .tab-title {
    position: relative;
    margin-bottom: 0 !important;
    margin-right: 2px;
    list-style: none;
    float: left; }
    .tabs dd > a, .tabs .tab-title > a {
      display: block;
      background: #D1D2D4;
      color: #77787B;
      padding: 0.38462rem;
      font-family: verdana, arial;
      font-size: 1.07692rem;
      text-align: center;
      outline: none; }
      .tabs dd > a:hover, .tabs .tab-title > a:hover {
        background: #c6c6c6; }
      @media only screen and (min-width: 62.001em) {
        .tabs dd > a, .tabs .tab-title > a {
          padding: 0.38462rem 0.76923rem;
          font-weight: bold;
          text-transform: uppercase;
          font-size: 11px; } }
    .tabs dd.active a, .tabs .tab-title.active a {
      background: white;
      color: #db0c41; }
  .tabs.radius dd:first-child a, .tabs.radius .tab:first-child a {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a, .tabs.radius .tab:last-child a {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }
  .tabs.vertical dd, .tabs.vertical .tab-title {
    position: inherit;
    float: none;
    display: block;
    top: auto; }
  .tabs.alternative {
    margin-bottom: 10px; }
    .tabs.alternative dd > a, .tabs.alternative .tab-title > a {
      background: none;
      color: #333333;
      padding-left: 0; }
    .tabs.alternative dd.active a, .tabs.alternative dd a:hover, .tabs.alternative .tab-title.active a, .tabs.alternative .tab-title a:hover {
      color: #db0c41; }
    .tabs.alternative dd i.fa, .tabs.alternative .tab-title i.fa {
      color: #333333;
      margin-right: 10px; }

.tabs-content {
  background: #fff;
  margin-bottom: 0;
  width: 100%; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 1.15385rem;
    width: 100%;
    margin-bottom: -2.30769rem; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 1.15385rem; }
  .tabs-content#property-results > .content {
    padding: 0;
    width: auto; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 1.15385rem; }
  .tabs-content .search {
    margin: 1.15385rem 1.15385rem 1.15385rem; }

@media only screen and (min-width: 40.063em) {
  .tabs.vertical {
    width: 20%;
    float: left;
    margin-bottom: 1.25rem; }

  .tabs-content.vertical {
    width: 80%;
    float: left;
    margin-left: -1px; } }
.no-js .tabs-content > .content {
  display: block;
  float: none; }

#searchBoxMain .tab-title {
  margin-right: 0 !important;
  width: 50%; }

/*doc
---
title: View options / Switch view
name: View options / Switch view
category: Property pages
---

Used on the property listing page to allow the user to switch between grid and map views.

```html_example

<ul class="tabs alternative column large-6" data-tab>
    <li class="tab-title active"><a href="#grid-view"><i class="fa fa-th"></i>Grid view</a></li>
    <li class="tab-title"><a href="#map-view"><i class="fa fa-map-marker"></i>Map view</a></li>
</ul>
                        
```

*/
/*tabs */
/*
 * jQuery UI CSS Framework 1.8.18
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none; }

.ui-helper-hidden-accessible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px); }

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none; }

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
  content: "";
  display: table; }

/*
.ui-helper-clearfix:after {
	clear: both;

}*/
.ui-helper-clearfix {
  zoom: 1; }

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0); }

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important; }

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat; }

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*
 * jQuery UI Autocomplete 1.8.18
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete#theming
 */
.ui-autocomplete {
  position: absolute;
  cursor: default;
  background-color: #f9f9f9;
  border: 3px solid #e9e9e9; }

/* workarounds */
* html .ui-autocomplete {
  width: 1px; }

/* without this, the menu expands to 100% in IE6 */
/*
 * jQuery UI Menu 1.8.18
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0px;
  display: block;
  float: left; }

.ui-menu .ui-menu {
  margin-top: -3px; }

.ui-menu .ui-menu-item {
  clear: left;
  float: left;
  margin: 0;
  padding: 2px;
  width: 100%; }

.ui-menu .ui-menu-item a {
  background-color: #EFEFEF;
  display: block;
  margin: 0;
  padding: 5px;
  text-decoration: none;
  width: 384px; }

.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
  background-color: #ccc !important; }

            /* Component containers
----------------------------------*/
.ui-widget {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em; }

.ui-widget .ui-widget {
  font-size: 1em; }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em; }

.ui-widget-content a {
  color: #666666; }

#searchBoxContact .ui-widget-header {
  background: #fff; }

.ui-widget-header {
  border: none;
  /*background:#353430;*/
  color: white;
  /*padding: 2px 5px;*/ }

.ui-widget-header a {
  color: #222222; }

/*doc
---
title: Thumbnails list
name: Thumbnails list
category: Lists
---

Thumbnails lists can be used to create a list of images, for example, Latest Publications as seen on the 3-column layout and the homepage.

The li's can be extended using column classes to display them in columns rather than stacked.

The images will scale to never overflow the area available. If the area available is smaller than the images, they will adjust to fill 100% os the area's width.

```html_example

<ul class="thumbnails row">
    <li class="column small-6 large-12">
        <a class="th" href="http://www.knightfrank.com/privateview">
            <img src="../../Assets/System/Images/privateview2013.jpg" />
        </a>
    </li>
    <li class="column small-6 large-12">
        <a class="th" href="http://www.thewealthreport.net">
            <img src="../../Assets/System/Images/thewealthreport2014.jpg" />
        </a>
    </li>
</ul>

```

*/
ul.thumbnails {
  list-style: none;
  margin: 0; }
  ul.thumbnails > li {
    float: left;
    margin-bottom: 10px; }
    @media only screen and (min-width: 62.001em) {
      ul.thumbnails > li {
        padding-left: 11px;
        padding-right: 11px;
        margin-bottom: 0px; } }

/* Image Thumbnails */
.th {
  line-height: 0;
  display: inline-block;
  border: solid 0 white;
  max-width: 100%;
  transition: all 200ms ease-out; }
  .th.radius {
    border-radius: 3px; }

/* Tooltips */
.has-tip {
  border-bottom: dotted 1px #cccccc;
  cursor: help;
  font-weight: bold;
  color: #333333; }
  .has-tip:hover, .has-tip:focus {
    border-bottom: dotted 1px #63051d;
    color: #db0c41; }
  .has-tip.tip-left, .has-tip.tip-right {
    float: none !important; }

.tooltip {
  display: none;
  position: absolute;
  z-index: 999;
  font-weight: normal;
  font-size: 1.07692rem;
  line-height: 1.3;
  padding: 0.92308rem;
  max-width: 85%;
  left: 50%;
  width: 100%;
  color: white;
  background: #333333; }
  .tooltip > .nub {
    display: block;
    left: 5px;
    position: absolute;
    width: 0;
    height: 0;
    border: solid 5px;
    border-color: transparent transparent #333333 transparent;
    top: -10px; }
    .tooltip > .nub.rtl {
      left: auto;
      right: 5px; }
  .tooltip.radius {
    border-radius: 3px; }
  .tooltip.round {
    border-radius: 1000px; }
    .tooltip.round > .nub {
      left: 2rem; }
  .tooltip.opened {
    color: #db0c41 !important;
    border-bottom: dotted 1px #63051d !important; }

.tap-to-close {
  display: block;
  font-size: 0.76923rem;
  color: #777777;
  font-weight: normal; }

@media only screen and (min-width: 40.063em) {
  .tooltip > .nub {
    border-color: transparent transparent #333333 transparent;
    top: -10px; }
  .tooltip.tip-top > .nub {
    border-color: #333333 transparent transparent transparent;
    top: auto;
    bottom: -10px; }
  .tooltip.tip-left, .tooltip.tip-right {
    float: none !important; }
  .tooltip.tip-left > .nub {
    border-color: transparent transparent transparent #333333;
    right: -10px;
    left: auto;
    top: 50%;
    margin-top: -5px; }
  .tooltip.tip-right > .nub {
    border-color: transparent #333333 transparent transparent;
    right: auto;
    left: -10px;
    top: 50%;
    margin-top: -5px; } }
/*doc
---
title: Buttons
name: button
category: Basics
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

  <a class="button">This is a link styled as a button</a>
  
  <button class="button">This is a button</button>

```

*/
/*doc
---
title: Top bar
name: Top bar
category: Navigation
---

```html_example

<div class="top-bar">
    <div class="row">
        <div class="column large-7">
            <ul class="off-canvas-list inline-list secondary-nav">
                <li><a href="/">About us</a></li>
                <li><a href="/">Research</a></li>
                <li><a href="/">Blogs</a></li>
                <li><a href="/">News</a></li>
                <li><a href="/">Recruitment</a></li>
                <li><a href="/">Contact us</a></li>
            </ul>
        </div>
        <div class="column large-3">
            <div class="search">
                <input type="text" placeholder="Site search" />
                <a href=""><i class="fa fa-search"></i></a>
            </div>
        </div>
        <div class="column large-2 show-for-large-up">
            <a href="" class="button my-kf">My Knight Frank</a>
        </div>
    </div>
</div>

```

*/
meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:62.001em)/";
  width: 40.063em; }

/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
  width: 100%;
  background: gainsboro; }
  .contain-to-grid .top-bar {
    margin-bottom: 0; }

.top-bar {
  clear: both;
  overflow: hidden;
  height: auto;
  line-height: auto;
  position: relative;
  margin-bottom: 0;
      /*form,
      input { margin-bottom: 0; }

      input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }*/ }
  .top-bar ul {
    margin-bottom: 0;
    list-style: none; }
  .top-bar .row {
    max-width: none; }
  .top-bar .button, .top-bar button {
    margin-bottom: 0; }
  .top-bar .title-area {
    position: relative;
    margin: 0; }
  .top-bar .name {
    height: auto;
    margin: 0;
    font-size: 13px; }
    .top-bar .name h1 {
      line-height: auto;
      font-size: 1.30769rem;
      margin: 0; }
      .top-bar .name h1 a {
        font-weight: normal;
        color: white;
        width: 75%;
        display: block;
        padding: 0 auto/3; }
  .top-bar .toggle-topbar {
    position: absolute;
    right: 0;
    top: 0; }
    .top-bar .toggle-topbar a {
      color: white;
      text-transform: uppercase;
      font-size: 1rem;
      font-weight: bold;
      position: relative;
      display: block;
      padding: 0 auto/3;
      height: auto;
      line-height: auto; }
    .top-bar .toggle-topbar.menu-icon {
      right: auto/3;
      top: 50%;
      margin-top: -16px;
      padding-left: 40px; }
      .top-bar .toggle-topbar.menu-icon a {
        height: 34px;
        line-height: 33px;
        padding: 0;
        padding-right: 25px;
        color: white;
        position: relative; }
        .top-bar .toggle-topbar.menu-icon a::after {
          content: "";
          position: absolute;
          right: 0;
          display: block;
          width: 16px;
          top: 0;
          height: 0;
          box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white; }
  .top-bar.expanded {
    height: auto;
    background: transparent; }
    .top-bar.expanded .title-area {
      background: gainsboro; }
    .top-bar.expanded .toggle-topbar a {
      color: #888888; }
      .top-bar.expanded .toggle-topbar a::after {
        box-shadow: 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888; }

.top-bar-section {
  left: 0;
  position: relative;
  width: auto;
  transition: left 300ms ease-out; }
  .top-bar-section ul {
    width: 100%;
    height: auto;
    display: block;
    background: #333333;
    font-size: 13px;
    margin: 0; }
  .top-bar-section .divider,
  .top-bar-section [role="separator"] {
    border-top: solid 1px #6e6e6e;
    clear: both;
    height: 1px;
    width: 100%; }
  .top-bar-section ul li > a {
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0;
    padding-left: auto/3;
    font-family: verdana, arial;
    font-size: 1rem;
    font-weight: normal;
    text-transform: none;
    background: #333333; }
    .top-bar-section ul li > a.button {
      font-size: 1rem;
      padding-right: auto/3;
      padding-left: auto/3;
      background-color: #db0c41;
      border-color: #af0a34;
      color: white; }
      .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
        background-color: #333333; }
      .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
        color: white; }
    .top-bar-section ul li > a.button.secondary {
      background-color: gainsboro;
      border-color: #b0b0b0;
      color: #333333; }
      .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
        background-color: #333333; }
      .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
        color: #333333; }
    .top-bar-section ul li > a.button.success {
      background-color: #43ac6a;
      border-color: #368a55;
      color: white; }
      .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
        background-color: #333333; }
      .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
        color: white; }
    .top-bar-section ul li > a.button.alert {
      background-color: #f04124;
      border-color: #cf2a0e;
      color: white; }
      .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
        background-color: #333333; }
      .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
        color: white; }
  .top-bar-section ul li > button {
    font-size: 1rem;
    padding-right: auto/3;
    padding-left: auto/3;
    background-color: #db0c41;
    border-color: #af0a34;
    color: white; }
    .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
      background-color: #333333; }
    .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
      color: white; }
    .top-bar-section ul li > button.secondary {
      background-color: gainsboro;
      border-color: #b0b0b0;
      color: #333333; }
      .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
        background-color: #333333; }
      .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
        color: #333333; }
    .top-bar-section ul li > button.success {
      background-color: #43ac6a;
      border-color: #368a55;
      color: white; }
      .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
        background-color: #333333; }
      .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
        color: white; }
    .top-bar-section ul li > button.alert {
      background-color: #f04124;
      border-color: #cf2a0e;
      color: white; }
      .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
        background-color: #333333; }
      .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
        color: white; }
  .top-bar-section ul li:hover:not(.has-form) > a {
    background: #272727;
    color: white; }
  .top-bar-section ul li.active > a {
    background: #db0c41;
    color: white; }
    .top-bar-section ul li.active > a:hover {
      background: #bc0a38;
      color: white; }
  .top-bar-section .has-form {
    padding: auto/3; }
  .top-bar-section .has-dropdown {
    position: relative; }
    .top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
      border-left-style: solid;
      margin-right: auto/3;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; }
    .top-bar-section .has-dropdown.moved {
      position: static; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: static !important;
        height: auto;
        width: auto;
        overflow: visible;
        clip: auto;
        position: absolute !important;
        width: 100%; }
      .top-bar-section .has-dropdown.moved > a:after {
        display: none; }
  .top-bar-section .dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99;
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
    .top-bar-section .dropdown li {
      width: 100%;
      height: auto; }
      .top-bar-section .dropdown li a {
        font-weight: normal;
        padding: 8px auto/3; }
        .top-bar-section .dropdown li a.parent-link {
          font-weight: normal; }
      .top-bar-section .dropdown li.title h5 {
        margin-bottom: 0; }
        .top-bar-section .dropdown li.title h5 a {
          color: white;
          line-height: auto/2;
          display: block; }
      .top-bar-section .dropdown li.has-form {
        padding: 8px auto/3; }
      .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
        top: auto; }
    .top-bar-section .dropdown label {
      padding: 8px auto/3 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: #777777;
      font-weight: bold;
      font-size: 0.76923rem; }

.js-generated {
  display: block; }

@media only screen and (min-width: 62.001em) {
  .top-bar {
    background: gainsboro;
    overflow: visible;
    /*input,
    .button,
    button {
      font-size: rem-calc(14);
      position: relative;
      top: $topbar-button-top;
    }*/ }
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
    .top-bar:after {
      clear: both; }
    .top-bar .toggle-topbar {
      display: none; }
    .top-bar .title-area {
      float: left; }
    .top-bar .name h1 a {
      width: auto; }
    .top-bar.expanded {
      background: gainsboro; }

  .contain-to-grid .top-bar {
    max-width: 79.23077rem;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    transition: none 0 0;
    left: 0 !important; }
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      .top-bar-section ul li {
        float: left; }
        .top-bar-section ul li .js-generated {
          display: none; }
    .top-bar-section li.hover > a:not(.button) {
      background: #272727;
      color: white; }
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 auto/3;
      line-height: auto;
      background: gainsboro; }
      .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #272727; }
    .top-bar-section li.active:not(.has-form) a:not(.button) {
      padding: 0 auto/3;
      line-height: auto;
      color: white;
      background: #db0c41; }
      .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #bc0a38; }
    .top-bar-section .has-dropdown > a {
      padding-right: auto/320 !important; }
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: auto/2; }
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); }
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block;
      position: static !important;
      height: auto;
      width: auto;
      overflow: visible;
      clip: auto;
      position: absolute !important; }
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1rem;
      margin-top: -1px;
      right: 5px;
      line-height: 1.2; }
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 12px auto/3;
        background: #333333; }
      .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #333333; }
      .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
        color: white;
        background: #272727; }
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #333333; }
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #e1e1e1;
      clear: none;
      height: auto;
      width: 0; }
    .top-bar-section .has-form {
      background: gainsboro;
      padding: 0 auto/3;
      height: auto; }
    .top-bar-section .right li .dropdown {
      left: auto;
      right: 0; }
      .top-bar-section .right li .dropdown li .dropdown {
        right: 100%; }
    .top-bar-section .left li .dropdown {
      right: auto;
      left: 0; }
      .top-bar-section .left li .dropdown li .dropdown {
        left: 100%; }

  .no-js .top-bar-section ul li:hover > a {
    background: #272727;
    color: white; }
  .no-js .top-bar-section ul li:active > a {
    background: #db0c41;
    color: white; }
  .no-js .top-bar-section .has-dropdown:hover > .dropdown {
    display: block;
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    position: absolute !important; } }
/*doc
---
title: Base typography - Headings
name: Base typography - Headings
category: Basics
---

```html_example

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h2>Heading level 3</h2>

```

*/
/*doc
---
title: Base typography - Paragraphs
name: Base typography - Paragraphs
category: Basics
---

```html_example

<p>Paragraph text. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>

<p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.</p>

```

*/
/*doc
---
title: Base typography - Unordered List
name: Base typography - Unordered List
category: Basics
---

```html_example

<ul>
  <li>Vestibulum id ligula porta felis euismod semper.</li>
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Etiam porta sem malesuada magna mollis euismod.</li>
  <li>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
</ul>

```

*/
/*doc
---
title: Base typography - Ordered List
name: Base typography - Ordered List
category: Basics
---

```html_example

<ol>
  <li>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</li>
  <li>Donec sed odio dui.</li>
  <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
  <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</li>
</ol>

```

*/
/*doc
---
title: CTA link
name: CTA link
category: Basics
---



```html_example

<a class="cta" href="#"><i class="fa fa-caret-right"></i>Read all news</a>

```

*/
/*doc
---
title: CTA link - Back
name: CTA link - Back
category: Basics
---



```html_example

<a class="cta back" href=""><i class="fa fa-caret-left"></i>Back to property listings</a>

```

*/
/*doc
---
title: Linked image
name: Linked image
category: Basics
---



```html_example

<a class="link-image" href="">
    <img src="../../Assets/System/Images/mortgage-banner.jpg">
</a>

```

*/
/*doc
---
title: RSS link
name: RSS link
category: Basics
---

```html_example

<a href="http://search.knightfrank.co.uk/feeds/feedhandler.ashx?buyrent=buy&amp;locale=en&amp;locids=1978&amp;format=rss" title="Save as RSS feed" class="cta">
  <i class="fa fa-rss"></i>Save as RSS feed
</a>
```

*/
/*doc
---
title: Time
name: Time
category: Basics
---

```html_example

<time datetime="2014-10-13">13 October 2014</time>

```

*/
.heading--blocked {
  	/*background:transparentize($black, 0.3);
    color: white;
    padding: $half-spacing-unit;
    margin-bottom: $base-spacing-unit;
  
    .ie8 & { background-color: $color-brand-grey-dark};*/
  display: block;
  padding: 0 0 5px 5px;
  background: #c6c6c6; }

#divProgress {
  margin: 10px;
  text-align: center; }

div#keyMatch {
  border-top: 1px dotted #6A6A6A;
  border-bottom: 1px dotted #6A6A6A; }

.siteSearchHeader {
  height: 42px;
  overflow: hidden; }

.clear, h1, h2, p {
  display: block;
  clear: both; }

/*doc
---
title: Base typography - Headings
name: Base typography - Headings
category: Basics
---

```html_example

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h2>Heading level 3</h2>

```

*/
/*doc
---
title: Base typography - Paragraphs
name: Base typography - Paragraphs
category: Basics
---

```html_example

<p>Paragraph text. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>

<p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.</p>

```

*/
/*doc
---
title: Base typography - Unordered List
name: Base typography - Unordered List
category: Basics
---

```html_example

<ul>
  <li>Vestibulum id ligula porta felis euismod semper.</li>
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Etiam porta sem malesuada magna mollis euismod.</li>
  <li>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
</ul>

```

*/
/*doc
---
title: Base typography - Ordered List
name: Base typography - Ordered List
category: Basics
---

```html_example

<ol>
  <li>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</li>
  <li>Donec sed odio dui.</li>
  <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
  <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</li>
</ol>

```

*/
/*doc
---
title: CTA link
name: CTA link
category: Basics
---



```html_example

<a class="cta" href="#"><i class="fa fa-caret-right"></i>Read all news</a>

```

*/
/*doc
---
title: CTA link - Back
name: CTA link - Back
category: Basics
---



```html_example

<a class="cta back" href=""><i class="fa fa-caret-left"></i>Back to property listings</a>

```

*/
/*doc
---
title: Linked image
name: Linked image
category: Basics
---



```html_example

<a class="link-image" href="">
    <img src="../../Assets/System/Images/mortgage-banner.jpg">
</a>

```

*/
/*doc
---
title: RSS link
name: RSS link
category: Basics
---

```html_example

<a href="http://search.knightfrank.co.uk/feeds/feedhandler.ashx?buyrent=buy&amp;locale=en&amp;locids=1978&amp;format=rss" title="Save as RSS feed" class="cta">
  <i class="fa fa-rss"></i>Save as RSS feed
</a>
```

*/
/*doc
---
title: Time
name: Time
category: Basics
---

```html_example

<time datetime="2014-10-13">13 October 2014</time>

```

*/
.heading--blocked {
  	/*background:transparentize($black, 0.3);
    color: white;
    padding: $half-spacing-unit;
    margin-bottom: $base-spacing-unit;
  
    .ie8 & { background-color: $color-brand-grey-dark};*/
  display: block;
  padding: 0 0 5px 5px;
  background: #c6c6c6; }

#divProgress {
  margin: 10px;
  text-align: center; }

div#keyMatch {
  border-top: 1px dotted #6A6A6A;
  border-bottom: 1px dotted #6A6A6A; }

.siteSearchHeader {
  height: 42px;
  overflow: hidden; }

.clear, h1, h2, p {
  display: block;
  clear: both; }

/*doc
---
title: Buttons
name: button
category: Basics
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

  <a class="button">This is a link styled as a button</a>
  
  <button class="button">This is a button</button>

```

*/
/*doc
---
title: Top bar
name: Top bar
category: Navigation
---

```html_example

<div class="top-bar">
    <div class="row">
        <div class="column large-7">
            <ul class="off-canvas-list inline-list secondary-nav">
                <li><a href="/">About us</a></li>
                <li><a href="/">Research</a></li>
                <li><a href="/">Blogs</a></li>
                <li><a href="/">News</a></li>
                <li><a href="/">Recruitment</a></li>
                <li><a href="/">Contact us</a></li>
            </ul>
        </div>
        <div class="column large-3">
            <div class="search">
                <input type="text" placeholder="Site search" />
                <a href=""><i class="fa fa-search"></i></a>
            </div>
        </div>
        <div class="column large-2 show-for-large-up">
            <a href="" class="button my-kf">My Knight Frank</a>
        </div>
    </div>
</div>

```

*/
.off-canvas-wrap {
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  overflow-x: hidden;
  height: inherit; }
  .off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
    height: 100%;
    -webkit-overflow-scrolling: touch; }

.inner-wrap {
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -ms-transition: -ms-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease;
  z-index: 1;
  background: #fff; }
  .inner-wrap:before, .inner-wrap:after {
    content: " ";
    display: table; }
  .inner-wrap:after {
    clear: both; }
  @media only screen and (min-width: 0em) and (max-width: 62em) {
    .inner-wrap.fixed {
      padding-top: 130px; } }

.tab-bar {
  -webkit-backface-visibility: hidden;
  background: white;
  color: white;
  height: 3.46154rem;
  line-height: 3.46154rem; }
  .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
    color: white;
    font-weight: bold;
    line-height: 3.46154rem;
    margin: 0; }
  .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4 {
    font-size: 1.15385rem; }
  @media only screen and (min-width: 62.001em) {
    .tab-bar {
      display: none; } }
  .tab-bar > h1 {
    display: none; }
  @media only screen and (min-width: 0em) and (max-width: 62em) {
    .tab-bar {
      margin: 20px 0; } }

.left-small {
  width: 3.46154rem;
  height: 3.46154rem;
  float: left; }

.right-small {
  width: 3.46154rem;
  height: 3.46154rem;
  float: right; }

.tab-bar-section {
  padding: 0 0.76923rem;
  position: absolute;
  text-align: center;
  height: 3.46154rem;
  top: 0; }
  @media only screen and (min-width: 62.001em) {
    .tab-bar-section {
      text-align: left; } }
  .tab-bar-section.left {
    left: 0;
    right: 3.46154rem; }
  .tab-bar-section.right {
    left: 3.46154rem;
    right: 0; }
  .tab-bar-section.middle {
    left: 3.46154rem;
    right: 3.46154rem; }

.tab-bar .menu-icon {
  text-indent: 2.69231rem;
  width: 3.46154rem;
  height: 3.46154rem;
  display: block;
  line-height: 2.53846rem;
  padding: 0;
  color: white;
  position: relative;
  text-indent: -99999px;
  -ms-transform: translate(0, 0);
  -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); }
  .tab-bar .menu-icon span {
    position: absolute;
    display: block;
    height: 0;
    width: 2.30769rem;
    line-height: 1;
    top: 0.88462rem;
    left: 0.57692rem;
    box-shadow: 0 0px 0 2px #333333, 0 10px 0 2px #333333, 0 20px 0 2px #333333; }
  .tab-bar .menu-icon:hover span {
    box-shadow: 0 0px 0 2px #242424, 0 10px 0 2px #242424, 0 20px 0 2px #242424; }

@media only screen and (min-width: 0em) and (max-width: 62em) {
  .left-off-canvas-menu {
    -webkit-backface-visibility: hidden;
    border-left: solid 3px #1A1A1A;
    width: 20rem;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #333333;
    z-index: 1001;
    box-sizing: content-box;
    -webkit-overflow-scrolling: touch;
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0; }
    .left-off-canvas-menu * {
      -webkit-backface-visibility: hidden; } }
html.ie8 .left-off-canvas-menu {
  width: 100%; }

@media only screen and (min-width: 0em) and (max-width: 62em) {
  .right-off-canvas-menu {
    -webkit-backface-visibility: hidden;
    border-left: solid 3px #1A1A1A;
    width: 20rem;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #333333;
    z-index: 1001;
    box-sizing: content-box;
    -webkit-overflow-scrolling: touch;
    -ms-transform: translate(100%, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    right: 0; }
    .right-off-canvas-menu * {
      -webkit-backface-visibility: hidden; } }
html.ie8 .right-off-canvas-menu {
  width: 100%; }

ul.off-canvas-list {
  list-style-type: none;
  padding: 0;
  margin: 0; }
  ul.off-canvas-list > li {
    padding: 0; }
    ul.off-canvas-list > li label {
      padding: 0.3rem 1.15385rem;
      color: #999999;
      text-transform: uppercase;
      font-weight: bold;
      background: #444444;
      border-top: 1px solid #5e5e5e;
      border-bottom: none;
      margin: 0; }
    ul.off-canvas-list > li > a {
      display: block;
      padding: 1.33333rem;
      color: rgba(255, 255, 255, 0.8);
      border-bottom: 1px solid #1a1a1a;
      transition: none; }
      html.ie8 ul.off-canvas-list > li > a {
        padding: 20px 12px; }
    ul.off-canvas-list > li:hover > a {
      background: #db0c41;
      color: #fff;
      position: relative;
      z-index: 1300; }
    @media only screen and (min-width: 62.001em) {
      ul.off-canvas-list > li > a {
        border: none;
        color: #333333;
        padding: 20px 11px 19px 11px; }
      ul.off-canvas-list > li:hover > a {
        background: #77787b; } }
    ul.off-canvas-list > li i.fa {
      display: none; }
      @media only screen and (min-width: 62.001em) {
        ul.off-canvas-list > li i.fa {
          color: #db0c41;
          display: inline;
          padding-left: 10px; } }
  ul.off-canvas-list.primary-nav {
    font: 14px "KfDisplayReg", Helvetica, Arial, sans-serif; }
    ul.off-canvas-list.primary-nav:before, ul.off-canvas-list.primary-nav:after {
      content: " ";
      display: table; }
    ul.off-canvas-list.primary-nav:after {
      clear: both; }
    @media only screen and (min-width: 62.001em) {
      ul.off-canvas-list.primary-nav {
        background: url(../Images/DottedSeparatorBg.png) repeat-x top, url(../Images/DottedSeparatorBg.png) repeat-x bottom;
        float: left;
        position: relative;
        width: 100%;
        margin: 10px 0; } }
    @media only screen and (min-width: 62.001em) {
      ul.off-canvas-list.primary-nav {
        margin: 0 0 5px; } }
    @media only screen and (min-width: 0em) and (max-width: 62em) {
      ul.off-canvas-list.primary-nav {
        margin-left: -1.15385rem;
        margin-right: -1.15385rem; } }
  ul.off-canvas-list.secondary-nav {
    padding-top: 2px; }
    ul.off-canvas-list.secondary-nav li a {
      border: none;
      padding: 6px	16px; }
      ul.off-canvas-list.secondary-nav li a:hover {
        background: none;
        color: #db0c41; }
      html.ie8 ul.off-canvas-list.secondary-nav li a {
        padding: 6px	12px; }
    @media only screen and (min-width: 0em) and (max-width: 62em) {
      ul.off-canvas-list.secondary-nav {
        font-size: 16px; } }
    @media only screen and (min-width: 62.001em) {
      ul.off-canvas-list.secondary-nav {
        font-weight: bold; }
        ul.off-canvas-list.secondary-nav li a {
          padding-left: 0; } }

.move-right > .inner-wrap {
  -ms-transform: translate(20rem, 0);
  -webkit-transform: translate3d(20rem, 0, 0);
  -moz-transform: translate3d(20rem, 0, 0);
  -ms-transform: translate3d(20rem, 0, 0);
  -o-transform: translate3d(20rem, 0, 0);
  transform: translate3d(20rem, 0, 0); }
.move-right .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease;
  cursor: pointer;
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent; }
  @media only screen and (min-width: 62.001em) {
    .move-right .exit-off-canvas:hover {
      background: rgba(255, 255, 255, 0.05); } }

.move-left > .inner-wrap {
  -ms-transform: translate(-20rem, 0);
  -webkit-transform: translate3d(-20rem, 0, 0);
  -moz-transform: translate3d(-20rem, 0, 0);
  -ms-transform: translate3d(-20rem, 0, 0);
  -o-transform: translate3d(-20rem, 0, 0);
  transform: translate3d(-20rem, 0, 0); }
.move-left .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease;
  cursor: pointer;
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent; }
  @media only screen and (min-width: 62.001em) {
    .move-left .exit-off-canvas:hover {
      background: rgba(255, 255, 255, 0.05); } }

.no-csstransforms .left-off-canvas-menu {
  left: -20rem; }
.no-csstransforms .right-off-canvas-menu {
  right: -20rem; }
.no-csstransforms .move-left > .inner-wrap {
  right: 20rem; }
.no-csstransforms .move-right > .inner-wrap {
  left: 20rem; }

/*doc
---
title: Primary Nav
name: Primary Nav
category: Navigation
---

```html_example

<div class="row">
  <ul class="off-canvas-list inline-list primary-nav">
    <li class="has-megamenu">
        <a href="#">Residential Property<i class="fa fa-caret-down"></i></a>
        <ul class="megamenu">
            <li class="row">
                <ul class="column medium-4">
                    <li class="item-group">
                        <a href="" class="title">Buying</a>
                        <ul>
                            <li><a href="">Find property to buy</a></li>
                            <li><a href="">Financing your property</a></li>
                            <li><a href="">Our buying services</a></li>
                            <li><a href="">Russian, Chinese and Indian desks</a></li>
                        </ul>
                    </li>
                    <li class="item-group">
                        <a href="" class="title">Development</a>
                        <ul>
                            <li><a href="">Land</a></li>
                            <li><a href="">Valuations</a></li>
                            <li><a href="">New homes</a></li>
                            <li><a href="">Development consultancy</a></li>
                            <li><a href="">Funding</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="column medium-4">
                    <li class="item-group">
                        <a href="" class="title">Selling</a>
                        <ul>
                            <li><a href="">Request a market appraisal</a></li>
                            <li><a href="">Why sell through Knight Frank</a></li>
                        </ul>
                    </li>
                    <li class="item-group">
                        <a href="" class="title">Investment</a>
                        <ul>
                            <li><a href="">Investing in residential property</a></li>
                        </ul>
                    </li>
                    <li class="item-group">
                        <a href="" class="title">Management</a>
                        <ul>
                            <li><a href="">Asset Management</a></li>
                            <li><a href="">Estate Management</a></li>
                            <li><a href="">Farm Management</a></li>
                            <li><a href="">Investment Land Management</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="column medium-4">
                    <li class="item-group">
                        <a href="" class="title">Lettings</a>
                        <ul>
                            <li><a href="">Tenants</a></li>
                            <li><a href="">Landlords</a></li>
                        </ul>
                    </li>
                    <li class="item-group">
                        <a href="" class="title">Professional consultancy</a>
                        <ul>
                            <li><a href="">Country House Consultancy </a></li>
                            <li><a href="">Valuations</a></li>
                            <li><a href="">Rural services</a></li>
                            <li><a href="">Renewables</a></li>
                            <li><a href="">Leasehold reform</a></li>
                            <li><a href="">Building consultancy</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="row">
                <ul class="column medium-8">
                    <li class="item-group">
                        <a href="" class="title">Sectors</a>
                        <ul class="row">
                            <li class="column medium-6">
                                <ul>
                                    <li><a href="">Country houses</a></li>
                                    <li><a href="">Farms</a></li>
                                    <li><a href="">Hotels</a></li>
                                    <li><a href="">International property</a></li>
                                    <li><a href="">Institutional property</a></li>
                                    <li><a href="">London property</a></li>
                                </ul>
                            </li>
                            <li class="column medium-6">
                                <ul>
                                    <li><a href="">New homes</a></li>
                                    <li><a href="">Rural Property</a></li>
                                    <li><a href="">Sporting estates</a></li>
                                    <li><a href="">Student property</a></li>
                                    <li><a href="">Town and city properties</a></li>
                                    <li><a href="">Waterfront and riverside</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="column medium-4">
                    <li class="item-group">
                        <a href="" class="title">Search</a>
                        <ul>
                            <li><a href="">Find a property</a></li>
                            <li><a href="">Find a person</a></li>
                            <li><a href="">Find a service</a></li>
                            <li><a href="">Find an office</a></li>
                            <li><a href="">Find a research report</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Commercial Property<i class="fa fa-caret-down"></i></a></li>
    <li><a href="#">Investment<i class="fa fa-caret-down"></i></a></li>
    <li><a href="#">Development<i class="fa fa-caret-down"></i></a></li>
  </ul>
</div>

```

*/
/* small displays */
@media only screen {
  .show-for-small-only, .show-for-small-up, .show-for-small, .show-for-small-down, .hide-for-medium-only, .hide-for-medium-up, .hide-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
    display: inherit !important; }

  .hide-for-small-only, .hide-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
    display: none !important; }

  table.show-for-small-only, table.show-for-small-up, table.show-for-small, table.show-for-small-down, table.hide-for-medium-only, table.hide-for-medium-up, table.hide-for-medium, table.show-for-medium-down, table.hide-for-large-only, table.hide-for-large-up, table.hide-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
    display: table; }

  thead.show-for-small-only, thead.show-for-small-up, thead.show-for-small, thead.show-for-small-down, thead.hide-for-medium-only, thead.hide-for-medium-up, thead.hide-for-medium, thead.show-for-medium-down, thead.hide-for-large-only, thead.hide-for-large-up, thead.hide-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
    display: table-header-group !important; }

  tbody.show-for-small-only, tbody.show-for-small-up, tbody.show-for-small, tbody.show-for-small-down, tbody.hide-for-medium-only, tbody.hide-for-medium-up, tbody.hide-for-medium, tbody.show-for-medium-down, tbody.hide-for-large-only, tbody.hide-for-large-up, tbody.hide-for-large, tbody.show-for-large-down, tbody.hide-for-xlarge-only, tbody.hide-for-xlarge-up, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up {
    display: table-row-group !important; }

  tr.show-for-small-only, tr.show-for-small-up, tr.show-for-small, tr.show-for-small-down, tr.hide-for-medium-only, tr.hide-for-medium-up, tr.hide-for-medium, tr.show-for-medium-down, tr.hide-for-large-only, tr.hide-for-large-up, tr.hide-for-large, tr.show-for-large-down, tr.hide-for-xlarge-only, tr.hide-for-xlarge-up, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up {
    display: table-row !important; }

  th.show-for-small-only, td.show-for-small-only, th.show-for-small-up, td.show-for-small-up, th.show-for-small, td.show-for-small, th.show-for-small-down, td.show-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.hide-for-medium-up, td.hide-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
    display: table-cell !important; } }
/* medium displays */
@media only screen and (min-width: 40.063em) {
  .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
    display: inherit !important; }

  .show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .hide-for-medium-only, .hide-for-medium-up, .hide-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
    display: none !important; }

  table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.show-for-medium-only, table.show-for-medium-up, table.show-for-medium, table.show-for-medium-down, table.hide-for-large-only, table.hide-for-large-up, table.hide-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
    display: table; }

  thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.show-for-medium-only, thead.show-for-medium-up, thead.show-for-medium, thead.show-for-medium-down, thead.hide-for-large-only, thead.hide-for-large-up, thead.hide-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
    display: table-header-group !important; }

  tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.show-for-medium-only, tbody.show-for-medium-up, tbody.show-for-medium, tbody.show-for-medium-down, tbody.hide-for-large-only, tbody.hide-for-large-up, tbody.hide-for-large, tbody.show-for-large-down, tbody.hide-for-xlarge-only, tbody.hide-for-xlarge-up, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up {
    display: table-row-group !important; }

  tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.show-for-medium-only, tr.show-for-medium-up, tr.show-for-medium, tr.show-for-medium-down, tr.hide-for-large-only, tr.hide-for-large-up, tr.hide-for-large, tr.show-for-large-down, tr.hide-for-xlarge-only, tr.hide-for-xlarge-up, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up {
    display: table-row !important; }

  th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.show-for-medium-only, td.show-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.show-for-medium, td.show-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
    display: table-cell !important; } }
/* large displays */
@media only screen and (min-width: 62.001em) {
  .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
    display: inherit !important; }

  .show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .show-for-medium-only, .hide-for-medium-up, .show-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
    display: none !important; }

  table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.show-for-large-only, table.show-for-large-up, table.show-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
    display: table; }

  thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.show-for-large-only, thead.show-for-large-up, thead.show-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
    display: table-header-group !important; }

  tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.hide-for-medium-only, tbody.show-for-medium-up, tbody.hide-for-medium, tbody.hide-for-medium-down, tbody.show-for-large-only, tbody.show-for-large-up, tbody.show-for-large, tbody.show-for-large-down, tbody.hide-for-xlarge-only, tbody.hide-for-xlarge-up, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up {
    display: table-row-group !important; }

  tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.hide-for-medium-only, tr.show-for-medium-up, tr.hide-for-medium, tr.hide-for-medium-down, tr.show-for-large-only, tr.show-for-large-up, tr.show-for-large, tr.show-for-large-down, tr.hide-for-xlarge-only, tr.hide-for-xlarge-up, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up {
    display: table-row !important; }

  th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.show-for-large-only, td.show-for-large-only, th.show-for-large-up, td.show-for-large-up, th.show-for-large, td.show-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
    display: table-cell !important; } }
/* xlarge displays */
@media only screen and (min-width: 90.063em) {
  .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .hide-for-large-only, .show-for-large-up, .hide-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
    display: inherit !important; }

  .show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .show-for-medium-only, .hide-for-medium-up, .show-for-medium, .show-for-medium-down, .show-for-large-only, .hide-for-large-up, .show-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
    display: none !important; }

  table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.hide-for-large-only, table.show-for-large-up, table.hide-for-large, table.hide-for-large-down, table.show-for-xlarge-only, table.show-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
    display: table; }

  thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.hide-for-large-only, thead.show-for-large-up, thead.hide-for-large, thead.hide-for-large-down, thead.show-for-xlarge-only, thead.show-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
    display: table-header-group !important; }

  tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.hide-for-medium-only, tbody.show-for-medium-up, tbody.hide-for-medium, tbody.hide-for-medium-down, tbody.hide-for-large-only, tbody.show-for-large-up, tbody.hide-for-large, tbody.hide-for-large-down, tbody.show-for-xlarge-only, tbody.show-for-xlarge-up, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up {
    display: table-row-group !important; }

  tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.hide-for-medium-only, tr.show-for-medium-up, tr.hide-for-medium, tr.hide-for-medium-down, tr.hide-for-large-only, tr.show-for-large-up, tr.hide-for-large, tr.hide-for-large-down, tr.show-for-xlarge-only, tr.show-for-xlarge-up, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up {
    display: table-row !important; }

  th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.show-for-large-up, td.show-for-large-up, th.hide-for-large, td.hide-for-large, th.hide-for-large-down, td.hide-for-large-down, th.show-for-xlarge-only, td.show-for-xlarge-only, th.show-for-xlarge-up, td.show-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
    display: table-cell !important; } }
/* xxlarge displays */
@media only screen and (min-width: 120.063em) {
  .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .hide-for-large-only, .show-for-large-up, .hide-for-large, .hide-for-large-down, .hide-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
    display: inherit !important; }

  .show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .show-for-medium-only, .hide-for-medium-up, .show-for-medium, .show-for-medium-down, .show-for-large-only, .hide-for-large-up, .show-for-large, .show-for-large-down, .show-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
    display: none !important; }

  table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.hide-for-large-only, table.show-for-large-up, table.hide-for-large, table.hide-for-large-down, table.hide-for-xlarge-only, table.show-for-xlarge-up, table.show-for-xxlarge-only, table.show-for-xxlarge-up {
    display: table; }

  thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.hide-for-large-only, thead.show-for-large-up, thead.hide-for-large, thead.hide-for-large-down, thead.hide-for-xlarge-only, thead.show-for-xlarge-up, thead.show-for-xxlarge-only, thead.show-for-xxlarge-up {
    display: table-header-group !important; }

  tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.hide-for-medium-only, tbody.show-for-medium-up, tbody.hide-for-medium, tbody.hide-for-medium-down, tbody.hide-for-large-only, tbody.show-for-large-up, tbody.hide-for-large, tbody.hide-for-large-down, tbody.hide-for-xlarge-only, tbody.show-for-xlarge-up, tbody.show-for-xxlarge-only, tbody.show-for-xxlarge-up {
    display: table-row-group !important; }

  tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.hide-for-medium-only, tr.show-for-medium-up, tr.hide-for-medium, tr.hide-for-medium-down, tr.hide-for-large-only, tr.show-for-large-up, tr.hide-for-large, tr.hide-for-large-down, tr.hide-for-xlarge-only, tr.show-for-xlarge-up, tr.show-for-xxlarge-only, tr.show-for-xxlarge-up {
    display: table-row !important; }

  th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.show-for-large-up, td.show-for-large-up, th.hide-for-large, td.hide-for-large, th.hide-for-large-down, td.hide-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.show-for-xlarge-up, td.show-for-xlarge-up, th.show-for-xxlarge-only, td.show-for-xxlarge-only, th.show-for-xxlarge-up, td.show-for-xxlarge-up {
    display: table-cell !important; } }
/* Orientation targeting */
.show-for-landscape,
.hide-for-portrait {
  display: inherit !important; }

.hide-for-landscape,
.show-for-portrait {
  display: none !important; }

/* Specific visibility for tables */
table.hide-for-landscape, table.show-for-portrait {
  display: table; }

thead.hide-for-landscape, thead.show-for-portrait {
  display: table-header-group !important; }

tbody.hide-for-landscape, tbody.show-for-portrait {
  display: table-row-group !important; }

tr.hide-for-landscape, tr.show-for-portrait {
  display: table-row !important; }

td.hide-for-landscape, td.show-for-portrait,
th.hide-for-landscape,
th.show-for-portrait {
  display: table-cell !important; }

@media only screen and (orientation: landscape) {
  .show-for-landscape,
  .hide-for-portrait {
    display: inherit !important; }

  .hide-for-landscape,
  .show-for-portrait {
    display: none !important; }

  /* Specific visibility for tables */
  table.show-for-landscape, table.hide-for-portrait {
    display: table; }

  thead.show-for-landscape, thead.hide-for-portrait {
    display: table-header-group !important; }

  tbody.show-for-landscape, tbody.hide-for-portrait {
    display: table-row-group !important; }

  tr.show-for-landscape, tr.hide-for-portrait {
    display: table-row !important; }

  td.show-for-landscape, td.hide-for-portrait,
  th.show-for-landscape,
  th.hide-for-portrait {
    display: table-cell !important; } }
@media only screen and (orientation: portrait) {
  .show-for-portrait,
  .hide-for-landscape {
    display: inherit !important; }

  .hide-for-portrait,
  .show-for-landscape {
    display: none !important; }

  /* Specific visibility for tables */
  table.show-for-portrait, table.hide-for-landscape {
    display: table; }

  thead.show-for-portrait, thead.hide-for-landscape {
    display: table-header-group !important; }

  tbody.show-for-portrait, tbody.hide-for-landscape {
    display: table-row-group !important; }

  tr.show-for-portrait, tr.hide-for-landscape {
    display: table-row !important; }

  td.show-for-portrait, td.hide-for-landscape,
  th.show-for-portrait,
  th.hide-for-landscape {
    display: table-cell !important; } }
/* Touch-enabled device targeting */
.show-for-touch {
  display: none !important; }

.hide-for-touch {
  display: inherit !important; }

.touch .show-for-touch {
  display: inherit !important; }

.touch .hide-for-touch {
  display: none !important; }

/* Specific visibility for tables */
table.hide-for-touch {
  display: table; }

.touch table.show-for-touch {
  display: table; }

thead.hide-for-touch {
  display: table-header-group !important; }

.touch thead.show-for-touch {
  display: table-header-group !important; }

tbody.hide-for-touch {
  display: table-row-group !important; }

.touch tbody.show-for-touch {
  display: table-row-group !important; }

tr.hide-for-touch {
  display: table-row !important; }

.touch tr.show-for-touch {
  display: table-row !important; }

td.hide-for-touch {
  display: table-cell !important; }

.touch td.show-for-touch {
  display: table-cell !important; }

th.hide-for-touch {
  display: table-cell !important; }

.touch th.show-for-touch {
  display: table-cell !important; }

.search:before, .search:after {
  content: " ";
  display: table; }
.search:after {
  clear: both; }
.search input[type=text] {
  border: solid 1px #c6c6c6;
  border-width: 1px 0 1px 1px;
  box-shadow: none;
  float: left;
  margin: 0;
  width: 80%; }
.search a, .search input[type=submit] {
  border: solid 1px #c6c6c6;
  border-width: 1px 1px 1px 0;
  background: #f9f9f9;
  color: #565656;
  text-align: center;
  height: 37px;
  width: 37px; }
  @media only screen and (min-width: 40.063em) {
    .search a, .search input[type=submit] {
      height: 28px;
      width: 28px; } }

header[role=banner] h1 {
  margin: 20px 0; }
  header[role=banner] h1 a {
    background-size: 100%;
    display: block;
    height: 45px;
    white-space: nowrap;
    overflow: hidden;
    width: 120px; }
  @media only screen and (min-width: 62.001em) {
    header[role=banner] h1 {
      margin: 0 0 5px; }
      header[role=banner] h1 a {
        height: 59px;
        width: 158px; } }
@media only screen and (min-width: 62.001em) {
  header[role=banner] {
    padding-top: 35px;
    margin-bottom: 3px; }
    header[role=banner] .top-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0; }
      header[role=banner] .top-bar .row {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        max-width: 79.23077rem; }
        header[role=banner] .top-bar .row:before, header[role=banner] .top-bar .row:after {
          content: " ";
          display: table; }
        header[role=banner] .top-bar .row:after {
          clear: both; } }
header[role=banner] .search:before, header[role=banner] .search:after {
  content: " ";
  display: table; }
header[role=banner] .search:after {
  clear: both; }
@media only screen and (min-width: 0em) and (max-width: 62em) {
  header[role=banner] .search {
    border: solid 1px #262626;
    border-width: 1px 0;
    padding: 15px 16px; } }
@media only screen and (min-width: 62.001em) {
  header[role=banner] .search {
    margin: 4px 0; }
    header[role=banner] .search input[type=text] {
      height: 2.15385rem;
      font-size: 0.92308rem;
      padding: 0 0.38462rem; } }
header[role=banner] .search input[type=text], header[role=banner] .search a {
  float: left; }
  @media only screen and (min-width: 0em) and (max-width: 62em) {
    header[role=banner] .search input[type=text], header[role=banner] .search a {
      border: none; } }
header[role=banner] .search a {
  height: 37px;
  width: 37px; }
  header[role=banner] .search a i {
    font-size: 22px;
    padding: 7px 0; }
  @media only screen and (min-width: 62.001em) {
    header[role=banner] .search a {
      height: 28px;
      width: 28px; }
      header[role=banner] .search a i {
        font-size: 16px;
        padding: 4px 0; } }
header[role=banner] a.my-kf {
  float: right;
  margin: 0; }
header[role=banner] dl {
  margin: 0; }
  header[role=banner] dl dt {
    font-weight: normal;
    font-size: 11px; }
    header[role=banner] dl dt a span {
      color: #333333;
      padding: 5px; }
    header[role=banner] dl dt i {
      margin-left: 0.38462rem; }
    @media only screen and (min-width: 0em) and (max-width: 62em) {
      header[role=banner] dl dt a:hover {
        color: #db0c41; }
      header[role=banner] dl dt i {
        display: none; } }
  header[role=banner] dl dd {
    margin: 0; }
  @media only screen and (min-width: 0em) and (max-width: 62em) {
    header[role=banner] dl {
      padding: 15px 0 0; }
      header[role=banner] dl dt a span {
        color: #fff; }
      header[role=banner] dl dd select {
        margin: 0; }
      header[role=banner] dl:last-child {
        padding-bottom: 20px; } }
  @media only screen and (min-width: 62.001em) {
    header[role=banner] dl {
      float: right;
      margin-left: 6%; }
      header[role=banner] dl select {
        display: none; } }
header[role=banner] aside > .row {
  clear: both; }
  @media only screen and (max-width: 40em) {
    header[role=banner] aside > .row {
      margin: 0; } }
header[role=banner] .my-kf-bar {
  background: gainsboro; }
header[role=banner] .fixed-bar {
  background: #fff;
  padding: 20px 0; }
  header[role=banner] .fixed-bar:before, header[role=banner] .fixed-bar:after {
    content: " ";
    display: table; }
  header[role=banner] .fixed-bar:after {
    clear: both; }
body.my-kf header[role=banner] {
  position: relative; }
@media only screen and (min-width: 0em) and (max-width: 62em) {
  header[role=banner] {
    background: #fff; }
    .inner-wrap.fixed header[role=banner] {
      border-bottom: solid 3px gainsboro;
      left: 0;
      top: 0;
      right: 0;
      position: fixed;
      z-index: 1000; }
      .inner-wrap.fixed header[role=banner].off-screen {
        top: -134px; }
      .inner-wrap.fixed header[role=banner].transition {
        -webkit-transition: -webkit-top 500ms ease;
        -moz-transition: -moz-top 500ms ease;
        -ms-transition: -ms-top 500ms ease;
        -o-transition: -o-top 500ms ease;
        transition: top 500ms ease; } }
header[role=banner] .f-dropdown {
  display: none; }
  header[role=banner] .f-dropdown + select {
    display: block; }
  @media only screen and (min-width: 62.001em) {
    header[role=banner] .f-dropdown {
      display: block; }
      header[role=banner] .f-dropdown + select {
        display: none; } }
header[role=banner] .end dl dt a {
  color: #ccc; }
  @media only screen and (min-width: 62.001em) {
    header[role=banner] .end dl dt a {
      color: #db0c41; } }
header[role=banner] .end span {
  text-align: left;
  width: 100%; }
  header[role=banner] .end span a {
    color: #ccc; }
    @media only screen and (min-width: 62.001em) {
      header[role=banner] .end span a {
        color: #db0c41; } }

.megamenu {
  background: #f9f9f9;
  display: none;
  margin: -1px 0 0 !important;
  z-index: 1200;
  position: absolute;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
  .megamenu > .row {
    margin: 0;
    /*&:last-child {
    	background:url(../Images/MegamenuBg.png) repeat-y;
    	background-size:100%;
    	html.ie8 & {
    		background:none;
    	}
    }*/ }
    html.ie8 .megamenu > .row {
      margin: 0; }

.has-megamenu ul {
  list-style: none;
  margin: 0; }
  .has-megamenu ul a:not(.title) {
    color: #565656;
    font: 12px verdana, arial; }
    .has-megamenu ul a:not(.title):hover {
      color: #db0c41; }
  .has-megamenu ul a.title {
    border-bottom: 1px dotted #db0c41;
    font: bold 14px verdana, arial;
    display: block;
    padding-bottom: 5px; }
.has-megamenu .item-group {
  padding: 1.15385rem 0; }
.has-megamenu .medium-8 {
  clear: both; }
.has-megamenu .featured {
  background: gainsboro; }

@media only screen and (min-width: 62.001em) {
  .has-megamenu:hover > .megamenu {
    display: block;
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    position: absolute !important;
    top: 57px;
    left: 0;
    right: 0; } }
footer[role=contentinfo] {
  background: #333333;
  color: #999999;
  margin-top: 2.30769rem;
  padding: 2.30769rem 0; }
  footer[role=contentinfo] a {
    color: #999999; }
    footer[role=contentinfo] a:hover {
      color: white; }
  footer[role=contentinfo] ul.social {
    font-size: 25px;
    line-height: 25px;
    margin: 0 0 1.53846rem 0; }
    footer[role=contentinfo] ul.social:before, footer[role=contentinfo] ul.social:after {
      content: " ";
      display: table; }
    footer[role=contentinfo] ul.social:after {
      clear: both; }
    footer[role=contentinfo] ul.social li {
      display: block;
      margin: 0 5px 5px 0;
      float: left; }
      footer[role=contentinfo] ul.social li:last-child {
        margin-right: 0; }
    footer[role=contentinfo] ul.social li:not(.app) {
      text-align: center; }
      footer[role=contentinfo] ul.social li:not(.app) a {
        color: #ffffff;
        display: block;
        height: 40px;
        padding: 7px;
        width: 40px; }
        footer[role=contentinfo] ul.social li:not(.app) a:hover {
          color: #db0c41; }
        footer[role=contentinfo] ul.social li:not(.app) a i {
          font-size: 2.5rem; }
    @media only screen and (max-width: 40em) {
      footer[role=contentinfo] ul.social {
        margin-top: 10px;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }
    @media only screen and (min-width: 40.063em) {
      footer[role=contentinfo] ul.social {
        float: right;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%); } }
  footer[role=contentinfo] hr {
    border-style: solid;
    border-color: #999999;
    border-top-width: 1px; }
@media only screen and (min-width: 40.063em) and (min-width: 62.001em) {
  footer[role=contentinfo] .inline-list li {
    border-right: solid 1px #999999;
    margin-right: 5px;
    line-height: 12px;
    padding-right: 5px; }
    footer[role=contentinfo] .inline-list li:last-child {
      border: none; } }

  @media only screen and (min-width: 62.001em) {
    footer[role=contentinfo] p {
      text-align: right; } }

.side-nav h3 > a {
  text-decoration: none; }
  @media only screen and (min-width: 62.001em) {
    .side-nav h3 > a {
      font-size: 1rem; } }

footer p {
  line-height: 1;
  margin: 0;
  text-align: left; }
  @media only screen and (min-width: 62.001em) {
    footer p {
      text-align: right; } }

footer p, footer ul.inline-list {
  font-size: 0.92308rem; }

@media only screen and (min-width: 40.063em) {
  .OnTheMarket {
    float: right; } }
.OnTheMarket img {
  margin: 1.53846rem 0; }
  @media only screen and (min-width: 40.063em) {
    .OnTheMarket img {
      float: right; } }
  @media only screen and (min-width: 62.001em) {
    .OnTheMarket img {
      padding-right: 1.15385rem; } }

.MyKF {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  list-style-type: none;
  margin: 0;
  height: 100%; }
  @media only screen and (min-width: 40.063em) {
    .MyKF li {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); } }
  .MyKF a {
    color: #db0c41 !important; }

.StayConnected h3 {
  color: #ffffff; }
  @media only screen and (min-width: 40.063em) {
    .StayConnected h3 {
      font-size: 1rem;
      position: relative;
      top: 90%;
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%); } }

@media only screen and (min-width: 40.063em) {
  .Copyright p {
    text-align: right; } }

.slideshow {
  background: #333333; }
  @media only screen and (max-width: 40em) {
    .slideshow {
      margin-bottom: 4.61538rem; } }
  @media only screen and (min-width: 40.063em) {
    .slideshow {
      padding-bottom: 45px;
      margin-bottom: 2.30769rem; } }
  .slideshow figure {
    background: #333333;
    margin: 0; }
    .slideshow figure figcaption {
      background: rgba(0, 0, 0, 0.5);
      padding: 10px 2.30769rem;
      min-height: 76px; }
      .slideshow figure figcaption h2 {
        font: bold 15px verdana, arial;
        color: #fff;
        margin: 0; }
      .slideshow figure figcaption p {
        color: #fff; }
      .slideshow figure figcaption a.button {
        margin: 5px 0; }
      @media only screen and (min-width: 40.063em) {
        .slideshow figure figcaption {
          /*background:transparentize($black, 0.3);*/
          bottom: 0;
          left: 30px;
          padding-right: 150px;
          right: 30px;
          position: absolute;
          border-top: 1px solid #000000;
          transition: opacity .5s; }
          .slideshow figure figcaption p {
            margin: 0; }
          .slideshow figure figcaption a.button {
            margin-top: -16px;
            position: absolute;
            top: 50%;
            right: 2.30769rem; } }
    .slideshow figure img {
      max-width: none;
      width: 100%; }
  .slideshow .slick-dots {
    margin: 0;
    height: 28px; }
    @media only screen and (min-width: 40.063em) {
      .slideshow .slick-dots {
        bottom: 0; } }
    .slideshow .slick-dots li {
      margin: 0 5px; }
      .slideshow .slick-dots li button, .slideshow .slick-dots li {
        padding: 0; }
      .slideshow .slick-dots li button:before {
        background: gainsboro;
        content: "";
        display: block;
        height: 14px;
        width: 14px;
        opacity: 1;
        text-shadow: none;
        border-radius: 50%; }
        @media only screen and (min-width: 40.063em) {
          .slideshow .slick-dots li button:before {
            font-size: 12px; } }
      .slideshow .slick-dots li.slick-active button:before {
        background: #db0c41;
        opacity: 1; }
      @media only screen and (min-width: 40.063em) {
        .slideshow .slick-dots li {
          width: 20px; } }
    @media only screen and (max-width: 40em) {
      .slideshow .slick-dots {
        bottom: -37px; } }
    #banner .slideshow .slick-dots {
      bottom: 0; }
  @media only screen and (max-width: 40em) {
    .slideshow {
      margin-top: 20px; } }
  @media only screen and (min-width: 40.063em) {
    .slideshow {
      background: none; } }
  #banner .slideshow {
    display: none; }
    @media only screen and (min-width: 40.063em) {
      #banner .slideshow {
        display: block; } }
  .slideshow .slick-prev, .slideshow .slick-next {
    width: 45px;
    height: 45px; }
    @media only screen and (max-width: 40em) {
      .slideshow .slick-prev, .slideshow .slick-next {
        margin-top: -100px; } }
    @media only screen and (min-width: 40.063em) {
      .slideshow .slick-prev, .slideshow .slick-next {
        margin-top: -60px; } }
    .slideshow .slick-prev:hover, .slideshow .slick-prev:focus, .slideshow .slick-next:hover, .slideshow .slick-next:focus {
      background-color: inherit !important; }
  .slideshow .slick-prev {
    left: 0; }
  .slideshow .slick-next {
    right: 0; }
  .slideshow .slick-prev:before, .slideshow .slick-next:before {
    font-size: 40px; }

/*doc
---
title: Property slideshow
name: slideshow name
category: Interactive elements
---

Slideshows create a carousel, used for property carousels.

```html_example

<div class="slideshow">
    <figure>
        <img src="../../Assets/System/Images/horsegate-ride-large1.jpg" />
    </figure>
    <figure>
        <img src="../../Assets/System/Images/horsegate-ride-large2.jpg" />
    </figure>
    <figure>
        <img src="../../Assets/System/Images/horsegate-ride-large3.jpg" />
    </figure>
</div>

```

*/
.slideshow-zoom {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  padding: 0 5%; }
  .slideshow-zoom span {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #fff; }
    .slideshow-zoom span .fa {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
    .slideshow-zoom span:hover {
      color: #db0c41; }
  .slideshow-zoom .slideshow {
    width: 70%;
    margin: 0 auto; }
  html.ie8 .slideshow-zoom, html.ie7 .slideshow-zoom {
    background: black; }

/*doc
---
title: Tabbed form
name: Tabbed form
category: Forms
---

```html_example
<section class="property-search show-for-medium-up">
    <h1>Property search</h1>
    <ul class="tabs" data-tab>
        <li class="tab-title active"><a href="#search-residential">Residential</a></li>
        <li class="tab-title"><a href="#search-commercial">Commercial</a></li>
    </ul>
    <div class="tabs-content">
        
        <div class="content active" id="search-residential">
        	<form action="">
                <dl class="form-fields">
                    <dt><label class="accessibility">Search area</label></dt>
                    <dd class="form-field--padded form-field--borderless">
                        <ul class="inline-list">
                          <li><input type="radio" name="residential" value="buy" id="residential-buy"><label for="residential-buy">Buy</label></li>
                          <li><input type="radio" name="residential" value="rent" id="residential-rent"><label for="residential-rent">Rent</label></li>
                          <li><input type="radio" name="residential" value="invest" id="residential-invest"><label for="residential-invest">Invest</label></li>
                      </ul>
                    </dd>
                    <dt><label class="accessibility">Search area</label></dt>
                    <dd class="form-field--borderless">
                        <div class="search-field clearfix">
                            <input type="search" placeholder="Country, region, city or postcode">
                            <input type="submit" class="search-icon" value="search">
                        </div>
                    </dd>

                </dl>
            </form>
        </div>

        <div class="content" id="search-commercial">

        	<form>
            	<dl class="form-fields">
                    <dt><label for="" class="accessibility">Type of property</label></dt>
                    <dd class="form-field--padded form-field--borderless">
                        <ul class="inline-list">
                          <li><input type="radio" name="residential" value="buy" id="residential-buy"><label for="residential-buy">Buy</label></li>
                          <li><input type="radio" name="residential" value="rent" id="residential-rent"><label for="residential-rent">Rent</label></li>
                          <li><input type="radio" name="residential" value="invest" id="residential-invest"><label for="residential-invest">Invest</label></li>
                      </ul>
                    </dd>
                    <dt><label class="accessibility">Search area</label></dt>
                    <dd class="form-field--borderless">
                        <div class="search-field clearfix">
                            <input type="search" placeholder="Country, region, city or postcode">
                            <input type="submit" class="search-icon" value="search">
                        </div>
                    </dd>
                </dl>
            </form>
            
        </div>
        
    </div>
</section>
```

*/
.property-search {
  background: #77787B;
  border: solid 1px #77787B;
  margin-bottom: 20px;
  width: 100%; }
  .column > .property-search label {
    margin-left: 0.38462rem;
    margin-right: 0.76923rem; }
    .column > .property-search label:last-of-type {
      margin-right: 0; }
  .property-search .loading {
    height: 37px !important;
    min-height: 34px !important;
    width: 34px;
    padding: 5px;
    border: solid 1px #c6c6c6;
    border-width: 1px 1px 1px 0; }
  .property-search .tab-title {
    margin: 0;
    width: 50%; }
  #banner .property-search {
    background: rgba(0, 0, 0, 0.7);
    margin: 0;
    max-width: 380px; }
    #banner .property-search .tab-title a {
      padding: 0.38462rem 1.15385rem;
      outline: none; }
    @media only screen and (min-width: 40.063em) {
      #banner .property-search {
        position: absolute;
        top: 2.30769rem;
        left: 4.61538rem;
        z-index: 1000;
        border: 1px solid #77787B; } }
    #banner .property-search .search input[type=text] {
      width: 84%; }
    #banner .property-search h1 {
      font-size: 1.38462rem; }
  .property-search h1 {
    color: #fff;
    font-size: 1.23077rem;
    margin: 0; }
    .property-search h1 a {
      color: #fff; }
  .property-search .search input[type=text] {
    font-size: 12px; }
  .property-search .search input[type=submit] {
    background: url(../Images/SearchSubmitBg.png);
    height: 37px;
    text-indent: -99999px;
    margin-bottom: 0;
    width: 35px; }
  .property-search.accordion {
    /*> .content {
    	padding-bottom: 20px;
    }*/ }
    .property-search.accordion h1 a {
      background: #77787B;
      display: block;
      cursor: default;
      font-size: 15px;
      padding: 0.53846rem; }
      .research-library .property-search.accordion h1 a {
        background: #8499a5; }
  .property-search:not(.accordion) h1 {
    padding: 0.53846rem; }

#officeSearch {
  max-width: 400px;
  margin-bottom: 50px; }

#officeSearch .tabs-content {
  height: 70px; }

#officeSearch .viewLink {
  margin-left: 3px;
  margin-top: 25px; }

#officeSearch .viewLink a {
  border: none;
  background: none;
  text-decoration: underline; }

#officeSearch .tab-title {
  margin: 0;
  width: 33.33%;
  outline: none; }

#officeSearch .ui-tabs-nav li.ui-tabs-active > a {
  background: white;
  color: #db0c41; }

#officeSearch .tab-title > a {
  margin-right: 1px;
  text-align: center;
  outline: none;
  padding-bottom: 10px;
  padding-top: 10px; }

#officeSearch .tab-title:last-child > a {
  margin-right: 0; }

/*doc
---
title: Tabbed form - Offices search
name: Tabbed form - Offices search
category: Forms
---

```html_example
<section class="property-search show-for-medium-up">
	<h1>Find an Office, Service or Person</h1>
	<ul data-tab="" class="tabs">
	    <li class="tab-title active"><a href="#search-office">Office</a></li>
	    <li class="tab-title"><a href="#search-services">Services</a></li>
	    <li class="tab-title"><a href="#search-person">Person</a></li>
	</ul>
	<div class="tabs-content">
	    <div id="search-office" class="content active">
			<form action="#">
				<label for="" class="accessibility">Search a country, town, postcode or area</label>
	        	<div class="search-field clearfix">
	                <input type="search" placeholder="Search a country, town, postcode or area">
	                <input type="submit" class="search-icon" value="search">
	            </div>
	        </form>
	    </div>

	    <div id="search-services" class="content">
	    	<form action="#">
	    		<label for="" class="accessibility">Search for a service line</label>
	        	<div class="search-field clearfix">
	                <input type="search" placeholder="Search for a service line">
	                <input type="submit" class="search-icon" value="search">
	            </div>
	        </form>
	    </div>

	    <div id="search-person" class="content">
	    	<form action="#">
	    		<label for="" class="accessibility">Search for people</label>
	        	<div class="search-field clearfix">
	                <input type="search" placeholder="Search for people">
	                <input type="submit" class="search-icon" value="search">
	            </div>
	        </form>
	    </div>

	</div>
</section>
```

*/
#banner {
  margin-bottom: 2.30769rem;
  position: relative; }
  @media only screen and (max-width: 40em) {
    #banner {
      margin: 0 -1.15385rem 2.30769rem;
      padding: 0 1.15385rem; } }
  @media only screen and (min-width: 40.063em) {
    #banner {
      margin: 0.07692rem;
      padding: 0.07692rem; } }

/*doc
---
title: Property filter
name: Property filter
category: Property pages
---

Filters, as seen on property listing pages.

```html_example

<section class="property-filter accordion inactive-for-desktop" data-accordion>
	<h1><a href="#collapsable-property-filter">Filter Results</a></h1>
	<div id="collapsable-property-filter" class="content">
	    <dl>
	        <dt><a href="#" data-dropdown="currency-dropdown-list">GBP<i class="fa fa-caret-down"></i></a></dt>
	        <dd>
	            <ul id="currency-dropdown-list" class="f-dropdown medium-block-grid-4" data-dropdown-content>
	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=aed" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (AED)<br>UAE
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=aud" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (AUD)<br>Australian Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=bhd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (BHD)<br>Bahrain Dinars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=bmd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (BMD)<br>Bermuda Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=bwp" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (BWP)<br>Botswana Pulas
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=cad" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (CAD)<br>Canadian Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=chf" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (CHF)<br>Swiss Francs
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=cny" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (CNY)<br>China Yuan Renminbi
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=czk" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (CZK)<br>Czech Republic Koruny
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=dkk" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (DKK)<br>Danish Krone
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=eur" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (EUR)<br>European Euros
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=gbp" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (GBP)<br>British Pounds
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=hkd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (HKD)<br>Hong Kong Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=idr" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (IDR)<br>Indonesia, Rupiahs
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=inr" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (INR)<br>Indian Rupees
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=jpy" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (JPY)<br>Japanese Yen
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=kes" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (KES)<br>Kenyan Shillings
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=khr" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (KHR)<br>Cambodia Riel
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=krw" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (KRW)<br>South Korean Won
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=kyd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (KYD)<br>Cayman Islands Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=mad" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (MAD)<br>Morocco Dirhams
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=mwk" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (MWK)<br>Malawi Kwachas
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=myr" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (MYR)<br>Malaysian ringgit
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=ngn" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (NGN)<br>Nigerian Naira
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=nok" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (NOK)<br>Norway Krone
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=nzd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (NZD)<br>New Zealand Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=omr" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (OMR)<br>Omani Rial
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=pln" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (PLN)<br>Polish Zloty
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=rub" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (RUB)<br>Russian Rubles
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=sgd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (SGD)<br>Singapore Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=thb" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (THB)<br>Thailand Baht
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=try" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (TRY)<br>Turkey Lira
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=twd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (TWD)<br>Taiwan New Dollar
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=tzs" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (TZS)<br>Tanzanian Shilling
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=uak" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (UAK)<br>Ukranian Currency
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=ugx" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (UGX)<br>Uganda Shillings
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=usd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (USD)<br>United States Dollars
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=vnd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (VND)<br>Vietnam Dong
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zar" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (ZAR)<br>South Africa Rand
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zmk" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (ZMK)<br>Zambia Kwacha
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zmw" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (ZMW)<br>Zambia Kwacha
	                        </div>
	                    </a>
	                </li>

	                <li class="column medium-3">
	                    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zwd" rel="nofollow" class="flag noBorder" id="hlCurrency">
	                        <div class="langPos">
	                            (ZWD)<br>Zimbabwean Dollars
	                        </div>
	                    </a>
	                </li>
	            </ul>
	            <select>
	                <option>
	                    (AED) UAE
	                </option>
	            </select>
	        </dd>
	    </dl>
	    <ul class="accordion" data-accordion>
	        <li class="active">
	            <a href="#priceFilter">Price</a>
	            <div class="content active" id="priceFilter">
	                <ul>
	                    <li>
	                        0 - 200,000
	                        <span>(0)</span>
	                    </li>
	                    <li>
	                        200 - 400,000
	                        <span>(0)</span>
	                    </li>
	                    <li>
	                        400 - 600,000
	                        <span>(0)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minprice=600000&amp;maxprice=800000&amp;curr=gbp">600 - 800,000</a>
	                        <span>(2)</span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minprice=800000&amp;maxprice=1000000&amp;curr=gbp">800 - 1M</a>
	                        <span>(1)</span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minprice=1000000&amp;maxprice=2000000&amp;curr=gbp">1M - 2M</a>
	                        <span>(13)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minprice=2000000&amp;maxprice=5000000&amp;curr=gbp">2M - 5M</a>
	                        <span>(9)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minprice=5000000&amp;maxprice=10000000&amp;curr=gbp">5M - 10M</a>
	                        <span>(3)</span>
	                    </li>
	                </ul>
	            </div>
	        </li>
	        <li>
	            <a href="#bedsFilter">Beds</a>
	            <div class="content" id="bedsFilter">
	                <ul>
	                    <li>
	                        1 bed only
	                        <span>(0)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbed=2&amp;maxbed=255">2 or more</a>
	                        <span>(26)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbed=3&amp;maxbed=255">3 or more</a>
	                        <span>(25)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbed=4&amp;maxbed=255">4 or more</a>
	                        <span>(23)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbed=5&amp;maxbed=255">5 or more</a>
	                        <span>(18)</span>
	                    </li>
	                </ul>
	            </div>
	        </li>
	        <li>
	            <a href="#bathroomsFilter">Bathrooms</a>
	            <div class="content" id="bathroomsFilter">
	                <ul>
	                    <li>
	                        1 bath only
	                        <span>
	                            (0)
	                        </span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbath=2&amp;maxbath=255">2 or more</a>
	                        <span>
	                            (25)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbath=3&amp;maxbath=255">3 or more</a>
	                        <span>
	                            (24)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbath=4&amp;maxbath=255">4 or more</a>
	                        <span>
	                            (17)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;minbath=5&amp;maxbath=255">5 or more</a>
	                        <span>
	                            (10)
	                        </span>
	                    </li>
	                </ul>
	            </div>
	        </li>
	        <li>
	            <a href="#typeFilter">Property type</a>
	            <div class="content" id="typeFilter">
	                <ul>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53">Residential</a>
	                        <ul>
	                            <li>
	                                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403">Flat</a>
	                                <span>(3)</span>
	                            </li>
	                            <li>
	                                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=47">House</a>
	                                <span>(25)</span>
	                            </li>
	                            <li>
	                                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=48,92,53">Land</a>
	                                <span>(2)</span>
	                            </li>
	                        </ul>
	                    </li>
	                </ul>
	            </div>
	        </li>
	        <li>
	            <a href="#floorFilter">Floor area</a>
	            <div class="content" id="floorFilter">
	                <ul>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;minfloor=0&amp;maxfloor=47">0 - 500 sq ft</a>
	                        <span>(2)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;minfloor=92&amp;maxfloor=233">1,001 - 2,500 sq ft</a>
	                        <span>(3)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;minfloor=232&amp;maxfloor=465">2,501 - 5,000 sq ft</a>
	                        <span>(15)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;minfloor=464&amp;maxfloor=930">5,001 - 10,000 sq ft</a>
	                        <span>(8)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;minfloor=929&amp;maxfloor=1859">10,001 - 20,000 sq ft</a>
	                        <span>(1)</span>
	                    </li>
	                </ul>
	            </div>
	        </li>
	        <li>
	            <a href="#featuresFilter">Features</a>
	            <div class="content" id="featuresFilter">
	                <ul>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=214">Balcony</a>
	                        <span>(3)</span>
	                    </li>
	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=232">Communal Garden</a>
	                        <span>
	                            (4)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=237">Conservatory</a>
	                        <span>
	                            (1)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=265">Garden</a>
	                        <span>
	                            (23)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=278">Land</a>
	                        <span>
	                            (5)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=18">Leisure Facilities</a>
	                        <span>
	                            (2)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=285">Listed</a>
	                        <span>
	                            (1)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=299">New Build</a>
	                        <span>
	                            (1)
	                        </span>
	                    </li>

	                    <li>
	                        <a id="Main_cachedResults_filter_rptFeatures_hlFeatureLink_8" title="Outbuildings" rel="nofollow" href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=22">Outbuildings</a>
	                        <span>
	                            (3)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=317">Patio/Terrace</a>
	                        <span>
	                            (4)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=318">Penthouse</a>
	                        <span>
	                            (3)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=24">Period</a>
	                        <span>
	                            (6)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=25">Porter / Concierge</a>
	                        <span>
	                            (2)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=508">Private Parking</a>
	                        <span>
	                            (19)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=332">Purpose Built</a>
	                        <span>
	                            (3)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=343">Roof Terrace</a>
	                        <span>
	                            (3)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=351">Secondary...</a>
	                        <span>
	                            (5)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=371">Swimming Pool</a>
	                        <span>
	                            (6)
	                        </span>
	                    </li>

	                    <li>
	                        <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;type=94,403,47,48,92,53&amp;feat=372">Tennis Court</a>
	                        <span>
	                            (2)
	                        </span>
	                    </li>


	                </ul>
	            </div>
	        </li>
	    </ul>
	</div>
</section>

```

*/
.property-filter {
  margin-bottom: 20px; }
  @media only screen and (min-width: 40.063em) {
    .property-filter h2 {
      float: left; } }
  .property-filter dl {
    margin: 0;
    line-height: 23px; }
    .property-filter dl dd {
      margin: 0; }
    .property-filter dl dt {
      font-weight: normal; }
      .property-filter dl dt a {
        padding: 5px 0; }
      @media only screen and (max-width: 40em) {
        .property-filter dl dt a:hover {
          color: #db0c41; } }
  .property-filter ul {
    clear: both;
    list-style: none;
    margin: 0; }
    .property-filter ul.accordion > li > a {
      border-bottom: solid 1px #c6c6c6;
      display: block;
      color: #333333;
      padding: 10px 0; }
      .property-filter ul.accordion > li > a:before {
        content: "\f067";
        font-family: FontAwesome;
        font-size: 14px;
        display: inline-block;
        padding-right: 10px; }
    .property-filter ul.accordion > li.active > a:before {
      content: "\f068"; }
    .property-filter ul.accordion > li .content {
      padding: 10px 0; }
      .property-filter ul.accordion > li .content li {
        color: #c6c6c6; }
        .property-filter ul.accordion > li .content li span {
          float: right; }
        .property-filter ul.accordion > li .content li a {
          color: #333333; }
          .property-filter ul.accordion > li .content li a:hover {
            color: #db0c41; }

/*doc
---
title: Property Features
name: Property Features
category: Property pages
---

```html_example

<hr class="show-for-small-up">
<ul class="property-features row">
    <li class="bed column small-3 medium-4 large-2">
        6-7 <span>Bedrooms</span>
    </li>
    <li class="bath column small-3 medium-4 large-2">
        6<span>Bathrooms</span>
    </li>
    <li class="reception column small-3 medium-4 large-2">
        6<span>Receptions Rooms</span>
    </li>
    <li class="acres column small-3 medium-4 large-2">
        .75ac <span>Acres</span>
    </li>
    <li class="tennis column small-3 medium-4 large-2">
        Tennis
    </li>
    <li class="swimming column small-3 medium-4 large-2">
        Swimming pool
    </li>
</ul>
<hr>

```

*/
.property-features {
  list-style: none; }
  .property-features.row {
    margin-bottom: -30px; }
  .property-features li {
    background: url(../Images/bedrooms-features-icon.png) no-repeat center top;
    font-size: 11px;
    padding-top: 30px;
    padding-bottom: 15px;
    text-align: center; }
    .property-features li span {
      display: none; }
    .property-features li.bath {
      background-image: url(../Images/bathrooms-features-icon.png); }
    .property-features li.reception {
      background-image: url(../Images/reception-features-icon.png); }
    .property-features li.acres {
      background-image: url(../Images/acres-features-icon.png); }
    .property-features li.tennis, .property-features li.swimming {
      text-indent: -99999px; }
    .property-features li.tennis {
      background-image: url(../Images/tennis-features-icon.png); }
    .property-features li.swimming {
      background-image: url(../Images/swimming-features-icon.png); }
    @media only screen and (max-width: 40em) {
      .property-features li:nth-of-type(4n+1) {
        clear: both; }
      .property-features li:nth-last-of-type(-n+4) {
        padding-bottom: 0; } }

@media only screen and (max-width: 40em) {
  h1.property-title {
    margin-top: 1.53846rem; } }

#property-results .row:before, #property-results .row:after {
  content: " ";
  display: table; }
#property-results .row:after {
  clear: both; }
@media only screen and (min-width: 40.063em) and (max-width: 62em) {
  #property-results .row > div:nth-child(odd) {
    clear: both; } }
@media only screen and (min-width: 62.001em) {
  #property-results .row > div:nth-of-type(3n+1) {
    clear: both; } }

#map-details {
  display: none;
  height: 300px;
  margin-bottom: 1.15385rem;
  position: relative;
  overflow: hidden;
  width: 100%; }

/*doc
---
title: Intro Text
name: Intro Text
category: Basics
---

Intro text used on the homepage.

```html_example

<div class="intro">
    <h1>Welcome to Knight Frank in the United Kingdom</h1>
    <h2>The world's leading independent real estate consultancy</h2>
</div>

```

*/
.row p a:link, .row p a:visited {
  color: #565656;
  outline-style: none;
  text-decoration: underline; }

@media only screen and (max-width: 40em) {
  .intro {
    margin-bottom: 0.92308rem; } }
.intro h1, .intro h2 {
  color: #aea79f;
  font-family: "KfDisplayReg", Helvetica, Arial, sans-serif; }
.intro h1 {
  font-size: 25px; }
  @media only screen and (min-width: 40.063em) {
    .intro h1 {
      font-size: 35px; } }

fieldset.appraisal dt {
  display: none; }
fieldset.appraisal dd {
  margin-bottom: 0 !important; }
  fieldset.appraisal dd input {
    margin-bottom: 0; }

fieldset select {
  margin-bottom: 1px !important; }

fieldset .formDropDown {
  display: inline-block !important; }

fieldset .formDropDown label {
  padding: 0.61538rem 1.15385rem !important;
  color: #A9A9A9 !important; }

/*doc
---
title: Price dropdown
name: Price dropdown
category: Property pages
---

Price drop down as it appears on the Property detail page.

```html_example

<dl class="price">
    <dt><span>Guide Price</span> <a href="#" data-dropdown="price-dropdown-list">£6,000,000<i class="fa fa-caret-down"></i></a></dt>
    <dd>
        <ul id="price-dropdown-list" class="f-dropdown medium-block-grid-4" data-dropdown-content>
            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=aed" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (AED)<br>UAE
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=aud" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (AUD)<br>Australian Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=bhd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (BHD)<br>Bahrain Dinars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=bmd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (BMD)<br>Bermuda Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=bwp" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (BWP)<br>Botswana Pulas
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=cad" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (CAD)<br>Canadian Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=chf" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (CHF)<br>Swiss Francs
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=cny" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (CNY)<br>China Yuan Renminbi
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=czk" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (CZK)<br>Czech Republic Koruny
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=dkk" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (DKK)<br>Danish Krone
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=eur" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (EUR)<br>European Euros
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=gbp" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (GBP)<br>British Pounds
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=hkd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (HKD)<br>Hong Kong Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=idr" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (IDR)<br>Indonesia, Rupiahs
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=inr" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (INR)<br>Indian Rupees
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=jpy" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (JPY)<br>Japanese Yen
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=kes" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (KES)<br>Kenyan Shillings
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=khr" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (KHR)<br>Cambodia Riel
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=krw" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (KRW)<br>South Korean Won
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=kyd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (KYD)<br>Cayman Islands Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=mad" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (MAD)<br>Morocco Dirhams
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=mwk" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (MWK)<br>Malawi Kwachas
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=myr" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (MYR)<br>Malaysian ringgit
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=ngn" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (NGN)<br>Nigerian Naira
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=nok" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (NOK)<br>Norway Krone
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=nzd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (NZD)<br>New Zealand Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=omr" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (OMR)<br>Omani Rial
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=pln" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (PLN)<br>Polish Zloty
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=rub" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (RUB)<br>Russian Rubles
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=sgd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (SGD)<br>Singapore Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=thb" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (THB)<br>Thailand Baht
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=try" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (TRY)<br>Turkey Lira
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=twd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (TWD)<br>Taiwan New Dollar
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=tzs" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (TZS)<br>Tanzanian Shilling
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=uak" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (UAK)<br>Ukranian Currency
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=ugx" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (UGX)<br>Uganda Shillings
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=usd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (USD)<br>United States Dollars
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=vnd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (VND)<br>Vietnam Dong
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zar" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (ZAR)<br>South Africa Rand
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zmk" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (ZMK)<br>Zambia Kwacha
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zmw" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (ZMW)<br>Zambia Kwacha
                    </div>
                </a>
            </li>

            <li class="column medium-3">
                <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot?buyrent=buy&amp;curr=zwd" rel="nofollow" class="flag noBorder" id="hlCurrency">
                    <div class="langPos">
                        (ZWD)<br>Zimbabwean Dollars
                    </div>
                </a>
            </li>
        </ul>
        <select>
            <option>
                (AED) UAE
            </option>
        </select>
    </dd>
</dl>

```

*/
dl.price {
  font-size: 1.38462rem; }
  dl.price span {
    font-weight: 100;
    font-size: 13px; }
  @media only screen and (min-width: 40.063em) {
    dl.price + .cta {
      margin-bottom: 15px; } }

span.offer {
  background-color: rgba(219, 12, 65, 0.8);
  color: #fff;
  position: absolute;
  left: 1.15385rem;
  right: 1.15385rem;
  padding: 5px 0;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
  font-size: 0.92308rem;
  font-weight: bold;
  top: 0;
  z-index: 100; }
  @media only screen and (max-width: 40em) {
    span.offer {
      top: 1.53846rem; } }
  span.offer html.ie8 {
    background-color: #db0c41; }

.sort-by {
  padding: 5px 0; }
  @media only screen and (min-width: 40.063em) {
    .sort-by {
      float: right; } }

.ref-no {
  padding: 10px 0; }

a.image-link {
  display: block; }
  a.image-link img {
    max-width: 100%; }

.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
  background-color: #ccc; }

.ui-widget-content a:hover {
  background-color: #ccc; }

.underMap {
  margin-top: 30px; }

* {
  outline: none; }

.ui-spinner {
  position: relative;
  display: inline-block;
  padding: 0;
  vertical-align: middle; }

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  margin: .2em 0;
  vertical-align: middle;
  margin-left: .4em;
  margin-right: 22px; }

.ui-spinner-button {
  width: 16px;
  height: 60%;
  font-size: .9em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: -25px; }

/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
  border-top: none;
  border-bottom: none;
  border-right: none; }

/* vertically center icon */
.ui-spinner .ui-icon {
  position: absolute;
  margin-top: -8px;
  top: 34%;
  left: 0; }

.ui-spinner-up {
  top: 0; }

.ui-spinner-down {
  bottom: 0; }

.full-width {
  width: 100%; }

/* SEARCH BOX DROPDOWN */
.searchInputBox {
  position: relative; }

.ui-autocomplete {
  position: absolute !important;
  cursor: default;
  background-color: #f9f9f9 !important;
  border: 3px solid #e9e9e9;
  /*top: 36px !important;*/
  width: 100%;
  z-index: 100; }

.ui-menu .ui-menu-item {
  clear: left;
  float: left;
  margin: 0;
  padding: 2px;
  width: 100%; }

.ui-menu .ui-menu-item a {
  background-color: #EFEFEF;
  display: block;
  margin: 0;
  padding: 5px;
  text-decoration: none;
  width: 100%;
  font-weight: normal;
  text-align: left;
  height: auto; }

/* PROPERTY DETAILS MAPS */
#mapDetails {
  height: 300px;
  width: 300px;
  display: none; }

/* PROPERTY SEARCH BOX */
.property-search .tabs .tab-title {
  width: 50%;
  margin: 0;
  text-align: center; }

/* GRID VIEW / MAP VIEW */
.tabs.alternative .tab-title .active {
  color: #db0c41; }

/* PAGINATION */
.pagination li {
  background-color: #f9f9f9;
  float: left;
  margin-right: -1px;
  position: relative; }

.pagination li a {
  display: block;
  padding: 0.6em 1.2em;
  border: 1px solid #ebebeb;
  text-decoration: none;
  color: #999999; }

.pagination li a.active {
  background-color: #ffffff; }

.pagination li a:hover {
  background-color: #f1f1f1; }

.pagination .arrow {
  border: none; }

.pagination .arrow a {
  /*background: none;
  border: none;*/ }

.pagination .arrow a:hover {
  background: none; }

/* SLIDESHOW */
.slideshow .fa-chevron-left, .slideshow .fa-chevron-right {
  position: absolute;
  display: block;
  height: 76px;
  width: 50px;
  cursor: pointer;
  bottom: 47%;
  padding: 20px;
  border: none;
  outline: none;
  font-size: 2.92308rem;
  color: rgba(219, 12, 65, 0.7); }

.slideshow .fa-chevron-left {
  left: 0px;
  padding-left: 0px; }

.slideshow .fa-chevron-right {
  right: 0px;
  padding-right: 0px; }

/* NAVIGATION */
.primary-nav .nav-sectors .title {
  border-top: 1px dotted #db0c41;
  padding-top: 5px; }
.primary-nav .nav-search {
  background: #6C6C6C;
  color: #ffffff;
  min-height: 203px; }
  .primary-nav .nav-search .title {
    border-bottom: 1px dotted #ffffff;
    padding-top: 5px; }
  .primary-nav .nav-search a,
  .primary-nav .nav-search a:not(.title) {
    color: #ffffff; }
  .primary-nav .nav-search a:hover {
    text-decoration: underline;
    color: #ffffff !important; }
.primary-nav .nav-search .item-group,
.primary-nav .nav-sectors .item-group {
  padding: 0; }

/* SEARCH */
.property-search-container {
  border: 1px solid #cccccc;
  height: 39px; }

/*-------------------------------------------------------*/
span#cpMain_HtmlPropertyList {
  margin-bottom: 0; }

.column.medium-6.large-pull-3.large-2 {
  padding-left: 5px;
  padding-right: 5px; }

.bannerBlack {
  color: black !important;
  text-shadow: none !important; }

.contactName h3 > a {
  margin: 0;
  color: #db0c41;
  text-decoration: none !important; }

@media only screen and (min-width: 40.063em) {
  .peopleList h4 {
    font-size: 12px !important; } }

.bullet li, .redArrow li {
  list-style: none; }

.redArrow li a {
  color: #000 !important;
  display: block;
  margin-bottom: 7px;
  padding: 0 0 0 10px;
  text-decoration: none;
  width: 220px;
  font-weight: bold; }

.bullet li:before, .redArrow li:before {
  content: "\f0da";
  color: #db0c41;
  font-family: FontAwesome;
  font-size: 14px;
  display: block;
  position: relative;
  max-width: 0px;
  max-height: 0px;
  left: -10px;
  top: -0px; }

#searchBoxMain #collapsable-property-search {
  padding-bottom: 0; }

/*doc
---
title: Related areas
name: Related areas
category: Property pages
---

```html_example
<p>
    More properties in:
    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire/ascot">
        Ascot
    </a>|
    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east/berkshire">
        Berkshire
    </a>|
    <a href="http://search.knightfrank.co.uk/property-for-sale/uk/south-east">
        South East
    </a>
</p>
```

*/
.slidesView {
  text-align: right;
  z-index: 1000;
  font-weight: bold; }
  @media only screen and (max-width: 40em) {
    .slidesView {
      position: absolute;
      bottom: 27px;
      right: 39px; } }
  @media only screen and (min-width: 40.063em) {
    .slidesView {
      position: absolute;
      top: 5px;
      right: 14px;
      padding-top: 4px; } }

.slidesView a {
  color: #fff;
  font-size: 16px;
  text-decoration: none; }

.slidesView a:hover {
  text-decoration: underline; }

.twitter-container {
  padding-top: 1.53846rem; }
  .twitter-container iframe {
    width: 100%; }

/***********************************************************Bio Page***********************************************************/
#people-biog {
  min-height: 500px;
  margin-bottom: 40px; }

.pb-contactDetails {
  display: block;
  float: left;
  line-height: 1.6em;
  font-size: 13px; }

.pb-contactDetails [class^="icon-"]:before, [class*=" icon-"]:before {
  vertical-align: middle; }

.pb-contactDetails .contactDetails {
  margin-top: 10px; }

.contactDetails .fa {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
  font-family: verdana, arial; }

.pb-contactDetails img {
  height: 125px;
  float: left;
  width: 87px;
  display: inline-block;
  margin-left: 15px;
  border-right: 1px solid rgba(182, 182, 182, 0.17);
  border-left: 2px solid rgba(182, 182, 182, 0.17);
  border-top: 2px solid rgba(182, 182, 182, 0.17);
  border-bottom: 1px solid rgba(182, 182, 182, 0.17); }

.pb-contactDetails h2 {
  margin: 0 0 4px 0;
  padding: 0;
  font-size: 1.6em;
  line-height: 1.6em;
  clear: none;
  color: #333333;
  font-weight: bold; }

.pb-info {
  margin-left: 20px;
  display: inline-block; }

.pb-workArea {
  display: inline-block;
  text-align: right;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  float: right;
  color: #333333; }
  @media only screen and (max-width: 40em) {
    .pb-workArea {
      text-align: left; } }
  @media only screen and (min-width: 40.063em) {
    .pb-workArea {
      margin-top: 36px; } }

.pb-workArea span {
  font-size: 15px;
  font-weight: bold; }

article.panel h1, article.panel h2 {
  margin: 0; }

.pb-about p {
  padding: 5px 10px 5px 10px;
  text-align: justify;
  font-size: 13px;
  background-color: white;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
  height: auto;
  border-left: 1px solid rgba(238, 238, 238, 0.4);
  border-top: 1px solid rgba(238, 238, 238, 0.4);
  border-bottom: 2px solid rgba(238, 238, 238, 0.4);
  border-right: 2px solid rgba(238, 238, 238, 0.4); }

.pb-tit {
  margin-top: 5px;
  margin-bottom: 5px;
  color: #333333;
  font-family: Verdana,Geneva,sans-serif;
  font-size: 1.3em; }

.fa-phone:before, .fa-envelope:before, fa-twitter:before, fa-linkedin:before, fa-vcard:before {
  margin-right: 5px;
  font-size: 17px;
  color: #77787b;
  font-family: FontAwesome; }

.icon-vcard:before {
  margin-right: 5px;
  font-size: 17px;
  color: #77787b;
  font-family: 'fontello';
  content: '\e83f'; }

.icon-vcard:before {
  margin-left: 0 !important; }

@font-face {
  font-family: 'fontello';
  src: url("../font/fontello.eot?40933571");
  src: url("../font/fontello.eot?40933571#iefix") format("embedded-opentype"), url("../font/fontello.svg?40933571#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-vcard:before {
  content: '\e83f'; }

/* '' */
.pb-contactDetails a:link, .pb-contactDetails a:visited {
  text-decoration: none;
  color: #333333; }

.pb-contactDetails a:hover, .pb-contactDetails a:focus, .pb-contactDetails a:active {
  color: #db0c41; }

.pb-contactDetails dt:before {
  margin-right: 10px;
  font-size: 1.2em;
  color: #333333; }

#noresults {
  background-color: #EFEFEF;
  display: none;
  margin: 0;
  padding-left: 10px;
  text-decoration: none;
  width: 370px;
  color: #666;
  border: 5px double rgba(195, 195, 195, 0.57);
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.2em;
  line-height: 30px; }

#col3 #officeSearch {
  background: none repeat scroll 0 0 #77787B;
  height: 110px;
  margin: 0;
  width: 230px;
  border: 1px solid #77787b; }

#col3 h1 {
  color: #fff;
  padding: 0 8px 0;
  font-size: 11px;
  line-height: 20px; }
  #col3 h1:not(.research-library) {
    padding: 0; }

.safari #col3 h1 {
  line-height: 21px; }

#col3 #officeSearch ul.ostabs li {
  height: 32px;
  line-height: 32px; }

#col3 #officeSearch ul.ostabs li a {
  width: 76px;
  font-size: 11px; }

#col3 .ui-tabs .ui-tabs-nav, #col3 .ui-widget-header {
  padding: 0; }

#col3 #officeSearch .tab_container {
  padding: 5px 0 5px 5px;
  width: 225px;
  background: #FFFFFF; }

#col3 #officeSearch .tab_container #osTabs-0, #col3 #officeSearch .tab_container #osTabs-1, #col3 #officeSearch .tab_container #osTabs-2 {
  width: 218px;
  height: 30px;
  line-height: 30px; }

#col3 input.osOfficeSearchField, input.osServicesSearchField, input.osPersonSearchField {
  width: 191px;
  font-size: 12px;
  background-color: #FFFFFF; }

#col3 input.osOfficegoSearch, input.osServicesgoSearch, input.osPersongoSearch {
  background: url("/library/common/images/searchGlas.png") no-repeat scroll white;
  height: 18px;
  width: 17px; }

#col3 #noresults {
  width: 177px; }

#cole .ui-autocomplete {
  width: 190px !important; }

#col3 .ui-menu .ui-menu-item a {
  width: 175px; }

/*****************************************************Bio Page End***********************************************************/
form {
  height: 100%; }

.tabs-content .search {
  margin: 3.46154rem 1.15385rem 1.15385rem; }

/***************************************************** right off canvas menu fixing***********************************************************/
aside.right-off-canvas-menu {
  height: 100% !important; }

/***************************************************** right off canvas menu fixing - end *****************************************************/
/*************************** Property List Controler*******************************/
.forcedWidth1000px {
  width: 1000px;
  position: relative; }

.prlContainer, .prlContainerPL, .prlContainerPL2Col {
  background: url("/library/common/images/gradUp.jpg") repeat-x scroll center bottom transparent;
  border: 1px solid #EEEEEE;
  display: inline-block;
  height: auto;
  margin: 8px 5px;
  padding: 13px;
  width: 208px; }

.prlContainer a, .prlContainerPL a {
  font-size: 0.8em;
  text-decoration: none;
  color: #999; }

.prlContainer a.clickthrough, .prlContainerPL a.clickthrough {
  font-size: 0.9em; }

.prlContainer h3, .prlContainerPL h3 {
  font-size: 1.1em;
  margin: 3px;
  padding-top: 0; }

.property-listing a div.description {
  padding: 13px;
  margin: -3px 0 0 3px;
  display: none;
  font-size: 1.1em;
  color: #999;
  border: 1px solid #ccc;
  background-color: #fff;
  width: 550px;
  position: absolute;
  padding: 20px; }

.property-listing a:hover div.description {
  display: none;
  z-index: 1; }
  @media only screen and (min-width: 62.001em) {
    .property-listing a:hover div.description {
      display: block; } }

.property-listing a:hover div.description:before {
  border: solid;
  border-color: #fff transparent;
  opacity: 0.8;
  border-width: 0 10px 10px 10px;
  top: -7px;
  content: "";
  left: 8%;
  position: absolute;
  z-index: 99; }

.property-listing:nth-child(3n-1) a:hover div.description {
  display: none;
  z-index: 1;
  right: 0;
  margin: -3px 17px 0 0px; }
  @media only screen and (min-width: 62.001em) {
    .property-listing:nth-child(3n-1) a:hover div.description {
      display: block; } }

.property-listing:nth-child(3n-1) a:hover div.description:before {
  display: none;
  z-index: 1;
  right: 0;
  margin: -3px 17px 0 0px;
  border: solid;
  border-color: #fff transparent;
  opacity: 0.8;
  border-width: 0 10px 10px 10px;
  top: -4px;
  content: "";
  left: 94%;
  position: absolute;
  z-index: 99; }
  @media only screen and (min-width: 62.001em) {
    .property-listing:nth-child(3n-1) a:hover div.description:before {
      display: block; } }

.property-listing p span, .prlContainerPL p span {
  display: block;
  font-size: 1.5em;
  text-align: left;
  width: 100%; }

.property-listing p strong, .prlContainerPL p strong {
  display: block; }

.property-listing article {
  overflow: visible !important; }

.property-listing .inner {
  overflow: hidden; }

.column.medium-6.large-4.property-listing {
  position: relative;
  padding-left: 1.15385rem;
  padding-right: 1.15385rem;
  float: left;
  	/*@media only screen and (max-width: 40em) {
  
  		&:nth-child(odd) {
  			padding-left: 0 !important;
  		}
  
  		&:nth-child(even) {
  			padding-right: 0 !important;
  		}
  	}
  
  	@media only screen and (min-width:40.063em) and (max-width:62em) {
  
  		&:nth-child(odd) {
  			padding-left: 0 !important;
  		}
  
  		&:nth-child(even) {
  			padding-right: 0 !important;
  		}
  	}
  
  	@media only screen and (min-width:62.001em) {
  
  		&:nth-child(3n) {
  			padding-right: 0 !important;
  		}
  
  		&:nth-child(3n+1) {
  			padding-left: 0 !important;
  		}
  	}*/ }

/*************************** Property List Controler End*******************************/
#officeSearch .tabs-content .search {
  margin: 1.46154rem 1.15385rem 1.15385rem; }

section.row.main {
  min-height: 530px; }

.pagination {
  padding: 0px !important; }

ul.pagination li.selected {
  background: #f1f1f1; }

ul.pagination {
  float: right;
  margin-top: 0;
  height: 4.84615rem !important; }

ul.pagination li a {
  padding: 0.53846rem 0.7rem 0.53846rem !important; }

#noresults {
  position: absolute; }

#searchBox .ui-autocomplete {
  z-index: 1 !important; }

.column > .property-search label {
  margin-left: 0 !important;
  margin-right: 0.4rem !important; }

@media only screen and (min-width: 62.001em) {
  .tabs dd > a, .tabs .tab-title > a {
    padding: 0.38462rem;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px; } }
/*************************** Publications *******************************/
.requestCopy {
  text-align: right; }

.requestCopy img {
  height: 65px;
  margin: 15px 0; }

.pwLogo {
  margin: 15px 0 25px 0;
  text-align: center; }

#logo {
  margin: 22px 0;
  height: 36px; }

.publicationNav .sub-nav li {
  margin-right: 0;
  width: 20%; }

.publicationNav .sub-nav li a {
  font-family: "KfDisplayReg", Helvetica, Arial, sans-serif !important; }
  @media only screen and (min-width: 40.063em) {
    .publicationNav .sub-nav li a {
      text-align: center;
      font-family: "KfDisplayReg", Helvetica, Arial, sans-serif !important; } }

.publicationSlider figcaption {
  display: none; }

.introAH, .introLondon, .introCountry, .introInternational, .introFilms, .introLifeStyle, .intros, .introWelcome {
  display: inline-block;
  width: 100%; }

.introAH {
  border-top: 1px solid #dfeaf0;
  border-bottom: 1px solid #dfeaf0; }

.introAH p a, .introAHLondon p, .introAHCountry p, .introAHInternational p, .introAHFilms p, .introAHLifestyle p, .introLondon p a, .introCountry p a, .introWelcome p a, .introInternational p a, .introFilms p, .introLifeStyle p, .intros p, .introLondon p a {
  background-color: #bcbec0;
  font-size: 2.1em;
  margin: 15px 0;
  padding: 20px 0;
  text-align: center;
  color: #333333;
  display: block; }

.introAHCountry p {
  background-color: #8CA39F !important; }

.introAHInternational p {
  background-color: #9ED8D2 !important; }

.introAHFilms p {
  background-color: #bcbec0 !important; }

.introAHLifestyle p {
  background-color: #bcbec0  !important; }

.introLondon p a, .introCountry p a, .introInternational p a, .introWelcome p a {
  padding: 5px;
  margin: 15px 10px;
  font-size: 1.5em; }

.london, .country, .international {
  border-bottom: 1px solid #dfeaf0;
  border-top: 1px solid #dfeaf0; }

.introLondon p a, .introAHLondon p, .introAHCountry p, .introAHInternational p, .introAHFilms p, .introAHLifestyle p {
  background-color: #a4bfe4; }

.introCountry p a {
  background-color: #8CA39F; }

.introInternational p a {
  background-color: #9ED8D2; }

.introWelcome p a {
  background-color: #bcbec0 !important; }

.sub-nav, .introAH p, .introAHLondon p, .introAHCountry p, .introAHInternational p, .introAHFilms p, .introAHLifestyle p, .one-col p, .top20 p, .introLondon p, .introCountry p, .introWelcome p, .introInternational p, .introFilms, .introLifeStyle, .intros {
  font-family: "KfDisplayReg", Helvetica, Arial, sans-serif !important;
  margin-bottom: 0; }

.introAHLondon, .introAHCountry, .introAHInternational, .introAHFilms, .introAHLifestyle {
  padding-bottom: 20px; }

.introAH span {
  color: #ffffff; }

.publication a {
  text-decoration: none !important; }

.one-col {
  border-right: 1px solid #dfeaf0;
  display: inline-block;
  vertical-align: top;
  position: relative; }
  @media only screen and (max-width: 62em) {
    .one-col {
      border-right: 0; } }

.top20 p {
  background-color: #ffffff;
  color: #333333;
  font-size: 2.1em;
  margin: 4px 0;
  padding: 20px 0;
  text-align: center; }

.fullWidthPic {
  margin-bottom: 40px !important; }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .fullWidthPic {
      margin-left: 43px !important; } }

.fullWidthPic img {
  width: 100% !important; }

.fullWidthPic p {
  margin-bottom: 0.53846rem !important; }

.fullWidthPic p a {
  color: #333333;
  font-size: 1em;
  font-weight: bold;
  margin: 5px 0;
  padding: 0;
  text-transform: uppercase; }

.publication .fa {
  display: none !important; }

.publication .slideshow .slick-dots li.slick-active button:before {
  background: #81acc4; }

.publication .slideshow {
  margin-bottom: 3.30769rem !important; }
  @media only screen and (min-width: 40.063em) {
    .publication .slideshow {
      margin-bottom: 1.30769rem !important; } }

.publication #copy {
  color: #999;
  font-size: 0.9em;
  font-weight: normal;
  margin: 5px 0;
  text-align: center; }

.publication .sub-nav {
  padding-top: 0 !important; }

#footer {
  border-top: 2px solid #dfeaf0; }

.publication .slidesView {
  position: inherit !important; }

.publication .news-map {
  padding-bottom: 0 !important; }

.publication .textContent {
  padding-top: 20px;
  padding-bottom: 20px; }

.publication .textContent p {
  text-align: justify; }

.textContentEnd {
  font-weight: bold; }

@media only screen and (max-width: 40em) {
  .publication .textSep {
    border-bottom: 1px solid #dfeaf0; } }

.publication .sub-nav {
  border: none !important; }

.publication .sub-nav li a:hover, .publication .sub-nav li.active a {
  background: gainsboro !important; }

@media only screen and (min-width: 40.063em) and (max-width: 62em) {
  .lifestyleExp {
    max-width: 567px; } }

.publication .ShowHide {
  display: none; }

#mkf-wrapper {
  height: 0;
  overflow: hidden;
  position: relative;
  /*@media only screen and (min-width:62.001em) {
  	margin-bottom:						25px;
  }*/ }

#mkf-content {
  height: 100%;
  overflow: hidden;
  position: relative; }
  #mkf-content iframe {
    border: none; }

#mkf-alerts {
  left: 0;
  margin-top: -35px;
  position: absolute;
  right: 0;
  top: 100%; }
  #mkf-alerts .mfk-alerts-header {
    background: #db0c41;
    height: 35px; }
    #mkf-alerts .mfk-alerts-header button {
      border: 0;
      cursor: pointer;
      height: 35px;
      line-height: 35px; }
      #mkf-alerts .mfk-alerts-header button img {
        vertical-align: top; }
  #mkf-alerts .mkf-page {
    left: 0; }

/*doc
---
title: A-Z pagination
name: A-Z pagination
category: A-Z listing
---

Anchor links to the A-Z listing items are displayed as links within a list with the class of "a-z__pagination".

For small screens, the links are displayed as blocks, 44px square and styled like buttons to give easy touch "click" for mobile visitors.

```html_example
<ul class="a-z__pagination">
    <li><a href="">A</a></li>
    <li><a href="">B</a></li>
    <li><a href="">C</a></li>
    <li><a href="">D</a></li>
    <li><a href="">E</a></li>
    <li><a href="">F</a></li>
    <li><a href="">G</a></li>
    <li><a href="">H</a></li>
    <li><a href="">I</a></li>
    <li><a href="">J</a></li>
    <li><a href="">K</a></li>
    <li><a href="">L</a></li>
    <li><a href="">M</a></li>
    <li><a href="">N</a></li>
    <li><a href="">O</a></li>
    <li><a href="">P</a></li>
    <li><a href="">Q</a></li>
    <li><a href="">R</a></li>
    <li><a href="">S</a></li>
    <li><a href="">T</a></li>
    <li><a href="">U</a></li>
    <li><a href="">V</a></li>
    <li><a href="">W</a></li>
    <li><a href="">X</a></li>
    <li><a href="">Y</a></li>
    <li><a href="">Z</a></li>
</ul>
```

*/
.a-z__pagination {
  list-style: none;
  margin: 0 auto 1.30769rem auto;
  margin-left: 0;
  margin-right: 0;
  padding: 0; }
  .a-z__pagination > li {
    margin-right: 0.5rem;
    margin-bottom: 1rem;
    display: inline; }
  .a-z__pagination a {
    text-decoration: underline; }
    @media only screen and (max-width: 40em) {
      .a-z__pagination a {
        display: inline-block;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-weight: bold;
        background-color: #db0c41;
        color: white;
        margin-bottom: 2.30769rem;
        text-decoration: none; }
        .a-z__pagination a:hover, .a-z__pagination a:focus, .a-z__pagination a:active {
          background-color: #333333; } }

/*doc
---
title: A-Z title
name: A-Z title
category: A-Z listing
---

```html_example
<h2 class="a-z__title">A</h2>
```

*/
.a-z__title {
  border-bottom: 1px solid #ccc;
  color: #db0c41;
  font-size: 2rem; }

/*doc
---
title: A-Z office
name: A-Z office
category: A-Z listing
---

```html_example
<dl class="a-z__office">
    <dt><h3><a href="#">Aberdeen</a></h3></dt>
    <dd>4 Albert Street</dd>
    <dd>Aberdeen</dd>
    <dd>AB25 1XQ</dd>
    <dd>United Kingdom</dd>
    <dd>T: +44 1224 644272</dd>
</dl> 
```

*/
.a-z__office {
  margin-bottom: 2rem; }

/*doc
---
title: Opening hours
name: Opening hours
category: Misc user controls
---

Opening hours use a definition list, extended with the class of "opening-hours".

```html_example
<h2>Opening hours</h2>

<dl class="opening-hours">
    <dt>Mon</dt>
    <dd >9am to 6pm</dd>

    <dt>Tue</dt>
    <dd >9am to 6pm</dd>

    <dt>Wed</dt>
    <dd>9am to 6pm</dd>

    <dt>Thu</dt>
    <dd>9am to 6pm</dd>

    <dt>Fri</dt>
    <dd>9am to 6pm</dd>

    <dt>Sat</dt>
    <dd>closed</dd>

    <dt>Sun</dt>
    <dd>closed</dd>
</dl>
```

*/
.opening-hours > dt {
  width: 50%;
  float: left;
  clear: left;
  font-weight: bold; }
.opening-hours > dt + dd {
  width: 50%;
  float: left; }

/*doc
---
title: Research content box
name: Research content box
category: Misc user controls
---

This has now replaced the old style of research report and is based on just an image of the front page of a report being supplied / uplaoded per item.

```html_example

<div class="research-block">
    <a href="#" alt="Download PDF of Retirement HousingRetirement Housing - 2014">
        <img src="../../Assets/System/Images/thewealthreport2014.jpg" class="research-block__img" />
        <span class="research-block__download">Download PDF</span>
    </a>
</div>

```

*/
.research-block {
  position: relative;
  border-right: solid 2px transparent;
  border-bottom: solid 2px transparent; }
  .research-block:hover, .research-block:focus {
    border-right: solid 2px gainsboro;
    border-bottom: solid 2px gainsboro; }
  .research-block__img {
    display: block;
    width: 100%;
    max-width: 100%; }
  .research-block__download {
    background-color: rgba(68, 68, 68, 0.8);
    display: block;
    width: 100%;
    padding: 1.15385rem;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0; }
  .research-block:hover .research-block__download, .research-block:focus .research-block__download {
    background-color: rgba(220, 220, 220, 0.8);
    color: #333333; }

/*doc
---
title: Research content box OLD STYLE
name: Research content box OLD STYLE
category: Misc user controls
---

The old style of the Research content box included a title, image and download text. This has now been replaced with a new version, which is based on an image of the front page of a report.

```html_example

<div class="research-block-old">
    <a href="#" alt="Download PDF of Retirement HousingRetirement Housing - 2014">
        <span class="research-block-old__title">Retirement Housing - 2014</span>
        <img src="http://content.knightfrank.com/research/696/images/thumb-10.jpg" class="research-block-old__img" />
        <span class="research-block-old__download">Download PDF</span>
    </a>
</div>

```

*/
.research-block-old {
  box-shadow: 5px 5px 5px 1px #cccccc;
  border: 1px solid #cccccc;
  min-width: 97px; }
  @media only screen and (min-width: 62.001em) {
    .research-block-old {
      max-width: 160px;
      margin-left: 0px; } }
  @media only screen and (min-width: 62.001em) {
    #divResearchSearchResults .research-block-old {
      margin-left: 35px; } }
  .research-block-old__title {
    display: block;
    padding: 1.15385rem 1.15385rem 0 1.15385rem;
    min-height: 5.46154rem;
    line-height: 1.5;
    color: #222;
    font-size: 0.9rem; }
  .research-block-old img {
    display: block;
    width: 100%;
    max-width: 100%; }
  .research-block-old__download {
    background-color: #444444;
    display: block;
    padding: 0.57692rem;
    color: white;
    text-align: center; }
  .research-block-old:hover {
    box-shadow: 5px 5px 5px 1px #aaaaaa; }
  .research-block-old:hover .research-block-old__download, .research-block-old:focus .research-block-old__download {
    background-color: rgba(68, 68, 68, 0.8);
    color: #ffffff; }
  .research-block-old > a > h2 {
    color: #555555;
    font-family: KFMeta;
    font-size: 1.1rem;
    font-weight: normal;
    line-height: 1.4;
    margin: 0 0 0.38462rem 0;
    max-height: 5.76923rem;
    overflow: hidden;
    transition: max-height 0.5s ease 0s; }
    .research-block-old > a > h2:hover {
      height: auto;
      max-height: 38.46154rem;
      min-height: 5.46154rem; }
  .research-block-old > a > p {
    color: #555555;
    font-family: KFMeta;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.4;
    margin: 0 0 0.38462rem 0;
    max-height: 4.53846rem;
    overflow: hidden;
    transition: max-height 0.5s ease 0s;
    padding: 0 1.15385rem; }

.research-list-view-header {
  font-family: KFMeta, Arial, Helvetica, sans-serif; }
  .research-list-view-header > a {
    color: #555555;
    font-size: 1.14em;
    line-height: 1.4; }
  @media only screen and (max-width: 40em) {
    .research-list-view-header {
      border-left: 1px solid #cccccc;
      border-right: 1px solid #cccccc;
      border-top: 1px solid #cccccc;
      box-shadow: 5px 5px 5px 1px #cccccc;
      margin-bottom: 0;
      min-height: 4.53846rem; }
      .research-list-view-header > a {
        display: block;
        font-size: 1.14rem;
        padding: 1.15385rem 1.15385rem 0 1.15385rem; } }

@media only screen and (max-width: 40em) {
  .list-view.list-group > li {
    border-bottom: none;
    margin-bottom: -2.30769rem;
    padding: 0 0.76923rem 1.53846rem 0; }
    .list-view.list-group > li > div {
      padding: 0; }
    .list-view.list-group > li:hover {
      background: none; } }

@media only screen and (min-width: 40.063em) {
  .grid-view li {
    border-bottom: 1px solid gainsboro;
    padding: 0.76923rem; } }
@media only screen and (min-width: 40.063em) {
  .grid-view li:hover {
    background: #f9f9f9; } }
@media only screen and (min-width: 62.001em) {
  .grid-view li .description {
    display: none; } }
@media only screen and (min-width: 40.063em) {
  .grid-view li div p {
    font-size: 0.97rem; } }
.grid-view .research-block-old.columns {
  padding: 0 0 1.53846rem 0; }
  .grid-view .research-block-old.columns:hover {
    box-shadow: none; }
@media only screen and (min-width: 40.063em) and (max-width: 62em) {
  .grid-view .research-block-old__title {
    display: none; } }

.researchBoxAccordion {
  margin-bottom: 1.53846rem; }

p.bannerWhite {
  color: #FFFFFF;
  font-family: "KfDisplayReg";
  font-size: 36px;
  left: 27px;
  position: absolute;
  top: 20%;
  z-index: 5;
  line-height: 1em; }
  @media only screen and (min-width: 62.001em) {
    p.bannerWhite {
      top: 86px; } }

p.bannerBlack {
  color: #000;
  font-family: "KfDisplayReg";
  font-size: 36px;
  left: 27px;
  position: absolute;
  top: 20%;
  z-index: 5;
  line-height: 1em; }
  @media only screen and (min-width: 62.001em) {
    p.bannerBlack {
      top: 86px; } }

.hard--left ul.list-group.contacts.row img {
  float: right;
  position: absolute;
  max-width: 60px;
  right: 12px; }

.hard--left ul.list-group.contacts article {
  padding-right: 63px; }

#research2Col section:not(.property-search) {
  padding-bottom: 30px; }

#hlViewAllResidentialWithCountry, #hlViewAllResidential {
  padding-bottom: 30px;
  overflow: hidden; }

.individual-report .redArrow li a {
  width: auto; }

.research-library .tabs-content > .content {
  margin-bottom: 0.1rem; }

.research-library input[type="radio"] + label {
  font-weight: bold;
  color: #A7A9AC !important; }

.research-library input[type="radio"]:checked + label {
  color: #db0c41 !important; }

.locales {
  list-style-type: none; }

@font-face {
  font-family: "KfDisplayReg";
  src: url("/library/common/fonts/kfdisplay_rg_v1_1.eot");
  src: url("/library/common/fonts/kfdisplay_rg_v1_1.eot?#iefix") format("embedded-opentype"), url("/library/common/fonts/kfdisplay_rg_v1_1.woff") format("woff"), url("/library/common/fonts/kfdisplay_rg_v1_1.ttf") format("truetype"), url("/library/common/fonts/kfdisplay_rg_v1_1.svg#svgKfDisplayReg") format("svg"); }
@font-face {
  font-family: 'KFMeta';
  src: url("/library/common/fonts/KFMeta-NormalTT.eot");
  src: url("/library/common/fonts/KFMeta-NormalTT.eot?#iefix") format("embedded-opentype"), url("/library/common/fonts/KFMeta-NormalTT.woff") format("woff"), url("/library/common/fonts/KFMeta-NormalTT") format("truetype"), url("/library/common/fonts/KFMeta-NormalTT#svgKfDisplayReg") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "KFDisplayRussia";
  src: url("/library/common/fonts/KFDisplayRussia.eot");
  src: url("/library/common/fonts/KFDisplayRussia.eot?#iefix") format("embedded-opentype"), url("/library/common/fonts/KFDisplayRussia.woff") format("woff"), url("/library/common/fonts/KFDisplayRussia.ttf") format("truetype"), url("/library/common/fonts/KFDisplayRussia.svg#svgKFDisplayRussia") format("svg"); }
@font-face {
  font-family: "KFDisplay";
  src: url("/library/common/fonts/KFDisplay.eot?#iefix") format("embedded-opentype"), url("/library/common/fonts/KFDisplay.woff") format("woff"), url("/library/common/fonts/KFDisplay.ttf") format("truetype"), url("/library/common/fonts/KFDisplay.svg#webfont") format("svg"); }
.news-map {
  width: 100%;
  min-height: 200px;
  margin-bottom: 0px !important;
  margin-top: 10px;
  position: static; }

#cookie {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  display: none;
  height: auto; }
  #cookie p {
    font-size: 0.825em;
    margin: 0; }
  @media only screen and (max-width: 40em) {
    #cookie {
      position: fixed;
      bottom: 0;
      z-index: 999;
      border-top: 2px solid #db0c41; }
      #cookie p {
        padding: 0.57692rem;
        padding-right: 44px; }
      #cookie div {
        padding: 0;
        float: right;
        position: relative; }
      #cookie ul {
        font-size: 0.825em;
        font-weight: bold;
        margin: 0.57692rem;
        list-style-type: none; } }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    #cookie {
      position: fixed;
      bottom: 0;
      z-index: 999;
      border-top: 2px solid #db0c41; }
      #cookie p {
        font-size: 0.85em;
        padding: 0.57692rem;
        padding-right: 44px; }
      #cookie div {
        padding: 0;
        float: right;
        position: relative; }
      #cookie ul {
        font-size: 0.95em;
        padding: 0.57692rem;
        list-style-type: none;
        font-weight: bold; } }
  @media only screen and (min-width: 62.001em) {
    #cookie {
      bottom: 20px;
      margin: 0 20px 0 0;
      position: fixed;
      right: 0;
      width: 250px;
      z-index: 9999; }
      #cookie p {
        font-size: 0.875em;
        margin: 0; }
      #cookie div {
        font-size: 0.925em;
        margin: 0;
        padding: 0.57692rem;
        width: 100%; }
        #cookie div img {
          cursor: pointer;
          padding-top: 2px; }
        #cookie div label {
          cursor: default; }
      #cookie ul {
        font-size: 0.875em;
        font-weight: bold;
        padding: 0.57692rem;
        list-style-type: none; }
      #cookie .cookieHeader {
        background-color: #ffffff; } }

#cookieBtn {
  cursor: pointer;
  padding: 0;
  float: right;
  display: inline; }
  #cookieBtn:before, #cookieBtn :after {
    display: table-cell;
    content: ""; }
  #cookieBtn:after {
    clear: both; }
  @media only screen and (max-width: 40em) {
    #cookieBtn {
      min-height: 44px;
      min-width: 44px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1000; }
      #cookieBtn .button {
        margin: 2px 0 10px 10px;
        height: 100%;
        width: 100%; }
        #cookieBtn .button:after {
          font-family: FontAwesome;
          content: "\f00d";
          font-size: 1.61538rem;
          margin: 0 auto;
          display: inline-block; } }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    #cookieBtn {
      min-height: 44px;
      min-width: 44px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1000; }
      #cookieBtn .button {
        margin: 0 0 10px 10px;
        height: 100%;
        width: 100%; }
        #cookieBtn .button:after {
          font-family: FontAwesome;
          content: "\f00d";
          font-size: 1.61538rem;
          margin: 0 auto;
          display: inline-block; } }

.research-filter dd, .research-filter h1 {
  margin-bottom: 0; }
  .research-filter dd > a, .research-filter h1 > a {
    background: #8499a5;
    color: #ffffff;
    text-transform: uppercase;
    transition: all 0.3s ease 0; }
    .research-filter dd > a:before, .research-filter h1 > a:before {
      content: "\f067"; }
    @media only screen and (min-width: 62.001em) {
      .research-filter dd > a, .research-filter h1 > a {
        background: none;
        color: #555555;
        font-size: 0.875em;
        padding: 0;
        text-transform: none; } }
@media only screen and (min-width: 62.001em) {
  .research-filter.active h1 a {
    background: none; } }
.research-filter.active h1 a:before {
  content: "\f068"; }

.research-filter-list {
  border: 1px solid #cccccc; }
  .research-filter-list .active {
    text-decoration: underline;
    font-weight: bold; }
  @media only screen and (min-width: 62.001em) {
    .research-filter-list {
      background: none;
      border: none;
      padding: 0; } }
  .research-filter-list h3 {
    display: block;
    font-size: 1.07692rem;
    padding: 0 0 0 0.57692rem; }
    @media only screen and (min-width: 62.001em) {
      .research-filter-list h3 {
        color: #545454;
        font-size: 0.885rem;
        font-weight: bold;
        margin-top: 12px;
        padding: 0 0 0.57692rem 0.57692rem;
        border-bottom: 1px solid gainsboro; } }
  .research-filter-list h4 a {
    color: #555555;
    display: block;
    font-size: 1rem;
    padding: 0 0 0 1.15385rem; }
    @media only screen and (min-width: 62.001em) {
      .research-filter-list h4 a {
        font-size: 0.885rem;
        padding: 0 0 0 0.57692rem; } }
  .research-filter-list > ul li {
    border-bottom: 1px solid #cccccc; }
    @media only screen and (min-width: 62.001em) {
      .research-filter-list > ul li {
        border: none; } }
    .research-filter-list > ul li > ul li {
      border: 0 !important;
      padding: 0 0 0 0.57692rem; }
      @media only screen and (min-width: 62.001em) {
        .research-filter-list > ul li > ul li {
          padding: 0 0 0 0.57692rem; } }
      .research-filter-list > ul li > ul li:last-child {
        border: 0 !important; }
    .research-filter-list > ul li > a {
      color: #565656;
      display: block;
      padding: 0.28846rem 0 0.28846rem 1.15385rem; }
      @media only screen and (min-width: 62.001em) {
        .research-filter-list > ul li > a {
          border: none;
          font-size: 0.85em;
          padding: 0 0 0.57692rem 0.57692rem; } }
    .research-filter-list > ul li:last-child {
      border: none; }
      @media only screen and (min-width: 62.001em) {
        .research-filter-list > ul li:last-child {
          border-bottom: 1px solid gainsboro; } }
  .research-filter-list div:after:before, .research-filter-list div:after:after {
    content: " ";
    display: table; }
  .research-filter-list div:after:after {
    clear: both; }
  .research-filter-list a:hover {
    text-decoration: underline; }

.view-selectors a {
  color: #565656 !important;
  font-size: 0.9rem !important;
  line-height: 1.6;
  position: relative; }
  .view-selectors a.tab-title {
    text-transform: capitalize; }
.view-selectors.grid-view a:before {
  content: "\f00a";
  font-family: FontAwesome;
  font-size: 1.3rem;
  padding: 0.38462rem 0.76923rem 0 0;
  font-weight: normal; }
.view-selectors.list-view a:before {
  content: "\f00b";
  font-family: FontAwesome;
  font-size: 1.3rem;
  padding: 0.38462rem 0.76923rem 0 0;
  font-weight: normal; }

.research-library {
  border: 1px solid #8499a5 !important; }
  .research-library h1 > a {
    background-color: #8499a5 !important; }

.research-library-content.accordion {
  background: #ffffff; }
.research-library-content #research-commercial, .research-library-content #research-residential {
  padding-top: 0 !important; }
  .research-library-content #research-commercial > a, .research-library-content #research-residential > a {
    color: #565656;
    line-height: 1.25; }

.research-all {
  font-size: 1rem;
  text-decoration: underline; }

h1.research-category-header {
  padding: 0 0 0 0.76923rem; }
  @media only screen and (min-width: 62.001em) {
    h1.research-category-header {
      padding: 0; } }

.archived-reports dd > a, .archived-reports h1 > a {
  background: #efefef;
  transition: all 0.3s ease 0; }
  .archived-reports dd > a:before, .archived-reports h1 > a:before {
    content: "\f078"; }
.archived-reports dd.active a, .archived-reports h1.active a {
  background: #cccccc; }
.archived-reports dd.active a:before, .archived-reports h1.active a:before {
  content: "\f077"; }
.archived-reports .archived-reports-year dd > a, .archived-reports .archived-reports-year h1 > a {
  background: #cccccc;
  transition: all 0.3s ease 0; }
  .archived-reports .archived-reports-year dd > a:before, .archived-reports .archived-reports-year h1 > a:before {
    content: "\f078"; }
  .archived-reports .archived-reports-year dd > a.research-open, .archived-reports .archived-reports-year h1 > a.research-open {
    background: #dddddd;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-top: 1px solid #cccccc; }
    .archived-reports .archived-reports-year dd > a.research-open:before, .archived-reports .archived-reports-year h1 > a.research-open:before {
      content: "\f077"; }
.archived-reports .archived-reports-year-content {
  background: #f9f9f9;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  padding: 0.57692rem; }
  .archived-reports .archived-reports-year-content:last-child {
    border-bottom: 1px solid #cccccc; }
.archived-reports .archived-reports-year-results {
  margin: 0 !important; }
  @media only screen and (min-width: 40.063em) {
    .archived-reports .archived-reports-year-results li:first-child {
      font-weight: bold; } }
  @media only screen and (max-width: 40em) {
    .archived-reports .archived-reports-year-results > li:before {
      content: none !important; } }
  @media only screen and (max-width: 40em) {
    .archived-reports .archived-reports-year-results > li {
      list-style-type: none;
      margin: 0;
      padding: 0; } }
  @media only screen and (min-width: 40.063em) {
    .archived-reports .archived-reports-year-results > li {
      padding-left: 2rem; } }
  .archived-reports .archived-reports-year-results li > a {
    background: #db0c41 !important;
    color: #ffffff;
    display: block;
    padding: 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
    text-align: center; }
    .archived-reports .archived-reports-year-results li > a:before {
      content: none !important; }
      @media only screen and (min-width: 40.063em) {
        .archived-reports .archived-reports-year-results li > a:before {
          margin-left: 1.5rem;
          padding-left: 0.5rem; } }
    .archived-reports .archived-reports-year-results li > a:hover {
      color: #ffffff; }
    @media only screen and (min-width: 40.063em) {
      .archived-reports .archived-reports-year-results li > a {
        background: none !important;
        color: #555555;
        margin: 0;
        padding: 0;
        text-align: left; }
        .archived-reports .archived-reports-year-results li > a:hover {
          color: #555555; } }
  @media only screen and (min-width: 40.063em) {
    .archived-reports .archived-reports-year-results.cta-list li:before {
      left: 10px; } }

.archived-reports-list {
  background: #efefef;
  border: 1px solid #cccccc;
  padding: 0.57692rem; }
  .archived-reports-list p {
    font-size: 0.9em; }

body {
  text-rendering: optimizeLegibility;
  font-size: 12px !important;
  line-height: 21px !important; }

#banners {
  height: 583px;
  position: relative;
  background: url("/library/knightfrank.com/images/recruitment/bannerMask.png") no-repeat scroll 0 0 transparent;
  background-color: #f3f2f1;
  max-width: 1000px;
  margin: 0 auto; }

#title {
  position: relative;
  top: 70px;
  left: 20px;
  z-index: 0 !important; }

#titleEP {
  position: relative;
  top: 55px;
  left: 20px;
  z-index: 0 !important; }

#banners #tree {
  z-index: 0;
  position: absolute;
  right: 0;
  background: url("/library/knightfrank.com/images/recruitment/tree.png") no-repeat scroll 0 0 transparent;
  width: 470px;
  height: 588px; }

#banners img {
  min-height: 0; }

#banners #map {
  z-index: 0;
  position: absolute;
  right: 0;
  width: 1000px;
  height: 588px; }

#banners #bnrNavigation {
  width: 450px;
  position: absolute;
  height: 31px;
  padding: 0;
  margin: 0;
  left: 0px;
  bottom: 0;
  font-size: 1.2em; }

#banners #bnrNavigation li {
  width: 148px;
  height: 31px;
  list-style: none;
  display: block;
  margin: 0 2px 0 0;
  float: left;
  text-align: center;
  color: #fff; }

#banners #bnrNavigation li a {
  display: block;
  color: #fff;
  padding: 5px 0 0 0;
  width: 148px;
  height: 26px;
  background-color: #777776;
  text-decoration: none; }

#banners #bnrNavigation li:nth-child(3) a {
  width: 313px; }

#banners #bnrNavigation li a:hover {
  display: block;
  color: #db0c41;
  background-color: #fff;
  padding: 5px 0 0 0;
  height: 26px; }

#banners #bnrNavigation li a.selected {
  display: block;
  color: #db0c41;
  background-color: #fff;
  padding: 5px 0 0 0;
  height: 26px; }

#banners #video {
  position: absolute;
  top: 195px;
  left: 89px;
  -o-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2); }

#banners .video {
  position: absolute;
  top: 195px;
  left: 89px;
  -o-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2); }

/* TREE NAVIGATION */
ul#treeLinks {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  width: 428px;
  height: 500px;
  z-index: 1; }

ul#treeLinks img {
  z-index: 0;
  display: block; }

ul#treeLinks li#exceptionalPeople {
  cursor: pointer;
  height: 79px;
  left: 148px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 202px;
  width: 74px;
  z-index: 1; }

ul#treeLinks li#exceptionalPeople ul {
  display: none;
  height: 56px;
  left: 21px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -51px;
  width: 101px;
  z-index: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out; }

ul#treeLinks li#exceptionalPeople ul li {
  display: block;
  width: 101px;
  height: 56px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  z-index: 1; }

ul#treeLinks li:hover ul {
  display: block !important; }

ul#treeLinks li#globalMobility {
  cursor: pointer;
  height: 82px;
  left: 229px;
  margin: 0;
  padding: 0;
  position: relative;
  top: -7px;
  width: 48px;
  z-index: 1; }

ul#treeLinks li#globalMobility ul {
  display: none;
  height: 56px;
  left: 36px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 26px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#learningDevelopment {
  cursor: pointer;
  height: 60px;
  left: 83px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 137px;
  width: 37px;
  z-index: 1; }

ul#treeLinks li#learningDevelopment ul {
  display: none;
  height: 64px;
  left: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 42px;
  width: 113px;
  z-index: 1; }

ul#treeLinks li#corpSocialRespon {
  cursor: pointer;
  height: 67px;
  left: 224px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 82px;
  width: 58px;
  z-index: 1; }

ul#treeLinks li#corpSocialRespon a {
  display: block;
  width: 100px;
  height: 100px; }

ul#treeLinks li#corpSocialRespon ul {
  display: none;
  height: 79px;
  left: 27px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 49px;
  width: 113px;
  z-index: 1; }

ul#treeLinks li#values {
  cursor: pointer;
  height: 64px;
  left: 68px;
  margin: 0;
  padding: 0;
  position: relative;
  top: -198px;
  width: 63px;
  z-index: 1; }

ul#treeLinks li#values ul {
  display: none;
  height: 57px;
  left: 39px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 27px;
  width: 113px;
  z-index: 1; }

/* END TREE NAVIGATION */
/* Javascript based Content hide/show */
.box img {
  z-index: 0 !important; }

.EPTextHolder {
  height: 330px;
  overflow: auto;
  display: block;
  margin-top: 17px; }

.EPTextHolder p {
  margin-bottom: 15px !important;
  margin-top: 0px; }

#contExceptionalPeople {
  height: 290px;
  left: 89px;
  position: absolute;
  top: 195px;
  width: 535px;
  display: none;
  padding: 5px 5px;
  z-index: 1; }

#contExceptionalPeople a {
  cursor: pointer; }

#contExceptionalPeople span p {
  margin-bottom: 20px; }

#contExceptionalPeople img {
  padding: 0 1px 2px 2px; }

#contGlobalMobility {
  height: 280px;
  left: 89px;
  position: absolute;
  top: 195px;
  width: 490px;
  padding: 10px 20px;
  display: none;
  background: #fff;
  opacity: 0.8;
  -o-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  z-index: 1; }

#contGlobalMobility ul {
  margin-top: -10px; }

#contGlobalMobility li {
  padding: 0px 7px 5px 7px;
  list-style: none;
  display: inline-block;
  width: 104px;
  height: 66px; }

#contGlobalMobility li a {
  cursor: pointer; }

#contGlobalMobility li a p {
  padding: 0px;
  margin: 0px;
  text-align: center; }

#contGlobalMobility h3 {
  font-family: KFDisplay,Palatino Linotype;
  font-size: 1.7em;
  font-weight: normal;
  color: #E98300;
  padding: 0;
  margin: 10px 0; }

#contLearningDevelopment1 {
  height: 382px;
  left: 87px !important;
  position: absolute;
  top: 175px;
  width: 490px;
  display: none;
  overflow: visible;
  z-index: 1; }

#contLearningDevelopment1 h3 {
  font-family: KFDisplay,Palatino Linotype;
  font-size: 1.7em;
  font-weight: normal;
  color: #7C109A;
  padding: 0;
  margin: 10px 0; }

#contLearningDevelopment1 ul {
  margin: 0;
  padding: 0;
  position: relative;
  top: -73px; }

#contLearningDevelopment1 ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
  position: relative; }

#contLearningDevelopment1 .growOne {
  width: 36px;
  height: 60px;
  position: relative;
  top: -20px;
  margin: 0 35px 0 0; }

#contLearningDevelopment1 .growOne > div {
  top: -238px;
  left: -58px; }

#contLearningDevelopment1 .growTwo {
  width: 115px;
  height: 168px; }

#contLearningDevelopment1 .growTwo > div {
  top: -150px;
  left: -133px; }

#contLearningDevelopment1 .growThree {
  width: 278px;
  height: 391px; }

#contLearningDevelopment1 .growThree > div {
  top: 73px;
  left: -252px; }

#contLearningDevelopment1 ul li div {
  display: none;
  position: absolute;
  top: -206px;
  width: 538px;
  z-index: 10; }

#contLearningDevelopment1 ul li div ul {
  top: 0 !important;
  padding: 0 0 0 20px; }

#contLearningDevelopment1 ul li div li {
  display: inline-block;
  width: 216px;
  top: 0;
  margin: 0 25px 0 0; }

#contLearningDevelopment1 ul li div li:before {
  color: #7c109a;
  content: "";
  display: inline-block;
  font-family: "fontello";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1em;
  margin-left: -24px;
  margin-right: 1em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  width: 1em; }

#contLearningDevelopment1 ul li div .title {
  background: url("/library/knightfrank.com/images/recruitment/growWithUsTitle.png") no-repeat top left;
  display: block;
  padding: 17px 15px 8px 15px;
  position: relative;
  height: 47px;
  top: 0;
  width: auto;
  margin: 0; }

#contLearningDevelopment1 ul li div .body {
  background: #ffffff;
  color: #000;
  display: block;
  padding: 1px 15px 15px 15px;
  position: relative;
  top: 0;
  width: auto;
  opacity: 0.8; }

#contLearningDevelopment1 ul > li:hover > div {
  display: block; }

#contLearningDevelopment1 ul li div h3,
#contLearningDevelopment1 ul li div h4 {
  padding: 0;
  margin: 0; }

#contLearningDevelopment1 ul li div h3 {
  font-size: 1.3em; }

#contLearningDevelopment1 ul li div h4 {
  font-size: 1.0em;
  color: #ffffff;
  font-weight: normal;
  font-family: KFDisplay; }

#contCorpSocialRespon {
  height: 280px;
  left: 89px;
  position: absolute;
  top: 195px;
  width: 490px;
  padding: 10px 20px;
  display: none;
  background: #fff;
  opacity: 0.8;
  -o-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2); }

#contCorpSocialRespon h3 {
  font-family: KFDisplay,Palatino Linotype;
  font-size: 1.7em;
  font-weight: normal;
  color: #7C109A;
  padding: 0;
  margin: 10px 0; }

#contValues {
  height: 280px;
  left: 89px;
  position: absolute;
  top: 195px;
  width: 490px;
  padding: 10px 20px;
  display: none;
  background: #fff;
  opacity: 0.8;
  -o-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  overflow: auto; }

#contValues h3 {
  font-family: KFDisplay,Palatino Linotype;
  font-size: 1.7em;
  font-weight: normal;
  color: #00C0B5;
  padding: 0;
  margin: 10px 0; }

#contValues ul {
  margin-left: 15px; }

#contValues ul li {
  padding-left: 15px; }

#contValues ul li {
  list-style-type: disc;
  font-size: 1.2em;
  line-height: 1.4em; }

/* END Javascript based Content hide/show */
.mainBlockFloatLeft {
  float: left;
  line-height: 31px;
  position: absolute;
  width: 560px;
  top: 10px; }

.mainBlockFloatLeft p {
  font-size: 1.0em;
  line-height: 1.3em;
  font-family: Verdana,Geneva,sans-serif;
  color: #333; }

.mainBlockFloatLeft .quoteName {
  font-size: 1.5em;
  color: #333;
  font-family: KFDisplay,Palatino Linotype;
  width: 370px; }

.mainBlockFloatLeft .quoteName strong {
  font-weight: normal;
  color: #db0c41; }

.mainBlockFloatRight {
  float: right;
  margin-top: 10px;
  padding: 0;
  text-align: justify;
  width: 400px; }

.mainBlockFloatRight p {
  font-size: 1em; }

.mainBlockFloatRight p a {
  color: #db0c41; }

.mainBlockFloatRight p a:hover {
  color: #db0c41;
  text-decoration: underline; }

#mainContentWrapper {
  height: auto;
  position: relative;
  max-width: 1000px;
  margin: 0 auto; }

.contEPeople {
  position: absolute;
  top: 0px;
  left: 5px;
  width: 530px;
  height: 347px; }

.contEPeople h1 {
  color: #fff;
  width: 250px;
  float: right;
  font-family: KFDisplay; }

.contEPeople p {
  color: #fff;
  width: 250px;
  float: right;
  padding-right: 5px; }

#exceptionalTwo p, #exceptionalTwo h1, #exceptionalThree p, #exceptionalThree h1 {
  width: 215px !important; }

#exceptionalOne {
  background: url("/library/knightfrank.com/images/recruitment/AdrianWilson.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalTwo {
  background: url("/library/knightfrank.com/images/recruitment/AttyBeor-Roberts.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalThree {
  background: url("/library/knightfrank.com/images/recruitment/CarolineFoord.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalFour {
  background: url("/library/knightfrank.com/images/recruitment/DouglasGarden.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalFive {
  background: url("/library/knightfrank.com/images/recruitment/ThomasConneely.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalSix {
  background: url("/library/knightfrank.com/images/recruitment/YamanKeung.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalSeven {
  background: url("/library/knightfrank.com/images/recruitment/JoannaLee.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalEight {
  background: url("/library/knightfrank.com/images/recruitment/JulianEvans.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalNine {
  background: url("/library/knightfrank.com/images/recruitment/tangLuc.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalTen {
  background: url("/library/knightfrank.com/images/recruitment/GeorgeChan.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalEleven {
  background: url("/library/knightfrank.com/images/recruitment/HenryLam.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

#exceptionalTwelve {
  background: url("/library/knightfrank.com/images/recruitment/StuartBailey.jpg") no-repeat scroll 0 0 transparent;
  display: none; }

.close, .close2 {
  position: absolute;
  right: -16px;
  top: -17px;
  cursor: pointer; }

/* Graduate Section */
#banners #gradTree {
  z-index: 0;
  position: absolute;
  right: 0;
  background: url("/library/knightfrank.com/images/recruitment/gradTree.png") no-repeat scroll 0 0 transparent;
  width: 470px;
  height: 588px; }

ul#treeLinks li#hugoCronstedt {
  cursor: pointer;
  height: 54px;
  left: 233px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 134px;
  width: 87px;
  z-index: 1; }

ul#treeLinks li#hugoCronstedt ul {
  display: none;
  height: 61px;
  left: -63px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 25px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#katieParsonson {
  cursor: pointer;
  height: 47px;
  left: 157px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 67px;
  width: 87px;
  z-index: 1; }

ul#treeLinks li#katieParsonson ul {
  display: none;
  height: 61px;
  left: 47px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 24px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#hannahWatson {
  cursor: pointer;
  height: 47px;
  left: 142px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 176px;
  width: 82px;
  z-index: 1; }

ul#treeLinks li#hannahWatson ul {
  display: none;
  height: 61px;
  left: -60px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -49px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#euanKelly {
  cursor: pointer;
  height: 42px;
  left: 223px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 222px;
  width: 82px;
  z-index: 1; }

ul#treeLinks li#euanKelly ul {
  display: none;
  height: 55px;
  left: -59px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 24px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#charmaineLim {
  cursor: pointer;
  height: 50px;
  left: 77px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 167px;
  width: 79px;
  z-index: 1; }

ul#treeLinks li#charmaineLim ul {
  display: none;
  height: 60px;
  left: 41px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 25px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#internshipTestimonials {
  cursor: pointer;
  height: 45px;
  left: 67px;
  margin: 0;
  padding: 0;
  position: relative;
  top: -86px;
  width: 58px;
  z-index: 1; }

ul#treeLinks li#internshipTestimonials ul {
  display: none;
  height: 67px;
  left: -81px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 24px;
  width: 101px;
  z-index: 1; }

ul#treeLinks li#learningDevelopment2 {
  cursor: pointer;
  height: 58px;
  left: 265px;
  margin: 0;
  padding: 0;
  position: relative;
  top: -8px;
  width: 35px;
  z-index: 1; }

ul#treeLinks li#learningDevelopment2 ul {
  display: none;
  height: 64px;
  left: 21px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 34px;
  width: 112px;
  z-index: 1; }

ul#treeLinks li#apply {
  cursor: pointer;
  height: 54px;
  left: 98px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 140px;
  width: 54px;
  z-index: 1; }

ul#treeLinks li#apply ul {
  display: none;
  height: 64px;
  left: 30px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -51px;
  width: 112px;
  z-index: 1; }

#contInternshipTestimonials, #contApply {
  height: 280px;
  left: 89px;
  position: absolute;
  top: 195px;
  width: 490px;
  padding: 10px 20px;
  display: none;
  background: #fff;
  opacity: 0.8;
  -o-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.2); }

#contApply {
  overflow: auto; }

#contInternshipTestimonials p {
  width: 484px; }

#contHugoCronstedt, #contKatieParsonson, #contHannahWatson, #contEuanKelly, #contCharmaineLim, #contLearningDevelopmentVid {
  position: absolute;
  display: none; }

.slides_container div.slide {
  z-index: 1 !important; }

/* End Graduate Section */
.slides_container {
  width: 480px;
  height: 280px;
  display: block; }

.slides_container .slide {
  width: 480px;
  height: 280px;
  display: block; }

.pagination li a {
  background-position: 0 -24px; }

.pagination li.current a {
  background-position: 0 -12px; }

.pagination {
  margin: 0 auto;
  padding: 0.76923rem 0 0 0;
  position: relative;
  z-index: 5;
  float: none;
  right: 0; }

#contInternshipTestimonials {
  color: #db0c41;
  font-size: 1.2em;
  line-height: 1.4em; }

#transcripts ul li {
  width: 500px;
  float: left; }

#VT li {
  color: #db0c41; }

#VT1Cont, #VT2Cont, #VT3Cont, #VT4Cont, #VT5Cont, #VT6Cont {
  display: none;
  color: black; }

#VT .VTCont {
  margin-left: 15px; }

#europe {
  display: none;
  background: url("/library/knightfrank.com/images/recruitment/flgEurope.png") no-repeat scroll 0 0 transparent;
  height: 307px;
  left: 338px;
  position: absolute;
  top: 204px;
  width: 131px;
  z-index: 1;
  color: #fff;
  padding-top: 37px;
  text-align: center; }

#europe h3 {
  margin: 0; }

#europe ul {
  padding: 0;
  margin: 2px 0 0 0;
  font-size: 11px; }

#europe ul li {
  line-height: 15px; }

#america {
  display: none;
  background: url("/library/knightfrank.com/images/recruitment/flgAmerica.png") no-repeat scroll 0 0 transparent;
  height: 103px;
  left: 172px;
  position: absolute;
  top: 175px;
  width: 131px;
  z-index: 1;
  color: #fff;
  padding-top: 10px;
  text-align: center; }

#america h3 {
  margin: 0; }

#america ul {
  padding: 0;
  margin: 4px 0 0 0;
  font-size: 11px; }

#america ul li {
  line-height: 15px; }

#africa {
  display: none;
  background: url("/library/knightfrank.com/images/recruitment/flgAfrica.png") no-repeat scroll 0 0 transparent;
  height: 254px;
  left: 409px;
  position: absolute;
  top: 203px;
  width: 131px;
  z-index: 1;
  color: #fff;
  padding-top: 10px;
  text-align: center; }

#africa h3 {
  margin: 0;
  line-height: 15px; }

#africa ul {
  padding: 0;
  margin: 10px 0 0 0;
  font-size: 11px; }

#africa ul li {
  line-height: 15px; }

#asia {
  display: none;
  background: url("/library/knightfrank.com/images/recruitment/flgAsia.png") no-repeat scroll 0 0 transparent;
  height: 271px;
  left: 600px;
  position: absolute;
  top: 239px;
  width: 131px;
  z-index: 1;
  color: #fff;
  padding-top: 37px;
  text-align: center; }

#asia h3 {
  margin: 0;
  line-height: 15px; }

#asia ul {
  padding: 0;
  margin: 10px 0 0 0;
  font-size: 11px; }

#asia ul li {
  line-height: 15px; }

area {
  z-index: 1000; }

.mustShow {
  display: block !important; }

#titleJS {
  left: 79px;
  position: absolute !important;
  top: 52px;
  z-index: 2 !important; }

#handshake {
  background: url("/library/knightfrank.com/images/recruitment/handshake.png") no-repeat scroll 0 3px transparent;
  color: #DB0C41;
  font-family: KFDisplay;
  font-size: 1.2em;
  height: 36px;
  left: 40px;
  padding-left: 50px;
  padding-top: 4px;
  position: absolute;
  top: 500px;
  width: 166px; }

#handshake a {
  text-decoration: none;
  color: #333; }

#europeHighlight {
  left: 257px;
  position: absolute;
  top: 58px;
  z-index: 1 !important;
  display: none; }

#africaHighlight {
  left: 434px;
  position: absolute;
  top: 245px;
  z-index: 1 !important;
  display: none; }

#americaHighlight {
  left: -9px;
  position: absolute;
  top: 71px;
  z-index: 1 !important;
  display: none; }

#asiaHighlight {
  left: 675px;
  position: absolute;
  top: 197px;
  z-index: 1 !important;
  display: none; }

a:focus {
  outline: none; }

.continent a, .continent a:visited, .continent a:focus {
  color: #fff !important; }

.continent a:hover {
  color: #fff;
  text-decoration: underline; }

#mapMap {
  outline: none; }

.contEPeople {
  z-index: 1; }

.mainContentWrapperBorder {
  border-bottom: 2px solid #C6C6C6;
  display: block;
  margin: 25px 0;
  position: relative;
  top: 10px; }

.mainBlockFloatRight {
  margin-right: 0px; }

#treeLinks li a {
  display: block;
  height: 100%;
  width: 100%; }

.imgSocial {
  margin-right: 5px; }

#transcripts .fader p {
  padding: 0 15px; }

.gm {
  height: 260px;
  left: 5px;
  position: absolute;
  top: 0;
  width: 485px;
  background: #fff;
  padding: 20px; }

#gm1, #gm2, #gm3, #gm4, #gm5, #gm6, #gm7, #gm8 {
  display: none; }

#gm1 {
  line-height: 1.6em; }

#gm3 p, #gm4 p, #gm5 p, #gm6 p, #gm7 p, #gm8 p {
  overflow: auto;
  height: 279px; }

#cover {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  padding-bottom: 50.680558%;
  position: relative;
  /*&:before {
  	@media only screen and (min-width:40.063em) {
  		content: '';
  		position: absolute;
  		top: 0;
  		right: 0;
  		bottom: 0;
  		left: 0;
  		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  	}	
  }*/ }
  @media only screen and (min-width: 40.063em) {
    #cover {
      margin: 0 auto;
      overflow: hidden;
      z-index: -1; } }
  @media only screen and (min-width: 62.001em) {
    #cover {
      display: none; } }

.home-search {
  margin: -3.38462rem 0.76923rem 0 0.76923rem; }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .home-search {
      position: absolute;
      top: 0px;
      left: 15px;
      margin: 0;
      width: 40%; } }
  @media only screen and (min-width: 62.001em) {
    .home-search {
      float: left;
      position: relative;
      top: auto;
      left: auto;
      margin: 0 0 0 1.15385rem;
      padding-bottom: 25%;
      width: 31.299799% !important; } }
  @media only screen and (max-width: 40em) {
    .home-search.property-search h1 a {
      z-index: 2; } }
  @media only screen and (max-width: 40em) {
    .home-search .property-search {
      position: relative; } }
  .home-search h1 {
    padding: 0.76923rem 0.53846rem !important; }

#homepage {
  font-family: Arial, Verdana, sans-serif; }
  @media only screen and (max-width: 40em) {
    #homepage {
      background-image: none !important; } }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    #homepage {
      background-image: none !important; } }
  @media only screen and (min-width: 40.063em) {
    #homepage {
      position: relative; } }
  @media only screen and (min-width: 62.001em) {
    #homepage {
      background-size: cover;
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-position: center 68.75%;
      margin: 0 auto;
      position: relative; }
      #homepage:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 70%;
        left: 0;
        background-image: linear-gradient(to bottom, black, transparent);
        z-index: -1; } }
  #homepage hr {
    border-top: 1px solid #d6d5d5;
    padding-top: 1px; }
  #homepage .bannerText {
    margin: 0; }
    @media only screen and (min-width: 40.063em) and (max-width: 62em) {
      #homepage .bannerText {
        border-bottom: 1px solid #d6d5d5;
        margin-bottom: 1.53846rem; } }
    @media only screen and (min-width: 62.001em) {
      #homepage .bannerText {
        margin: 0 0 0.76923rem 0; }
        #homepage .bannerText .jsMatchHeights {
          margin-bottom: 10px; } }
    #homepage .bannerText p {
      font-size: 1rem; }
      @media only screen and (min-width: 40.063em) {
        #homepage .bannerText p {
          font-size: 12px; } }
      @media only screen and (min-width: 62.001em) {
        #homepage .bannerText p {
          font-size: 11px; } }
    #homepage .bannerText h1 {
      text-transform: uppercase; }
    #homepage .bannerText h1, #homepage .bannerText h2 {
      font-family: Arial Bold, Arial, Helvetica, sans-serif;
      font-size: 1.15385rem;
      font-weight: 700;
      line-height: 1; }
      @media only screen and (min-width: 62.001em) {
        #homepage .bannerText h1, #homepage .bannerText h2 {
          font-size: 1.15385rem; } }
    #homepage .bannerText.column {
      padding: 0; }
      #homepage .bannerText.column.column {
        padding: 0; }

@media only screen and (max-width: 40em) {
  #countries {
    padding: 0 0.76923rem; } }
@media only screen and (min-width: 40.063em) and (max-width: 62em) {
  #countries {
    min-width: 25%; } }
@media only screen and (min-width: 40.063em) {
  #countries {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999; } }
@media only screen and (min-width: 62.001em) {
  #countries {
    position: relative;
    border: none;
    z-index: 999; } }
@media only screen and (min-width: 62.001em) {
  #countries .continents {
    width: 66.700201%; } }
#countries .continents > dd {
  margin: 0 0 0.38462rem 0; }
  #countries .continents > dd a {
    background: #333;
    color: #fff;
    display: block;
    font-size: 1.21077rem;
    font-weight: bold;
    padding: 0.38462rem; }
    @media only screen and (min-width: 40.063em) {
      #countries .continents > dd a {
        border: 1px solid #fff;
        border-width: 0 0 1px 1px;
        padding: 0.76923rem 0.38462rem; } }
    @media only screen and (min-width: 40.063em) and (max-width: 62em) {
      #countries .continents > dd a {
        font-size: 1.1rem;
        min-height: 3.38462rem;
        min-width: 11.368209%; } }
    @media only screen and (min-width: 62.001em) {
      #countries .continents > dd a {
        background-color: rgba(51, 51, 51, 0.8);
        border: 1px solid #fff;
        padding: 0.38462rem;
        word-wrap: break-word; } }
    #countries .continents > dd a:hover, #countries .continents > dd a :focus {
      background: #db0c41; }
    #countries .continents > dd a:before {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      content: "\f078";
      font-family: FontAwesome;
      float: right;
      margin-left: 0.38462rem;
      transition: all 0.5s; }
    #countries .continents > dd a.active {
      background: #db0c41; }
      @media only screen and (min-width: 40.063em) {
        #countries .continents > dd a.active {
          border: 1px solid #db0c41; } }
      #countries .continents > dd a.active:before {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg); }
  #countries .continents > dd > div {
    background-color: rgba(51, 51, 51, 0.8); }
    #countries .continents > dd > div ul {
      list-style-type: none;
      margin: 0; }
      #countries .continents > dd > div ul li {
        border-bottom: #fff; }
        #countries .continents > dd > div ul li a {
          padding: 0.38462rem 0.76923rem;
          border: none;
          margin: 0;
          background: none;
          display: block;
          width: 100%; }
          @media only screen and (min-width: 40.063em) and (max-width: 62em) {
            #countries .continents > dd > div ul li a {
              font-size: 1rem; } }
          #countries .continents > dd > div ul li a:before {
            display: none; }
  @media only screen and (min-width: 40.063em) {
    #countries .continents > dd {
      margin: 0; } }
  @media only screen and (min-width: 62.001em) {
    #countries .continents > dd {
      display: inline-block;
      vertical-align: top;
      margin: 0.38462rem 0 0 0.15385rem;
      width: 19% !important;
      height: 3.38462rem; }
      #countries .continents > dd a {
        font-size: 1rem;
        height: auto;
        padding: 0.53846rem; } }

.continents {
  margin: 0 0 1.53846rem 0; }
  @media only screen and (min-width: 40.063em) {
    .continents {
      margin: 0; } }
  @media only screen and (min-width: 62.001em) {
    .continents {
      float: right;
      padding-right: 10px; } }

.divider {
  border-top: 1px solid #d6d5d5; }
  @media only screen and (min-width: 40.063em) {
    .divider {
      display: none; } }

.homepage-content {
  background: #fff;
  margin: 0 auto;
  padding: 1.15385rem 1.15385rem 0 1.15385rem; }
  .homepage-content h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-transform: uppercase; }
    @media only screen and (max-width: 40em) {
      .homepage-content h3 {
        margin-left: -1.15385rem; } }
    @media only screen and (min-width: 62.001em) {
      .homepage-content h3 {
        font-size: 12px; } }
  @media only screen and (min-width: 62.001em) {
    .homepage-content {
      width: 76.92308rem; } }

@media only screen and (min-width: 62.001em) {
  .homepage-content-background {
    background: none; } }

.ghImgHolder {
  padding-top: 14px; }
  @media only screen and (max-width: 40em) {
    .ghImgHolder {
      margin: 0 -1.15385rem; } }
  @media only screen and (min-width: 62.001em) {
    .ghImgHolder {
      padding-top: 0; } }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .ghImgHolder a img {
      max-height: 217px; } }
  @media only screen and (min-width: 62.001em) {
    .ghImgHolder {
      padding-top: 14px; } }

#js-africa,
#js-asia,
#js-europe,
#js-middleeast,
#js-america {
  display: none; }

/* Fix to allow nav to be clickable */
.homepage-news {
  z-index: 10; }

.vidPubHeader {
  display: none; }
  @media only screen and (min-width: 62.001em) {
    .vidPubHeader {
      display: block;
      padding-left: 10px;
      margin-bottom: 10px; }
      .vidPubHeader h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding-top: 16px; }
      .vidPubHeader .jsMatchHeights {
        border-bottom: 1px solid #d6d5d5; } }

.homepageVideo {
  border-bottom: 1px solid #d6d5d5;
  margin-bottom: 20px;
  padding-bottom: 20px; }
  @media only screen and (max-width: 40em) {
    .homepageVideo #youtubeVideo {
      margin: 0 -1.15385rem; } }
  @media only screen and (min-width: 40.063em) {
    .homepageVideo {
      border: none;
      padding-bottom: 0; } }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .homepageVideo {
      margin-left: -1.15385rem;
      padding-right: 0; } }

@media only screen and (min-width: 40.063em) and (max-width: 62em) {
  .homepagePublications {
    float: right; } }
@media only screen and (min-width: 40.063em) {
  .homepagePublications h3 {
    padding-left: 0; } }

.WelcomeToKnightFrank {
  border-bottom: 1px solid #d6d5d5; }

.secondary-menu {
  margin-bottom: 2.30769rem;
  /*overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
  	display: none;
  }*/ }
  @media only screen and (min-width: 40.063em) {
    .secondary-menu {
      margin-top: -50px; } }

.secondary-menu-scroll {
  background: none;
  display: block;
  position: relative;
  padding-right: 7.5rem;
  white-space: nowrap;
  overflow-y: hidden;
  height: 3.84615rem;
  transition: height 1s;
  z-index: 100; }
  .secondary-menu-scroll:before, .secondary-menu-scroll:after {
    content: " ";
    display: table; }
  .secondary-menu-scroll:after {
    clear: both; }
  @media only screen and (max-width: 40em) {
    .secondary-menu-scroll {
      border: 1px solid #565656;
      border-width: 1px 1px 1px 0;
      padding-right: 0;
      overflow-x: hidden; } }
  .secondary-menu-scroll:before, .secondary-menu-scroll :after {
    content: " ";
    display: table; }
  .secondary-menu-scroll:after {
    clear: both; }
  .secondary-menu-scroll.secondary-menu-expanded {
    background: #ccc;
    background-position: 0px -51px;
    height: 7.84615rem !important; }
    @media only screen and (max-width: 40em) {
      .secondary-menu-scroll.secondary-menu-expanded {
        background: #aeaeae;
        height: auto !important; } }

.secondary-menu-button, .tertiary-menu-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 7rem;
  background: #565656;
  height: 3.92308rem;
  display: none;
  transition: visibility 1s; }
  .secondary-menu-button a, .tertiary-menu-button a {
    font-size: 1rem;
    font-weight: bold;
    padding: 1.15385rem;
    display: block;
    color: #fff;
    height: 100%;
    width: 100%; }
    .secondary-menu-button a:before, .tertiary-menu-button a:before {
      content: "\f078";
      font-family: FontAwesome;
      margin-right: 0.38462rem;
      transition: all 1s; }
  .secondary-menu-button.opened, .tertiary-menu-button.opened {
    background: #db0c41; }
    .secondary-menu-button.opened > a:before, .tertiary-menu-button.opened > a:before {
      content: "\f077";
      font-family: FontAwesome;
      margin-right: 0.38462rem;
      transition: all 1s; }

.tertiary-menu {
  margin-top: 1.53846rem;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  border-top: 3px solid #db0c41;
  background: #ccc;
  position: relative;
  -webkit-overflow-scrolling: touch; }
  .tertiary-menu ul {
    list-style-type: none;
    margin: 0; }
    .tertiary-menu ul li {
      display: inline-block;
      width: 100%; }
      .tertiary-menu ul li a {
        background: #ccc;
        padding: 0.76923rem;
        font-weight: 700;
        color: #565656;
        display: block;
        border-right: 1px solid #565656; }
        .tertiary-menu ul li a:hover, .tertiary-menu ul li a:focus {
          background: #565656;
          color: #fff; }
      @media only screen and (min-width: 40.063em) {
        .tertiary-menu ul li {
          width: auto; } }
  .tertiary-menu.tertiary-menu-expanded ul li {
    display: inline;
    margin: 0; }
    .tertiary-menu.tertiary-menu-expanded ul li:first-child {
      border-top: none; }
    .tertiary-menu.tertiary-menu-expanded ul li a {
      border: none;
      font-size: 1rem; }

.tertiary-menu-button a {
  height: 3.15385rem;
  padding: 0.76923rem 1.15385rem; }

#banner .searchBoxB {
  max-width: 388px; }

#searchBoxMain .searchBoxB .tab-title {
  width: auto; }

#searchBoxMain .searchBoxB .tab-title .searchBoxBHeight {
  padding: 1rem 1.43rem; }

@media screen and (max-width: 40em) {
  #searchBoxMain .searchBoxB .tabs .tab-title > a {
    font-size: 0.99rem;
    padding: 0.4rem; }

  #searchBoxMain .searchBoxB .tab-title {
    width: 100%;
    display: block; } }
@media screen and (max-width: 62em) {
  #searchBoxMain .searchBoxB .tabs .tab-title > a {
    font-size: 1rem;
    padding: 1rem 1.43rem; } }
.aus-map {
  width: 403px;
  height: 380px;
  position: relative;
  margin: 0 auto;
  background: url("/library/common/images/australia-map/KF_LeasingMapNoText.png") no-repeat;
  display: block !important; }
  .aus-map .wa {
    background: url("/library/common/images/australia-map/WA.png") no-repeat;
    width: 151px;
    height: 242px;
    position: absolute;
    top: 39px;
    left: 4px;
    display: none;
    z-index: 40; }
  .aus-map .sa {
    background: url("/library/common/images/australia-map/sa.png") no-repeat;
    width: 112px;
    height: 134px;
    position: absolute;
    top: 174px;
    left: 160px;
    display: none;
    z-index: 40; }
  .aus-map .act {
    background: url("/library/common/images/australia-map/act.png") no-repeat;
    width: 45px;
    height: 32px;
    position: absolute;
    top: 277px;
    left: 319px;
    display: none;
    z-index: 40; }
  .aus-map .nsw {
    background: url("/library/common/images/australia-map/nsw.png") no-repeat;
    width: 124px;
    height: 79px;
    position: absolute;
    top: 209px;
    left: 274px;
    display: none;
    z-index: 40; }
  .aus-map .nt {
    background: url("/library/common/images/australia-map/nt.png") no-repeat;
    width: 95px;
    height: 166px;
    position: absolute;
    top: 4px;
    left: 156px;
    display: none;
    z-index: 40; }
  .aus-map .qld {
    background: url("/library/common/images/australia-map/qld.png") no-repeat;
    width: 146px;
    height: 208px;
    position: absolute;
    top: 4px;
    left: 252px;
    display: none;
    z-index: 40; }
  .aus-map .tas {
    background: url("/library/common/images/australia-map/tas.png") no-repeat;
    width: 40px;
    height: 41px;
    position: absolute;
    top: 339px;
    left: 292px;
    display: none;
    z-index: 40; }
  .aus-map .vic {
    background: url("/library/common/images/australia-map/vic.png") no-repeat;
    width: 79px;
    height: 60px;
    position: absolute;
    top: 272px;
    left: 271px;
    display: none;
    z-index: 40; }
  .aus-map .overlay {
    z-index: 50;
    position: relative; }

#searchBox {
  position: relative; }
  #searchBox #search::-ms-clear {
    display: none;
    width: 0;
    height: 0; }
  #searchBox .search-clear {
    position: absolute;
    right: 33px;
    top: 8px;
    border: none;
    background: none;
    color: #818181;
    font-family: Arial; }

/* NAVIGATION */
.primary-nav .nav-sectors .title {
  border-top: 1px dotted #db0c41;
  padding-top: 5px; }
.primary-nav .nav-search {
  background: #6C6C6C;
  color: #ffffff;
  min-height: 203px;
  float: right; }
  .primary-nav .nav-search .title {
    border-bottom: 1px dotted #ffffff;
    padding-top: 5px; }
  .primary-nav .nav-search a,
  .primary-nav .nav-search a:not(.title) {
    color: #ffffff; }
  .primary-nav .nav-search a:hover {
    text-decoration: underline;
    color: #ffffff !important; }
.primary-nav .nav-search .item-group,
.primary-nav .nav-sectors .item-group {
  padding-top: 0; }

.safari ul.off-canvas-list.primary-nav {
  font: 12px "KfDisplayReg", Helvetica, Arial, sans-serif !important; }

/* My KF */
#myKF_myKF {
  border: none;
  width: 100%;
  height: 650px; }

.mykf-wrapper {
  padding: 0 13px 0 0; }

/* Recruitment */
#contApply {
  height: 400px !important;
  top: 145px !important; }

ul.off-canvas-list.secondary-nav li:last-child a {
  padding-right: 0; }

ul.off-canvas-list.secondary-nav li a {
  font-size: 0.92rem; }

/*customised Sharethis social media buttons*/
.stButton .facebook {
  background-image: none !important; }

.stButton .twitter {
  background-image: none !important; }

.stButton .pinterest {
  background-image: none !important; }

.stButton .linkedin {
  background-image: none !important; }

.stButton .googleplus {
  background-image: none !important; }

.st_sharethis, .st_email {
  display: none !important; }

.stButton {
  width: 25px !important;
  margin-right: 6px !important; }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .stButton {
      margin-right: 3px !important; } }

.st_facebook .stButton {
  width: 15px !important; }
  @media only screen and (min-width: 40.063em) and (max-width: 62em) {
    .st_facebook .stButton {
      width: 11px !important; } }

.stButton .chicklets {
  padding-left: 0 !important;
  padding-right: 0 !important;
  height: 47px !important;
  line-height: 47px !important;
  display: inline-block;
  font-family: FontAwesome !important;
  font-size: 32px !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.chicklets.pinterest:before {
  content: "\f0d2"; }

.chicklets.facebook:before {
  content: "\f09a"; }

.chicklets.twitter:before {
  content: "\f099"; }

.chicklets.linkedin:before {
  content: "\f0e1"; }

.chicklets.googleplus:before {
  content: "\f0d5"; }

/*customised Sharethis social media buttons end*/