@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic);

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic);

@import url(https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic);

/*doc
---
title: Aspect
name: aspect
category: Base
---

Aspect ratios for scaling media whilst keeping aspect ratios.

```html_example
	<div class="panel">
		<img src="http://placehold.it/320x240" alt="" class="aspect">
		<img src="http://placehold.it/320x240" alt="" class="aspectFill">
	</div>
```

Using .aspectFill changes the image to have a 100% width independant of its actual width
*/

.aspect {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.aspectFill {
  display: inline-block;
  width: 100%;
  height: auto;
}

.aspectFill--block {
  display: block;
  width: 100%;
  height: auto;
}

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

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

```html_example
<button>Button style</button>
<a class="button" href="#">Link styled button</a>
<a class="button button--primary" href="#">Link styled button</a>
<a class="button button--accent" href="#">Link styled button</a>
<a class="button button--secondary" href="#">Link styled button</a>

<div>
	<a class="button button--accent icon icon-star-empty" href="#">Link styled button</a>
</div>

<div class="">
	<a class="button button--accent icon icon-star-empty icon--alt" href="#">Link styled button</a>
</div>

<div class="buttonGroup buttonGroup--fluid">
	<a href="#" class="button button--accent icon icon-arrow-left2">Back to search results</a>
	<a href="#" class="button button--secondary">Value my property</a>
</div>

<div class="panel-buttons buttonGroup--fluid--mob paint-accent">
	<a href="#" class="button button--white icon icon-share">Share</a>
	<a href="#" class="button button--white icon icon-star-full">Save &amp; alert</a>
</div>

<div class="panel paint">
	<a class="button button--contrast" href="#">Link styled button</a>
</div>
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as
submitting a form or triggering some javascript event, then use a
`<button>` element.

Add:
.button--fluid makes the element 100% width
.button--contrast to use the button on dark backgrounds
.button--icon for icon only buttons
*/

.buttonGroup .button + .button {
  margin-left: -4px;
}

@media (max-width: 767px) {
  .buttonGroup--fluid--mob {
    display: table;
    width: 100%;
  }

  .buttonGroup--fluid--mob .button {
    display: table-cell;
    font-size: 12px;
    font-size: 0.75rem;
    padding: 4px 6px;
  }

  .buttonGroup--fluid--mob .button + .button--white {
    border-left-color: rgba(102, 102, 102, 0.14);
  }
}

.button {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 700;
  display: inline-block;
  padding: 12px 30px;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  text-align: center;
  color: #06532a;
  background-color: transparent;
  border: 1px solid rgba(102, 102, 102, 0.14);
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
  vertical-align: top;
}

.button:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.button.icon:before {
  margin-right: 6px;
}

.button.icon--alt:before {
  float: right;
  margin-left: 6px;
  margin-right: 0;
  line-height: inherit;
  margin-top: -1px;
}

.button + .button {
  margin-left: 9px;
}

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

.button--fluid + .button {
  margin-left: 0;
}

@media (max-width: 767px) {
  .button--fluidMob {
    width: 100%;
  }

  .button--fluidMob + .button {
    margin-left: 0;
  }
}

.button--contrast {
  background-color: rgba(6, 83, 42, 0.78);
  border-color: #06532a;
  color: #fff;
}

.button--contrast:hover {
  background-color: #06532a;
  border-color: #06532a;
  color: #fff;
}

.button--white {
  background-color: #fff;
  border-color: #fff;
}

.button--white:hover {
  background-color: #06532a;
  border-color: #06532a;
  color: #fff;
}

.button--primary {
  background-color: #06532a;
  border-color: #06532a;
  color: #fff;
}

.button--primary:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
}

.button--secondary {
  background-color: #bf1622;
  border-color: #bf1622;
  color: #fff;
}

.button--secondary:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
}

.button--accent {
  background-color: #9db847;
  border-color: #9db847;
  color: #fff;
}

.button--accent:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
}

.button--icon {
  padding: 4px;
}

/*doc
---
title: Clearfix
name: clearfix
category: Base
---

Clearfix is used on parents to contain floated children.

```html_example
	<div class="clearfix">
		<img src="http://placehold.it/320x240" alt="" class="right">
	</div>
```
*/

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

.crate {
  padding: 12px 12px;
  background-color: #fff;
  color: #666;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .crate {
    padding: 24px 24px;
  }
}

/*doc
---
title: Cutter
name: cutter
category: Base
---

Cutters provide a way of adding a border radius to elements

```html_example
	<div class="panel">
		<img src="http://placehold.it/60x60" alt="" class="cutter">
		<img src="http://placehold.it/60x60" alt="" class="cutter-s">
		<img src="http://placehold.it/60x60" alt="" class="cutter-m">
		<img src="http://placehold.it/60x60" alt="" class="cutter-circle">
	</div>
```
*/

.cutter {
  display: inline-block;
  border-radius: 2px;
}

.cutter-s {
  display: inline-block;
  border-radius: 6px;
}

.cutter-m {
  display: inline-block;
  border-radius: 10px;
}

.cutter-circle {
  display: inline-block;
  border-radius: 100%;
}

/*doc
---
title: Divider
name: divider
category: Base
---

Dividers are usd to seperate content

```html_example
	<div class="panel">
		<p>hello there</p>
	</div>
	<div class="panel divider">
		<p>hello again</p>
	</div>
```
*/

.divider {
  position: relative;
}

.divider:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(102, 102, 102, 0.14);
}

.divider--grid:before {
  left: 24px;
  right: 24px;
}

.divider--contrast:before {
  border-color: #fff;
}

/*doc
---
title: Icons
name: icons
category: Base
---

Icons

```html_example
    <span class="icon icon-mail2"></span>
    <span class="icon icon-mail2 icon-only">Icon text</span>
    <span class="icon icon-mail2 icon-cutter"></span>
```
*/

@font-face {
  font-family: 'ea-icons';
  src: url("fonts/ea-icons.eot");
  src: url("fonts/ea-icons.eot#iefix") format("embedded-opentype"), url("fonts/ea-icons.ttf") format("truetype"), url("fonts/ea-icons.woff") format("woff"), url("fonts/ea-icons.svg#ea-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon:before {
  font-family: 'ea-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -1px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon--m {
  font-size: 18px;
  font-size: 1.125rem;
}

.icon--l {
  font-size: 26px;
  font-size: 1.625rem;
}

.icon-only {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  text-indent: -9999px;
}

.icon-only:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-indent: 0;
}

.icon-onlySlim {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 2em;
  text-indent: -9999px;
}

.icon-onlySlim:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-indent: 0;
}

.icon-onlyL {
  position: relative;
  display: inline-block;
  width: 3em;
  height: 3em;
  text-indent: -9999px;
}

.icon-onlyL:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-indent: 0;
}

.icon-left {
  margin-right: 12px;
}

.icon-right {
  margin-left: 12px;
}

.icon-right--xs {
  margin-left: 3px;
}

.icon-cutter {
  display: inline-block;
  border-radius: 100%;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  vertical-align: bottom;
  background-color: #06532a;
  color: #fff;
}

.icon-cutter:before {
  vertical-align: middle;
}

a.icon-cutter:hover {
  background-color: #666;
  color: #fff;
}

.icon-cutter--secondary {
  background-color: #bf1622;
  color: #fff;
}

.icon-cutter--text {
  background-color: #8A8B8A;
  color: #fff;
}

.icon-cutter--accent {
  background-color: #9db847;
  color: #fff;
}

.icon-home:before {
  content: "\e902";
}

.icon-question:before {
  content: "\e903";
}

.icon-sort-list-ascend:before {
  content: "\e904";
}

.icon-sort-list-descend:before {
  content: "\e905";
}

.icon-ascending:before {
  content: "\e906";
}

.icon-descending:before {
  content: "\e907";
}

.icon-filter:before {
  content: "\e908";
}

.icon-download:before {
  content: "\e909";
}

.icon-trash:before {
  content: "\e90a";
}

.icon-more-nav:before {
  content: "\e90b";
}

.icon-audio:before {
  content: "\e90c";
}

.icon-gallery:before {
  content: "\e90d";
}

.icon-link:before {
  content: "\e90e";
}

.icon-play:before {
  content: "\e90f";
}

.icon-garage:before {
  content: "\e910";
}

.icon-epc:before {
  content: "\e911";
}

.icon-love:before {
  content: "\e930";
}

.icon-edit:before {
  content: "\e931";
}

.icon-phone:before {
  content: "\e942";
}

.icon-envelop:before {
  content: "\e945";
}

.icon-search:before {
  content: "\e986";
}

.icon-menu:before {
  content: "\e9bd";
}

.icon-star-empty:before {
  content: "\e9d7";
}

.icon-star-half:before {
  content: "\e9d8";
}

.icon-star-full:before {
  content: "\e9d9";
}

.icon-cross:before {
  content: "\ea0f";
}

.icon-google-plus:before {
  content: "\ea8b";
}

.icon-facebook:before {
  content: "\ea90";
}

.icon-twitter:before {
  content: "\ea96";
}

.icon-call:before {
  content: "\eaed";
}

.icon-camera:before {
  content: "\eaee";
}

.icon-document:before {
  content: "\eaef";
}

.icon-down-arrow-02:before {
  content: "\eaf0";
}

.icon-down-arrow:before {
  content: "\eaf1";
}

.icon-draw:before {
  content: "\eaf2";
}

.icon-email-circle:before {
  content: "\eaf3";
}

.icon-finance-calculator:before {
  content: "\eafe";
}

.icon-floorplan:before {
  content: "\eaff";
}

.icon-grid-view:before {
  content: "\eb01";
}

.icon-heart:before {
  content: "\eb02";
}

.icon-list-view:before {
  content: "\eb04";
}

.icon-map-02:before {
  content: "\eb07";
}

.icon-pdf:before {
  content: "\eb09";
}

.icon-pointer:before {
  content: "\eb0a";
}

.icon-print:before {
  content: "\eb0b";
}

.icon-school:before {
  content: "\eb0d";
}

.icon-search-02:before {
  content: "\eb0e";
}

.icon-sold-prices:before {
  content: "\eb0f";
}

.icon-sort-list-toggle:before {
  content: "\eb10";
}

.icon-station:before {
  content: "\eb11";
}

.icon-top-arrow:before {
  content: "\eb16";
}

.icon-up-arrow-02:before {
  content: "\eb17";
}

.icon-valuation:before {
  content: "\eb18";
}

.icon-value:before {
  content: "\eb19";
}

.icon-bathroom:before {
  content: "\ec00";
}

.icon-bedroom:before {
  content: "\ec01";
}

.icon-reception:before {
  content: "\ec03";
}

.icon-streetview:before {
  content: "\ec04";
}

.icon-share:before {
  content: "\ec05";
}

.icon-left-arrow:before {
  content: "\e900";
}

.icon-right-arrow:before {
  content: "\e901";
}

.icon-instagram:before {
  content: "\ea93";
}

.icon-youtube:before {
  content: "\ea9d";
}

.icon-eye:before {
  content: "\e9ce";
}

.icon-user:before {
  content: "\e971";
}

/**
 * DEPENDENCIES
 * - none
 */

/**
 * DEPENDENCIES
 * - none
 */

.list-noBullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-inline li {
  display: inline-block;
}

/**
 * Using normalize.css we have added in some variables so that the base
 * styling can be customised.
 *
 *
 * DEPENDENCIES
 * - 
 *
 *
 * USED WITH
 * -
 * 
 */

/**
 * DEPENDENCIES
 * - none
 */

.paint {
  background-color: #666;
  color: #fff;
}

.paint-footer {
  background-color: #4D4E4D;
  color: #fff;
}

.paint-panel {
  background-color: #ececea;
}

.paint-primary {
  background-color: #06532a;
  color: #fff;
}

.paint-secondary {
  background-color: #bf1622;
  color: #fff;
}

.paint-accent {
  background-color: #9db847;
  color: #fff;
}

.paint-contrast {
  background-color: #fff;
  color: #666;
}

.paint-label {
  background-color: #9db847;
  color: #06532a;
}

/*doc
---
title: Panel
name: panel
category: Base
---

Panels provide a way of adding spacing to UI sections

```html_example
	<div class="panel">
		<div class="Grid">
			<div class="Grid-column typeCenter">
				<h1>Hello</h1>
				<div>Panels are the building blocks of the world!</div>
			</div>
		</div>
	</div>
```

Using panel- reduces the horizontal spacing by half

```html_example
	<div class="panel-">
		<div class="Grid">
			<div class="Grid-column typeCenter">
				<h1>Hello</h1>
				<div>Panels are the building blocks of the world!</div>
			</div>
		</div>
	</div>
```

Using panel+ doubles the horizontal spacing

```html_example
	<div class="panel+">
		<div class="Grid">
			<div class="Grid-column typeCenter">
				<h1>Hello</h1>
				<div>Panels are the building blocks of the world!</div>
			</div>
		</div>
	</div>
```
*/

.panel {
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (min-width: 768px) {
  .panel {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .panel {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.panel\- {
  padding-top: 9px;
  padding-bottom: 9px;
}

@media (min-width: 768px) {
  .panel\- {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (min-width: 1024px) {
  .panel\- {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.panel\+ {
  padding-top: 36px;
  padding-bottom: 36px;
}

@media (min-width: 768px) {
  .panel\+ {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  .panel\+ {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.panel-input {
  padding: 6px 12px;
}

.panel-input\- {
  padding: 0 12px;
}

@media (max-width: 767px) {
  .panel-i--mob {
    padding: 18px;
  }
}

.panel-buttons {
  padding: 6px;
}

.panel-buttons .button {
  padding: 6px 24px;
}

/*
 *
 * DEPENDENCIES
 * - NONE
 * 
 */

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

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

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1.5;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * DEPENDENCIES
 * - none
 */

.s-1\/1 {
  width: 100% !important;
}

.s-1\/2 {
  width: 50% !important;
}

.s-1\/3 {
  width: 33.33333% !important;
}

.s-2\/3 {
  width: 66.66667% !important;
}

.s-1\/4 {
  width: 25% !important;
}

.s-2\/4 {
  width: 50% !important;
}

.s-3\/4 {
  width: 75% !important;
}

.s-1\/5 {
  width: 20% !important;
}

.s-2\/5 {
  width: 40% !important;
}

.s-3\/5 {
  width: 60% !important;
}

.s-4\/5 {
  width: 80% !important;
}

.s-1\/6 {
  width: 16.66667% !important;
}

.s-2\/6 {
  width: 33.33333% !important;
}

.s-3\/6 {
  width: 50% !important;
}

.s-4\/6 {
  width: 66.66667% !important;
}

.s-5\/6 {
  width: 83.33333% !important;
}

.s-1\/7 {
  width: 14.28571% !important;
}

.s-2\/7 {
  width: 28.57143% !important;
}

.s-3\/7 {
  width: 42.85714% !important;
}

.s-4\/7 {
  width: 57.14286% !important;
}

.s-5\/7 {
  width: 71.42857% !important;
}

.s-6\/7 {
  width: 85.71429% !important;
}

.s-1\/8 {
  width: 12.5% !important;
}

.s-2\/8 {
  width: 25% !important;
}

.s-3\/8 {
  width: 37.5% !important;
}

.s-4\/8 {
  width: 50% !important;
}

.s-5\/8 {
  width: 62.5% !important;
}

.s-6\/8 {
  width: 75% !important;
}

.s-7\/8 {
  width: 87.5% !important;
}

.h-1\/1 {
  height: 100vh !important;
}

.h-1\/2 {
  height: 50vh !important;
}

.h-1\/3 {
  height: 33.33333vh !important;
}

.h-2\/3 {
  height: 66.66667vh !important;
}

.h-1\/4 {
  height: 25vh !important;
}

.h-2\/4 {
  height: 50vh !important;
}

.h-3\/4 {
  height: 75vh !important;
}

.h-1\/5 {
  height: 20vh !important;
}

.h-2\/5 {
  height: 40vh !important;
}

.h-3\/5 {
  height: 60vh !important;
}

.h-4\/5 {
  height: 80vh !important;
}

.h-1\/6 {
  height: 16.66667vh !important;
}

.h-2\/6 {
  height: 33.33333vh !important;
}

.h-3\/6 {
  height: 50vh !important;
}

.h-4\/6 {
  height: 66.66667vh !important;
}

.h-5\/6 {
  height: 83.33333vh !important;
}

.h-1\/7 {
  height: 14.28571vh !important;
}

.h-2\/7 {
  height: 28.57143vh !important;
}

.h-3\/7 {
  height: 42.85714vh !important;
}

.h-4\/7 {
  height: 57.14286vh !important;
}

.h-5\/7 {
  height: 71.42857vh !important;
}

.h-6\/7 {
  height: 85.71429vh !important;
}

.h-1\/8 {
  height: 12.5vh !important;
}

.h-2\/8 {
  height: 25vh !important;
}

.h-3\/8 {
  height: 37.5vh !important;
}

.h-4\/8 {
  height: 50vh !important;
}

.h-5\/8 {
  height: 62.5vh !important;
}

.h-6\/8 {
  height: 75vh !important;
}

.h-7\/8 {
  height: 87.5vh !important;
}

@media (min-width: 320px) {
  .s-1\/1--mob {
    width: 100% !important;
  }

  .h-1\/1--mob {
    height: 100vh !important;
  }

  .s-1\/2--mob {
    width: 50% !important;
  }

  .h-1\/2--mob {
    height: 50vh !important;
  }

  .s-1\/3--mob {
    width: 33.33333% !important;
  }

  .s-2\/3--mob {
    width: 66.66667% !important;
  }

  .h-1\/3--mob {
    height: 33.33333vh !important;
  }

  .h-2\/3--mob {
    height: 66.66667vh !important;
  }

  .s-1\/4--mob {
    width: 25% !important;
  }

  .s-2\/4--mob {
    width: 50% !important;
  }

  .s-3\/4--mob {
    width: 75% !important;
  }

  .h-1\/4--mob {
    height: 25vh !important;
  }

  .h-2\/4--mob {
    height: 50vh !important;
  }

  .h-3\/4--mob {
    height: 75vh !important;
  }

  .s-1\/5--mob {
    width: 20% !important;
  }

  .s-2\/5--mob {
    width: 40% !important;
  }

  .s-3\/5--mob {
    width: 60% !important;
  }

  .s-4\/5--mob {
    width: 80% !important;
  }

  .h-1\/5--mob {
    height: 20vh !important;
  }

  .h-2\/5--mob {
    height: 40vh !important;
  }

  .h-3\/5--mob {
    height: 60vh !important;
  }

  .h-4\/5--mob {
    height: 80vh !important;
  }

  .s-1\/6--mob {
    width: 16.66667% !important;
  }

  .s-2\/6--mob {
    width: 33.33333% !important;
  }

  .s-3\/6--mob {
    width: 50% !important;
  }

  .s-4\/6--mob {
    width: 66.66667% !important;
  }

  .s-5\/6--mob {
    width: 83.33333% !important;
  }

  .h-1\/6--mob {
    height: 16.66667vh !important;
  }

  .h-2\/6--mob {
    height: 33.33333vh !important;
  }

  .h-3\/6--mob {
    height: 50vh !important;
  }

  .h-4\/6--mob {
    height: 66.66667vh !important;
  }

  .h-5\/6--mob {
    height: 83.33333vh !important;
  }

  .s-1\/7--mob {
    width: 14.28571% !important;
  }

  .s-2\/7--mob {
    width: 28.57143% !important;
  }

  .s-3\/7--mob {
    width: 42.85714% !important;
  }

  .s-4\/7--mob {
    width: 57.14286% !important;
  }

  .s-5\/7--mob {
    width: 71.42857% !important;
  }

  .s-6\/7--mob {
    width: 85.71429% !important;
  }

  .h-1\/7--mob {
    height: 14.28571vh !important;
  }

  .h-2\/7--mob {
    height: 28.57143vh !important;
  }

  .h-3\/7--mob {
    height: 42.85714vh !important;
  }

  .h-4\/7--mob {
    height: 57.14286vh !important;
  }

  .h-5\/7--mob {
    height: 71.42857vh !important;
  }

  .h-6\/7--mob {
    height: 85.71429vh !important;
  }

  .s-1\/8--mob {
    width: 12.5% !important;
  }

  .s-2\/8--mob {
    width: 25% !important;
  }

  .s-3\/8--mob {
    width: 37.5% !important;
  }

  .s-4\/8--mob {
    width: 50% !important;
  }

  .s-5\/8--mob {
    width: 62.5% !important;
  }

  .s-6\/8--mob {
    width: 75% !important;
  }

  .s-7\/8--mob {
    width: 87.5% !important;
  }

  .h-1\/8--mob {
    height: 12.5vh !important;
  }

  .h-2\/8--mob {
    height: 25vh !important;
  }

  .h-3\/8--mob {
    height: 37.5vh !important;
  }

  .h-4\/8--mob {
    height: 50vh !important;
  }

  .h-5\/8--mob {
    height: 62.5vh !important;
  }

  .h-6\/8--mob {
    height: 75vh !important;
  }

  .h-7\/8--mob {
    height: 87.5vh !important;
  }
}

@media (min-width: 768px) {
  .s-1\/1--tab {
    width: 100% !important;
  }

  .h-1\/1--tab {
    height: 100vh !important;
  }

  .s-1\/2--tab {
    width: 50% !important;
  }

  .h-1\/2--tab {
    height: 50vh !important;
  }

  .s-1\/3--tab {
    width: 33.33333% !important;
  }

  .s-2\/3--tab {
    width: 66.66667% !important;
  }

  .h-1\/3--tab {
    height: 33.33333vh !important;
  }

  .h-2\/3--tab {
    height: 66.66667vh !important;
  }

  .s-1\/4--tab {
    width: 25% !important;
  }

  .s-2\/4--tab {
    width: 50% !important;
  }

  .s-3\/4--tab {
    width: 75% !important;
  }

  .h-1\/4--tab {
    height: 25vh !important;
  }

  .h-2\/4--tab {
    height: 50vh !important;
  }

  .h-3\/4--tab {
    height: 75vh !important;
  }

  .s-1\/5--tab {
    width: 20% !important;
  }

  .s-2\/5--tab {
    width: 40% !important;
  }

  .s-3\/5--tab {
    width: 60% !important;
  }

  .s-4\/5--tab {
    width: 80% !important;
  }

  .h-1\/5--tab {
    height: 20vh !important;
  }

  .h-2\/5--tab {
    height: 40vh !important;
  }

  .h-3\/5--tab {
    height: 60vh !important;
  }

  .h-4\/5--tab {
    height: 80vh !important;
  }

  .s-1\/6--tab {
    width: 16.66667% !important;
  }

  .s-2\/6--tab {
    width: 33.33333% !important;
  }

  .s-3\/6--tab {
    width: 50% !important;
  }

  .s-4\/6--tab {
    width: 66.66667% !important;
  }

  .s-5\/6--tab {
    width: 83.33333% !important;
  }

  .h-1\/6--tab {
    height: 16.66667vh !important;
  }

  .h-2\/6--tab {
    height: 33.33333vh !important;
  }

  .h-3\/6--tab {
    height: 50vh !important;
  }

  .h-4\/6--tab {
    height: 66.66667vh !important;
  }

  .h-5\/6--tab {
    height: 83.33333vh !important;
  }

  .s-1\/7--tab {
    width: 14.28571% !important;
  }

  .s-2\/7--tab {
    width: 28.57143% !important;
  }

  .s-3\/7--tab {
    width: 42.85714% !important;
  }

  .s-4\/7--tab {
    width: 57.14286% !important;
  }

  .s-5\/7--tab {
    width: 71.42857% !important;
  }

  .s-6\/7--tab {
    width: 85.71429% !important;
  }

  .h-1\/7--tab {
    height: 14.28571vh !important;
  }

  .h-2\/7--tab {
    height: 28.57143vh !important;
  }

  .h-3\/7--tab {
    height: 42.85714vh !important;
  }

  .h-4\/7--tab {
    height: 57.14286vh !important;
  }

  .h-5\/7--tab {
    height: 71.42857vh !important;
  }

  .h-6\/7--tab {
    height: 85.71429vh !important;
  }

  .s-1\/8--tab {
    width: 12.5% !important;
  }

  .s-2\/8--tab {
    width: 25% !important;
  }

  .s-3\/8--tab {
    width: 37.5% !important;
  }

  .s-4\/8--tab {
    width: 50% !important;
  }

  .s-5\/8--tab {
    width: 62.5% !important;
  }

  .s-6\/8--tab {
    width: 75% !important;
  }

  .s-7\/8--tab {
    width: 87.5% !important;
  }

  .h-1\/8--tab {
    height: 12.5vh !important;
  }

  .h-2\/8--tab {
    height: 25vh !important;
  }

  .h-3\/8--tab {
    height: 37.5vh !important;
  }

  .h-4\/8--tab {
    height: 50vh !important;
  }

  .h-5\/8--tab {
    height: 62.5vh !important;
  }

  .h-6\/8--tab {
    height: 75vh !important;
  }

  .h-7\/8--tab {
    height: 87.5vh !important;
  }
}

@media (min-width: 1024px) {
  .s-1\/1--lap {
    width: 100% !important;
  }

  .h-1\/1--lap {
    height: 100vh !important;
  }

  .s-1\/2--lap {
    width: 50% !important;
  }

  .h-1\/2--lap {
    height: 50vh !important;
  }

  .s-1\/3--lap {
    width: 33.33333% !important;
  }

  .s-2\/3--lap {
    width: 66.66667% !important;
  }

  .h-1\/3--lap {
    height: 33.33333vh !important;
  }

  .h-2\/3--lap {
    height: 66.66667vh !important;
  }

  .s-1\/4--lap {
    width: 25% !important;
  }

  .s-2\/4--lap {
    width: 50% !important;
  }

  .s-3\/4--lap {
    width: 75% !important;
  }

  .h-1\/4--lap {
    height: 25vh !important;
  }

  .h-2\/4--lap {
    height: 50vh !important;
  }

  .h-3\/4--lap {
    height: 75vh !important;
  }

  .s-1\/5--lap {
    width: 20% !important;
  }

  .s-2\/5--lap {
    width: 40% !important;
  }

  .s-3\/5--lap {
    width: 60% !important;
  }

  .s-4\/5--lap {
    width: 80% !important;
  }

  .h-1\/5--lap {
    height: 20vh !important;
  }

  .h-2\/5--lap {
    height: 40vh !important;
  }

  .h-3\/5--lap {
    height: 60vh !important;
  }

  .h-4\/5--lap {
    height: 80vh !important;
  }

  .s-1\/6--lap {
    width: 16.66667% !important;
  }

  .s-2\/6--lap {
    width: 33.33333% !important;
  }

  .s-3\/6--lap {
    width: 50% !important;
  }

  .s-4\/6--lap {
    width: 66.66667% !important;
  }

  .s-5\/6--lap {
    width: 83.33333% !important;
  }

  .h-1\/6--lap {
    height: 16.66667vh !important;
  }

  .h-2\/6--lap {
    height: 33.33333vh !important;
  }

  .h-3\/6--lap {
    height: 50vh !important;
  }

  .h-4\/6--lap {
    height: 66.66667vh !important;
  }

  .h-5\/6--lap {
    height: 83.33333vh !important;
  }

  .s-1\/7--lap {
    width: 14.28571% !important;
  }

  .s-2\/7--lap {
    width: 28.57143% !important;
  }

  .s-3\/7--lap {
    width: 42.85714% !important;
  }

  .s-4\/7--lap {
    width: 57.14286% !important;
  }

  .s-5\/7--lap {
    width: 71.42857% !important;
  }

  .s-6\/7--lap {
    width: 85.71429% !important;
  }

  .h-1\/7--lap {
    height: 14.28571vh !important;
  }

  .h-2\/7--lap {
    height: 28.57143vh !important;
  }

  .h-3\/7--lap {
    height: 42.85714vh !important;
  }

  .h-4\/7--lap {
    height: 57.14286vh !important;
  }

  .h-5\/7--lap {
    height: 71.42857vh !important;
  }

  .h-6\/7--lap {
    height: 85.71429vh !important;
  }

  .s-1\/8--lap {
    width: 12.5% !important;
  }

  .s-2\/8--lap {
    width: 25% !important;
  }

  .s-3\/8--lap {
    width: 37.5% !important;
  }

  .s-4\/8--lap {
    width: 50% !important;
  }

  .s-5\/8--lap {
    width: 62.5% !important;
  }

  .s-6\/8--lap {
    width: 75% !important;
  }

  .s-7\/8--lap {
    width: 87.5% !important;
  }

  .h-1\/8--lap {
    height: 12.5vh !important;
  }

  .h-2\/8--lap {
    height: 25vh !important;
  }

  .h-3\/8--lap {
    height: 37.5vh !important;
  }

  .h-4\/8--lap {
    height: 50vh !important;
  }

  .h-5\/8--lap {
    height: 62.5vh !important;
  }

  .h-6\/8--lap {
    height: 75vh !important;
  }

  .h-7\/8--lap {
    height: 87.5vh !important;
  }
}

@media (min-width: 1280px) {
  .s-1\/1--desk {
    width: 100% !important;
  }

  .h-1\/1--desk {
    height: 100vh !important;
  }

  .s-1\/2--desk {
    width: 50% !important;
  }

  .h-1\/2--desk {
    height: 50vh !important;
  }

  .s-1\/3--desk {
    width: 33.33333% !important;
  }

  .s-2\/3--desk {
    width: 66.66667% !important;
  }

  .h-1\/3--desk {
    height: 33.33333vh !important;
  }

  .h-2\/3--desk {
    height: 66.66667vh !important;
  }

  .s-1\/4--desk {
    width: 25% !important;
  }

  .s-2\/4--desk {
    width: 50% !important;
  }

  .s-3\/4--desk {
    width: 75% !important;
  }

  .h-1\/4--desk {
    height: 25vh !important;
  }

  .h-2\/4--desk {
    height: 50vh !important;
  }

  .h-3\/4--desk {
    height: 75vh !important;
  }

  .s-1\/5--desk {
    width: 20% !important;
  }

  .s-2\/5--desk {
    width: 40% !important;
  }

  .s-3\/5--desk {
    width: 60% !important;
  }

  .s-4\/5--desk {
    width: 80% !important;
  }

  .h-1\/5--desk {
    height: 20vh !important;
  }

  .h-2\/5--desk {
    height: 40vh !important;
  }

  .h-3\/5--desk {
    height: 60vh !important;
  }

  .h-4\/5--desk {
    height: 80vh !important;
  }

  .s-1\/6--desk {
    width: 16.66667% !important;
  }

  .s-2\/6--desk {
    width: 33.33333% !important;
  }

  .s-3\/6--desk {
    width: 50% !important;
  }

  .s-4\/6--desk {
    width: 66.66667% !important;
  }

  .s-5\/6--desk {
    width: 83.33333% !important;
  }

  .h-1\/6--desk {
    height: 16.66667vh !important;
  }

  .h-2\/6--desk {
    height: 33.33333vh !important;
  }

  .h-3\/6--desk {
    height: 50vh !important;
  }

  .h-4\/6--desk {
    height: 66.66667vh !important;
  }

  .h-5\/6--desk {
    height: 83.33333vh !important;
  }

  .s-1\/7--desk {
    width: 14.28571% !important;
  }

  .s-2\/7--desk {
    width: 28.57143% !important;
  }

  .s-3\/7--desk {
    width: 42.85714% !important;
  }

  .s-4\/7--desk {
    width: 57.14286% !important;
  }

  .s-5\/7--desk {
    width: 71.42857% !important;
  }

  .s-6\/7--desk {
    width: 85.71429% !important;
  }

  .h-1\/7--desk {
    height: 14.28571vh !important;
  }

  .h-2\/7--desk {
    height: 28.57143vh !important;
  }

  .h-3\/7--desk {
    height: 42.85714vh !important;
  }

  .h-4\/7--desk {
    height: 57.14286vh !important;
  }

  .h-5\/7--desk {
    height: 71.42857vh !important;
  }

  .h-6\/7--desk {
    height: 85.71429vh !important;
  }

  .s-1\/8--desk {
    width: 12.5% !important;
  }

  .s-2\/8--desk {
    width: 25% !important;
  }

  .s-3\/8--desk {
    width: 37.5% !important;
  }

  .s-4\/8--desk {
    width: 50% !important;
  }

  .s-5\/8--desk {
    width: 62.5% !important;
  }

  .s-6\/8--desk {
    width: 75% !important;
  }

  .s-7\/8--desk {
    width: 87.5% !important;
  }

  .h-1\/8--desk {
    height: 12.5vh !important;
  }

  .h-2\/8--desk {
    height: 25vh !important;
  }

  .h-3\/8--desk {
    height: 37.5vh !important;
  }

  .h-4\/8--desk {
    height: 50vh !important;
  }

  .h-5\/8--desk {
    height: 62.5vh !important;
  }

  .h-6\/8--desk {
    height: 75vh !important;
  }

  .h-7\/8--desk {
    height: 87.5vh !important;
  }
}

@media (min-width: 2000px) {
  .s-1\/1--XLdesk {
    width: 100% !important;
  }

  .h-1\/1--XLdesk {
    height: 100vh !important;
  }

  .s-1\/2--XLdesk {
    width: 50% !important;
  }

  .h-1\/2--XLdesk {
    height: 50vh !important;
  }

  .s-1\/3--XLdesk {
    width: 33.33333% !important;
  }

  .s-2\/3--XLdesk {
    width: 66.66667% !important;
  }

  .h-1\/3--XLdesk {
    height: 33.33333vh !important;
  }

  .h-2\/3--XLdesk {
    height: 66.66667vh !important;
  }

  .s-1\/4--XLdesk {
    width: 25% !important;
  }

  .s-2\/4--XLdesk {
    width: 50% !important;
  }

  .s-3\/4--XLdesk {
    width: 75% !important;
  }

  .h-1\/4--XLdesk {
    height: 25vh !important;
  }

  .h-2\/4--XLdesk {
    height: 50vh !important;
  }

  .h-3\/4--XLdesk {
    height: 75vh !important;
  }

  .s-1\/5--XLdesk {
    width: 20% !important;
  }

  .s-2\/5--XLdesk {
    width: 40% !important;
  }

  .s-3\/5--XLdesk {
    width: 60% !important;
  }

  .s-4\/5--XLdesk {
    width: 80% !important;
  }

  .h-1\/5--XLdesk {
    height: 20vh !important;
  }

  .h-2\/5--XLdesk {
    height: 40vh !important;
  }

  .h-3\/5--XLdesk {
    height: 60vh !important;
  }

  .h-4\/5--XLdesk {
    height: 80vh !important;
  }

  .s-1\/6--XLdesk {
    width: 16.66667% !important;
  }

  .s-2\/6--XLdesk {
    width: 33.33333% !important;
  }

  .s-3\/6--XLdesk {
    width: 50% !important;
  }

  .s-4\/6--XLdesk {
    width: 66.66667% !important;
  }

  .s-5\/6--XLdesk {
    width: 83.33333% !important;
  }

  .h-1\/6--XLdesk {
    height: 16.66667vh !important;
  }

  .h-2\/6--XLdesk {
    height: 33.33333vh !important;
  }

  .h-3\/6--XLdesk {
    height: 50vh !important;
  }

  .h-4\/6--XLdesk {
    height: 66.66667vh !important;
  }

  .h-5\/6--XLdesk {
    height: 83.33333vh !important;
  }

  .s-1\/7--XLdesk {
    width: 14.28571% !important;
  }

  .s-2\/7--XLdesk {
    width: 28.57143% !important;
  }

  .s-3\/7--XLdesk {
    width: 42.85714% !important;
  }

  .s-4\/7--XLdesk {
    width: 57.14286% !important;
  }

  .s-5\/7--XLdesk {
    width: 71.42857% !important;
  }

  .s-6\/7--XLdesk {
    width: 85.71429% !important;
  }

  .h-1\/7--XLdesk {
    height: 14.28571vh !important;
  }

  .h-2\/7--XLdesk {
    height: 28.57143vh !important;
  }

  .h-3\/7--XLdesk {
    height: 42.85714vh !important;
  }

  .h-4\/7--XLdesk {
    height: 57.14286vh !important;
  }

  .h-5\/7--XLdesk {
    height: 71.42857vh !important;
  }

  .h-6\/7--XLdesk {
    height: 85.71429vh !important;
  }

  .s-1\/8--XLdesk {
    width: 12.5% !important;
  }

  .s-2\/8--XLdesk {
    width: 25% !important;
  }

  .s-3\/8--XLdesk {
    width: 37.5% !important;
  }

  .s-4\/8--XLdesk {
    width: 50% !important;
  }

  .s-5\/8--XLdesk {
    width: 62.5% !important;
  }

  .s-6\/8--XLdesk {
    width: 75% !important;
  }

  .s-7\/8--XLdesk {
    width: 87.5% !important;
  }

  .h-1\/8--XLdesk {
    height: 12.5vh !important;
  }

  .h-2\/8--XLdesk {
    height: 25vh !important;
  }

  .h-3\/8--XLdesk {
    height: 37.5vh !important;
  }

  .h-4\/8--XLdesk {
    height: 50vh !important;
  }

  .h-5\/8--XLdesk {
    height: 62.5vh !important;
  }

  .h-6\/8--XLdesk {
    height: 75vh !important;
  }

  .h-7\/8--XLdesk {
    height: 87.5vh !important;
  }
}

@media (max-width: 767px) {
  .s-1\/1--mobOnly {
    width: 100% !important;
  }
}

.hm-4 {
  max-height: 4em !important;
}

.hm-14 {
  max-height: 14em !important;
}

/**
 * DEPENDENCIES
 * - none
 */

.mt {
  margin-top: 6px;
}

.mt-2 {
  margin-top: 12px;
}

.mt-3 {
  margin-top: 18px;
}

.mt-4 {
  margin-top: 24px;
}

.mt-6 {
  margin-top: 36px;
}

.mt-8 {
  margin-top: 48px;
}

.mt-9 {
  margin-top: 54px;
}

.ml {
  margin-left: 6px;
}

@media (min-width: 768px) {
  .ml--tab {
    margin-left: 6px;
  }
}

.ml-2 {
  margin-left: 12px;
}

.ml-3 {
  margin-left: 18px;
}

.ml-4 {
  margin-left: 24px;
}

.mr {
  margin-right: 6px;
}

.mr-2 {
  margin-right: 12px;
}

.mr-3 {
  margin-right: 18px;
}

.mr-4 {
  margin-right: 24px;
}

.mb {
  margin-bottom: 6px;
}

.mb-2 {
  margin-bottom: 12px;
}

.mb-3 {
  margin-bottom: 18px;
}

.mb-4 {
  margin-bottom: 24px;
}

/*doc
---
title: Splash
name: splash
category: Base
---

Provides a base style for splash background images.

Classes can be created for specific use cases or if images are dynamic they
can be added via an inline style attr.

```html_example
	<div class="splash" style="background-image: url('https://images.unsplash.com/photo-1460500063983-994d4c27756c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=27c2758e7f3aa5b8b3a4a1d1f1812310'); height: 25vh;"></div>

	<div class="h-2/3 splash-videoWrap mt-4">
		<video loop="" poster="" autoplay="" id="bgvid" class="splash-video">
            <source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Gold.mp4" type="video/mp4">
        </video>
	</div>
```

Add:
For background video see above. Wrap video in .splash-videoWrap container and use .splash-video on video element
*/

.splash {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.splash-type {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.splash-type h1,
.splash-type h2,
.splash-type h3,
.splash-type h4,
.splash-type h5 {
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.splash-videoWrap {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.splash-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

/**
 * DEPENDENCIES
 * - none
 */

.typeDisplay,
.display {
  font-size: 35px;
  font-size: 2.1875rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .typeDisplay,
  .display {
    font-size: 50px;
    font-size: 3.125rem;
  }
}

.display-2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .display-2 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}

.display-3 {
  font-size: 22.4px;
  font-size: 1.4rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .display-3 {
    font-size: 32px;
    font-size: 2rem;
  }
}

.display-4 {
  font-size: 19.6px;
  font-size: 1.225rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .display-4 {
    font-size: 28px;
    font-size: 1.75rem;
  }
}

.typeHeading,
.heading {
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 1.25;
  font-weight: 700;
}

.typeHeading-1,
.heading-1 {
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 1.25;
  font-weight: 700;
  text-transform: uppercase;
}

.typeHeading-2,
.heading-2 {
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
}

.typeHeading-3,
.heading-3 {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
}

.typeHeading-4,
.heading-4 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
}

.typeHeading-5,
.heading-5 {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
}

.typeCopy,
.copy {
  font-size: 16px;
  font-size: 1rem;
}

.typeCopy-l,
.copy-l {
  font-size: 18px;
  font-size: 1.125rem;
}

.typeCopy-s,
.copy-s {
  font-size: 14px;
  font-size: 0.875rem;
}

.typeCopy-xs,
.copy-xs {
  font-size: 12px;
  font-size: 0.75rem;
}

.type-base {
  color: #666;
}

.type-text {
  color: #8A8B8A;
}

.type-baseContrast {
  color: #fff;
}

.type-primary {
  color: #06532a !important;
}

.type-secondary {
  color: #bf1622;
}

.type-accent {
  color: #9db847;
}

.type-removeContrast {
  color: #666;
  text-shadow: none;
}

.type-removeContrast h1,
.type-removeContrast h2,
.type-removeContrast h3,
.type-removeContrast h4,
.type-removeContrast h5 {
  color: #666 !important;
  text-shadow: none;
}

.type-removeContrast .type-primary {
  color: #06532a !important;
}

.link-underlineHover {
  border-bottom: 1px solid transparent;
}

.link-underlineHover:hover {
  color: #fff;
  border-color: #fff;
}

.link-contrast {
  color: #fff;
}

.link-text {
  color: #8A8B8A;
}

.link-text:hover,
.link-text:focus {
  color: #06532a;
}

.link-primary {
  color: #06532a;
}

.link-secondary {
  color: #bf1622;
}

.link-contrastBase:hover,
.link-contrastBase:focus {
  color: #fff;
}

.link-fill {
  color: #fff;
  background-color: #8A8B8A;
}

.link-fill:hover,
.link-fill:focus {
  color: #fff;
  background-color: #06532a;
}

.link-fillPrimary {
  color: #fff;
  background-color: #06532a;
}

.link-fillPrimary:hover,
.link-fillPrimary:focus {
  color: #fff;
  background-color: #666;
}

.link-fillSecondary {
  color: #fff;
  background-color: #bf1622;
}

.link-fillSecondary:hover,
.link-fillSecondary:focus {
  color: #fff;
  background-color: #666;
}

.link-fillContrast {
  color: #06532a;
  background-color: #fff;
}

.link-fillContrast:hover,
.link-fillContrast:focus {
  color: #fff;
  background-color: #666;
}

.link-fillContrastSecondary {
  color: #bf1622;
  background-color: #fff;
}

.link-fillContrastSecondary:hover,
.link-fillContrastSecondary:focus {
  color: #fff;
  background-color: #666;
}

.link-fillAccent {
  color: #fff;
  background-color: #9db847;
}

.link-fillAccent:hover,
.link-fillAccent:focus {
  color: #fff;
  background-color: #666;
}

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

/*doc
---
title: Utility
name: utility
category: Base
---

Utility classes that help with tiny comon cases

```html_example
	<div class="typeCenter">Example centered text</div>
	<div class="typeRight">Example right aligned text</div>
	<div class="typeRight--tab">Example text aligns right when it reaches tablet bp</div>

	<div class="left paint">Example text aligns right when it reaches tablet bp</div>
	<div class="right paint">Example text aligns right when it reaches tablet bp</div>

	<div class="hide-mob">Example text which is hidden on mobile</div>
```
*/

.typeCenter {
  text-align: center;
}

.typeRight {
  text-align: right;
}

.typeLeft {
  text-align: left;
}

@media (min-width: 768px) {
  .typeRight--tab {
    text-align: right;
  }
}

.left {
  float: left;
}

.right {
  float: right;
}

@media (max-width: 767px) {
  .right--mobOnly {
    float: right;
  }
}

@media (min-width: 768px) {
  .right--tab {
    float: right;
  }
}

@media (min-width: 1024px) {
  .right--lap {
    float: right;
  }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.block {
  display: block;
}

@media (max-width: 767px) {
  .hide-mob {
    display: none !important;
  }
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  background-color: #fff;
  font-size: 1em;
  line-height: 1.5;
  font-weight: normal;
  font-family: "Roboto", "Helvetica Neue", Helvetica, sans-serif;
  color: #666;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

/*
 * TODO:
 */

blockquote {
  font-size: 18px;
  font-size: 1.125rem;
  margin: 0;
  padding: 12px 18px;
  position: relative;
}

blockquote footer {
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 24px;
}

button {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 700;
  display: inline-block;
  padding: 12px 30px;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  text-align: center;
  color: #06532a;
  background-color: transparent;
  border: 1px solid rgba(102, 102, 102, 0.14);
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

button:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

button:hover {
  cursor: pointer;
}

/*doc
---
title: Dividers
name: dividers
category: Elements
---

Hr

```html_example
	<hr>
```
*/

hr {
  border: 0;
  height: 1px;
  background: rgba(102, 102, 102, 0.14);
}

/*
 * TODO: Make button and input styling based on same styles so that when used together they work nicely
 */

/**
 * input Base extend Notes
 * These styles have been set to give a base style which is consistant across
 * input types
 *
 * TODO: See if a hieght is needed to keep consistancy across all input types
 */

/**
 * Placeholder extend Notes
 * Sets the placeholder text colour
 */

/**
 * Label Notes
 * Very simple base styles which can be built apon with formfield classes
 */

label {
  font-weight: 700;
  color: #06532a;
}

/**
 * input Notes
 * 
 */

/**
 * input Submit Notes
 * 
 */

/**
 * Select Notes
 * 
 */

/**
 * Textarea Notes
 * 
 */

/**
 * Intro text
 *
 *
 * DEPENDENCIES
 * - base/type
 *
 *
 * USED WITH
 * -
 * 
 */

h1,
h2,
h3,
h4,
h5 {
  color: #06532a;
}

h1 {
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 1.25;
  font-weight: 700;
  text-transform: uppercase;
}

p + h1 {
  margin-top: 24px;
}

h2 {
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
}

p + h2 {
  margin-top: 18px;
}

h3 {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
}

p + h3 {
  margin-top: 18px;
}

h4 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
}

p + h4 {
  margin-top: 12px;
}

h5 {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
}

p + h5 {
  margin-top: 12px;
}

img {
  display: block;
  position: relative;
}

/**
 * Intro text
 *
 *
 * DEPENDENCIES
 * - 
 *
 *
 * USED WITH
 * -
 * 
 */

a {
  color: #06532a;
  text-decoration: none;
}

a:hover,
a:focus {
  outline: 0;
  color: #666;
}

a:hover {
  cursor: pointer;
}

/**
 * Intro text
 *
 *
 * DEPENDENCIES
 * - 
 *
 *
 * USED WITH
 * -
 * 
 */

ul {
  list-style: circle;
}

ol,
ul {
  padding-left: 2rem;
}

/**
 * Intro text
 *
 *
 * DEPENDENCIES
 * - base/type
 *
 *
 * USED WITH
 * -
 * 
 */

p {
  font-size: 16px;
  font-size: 1rem;
}

p + p {
  margin-top: 16px;
}

h1 + p,
h2 + p {
  margin-top: 16px;
}

h3 + p {
  margin-top: 8px;
}

h4 + p,
h5 + p {
  margin-top: 4px;
}

/**
 * Text element styling
 *
 *
 * DEPENDENCIES
 * - 
 *
 *
 * USED WITH
 * -
 * 
 */

b,
strong {
  font-weight: 700;
}

i,
cite,
em,
var,
address,
dfn {
  font-style: italic;
}

small {
  font-size: 75%;
}

/*doc
---
title: Grid
name: grid
category: Component
---

Based on Griddle: https://github.com/necolas/griddle/blob/master/_griddle.scss

The grid is used for layout and structure. It should ideally be used to wrap
elements rather than alongside elements/components.

It is used alongside the sizing base, which is used to give the columns widths.

```html_example
	<div class="Grid">
		<div class="Grid-column s-1/2">
			<h1>Hello</h1>
		</div>
		<div class="Grid-column s-1/2">
			<h1>Hello</h1>
		</div>
	</div>
```

.Grid--centerColumn - centers the positioning of a column
.Grid--center - centers the grid wrapper. To be used when the Grid has sizing
*/

.Grid {
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

@media (min-width: 768px) {
  .Grid {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.Grid .Grid {
  margin-left: -24px;
  margin-right: -24px;
}

@media (min-width: 768px) {
  .Grid .Grid {
    margin-left: -48px;
    margin-right: -48px;
  }
}

.Grid--grid {
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (min-width: 768px) {
  .Grid--grid {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.Grid--grid .Grid-column {
  padding-top: 6px;
  padding-bottom: 6px;
}

@media (min-width: 768px) {
  .Grid--grid .Grid-column {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.Grid--tiles .Grid {
  margin: 0;
}

@media (min-width: 768px) {
  .Grid--tiles .Grid {
    padding-left: 0;
    padding-right: 0;
  }
}

.Grid--tiles .Grid-column {
  padding: 0;
}

.Grid--masonry {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .Grid--masonry {
    padding-left: 0;
    padding-right: 0;
    margin-left: 24px;
    margin-right: 24px;
  }
}

.Grid--gridFT {
  margin-top: -6px;
  padding-bottom: 12px;
}

@media (min-width: 768px) {
  .Grid--gridFT {
    margin-top: -12px;
    padding-bottom: 24px;
  }
}

.Grid--gridFT .Grid-column {
  padding-top: 6px;
  padding-bottom: 6px;
}

@media (min-width: 768px) {
  .Grid--gridFT .Grid-column {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 767px) {
  .Grid--slimMob .Grid-column {
    padding-left: 0;
    padding-right: 0;
  }
}

.Grid--s .Grid-column {
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 1023px) {
  .Grid--s--tabDown .Grid-column {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.Grid--centerColumn {
  text-align: center;
}

.Grid--centerColumn .Grid-column {
  text-align: left;
}

.Grid--center {
  margin-left: auto;
  margin-right: auto;
}

.opera:-o-prefocus,
.Grid {
  word-spacing: -0.43em;
}

.Grid-tile {
  padding-left: 24px;
}

.Grid-tile--right {
  padding: 24px;
}

.Grid-column {
  display: inline-block;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

@media (max-width: 767px) {
  .Grid-column {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.Grid-column--row {
  display: block;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

.Grid-column--middle {
  vertical-align: middle;
}

/*doc
---
title: Accordion
name: accordion
category: Cat
---

Description of what this styling does and what it is solving

```html_example
	<ul class="Accordion">
		<li class="Accordion-item">
			<a href="#" class="Accordion-itemToggle js-toggle" data-target="Test">Example accordion title</a>
			<div id="Test" class="Accordion-itemBody">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit minus corporis quam ut expedita atque ullam voluptate officia quidem cumque, quasi consequuntur et dicta asperiores porro, ea. Labore, sit!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo fugit voluptatem iste veritatis aliquam praesentium quibusdam doloribus corporis maxime. Deserunt eaque sapiente iusto modi quia, doloribus quo in quidem veritatis.</p>
			</div>
		</li>

		<li class="Accordion-item">
			<a href="#" class="Accordion-itemToggle js-toggle" data-target="Test-1">Example accordion title</a>
			<div id="Test-1" class="Accordion-itemBody">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit minus corporis quam ut expedita atque ullam voluptate officia quidem cumque, quasi consequuntur et dicta asperiores porro, ea. Labore, sit!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo fugit voluptatem iste veritatis aliquam praesentium quibusdam doloribus corporis maxime. Deserunt eaque sapiente iusto modi quia, doloribus quo in quidem veritatis.</p>
			</div>
		</li>

		<li class="Accordion-item">
			<a href="#" class="Accordion-itemToggle js-toggle" data-target="Test-2">Example accordion title</a>
			<div id="Test-2" class="Accordion-itemBody">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit minus corporis quam ut expedita atque ullam voluptate officia quidem cumque, quasi consequuntur et dicta asperiores porro, ea. Labore, sit!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo fugit voluptatem iste veritatis aliquam praesentium quibusdam doloribus corporis maxime. Deserunt eaque sapiente iusto modi quia, doloribus quo in quidem veritatis.</p>
			</div>
		</li>
	</ul>
```
*/

.Accordion {
  list-style: none;
  padding: 0;
}

.Accordion-item + .Accordion-item {
  border-top: 1px solid transparent;
}

.Accordion-itemToggle {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 700;
  display: block;
  position: relative;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 30px;
}

.Accordion-itemToggle:after {
  font-family: 'ea-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -1px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\eaf0";
  position: absolute;
  top: 15px;
  right: 0;
}

.Accordion-itemToggle.is-active:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.Accordion-itemBody {
  display: none;
  padding-bottom: 18px;
}

.Accordion-itemBody.is-active {
  display: block;
}

/**
 * DEPENDENCIES
 * - none
 */

.Card {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgba(102, 102, 102, 0.14);
}

.Card:hover .Card-overlay {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.Card--s .Card-body,
.Card--s.Card--inner {
  padding: 6px 6px 0 6px;
}

.Card--m .Card-body,
.Card--m.Card--inner {
  padding: 24px;
}

.Card--l .Card-body,
.Card--l.Card--inner {
  padding: 24px 18px;
}

@media (min-width: 768px) {
  .Card--l .Card-body,
  .Card--l.Card--inner {
    padding: 36px;
  }
}

.Card--splash {
  padding-bottom: 66.66667%;
  position: relative;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  color: #fff;
}

.Card--splash:hover {
  color: #fff;
}

.Card--splash .Card-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Card--splash .Card-body--bottom {
  top: auto;
  bottom: 0;
  height: auto;
  max-height: 100%;
}

.Card--splash .Card-body--paint {
  background-color: rgba(102, 102, 102, 0.64);
}

.Card--splash .Card-action {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  text-align: center;
}

.Card--inner {
  padding: 12px;
}

.Card--primary {
  background-color: #06532a;
  color: #fff;
}

.Card--primary a {
  color: #fff;
}

.Card--secondary {
  background-color: #bf1622;
  color: #fff;
}

.Card--secondary a {
  color: #fff;
}

.Card--accent {
  background-color: #9db847;
  color: #fff;
}

.Card--accent a {
  color: #fff;
}

.Card--alert {
  background-color: #EA4E35;
  color: #fff;
}

.Card--alert a {
  color: #fff;
}

.Card--twitter {
  background-color: #4D9FEB;
  color: #fff;
}

.Card--twitter a {
  color: #fff;
}

.Card--facebook {
  background-color: #415994;
  color: #fff;
}

.Card--facebook a {
  color: #fff;
}

.Card--youtube {
  background-color: #AE2C26;
  color: #fff;
}

.Card--youtube a {
  color: #fff;
}

.Card--simple {
  border-color: transparent;
}

.Card-body {
  padding: 12px;
}

.Card-splash {
  position: relative;
}

.Card-splashSnack {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 6px;
  background-color: #06532a;
  color: #fff;
}

.Card-splashSnack--right {
  left: auto;
  right: 0;
  background-color: #bf1622;
}

.Card-splashImg {
  width: 100%;
  height: auto;
}

.Card-splashImg--alt {
  width: auto;
}

.Card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-transform: translate(-101%);
  -ms-transform: translate(-101%);
  transform: translate(-101%);
  background-color: rgba(6, 83, 42, 0.9);
}

.Card--splash--zoom {
  background-size: 100%;
  transition: background-size 1s ease-in;
  -webkit-transition: background-size 1s ease-in;
}

.Card--splash--zoom:hover {
  background-size: 120% auto;
}

.Card--ticket {
  position: relative;
  padding-left: 102px;
}

.Card--ticket.Card--m {
  padding-left: 102px;
}

.Card--ticket > .icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78px;
  line-height: 78px;
  text-align: center;
  background-color: rgba(102, 102, 102, 0.14);
}

/*doc
---
title: Cover
name: cover
category: Component
---

The Cover component is used create an element which fills x height with its
body being vertically aligned in the center. 

```html_example
	<div class="Cover h-1/1">
		<div class="Cover-body">
			<div class="Cover-inner s-1/3 typeCenter">
				<h1>Hello</h1>
				<div>Covers are the building blocks of the world!</div>
			</div>
		</div>
	</div>
```

.Cover-inner
*/

.Cover {
  position: relative;
  padding-top: 36px;
  padding-bottom: 36px;
  z-index: 1;
  overflow: hidden;
}

@media (min-width: 768px) {
  .Cover {
    display: table;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 768px) {
  .Cover-body {
    display: table-cell;
    vertical-align: middle;
    position: relative;
  }
}

.Cover-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 768px) {
  .Cover-inner {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/*doc
---
title: Form
name: form
category: Component
---

The form component helps give a consistant structure and layout to forms

```html_example
	<div class="Form">
		<form action="">
			<div class="Form-field">
				<label for="" class="Form-label">Label text</label>
				<input type="email" class="Form-input" placeholder="Email Address">
			</div>
			
			<div class="Form-field">
				<label for="" class="Form-label">Label text</label>
				<input type="email" class="Form-input" placeholder="Email Address">
			</div>

			<div class="Form-field">
				<label for="" class="Form-label">Label text</label>
				<div class="Form-select">
					<select name="saleType" id="saleType" class="">
						<option value="1">To Buy</option>
						<option value="1">To Rent</option>
					</select>
				</div>
			</div>

			<div class="Form-field">
				<label for="" class="Form-label">Join mailing list</label>
				
				<div class="">
					<div class="Form-inputPill">
						<input type="radio" id="Mailing_Yes" name="Mailing" value="Yes">
						<label for="Mailing_Yes">Yes</label>
					</div>

					<div class="Form-inputPill">
						<input type="radio" id="Mailing_No" name="Mailing" value="No">
						<label for="Mailing_No">No</label>
					</div>
				</div>
			</div>

			<div class="Form-field">
				<input type="submit" class="Form-button" value="Subscribe">
			</div>
		</form>
	</div>

	<div class="Form Form--alt Form--s mt-6">
		<form action="">
			<div class="Form-field">
				<label for="" class="Form-label">Label text</label>
				<input type="email" class="Form-input" placeholder="Email Address">
			</div>
			
			<div class="Form-field">
				<label for="" class="Form-label">Label text</label>
				<input type="email" class="Form-input" placeholder="Email Address">
			</div>
			
			<div class="Form-field Form-field--inlineFields">
				<label for="" class="Form-label s-1/3">Label text</label>
				<input type="email" class="Form-input s-2/3" placeholder="Email Address">
			</div>

			<div class="Form-field">
				<input type="submit" class="Form-button" value="Subscribe">
			</div>
		</form>
	</div>
```
*/

.Form:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767px) {
  .Form--search .Form-field {
    width: 100%;
  }

  .Form--search .Form-field + .Form-field {
    margin-top: 6px;
  }

  .Form--search .Form-button > .icon-only {
    line-height: 27px;
  }

  .Form--search .icon-only {
    width: auto;
    height: auto;
    text-indent: 0;
  }

  .Form--search .icon-only:before {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin-right: 6px;
  }
}

.Form--alt .Form-label {
  display: block;
  padding: 6px 12px;
  background-color: #9db847;
  color: #06532a;
  border: 1px solid #9db847;
}

.Form--alt .Form-label .Form-field--inline {
  display: inline-block;
}

.Form--alt .Form-input {
  background-color: #fff;
}

.Form--s .Form-label,
.Form--s .Form-input,
.Form--s .Form-textarea {
  font-size: 12px;
  font-size: 0.75rem;
  padding: 0 12px;
  height: 26px;
}

.Form--s .Form-label {
  line-height: 24px;
}

@media (min-width: 768px) {
  .Form--inline .Form-field {
    display: inline-block;
  }
}

.Form--inline .Form-field + .Form-field {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .Form--inline .Form-field + .Form-field {
    margin-left: 24px;
    margin-top: 0;
  }
}

.Form-field + .Form-field {
  margin-top: 12px;
}

.Form-field--noLabel,
.Form-field + .Form-field--noLabel {
  margin-top: 36px;
}

.Form-field--inline {
  display: inline-block;
  vertical-align: top;
  padding-left: 24px;
  margin-top: 12px;
}

.Form-field--group {
  display: inline-block;
  vertical-align: top;
}

.Form-field--group + .Form-field--group {
  margin-top: 0;
}

.Form-field--inlineFlat {
  padding-left: 0;
  margin-top: 0;
}

.Form-field--inlineFlat + .Form-field--inlineFlat {
  padding-left: 24px;
}

.Form-field--inlineFields .Form-input,
.Form-field--inlineFields .Form-textarea,
.Form-field--inlineFields .Form-label,
.Form-field--inlineFields .Form-select {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}

.Form-field--inlineFields .Form-label + .Form-input,
.Form-field--inlineFields .Form-label + .Form-textarea {
  margin-top: 0;
  margin-left: -4px;
}

.Form-field.has-error .Form-label {
  color: #EA4E35;
}

.Form-field.Form-field--required .Form-label:after {
  content: " *";
}

.Form-input {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 500;
  padding: 6px 12px;
  height: 38px;
  width: 100%;
  border: 1px solid rgba(102, 102, 102, 0.14);
  background-color: rgba(102, 102, 102, 0.14);
  border-radius: 0;
}

.Form-field.has-error .Form-input {
  border-color: #EA4E35;
}

.Form-input--contrast {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.88);
}

.Form-textarea {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 500;
  padding: 6px 12px;
  height: 110px;
  width: 100%;
  border: 1px solid rgba(102, 102, 102, 0.14);
  background-color: rgba(102, 102, 102, 0.14);
  border-radius: 0;
}

.Form-field.has-error .Form-textarea {
  border-color: #EA4E35;
}

.Form-button {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 700;
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  text-align: center;
  color: #06532a;
  background-color: transparent;
  border: 1px solid #06532a;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
  width: 100%;
  height: 38px;
  background-color: #06532a;
  color: #fff;
}

.Form-button:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.Form-button > .icon-only {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

.Form-button--secondary {
  background-color: #bf1622;
  border-color: #bf1622;
  color: #fff;
}

.Form-button--accent {
  background-color: #9db847;
  border-color: #9db847;
  color: #fff;
}

.Form-input--inline {
  width: auto;
  float: left;
  padding-left: 24px;
  margin-top: 12px;
}

.Form-inputPill {
  display: inline-block;
  margin-right: 12px;
}

.Form-field--inline .Form-inputPill {
  vertical-align: middle;
  width: auto;
}

.Form-field--inline .Form-inputPill + .Form-label {
  margin-left: 24px;
}

.Form-inputPill input[type="radio"],
.Form-inputPill input[type="checkbox"] {
  display: none;
}

.Form-inputPill input[type="radio"]:checked + label,
.Form-inputPill input[type="checkbox"]:checked + label {
  background-color: #06532a;
  color: #fff;
}

.Form-inputPill label {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid #06532a;
  color: #06532a;
  border-radius: 0;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.Form-inputPill label:hover {
  cursor: pointer;
}

.Form-inputPill:last-of-type {
  margin-right: 0;
}

.Form-inputPill.is-inactive {
  opacity: .6;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
}

.Form-inputPill.is-inactive:hover {
  opacity: 1;
  -webkit-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
}

.Form-select {
  position: relative;
}

.Form-field.has-error .Form-select {
  border-color: #EA4E35;
}

.Form-select:hover {
  cursor: pointer;
}

.Form-select:after {
  content: '';
  height: 0;
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border-top: 6px solid rgba(102, 102, 102, 0.14);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  pointer-events: none;
}

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

.Form-select select {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  font-weight: 500;
  padding: 6px 12px;
  height: 38px;
  min-width: 135px;
  width: 100%;
  padding-right: 30px;
  border: 1px solid rgba(102, 102, 102, 0.14);
  background-color: rgba(102, 102, 102, 0.14);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.Form-select--primary:after {
  border-top-color: #fff;
}

.Form-select--primary select {
  background-color: #06532a;
  color: #fff;
}

/*doc
---
title: Island
name: island
category: Component
---

Islands are layout components which can be used in place of grids where

```html_example
	<ul class="Nav">
		<li class="Nav-item"><a href="#" class="Nav-link">Nav item</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Item 2</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Something else</a></li>
	</ul>
```
*/

.Island {
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (min-width: 768px) {
  .Island {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.Island .Grid {
  margin-left: -24px;
  margin-right: -24px;
}

@media (min-width: 768px) {
  .Island .Grid {
    margin-left: -48px;
    margin-right: -48px;
  }
}

@media (min-width: 768px) {
  .Island {
    padding-top: 108px;
    padding-bottom: 108px;
  }
}

@media (min-width: 1024px) {
  .Island {
    padding-top: 162px;
    padding-bottom: 162px;
  }
}

.Island--splash {
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.Island--splashHero {
  background-image: url("../img/splash/hero.jpg");
}

.Island-body {
  display: block;
  width: 100%;
  padding: 0 24px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

@media (min-width: 768px) {
  .Island-body {
    width: 75%;
  }
}

@media (min-width: 1024px) {
  .Island-body {
    width: 66.66667%;
  }
}

.Island-bridge {
  float: left;
  margin-top: -24px;
}

@media (min-width: 768px) {
  .Island-bridge {
    margin-top: -48px;
  }
}

@media (min-width: 1024px) {
  .Island-bridge {
    margin-top: -66px;
  }
}

/**
 * DEPENDENCIES
 * - none
 */

.Media,
.Media-body {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}

.Media--xl .Media-image,
.Media--xl .Media-imageMiddle {
  margin-right: 24px;
}

.Media--xl .Media-imageAlt,
.Media--xl .Media-imageAltMiddle {
  margin-left: 24px;
}

.Media-image img,
.Media-imageAlt img {
  display: block;
}

.Media-image,
.Media-imageMiddle {
  margin-right: 12px;
}

.Media-image {
  float: left;
}

@media (max-width: 767px) {
  .Media-image--tab,
  .Media-imageAlt--tab {
    float: none;
    margin: 0;
  }
}

.Media-imageAlt,
.Media-imageAltMiddle {
  margin-left: 12px;
}

.Media-imageAlt {
  float: right;
}

.Media-bodyMiddle,
.Media-imageMiddle,
.Media-imageAltMiddle {
  display: inline-block;
  vertical-align: middle;
}

.Media-imageMiddle img {
  vertical-align: bottom;
}

/*doc
---
title: Modal
name: modal
category: Component
---

Description of what this styling does and what it is solving

```html_example
	<a class="button js-toggle" data-target="Modal_test">Modal toggle</a>

	<div class="Modal" id="Modal_test">
		<div class="Modal-body s-1/2">
			<a href="#" class="Modal-close js-toggle" data-target="Modal_test">Close</a>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe voluptatum, itaque quia enim provident quidem, omnis asperiores soluta, ipsum praesentium natus commodi animi officia iusto! Et quis numquam error aspernatur.</p>
		</div>
	</div>
```
*/

.Modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  padding: 36px 24px;
  z-index: 9999;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(102, 102, 102, 0.5);
}

.Modal.is-active {
  display: block;
}

.Modal-body {
  position: relative;
  padding: 48px 24px 36px;
  margin: 48px auto;
  background-color: #fff;
}

@media (min-width: 768px) {
  .Modal-body {
    padding: 60px 36px 48px;
  }
}

.Modal-heading {
  position: absolute;
  top: 16px;
  left: 24px;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .Modal-heading {
    left: 36px;
  }
}

.Modal-close {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  text-indent: -9999px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.Modal-close:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-indent: 0;
}

.Modal-close:before {
  font-family: 'ea-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -1px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\ea0f";
}

/*doc
---
title: Nav
name: nav
category: Component
---

Nav is an modifiable component which can be used for all navigation requirements
such as lists, and bars.

```html_example
	<ul class="Nav">
		<li class="Nav-item"><a href="#" class="Nav-link">Nav item</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Item 2</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Something else</a></li>
	</ul>
```

Adding .Nav--inline creates an inline navlist

```html_example
	<ul class="Nav Nav--inline">
		<li class="Nav-item"><a href="#" class="Nav-link">Nav item</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Item 2</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Something else</a></li>
	</ul>

	<ul class="Nav Nav--inline">
		<li class="Nav-item">
			<a href="" class="Nav-link">1</a>
		</li>
		<li class="Nav-item">
			<a href="" class="Nav-link">2</a>
		</li>
		<li class="Nav-item">
			<a href="" class="Nav-link">3</a>
		</li>
		<li class="Nav-item">
			<a href="" class="Nav-link">4</a>
		</li>
	</ul>
```

Adding .Nav--bar creates an inline navlist with a background

```html_example
	<ul class="Nav Nav--bar">
		<li class="Nav-item"><a href="#" class="Nav-link">Nav item</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Item 2</a></li>
		<li class="Nav-item"><a href="#" class="Nav-link">Something else</a></li>
	</ul>
```
*/

.Nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.Nav--inline:after {
  content: "";
  display: table;
  clear: both;
}

.Nav--inline .Nav-item {
  display: inline-block;
  vertical-align: middle;
}

.Nav--bar {
  background-color: #9db847;
}

.Nav--bar:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 768px) {
  .Nav--bar {
    padding-left: 36px;
    padding-left: 36px;
  }
}

.Navbar--divider + .Nav--bar {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.Nav--bar .Nav-item {
  float: left;
  border-right: 2px solid #fff;
}

@media (min-width: 768px) {
  .Nav--bar .Nav-item:first-of-type {
    border-left: 2px solid #fff;
  }
}

@media (max-width: 767px) {
  .Nav--bar .Nav-item {
    width: 50%;
  }

  .Nav--bar .Nav-item:nth-of-type(2n) {
    border-right-color: transparent;
  }
}

@media (min-width: 768px) {
  .Nav--bar .Nav-item--right {
    float: right;
    border-right-color: transparent;
  }
}

.Nav--bar .Nav-link {
  text-align: center;
  color: #fff;
}

@media (min-width: 768px) {
  .Nav--bar .Nav-link {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.Nav--list .Nav-item {
  border-top: 1px solid transparent;
}

.Nav--list .Nav-item + .Nav-item {
  border-top-color: rgba(102, 102, 102, 0.14);
}

.Nav--subList {
  display: none;
  margin-left: 24px;
}

.Nav--subList.is-active {
  display: block;
}

.Nav--subList .Nav-item + .Nav-item {
  border-top-color: transparent;
}

.Nav--subList .Nav-link {
  padding-top: 6px;
  padding-bottom: 6px;
}

.Nav-item.is-active .Nav-link {
  color: #bf1622;
}

.Nav-link {
  text-decoration: none;
  display: block;
  padding: 12px;
  text-decoration: none;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

.Nav-link:hover,
.Nav-link:focus {
  background-color: rgba(102, 102, 102, 0.14);
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

.Nav-link--drop:after {
  content: "";
  display: table;
  clear: both;
}

.Nav-link--drop:after {
  font-family: 'ea-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -1px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\eaf0";
  float: right;
  line-height: inherit;
}

.Nav-link--drop.is-active:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*doc
---
title: Navbar
name: navbar
category: Component
---

Navbar styling is predominatly for the primary site navigation however can
be applied anywhere if desired.
The Navbar can be used with the Sidebar component to to add a further layer
of off canvas navigation.

```html_example
<div class="Page">
	<div class="Sidebar" id="NavSidebar">
		<a href="#" class="Sidebar-toggle icon icon-only icon-cross js-toggle" data-target="NavSidebar">Close</a>

		<ul class="Nav">
			<li class="Nav-item"><a href="#" class="Nav-link link-contrast">Nav item</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link link-contrast">Item 2</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link link-contrast">Something else</a></li>
		</ul>
	</div>

	<nav class="Navbar paint">
		<ul class="Nav Nav--inline Navbar-nav">
			<li class="Nav-item"><a href="#" class="Nav-link icon-onlySlim icon icon-menu js-toggle" data-target="NavSidebar">Menu</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link icon-onlySlim icon icon-phone">Phone</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link icon-onlySlim icon icon-search">Search</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link icon-onlySlim icon icon-envelop">Email</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link icon-onlySlim icon icon-home">Home</a></li>
		</ul>

		<a href="#" class="Navbar-brand">Brand</a>
	</nav>
</div>
```
Adding .Navbar--alt to .Navbar flips the brand and navbar icons.
Adding .Navbar--fixed to .Navbar removes it from the flow and fixes it.
Adding .Navbar--paint to .Navbar adds a background colour to the navbar.
Adding .Sidebar--alt to .Sidebar slides the sidebar in from the right.
*/

.Navbar {
  position: relative;
  height: 79px;
  z-index: 9998;
  background-color: #06532a;
}

@media (min-width: 768px) {
  .Navbar {
    height: 60.66667px;
  }
}

@media (min-width: 1024px) {
  .Navbar {
    height: 79px;
  }
}

@media (min-width: 1280px) {
  .Navbar {
    z-index: 0;
  }
}

.Navbar--divider {
  border-bottom: 5px solid #9db847;
}

.Navbar--alt .Navbar-nav {
  left: auto;
  right: 12px;
}

@media (min-width: 768px) {
  .Navbar--alt .Navbar-nav {
    right: 24px;
  }
}

.Navbar--alt .Navbar-brand {
  right: auto;
  left: 12px;
}

@media (min-width: 768px) {
  .Navbar--alt .Navbar-brand {
    left: 24px;
  }
}

.Navbar--fixed {
  background-color: transparent;
  -webkit-transition: background .3s ease-out, height .3s ease-out;
  transition: background .3s ease-out, height .3s ease-out;
}

@media (max-width: 767px) {
  .Navbar--fixed {
    background-color: #06532a;
  }
}

@media (min-width: 768px) {
  .Navbar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9996;
    height: 108.66667px;
    border-bottom-color: transparent;
  }
}

@media (min-width: 1024px) {
  .Navbar--fixed {
    height: 127px;
  }
}

.Navbar--fixed.is-painted {
  background-color: #06532a;
  border-bottom: 5px solid #9db847;
  -webkit-transition: background .3s ease-in, height .3s ease-in;
  transition: background .3s ease-in, height .3s ease-in;
}

@media (min-width: 768px) {
  .Navbar--fixed.is-painted {
    height: 60.66667px;
  }
}

@media (min-width: 1024px) {
  .Navbar--fixed.is-painted {
    height: 79px;
  }
}

.Navbar--solid {
  background-color: #06532a;
  border-bottom: 5px solid #9db847;
}

@media (min-width: 1024px) {
  .Navbar--solid.Navbar--fixed + * {
    margin-top: 108.66667px;
  }
}

@media (min-width: 1024px) {
  .Navbar--solid.Navbar--fixed + * {
    margin-top: 127px;
  }
}

.Navbar-nav {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .Navbar-nav {
    left: 24px;
  }
}

@media (min-width: 1280px) {
  .Navbar-nav {
    display: none;
  }
}

.Navbar-nav .Nav-link {
  color: #fff;
}

.Navbar-nav .Nav-link:hover {
  color: #fff !important;
}

.Navbar-brand {
  display: block;
  text-indent: -9999px;
  width: 140px;
  height: 55px;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url("/assets/img/logos/brand/59f1a1c8ca6a9237d0500277618e08d237d27741/var-01-colour.png");
  background-size: 100% auto;
  background-position: left center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .Navbar-brand {
    width: 200px;
    height: 36.66667px;
    right: 24px;
  }
}

@media (min-width: 1024px) {
  .Navbar-brand {
    width: 300px;
    height: 55px;
  }
}

/*doc
---
title: Page
name: page
category: Component
---

The page component wraps all page content and provides wrapping styles such
as max widths, background colours etc

```html_example
	<div class="Page">
		
	</div>
```

Adding .Page--max adds a max width to the page

*/

.Page {
  position: relative;
}

.Page--max {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/*doc
---
title: Search Form
name: search form
category: Component
---

Inline search form

```html_example
	<div class="Search Stack-layer">
		<form id="PropertySearch" action="">
			<div class="Search-form">
				<div class="Search-field s-1/5--tab">
					<label class="Search-label" for="Search_location">Location</label>
					<input class="Search-input js-Drop-trigger" name="Search_location" id="keywords" type="text" placeholder="Street, Area, Postcode..." data-target="BranchList">
				</div>

				<div class="Search-field Search-field--divider s-1/5--tab">
					<label class="Search-label" for="Search_radius">Radius</label>
					<div class="Search-input Search-select">
						<select name="Search_radius" id="Search_radius" class="Search-input Search-input--primary">
							<option value="1">1 Mile</option>
							<option value="5">5 Miles</option>
							<option value="20">20 Miles</option>
						</select>
					</div>
				</div>

				<div class="Search-field Search-field--divider s-1/5--tab">
					<label class="Search-label" for="Search_Price">Price Range</label>
					<button class="Search-input Search-buttonDrop is-placeholder js-Drop-trigger" data-target="PriceRange">
						<span class="Search-buttonDropText" data-placeholder="Price range...">Price range...</span>
					</button>
				</div>

				<div class="Search-field Search-field--divider s-1/5--tab">
					<label class="Search-label" for="Search_bedrooms">Bedrooms</label>
					<button class="Search-input Search-buttonDrop is-placeholder js-Drop-trigger" data-target="BedroomRange">
						<span class="Search-buttonDropText" data-placeholder="Bedrooms...">Bedrooms...</span>
					</button>
				</div>

				<div class="Search-field Search-field--divider s-1/5--tab">
					<label class="Search-label" for="Search_filters">Filters</label>
					<button class="Search-input Search-buttonDrop is-placeholder js-Drop-trigger" data-target="SearchFilters">
						<span class="Search-buttonDropText" data-placeholder="Further filters...">Further filters...</span>
					</button>
				</div>

				<div class="Search-field Search-field--divider Search-field--right">
					<button class="Search-submit"><span class="icon icon-search"></span> <span class="Search-submitText">Search</span></button> <!-- Add is-loading class on submit -->
				</div>

				<!-- PRICE DROPDOWN -->
				<div class="Search-dropdown" id="PriceRange">
					<div class="Search-soldiers">
						<div class="Search-soldiersItem">
							<div class="Search-field">
								<div class="Form-select">
									<select name="minPrice" id="minPrice" class="">
										<option value="any">No Min</option>
									</select>
								</div>
							</div>
						</div>
						
						<div class="Search-soldiersItem">
							<div class="Search-field">
								<div class="Form-select">
									<select name="maxPrice" id="maxPrice" class="">
										<option value="any">No Max</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- BEDROOMS DROPDOWN -->
				<div class="Search-dropdown" id="BedroomRange">
					<div class="Search-soldiers">
						<div class="Search-soldiersItem">
							<div class="Search-field">
								<div class="Form-select">
									<select name="minBedrooms" id="minBedrooms">
										<option value="any">No Min</option>
										<option value="1">One</option>
										<option value="2">Two</option>
										<option value="3">Three</option>
										<option value="4">Four</option>
										<option value="5">Five</option>
									</select>
								</div>
							</div>
						</div>

						<div class="Search-soldiersItem">
							<div class="Search-field">
								<div class="Form-select">
									<select name="maxBedrooms" id="maxBedrooms">
										<option value="any">No Max</option>
										<option value="1">One</option>
										<option value="2">Two</option>
										<option value="3">Three</option>
										<option value="4">Four</option>
										<option value="5">Five</option>
										<option value="6">Six</option>
										<option value="7">Seven</option>
										<option value="8">Eight</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- FILTERS DROPDOWN -->
				<div class="Search-dropdown Search-dropdown--fluid s-1/1" id="SearchFilters">
					<div class="Grid">
						<div class="Grid-column s-1/3">
							<div class="Search-field">
								<div class="Form-select">
									<select name="maxBedrooms" id="maxBedrooms">
										<option value="any">No Max</option>
										<option value="1">One</option>
										<option value="2">Two</option>
										<option value="3">Three</option>
										<option value="4">Four</option>
										<option value="5">Five</option>
										<option value="6">Six</option>
										<option value="7">Seven</option>
										<option value="8">Eight</option>
									</select>
								</div>
							</div>
						</div>

						<div class="Grid-column s-1/3">
							<div class="Search-field">
								<div class="Form-select">
									<select name="maxBedrooms" id="maxBedrooms">
										<option value="any">No Max</option>
										<option value="1">One</option>
										<option value="2">Two</option>
										<option value="3">Three</option>
										<option value="4">Four</option>
										<option value="5">Five</option>
										<option value="6">Six</option>
										<option value="7">Seven</option>
										<option value="8">Eight</option>
									</select>
								</div>
							</div>
						</div>

						<div class="Grid-column s-1/3">
							<div class="Search-field">
								<div class="Form-select">
									<select name="maxBedrooms" id="maxBedrooms">
										<option value="any">No Max</option>
										<option value="1">One</option>
										<option value="2">Two</option>
										<option value="3">Three</option>
										<option value="4">Four</option>
										<option value="5">Five</option>
										<option value="6">Six</option>
										<option value="7">Seven</option>
										<option value="8">Eight</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- END DROPDOWNS -->
			</div>
		</form>
	</div>
```
*/

.Search {
  position: relative;
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
  z-index: 99;
  background-color: #9db847;
}

.Navbar--divider + .Search {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

@media (min-width: 768px) {
  .is-fixed .Search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 12px;
    z-index: 9997;
    -webkit-animation: dipIn .4s ease-in;
    animation: dipIn .4s ease-in;
    -webkit-animation-fill-mode: forward;
    animation-fill-mode: forward;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
  }
}

.Search-secondary {
  max-width: 1232px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
}

.Search-secondary:after {
  content: "";
  display: table;
  clear: both;
}

.Search--slim {
  padding-top: 6px;
  padding-bottom: 6px;
}

.Search-form {
  position: relative;
}

.Search-form:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 768px) {
  .Search-form {
    padding-right: 60px;
  }
}

.Search-label {
  display: block;
  line-height: 1.2;
  padding-top: 6px;
  padding-left: 12px;
}

.Search-field {
  position: relative;
}

@media (min-width: 768px) {
  .Search-field {
    float: left;
  }
}

.Search-field input[type="email"],
.Search-field input[type="number"],
.Search-field input[type="search"],
.Search-field input[type="text"],
.Search-field input[type="tel"],
.Search-field input[type="url"],
.Search-field input[type="password"],
.Search-field textarea,
.Search-field select {
  width: 100%;
  outline: none;
}

.Search-field input[type="email"]::-webkit-input-placeholder,
.Search-field input[type="number"]::-webkit-input-placeholder,
.Search-field input[type="search"]::-webkit-input-placeholder,
.Search-field input[type="text"]::-webkit-input-placeholder,
.Search-field input[type="tel"]::-webkit-input-placeholder,
.Search-field input[type="url"]::-webkit-input-placeholder,
.Search-field input[type="password"]::-webkit-input-placeholder,
.Search-field textarea::-webkit-input-placeholder,
.Search-field select::-webkit-input-placeholder {
  color: #fff;
}

.Search-field input[type="email"]:-moz-placeholder,
.Search-field input[type="number"]:-moz-placeholder,
.Search-field input[type="search"]:-moz-placeholder,
.Search-field input[type="text"]:-moz-placeholder,
.Search-field input[type="tel"]:-moz-placeholder,
.Search-field input[type="url"]:-moz-placeholder,
.Search-field input[type="password"]:-moz-placeholder,
.Search-field textarea:-moz-placeholder,
.Search-field select:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
  opacity: 1;
}

.Search-field input[type="email"]::-moz-placeholder,
.Search-field input[type="number"]::-moz-placeholder,
.Search-field input[type="search"]::-moz-placeholder,
.Search-field input[type="text"]::-moz-placeholder,
.Search-field input[type="tel"]::-moz-placeholder,
.Search-field input[type="url"]::-moz-placeholder,
.Search-field input[type="password"]::-moz-placeholder,
.Search-field textarea::-moz-placeholder,
.Search-field select::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
  opacity: 1;
}

.Search-field input[type="email"]:-ms-input-placeholder,
.Search-field input[type="number"]:-ms-input-placeholder,
.Search-field input[type="search"]:-ms-input-placeholder,
.Search-field input[type="text"]:-ms-input-placeholder,
.Search-field input[type="tel"]:-ms-input-placeholder,
.Search-field input[type="url"]:-ms-input-placeholder,
.Search-field input[type="password"]:-ms-input-placeholder,
.Search-field textarea:-ms-input-placeholder,
.Search-field select:-ms-input-placeholder {
  color: #fff;
}

@media (max-width: 767px) {
  .Search-field--divider {
    border-top: 2px solid #fff;
  }
}

@media (min-width: 768px) {
  .Search-field--divider {
    border-left: 2px solid #fff;
  }
}

@media (min-width: 768px) {
  .Search-field--right {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
  }
}

.Search-input {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 24px;
  font-weight: 500;
  text-transform: initial;
  padding: 0 12px 6px;
  border: 0;
  outline: none;
  background-color: transparent;
  color: #fff;
}

button.Search-input:hover {
  background-color: transparent;
}

.Search-select {
  position: relative;
}

.Form-field.has-error .Search-select {
  border-color: #EA4E35;
}

.Search-select:hover {
  cursor: pointer;
}

.Search-select:after {
  content: '';
  height: 0;
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border-top: 6px solid rgba(102, 102, 102, 0.14);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  pointer-events: none;
}

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

.Search-select select {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 24px;
  height: 24px;
  font-weight: 500;
  width: 100%;
  padding: 0;
  padding-right: 30px;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.Search-submit {
  height: 100%;
  border: none;
  color: #fff;
}

.Search-submit:hover {
  background-color: #666;
  border-color: #666;
  color: #fff;
}

@media (max-width: 767px) {
  .Search-submit {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .Search-submit {
    font-size: 17px;
    font-size: 1.0625rem;
  }
}

.Search-submit .icon {
  opacity: 1;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

@media (max-width: 767px) {
  .Search-submit .icon {
    line-height: 1;
    vertical-align: -2px;
  }

  .Search-submit .icon:before {
    font-size: 15px;
    font-size: 0.9375rem;
  }
}

@media (min-width: 768px) {
  .Search-submit .icon:before {
    display: block;
  }
}

.Search-submit.is-loading {
  position: relative;
  overflow: hidden;
}

.Search-submit.is-loading .icon {
  opacity: .78;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.Search-submit.is-loading:after {
  content: '';
  display: block;
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 100%;
  -webkit-animation: pulse 1.7s both infinite;
  animation: pulse 1.7s both infinite;
}

@media (min-width: 768px) {
  .Search-submitText {
    display: none;
  }
}

.Search-dropdown {
  display: none;
}

.Search-dropdown.is-active {
  padding: 12px 12px;
  background-color: #9db847;
  color: #666;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: block;
  position: absolute;
  top: 100%;
  z-index: 9997;
  min-width: 230px;
  max-width: 350px;
}

@media (min-width: 768px) {
  .Search-dropdown.is-active {
    padding: 24px 24px;
  }
}

.Search-dropdown.is-active.Search-dropdown--fluid {
  max-width: 100%;
}

.Search-buttonDrop {
  width: 100%;
  border: none;
  text-align: left;
  color: #fff;
}

.Search-buttonDrop:after {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 9px;
}

.Search-buttonDrop.is-active {
  color: #fff;
}

.Search-buttonDrop.is-placeholder {
  color: #fff;
}

@media (max-width: 767px) {
  .Search-soldiers + .Search-soldiers {
    margin-top: 6px;
  }
}

.Search-soldiersItem {
  display: block;
}

@media (max-width: 767px) {
  .Search-soldiersItem + .Search-soldiersItem {
    margin-top: 6px;
  }
}

@media (min-width: 768px) {
  .Search-soldiersItem {
    display: inline-block;
  }

  .Search-soldiersItem + .Search-soldiersItem {
    margin-left: 12px;
  }
}

/*doc
---
title: Slider
name: slider
category: Component
---

Slider mcSlide

```html_example
<div class="Slider">
    <ul class="Slider-body js-slider-standard">
        <li>
            <img src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e131e5a1a12b40fca905f81eb90df89d" alt="" class="aspect">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3eb80b00d5fe713cd76916b27ae29dd7" alt="" class="aspect">
        </li>
    </ul>
</div>

<div class="Slider mt-6">
    <ul class="Slider-body js-slider-dots">
        <li>
            <img src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e131e5a1a12b40fca905f81eb90df89d" alt="" class="aspect">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3eb80b00d5fe713cd76916b27ae29dd7" alt="" class="aspect">
        </li>
    </ul>
</div>

<div class="Slider Slider--contrast mt-6">
    <ul class="Slider-body js-slider-dots">
        <li>
            <img src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e131e5a1a12b40fca905f81eb90df89d" alt="" class="aspect">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3eb80b00d5fe713cd76916b27ae29dd7" alt="" class="aspect">
        </li>
    </ul>
</div>

<div class="Slider mt-6">
    <ul class="Slider-body js-slider-fade">
        <li>
            <img src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e131e5a1a12b40fca905f81eb90df89d" alt="" class="aspect">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3eb80b00d5fe713cd76916b27ae29dd7" alt="" class="aspect">
        </li>
    </ul>
</div>

<div class="Slider mt-6">
    <ul class="Slider-body js-slider-thumbs">
        <li data-thumb="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e131e5a1a12b40fca905f81eb90df89d">
            <img src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e131e5a1a12b40fca905f81eb90df89d" alt="" class="aspect">
        </li>
        <li data-thumb="https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3eb80b00d5fe713cd76916b27ae29dd7">
            <img src="https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3eb80b00d5fe713cd76916b27ae29dd7" alt="" class="aspect">
        </li>
    </ul>
    <div class="Slider-snack">
        <span class="Slider-snackCurrent"></span> of <span class="Slider-snackCount"></span>
    </div>
</div>
```

.js-slider-standard - one item with arrows
.js-slider-fade - one item with arrows and fading transition
.js-slider-multi - three items and two on mobile with arrows
.js-slider-dots - one item with dot nav and arrows
.js-slider-thumbs - one item with five thumbnails and arrows
*/

/*! lightslider - v1.1.5 - 2015-10-31
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */

/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */

/** /!!! core css Should not edit !!!/**/

.Slider--contrast .lSAction > a {
  color: #9db847;
}

.Slider--contrast .lSAction > a:hover {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.Slider-snack {
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-top: -38px;
  background-color: #666;
  color: #fff;
}

@media (min-width: 768px) {
  .Slider-snack {
    display: none;
  }
}

.lSSlideOuter {
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lightSlider:before,
.lightSlider:after {
  content: " ";
  display: table;
}

.lightSlider {
  overflow: hidden;
  margin: 0;
}

.lightSlider li {
  background-color: #ececea;
}

.lightSlider li img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 88vh;
  margin-left: auto;
  margin-right: auto;
}

.lSSlideWrapper {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.lSSlideWrapper > .lightSlider:after {
  clear: both;
}

.lSSlideWrapper .lSSlide {
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-transition: all 1s;
  -webkit-transition-property: -webkit-transform,height;
  transition-property: transform,height;
  -webkit-transition-duration: inherit !important;
  transition-duration: inherit !important;
  -webkit-transition-timing-function: inherit !important;
  transition-timing-function: inherit !important;
}

.lSSlideWrapper .lSFade {
  position: relative;
}

.lSSlideWrapper .lSFade > * {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 9;
  margin-right: 0;
  width: 100%;
}

.lSSlideWrapper.usingCss .lSFade > * {
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: inherit !important;
  transition-duration: inherit !important;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: inherit !important;
  transition-timing-function: inherit !important;
}

.lSSlideWrapper .lSFade > *.active {
  z-index: 10;
}

.lSSlideWrapper.usingCss .lSFade > *.active {
  opacity: 1;
}

/** /!!! End of core css Should not edit !!!/**/

/* Pager */

.lSSlideOuter .lSPager.lSpg {
  margin: 10px 0 0;
  padding: 0;
  text-align: center;
}

.lSSlideOuter .lSPager.lSpg > li {
  cursor: pointer;
  display: inline-block;
  padding: 0 5px;
}

.lSSlideOuter .lSPager.lSpg > li a {
  background-color: #222222;
  border-radius: 30px;
  display: inline-block;
  height: 8px;
  overflow: hidden;
  text-indent: -999em;
  width: 8px;
  position: relative;
  z-index: 99;
  -webkit-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}

.lSSlideOuter .lSPager.lSpg > li:hover a,
.lSSlideOuter .lSPager.lSpg > li.active a {
  background-color: #428bca;
}

.lSSlideOuter .media {
  opacity: 0.8;
}

.lSSlideOuter .media.active {
  opacity: 1;
}

/* End of pager */

/** Gallery */

.lSSlideOuter .lSPager.lSGallery {
  list-style: none outside none;
  padding-left: 0;
  margin: 0;
  overflow: hidden;
  transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -webkit-transition-property: -webkit-transform;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lSSlideOuter .lSPager.lSGallery li {
  overflow: hidden;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
  border: 2px solid transparent;
}

.lSSlideOuter .lSPager.lSGallery li.active,
.lSSlideOuter .lSPager.lSGallery li:hover {
  border-color: #666;
  -webkit-transition: border-color .2s;
  transition: border-color .2s;
}

.lSSlideOuter .lSPager.lSGallery img {
  display: block;
  height: auto;
  max-width: 100%;
}

.lSSlideOuter .lSPager.lSGallery:before,
.lSSlideOuter .lSPager.lSGallery:after {
  content: " ";
  display: table;
}

.lSSlideOuter .lSPager.lSGallery:after {
  clear: both;
}

/* End of Gallery*/

.lSGallery li a,
.js-slider-multi li a {
  display: block;
  position: relative;
  padding-bottom: 66.5%;
}

.lSGallery li .Card,
.js-slider-multi li .Card {
  letter-spacing: 0;
}

.lSGallery li .Card a,
.js-slider-multi li .Card a {
  padding-bottom: 0;
}

.lSGallery li img,
.js-slider-multi li img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

.lSGallery li .Card-splash,
.js-slider-multi li .Card-splash {
  position: relative;
  padding-bottom: 66.5%;
}

/* slider actions */

.lSAction:after {
  content: "";
  display: table;
  clear: both;
}

.lSAction > a {
  position: relative;
  display: block;
  padding: 0 6px;
  cursor: pointer;
  z-index: 99;
  -webkit-transition: opacity 0.35s linear 0s;
  transition: opacity 0.35s linear 0s;
  color: #fff;
}

.lSAction > a:before {
  font-family: 'ea-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -1px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 24px;
  line-height: 38px;
}

@media (min-width: 768px) {
  .lSAction > a {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0.5;
  }

  .lSAction > a:before {
    font-size: 68px;
    line-height: 1;
  }
}

.lSAction > a:hover {
  opacity: 1;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.lSAction > .lSPrev {
  float: left;
}

@media (min-width: 768px) {
  .lSAction > .lSPrev {
    left: 24px;
  }
}

.lSAction > .lSPrev:before {
  content: '\e900';
}

.lSAction > .lSNext {
  float: right;
}

@media (min-width: 768px) {
  .lSAction > .lSNext {
    right: 24px;
  }
}

.lSAction > .lSNext:before {
  content: '\e901';
}

.lSAction > a.disabled {
  pointer-events: none;
}

.cS-hidden {
  height: 1px;
  opacity: 0;
  filter: alpha(opacity=0);
  overflow: hidden;
}

/* vertical */

.lSSlideOuter.vertical {
  position: relative;
}

.lSSlideOuter.vertical.noPager {
  padding-right: 0px !important;
}

.lSSlideOuter.vertical .lSGallery {
  position: absolute !important;
  right: 0;
  top: 0;
}

.lSSlideOuter.vertical .lightSlider > * {
  width: 100% !important;
  max-width: none !important;
}

/* vertical controlls */

.lSSlideOuter.vertical .lSAction > a {
  left: 50%;
  margin-left: -14px;
  margin-top: 0;
}

.lSSlideOuter.vertical .lSAction > .lSNext {
  background-position: 31px -31px;
  bottom: 10px;
  top: auto;
}

.lSSlideOuter.vertical .lSAction > .lSPrev {
  background-position: 0 -31px;
  bottom: auto;
  top: 10px;
}

/* vertical */

/* Rtl */

.lSSlideOuter.lSrtl {
  direction: rtl;
}

.lSSlideOuter .lightSlider,
.lSSlideOuter .lSPager {
  padding-left: 0;
  list-style: none outside none;
}

.lSSlideOuter.lSrtl .lightSlider,
.lSSlideOuter.lSrtl .lSPager {
  padding-right: 0;
}

.lSSlideOuter .lightSlider > *,
.lSSlideOuter .lSGallery li {
  float: left;
}

.lSSlideOuter.lSrtl .lightSlider > *,
.lSSlideOuter.lSrtl .lSGallery li {
  float: right !important;
}

/* Rtl */

@-webkit-keyframes rightEnd {
  0% {
    left: 0;
  }

  50% {
    left: -15px;
  }

  100% {
    left: 0;
  }
}

@keyframes rightEnd {
  0% {
    left: 0;
  }

  50% {
    left: -15px;
  }

  100% {
    left: 0;
  }
}

@-webkit-keyframes topEnd {
  0% {
    top: 0;
  }

  50% {
    top: -15px;
  }

  100% {
    top: 0;
  }
}

@keyframes topEnd {
  0% {
    top: 0;
  }

  50% {
    top: -15px;
  }

  100% {
    top: 0;
  }
}

@-webkit-keyframes leftEnd {
  0% {
    left: 0;
  }

  50% {
    left: 15px;
  }

  100% {
    left: 0;
  }
}

@keyframes leftEnd {
  0% {
    left: 0;
  }

  50% {
    left: 15px;
  }

  100% {
    left: 0;
  }
}

@-webkit-keyframes bottomEnd {
  0% {
    bottom: 0;
  }

  50% {
    bottom: -15px;
  }

  100% {
    bottom: 0;
  }
}

@keyframes bottomEnd {
  0% {
    bottom: 0;
  }

  50% {
    bottom: -15px;
  }

  100% {
    bottom: 0;
  }
}

.lSSlideOuter .rightEnd {
  -webkit-animation: rightEnd 0.3s;
  animation: rightEnd 0.3s;
  position: relative;
}

.lSSlideOuter .leftEnd {
  -webkit-animation: leftEnd 0.3s;
  animation: leftEnd 0.3s;
  position: relative;
}

.lSSlideOuter.vertical .rightEnd {
  -webkit-animation: topEnd 0.3s;
  animation: topEnd 0.3s;
  position: relative;
}

.lSSlideOuter.vertical .leftEnd {
  -webkit-animation: bottomEnd 0.3s;
  animation: bottomEnd 0.3s;
  position: relative;
}

.lSSlideOuter.lSrtl .rightEnd {
  -webkit-animation: leftEnd 0.3s;
  animation: leftEnd 0.3s;
  position: relative;
}

.lSSlideOuter.lSrtl .leftEnd {
  -webkit-animation: rightEnd 0.3s;
  animation: rightEnd 0.3s;
  position: relative;
}

/*/  GRab cursor */

.lightSlider.lsGrab > * {
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

/*doc
---
title: Sidebar
name: sidebar
category: Component
---

The sidebar uses the nav component to build an off canvas toggleable component

```html_example
<div class="Page">
	<a href="#" class="icon icon-only icon-menu js-toggle" data-target="Sidebar">Menu</a>

	<div class="Sidebar" id="Sidebar">
		<a href="#" class="Sidebar-toggle icon icon-only icon-cross js-toggle" data-target="Sidebar">Close</a>

		<ul class="Nav">
			<li class="Nav-item"><a href="#" class="Nav-link link-contrast">Nav item</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link link-contrast">Item 2</a></li>
			<li class="Nav-item"><a href="#" class="Nav-link link-contrast">Something else</a></li>
		</ul>
	</div>
</div>
```
Adding .Sidebar--alt slides the sidebar in from the right.
*/

.Sidebar {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  z-index: 9998;
  -webkit-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  max-height: 100%;
  overflow-y: auto;
  background-color: rgba(6, 83, 42, 0.94);
}

@media (max-width: 767px) {
  .Sidebar {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .Sidebar {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    z-index: 9;
    position: absolute;
    top: 0;
    left: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
    max-width: 75%;
    background-color: transparent;
  }

  .Sidebar:after {
    content: "";
    display: table;
    clear: both;
  }
}

.Sidebar.is-active {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 9999;
  opacity: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.Sidebar .Nav {
  clear: both;
}

.Sidebar .Nav:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 1280px) {
  .Sidebar .Nav-item {
    float: left;
  }
}

.Sidebar .Nav-link {
  padding-left: 36px;
  padding-right: 36px;
  min-width: 320px;
}

@media (min-width: 1280px) {
  .Sidebar .Nav-link {
    padding-left: 12px;
    padding-right: 12px;
    min-width: auto;
  }
}

.Sidebar--alt {
  left: auto;
  right: 12px;
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media (min-width: 1280px) {
  .Sidebar--alt {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@media (min-width: 1280px) {
  .Sidebar--fixed {
    position: fixed;
    z-index: 9997;
    -webkit-transform: translateY(24px);
    -ms-transform: translateY(24px);
    transform: translateY(24px);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
  }
}

@media (min-width: 1280px) {
  .Sidebar--fixed.is-painted {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .3s ease-in;
    transition: transform .3s ease-in;
  }
}

.Sidebar-toggle {
  display: block;
  margin-top: -12px;
  color: #fff;
}

@media (min-width: 1280px) {
  .Sidebar-toggle {
    display: none;
  }
}

.Sidebar--alt .Sidebar-toggle {
  float: right;
}

/*doc
---
title: Soldiers
name: soldiers
category: Component
---

Soldiers enable you to add a specified distance between elements

```html_example
	<ul class="Soldiers">
		<li class="Soldiers-item"><a href="#" class="">Item 1</a></li>
		<li class="Soldiers-item"><a href="#" class="">Item 2</a></li>
		<li class="Soldiers-item"><a href="#" class="">Item 3</a></li>
	</ul>
```

Adding .Soldiers--s or Soldiers--xs changes the gutter sizing to half and
quarter the standard size.

Adding .Soldiers--stack stacks the soldier items when the screen is small
than tablet

```html_example
	<ul class="Soldiers Soldiers--stack">
		<li class="Soldiers-item"><a href="#" class="">Item 1</a></li>
		<li class="Soldiers-item"><a href="#" class="">Item 2</a></li>
		<li class="Soldiers-item"><a href="#" class="">Item 3</a></li>
	</ul>
```
*/

.Soldiers {
  padding-left: 0;
}

.Soldiers--s .Soldiers-item + .Soldiers-item {
  margin-left: 12px;
}

.Soldiers--xs .Soldiers-item + .Soldiers-item {
  margin-left: 6px;
}

@media (max-width: 768px) {
  .Soldiers--stack + .Soldiers {
    margin-top: 6px;
  }
}

@media (max-width: 768px) {
  .Soldiers--stack .Soldiers-item + .Soldiers-item {
    display: block;
    margin-top: 6px;
    margin-left: 0;
  }
}

.Soldiers-item {
  display: inline-block;
}

.Soldiers-item + .Soldiers-item {
  margin-left: 24px;
}

/*doc
---
title: Tabs
name: tabs
category: Component
---

Tabs mctab description to come!
TODO: Think what to do with alt tabs in desktop as by default there is not active tabs

```html_example
	<div class="Tabs mt-3">
		<ul class="Tabs-nav Tabs-nav--icons">
			<li class="Tabs-navItem is-active">
				<a href="#Test_item1" class="Tabs-navLink icon icon-file-text2 js-Tab">Description</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item2" class="Tabs-navLink icon icon-camera js-Tab">Photos</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item3" class="Tabs-navLink icon icon-insert-template js-Tab">Floorplan</a>
			</li>
		</ul>

		<div id="Test_item1" class="Tabs-body is-active">
			hi
		</div>
		<div id="Test_item2" class="Tabs-body">
			hi 2
		</div>
		<div id="Test_item3" class="Tabs-body">
			hi 3
		</div>
	</div>

	<div class="Tabs Tabs--alt mt-3">
		<ul class="Tabs-nav Tabs-nav--icons">
			<li class="Tabs-navItem">
				<a href="#Test_item1" class="Tabs-navLink icon icon-file-text2 js-Tab">Description</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item2" class="Tabs-navLink icon icon-camera js-Tab">Photos</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item3" class="Tabs-navLink icon icon-insert-template js-Tab">Floorplan</a>
			</li>
		</ul>

		<div id="Test_item1" class="Tabs-body">
			hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
		</div>
		<div id="Test_item2" class="Tabs-body">
			hi 2
		</div>
		<div id="Test_item3" class="Tabs-body">
			hi 3
		</div>
	</div>

	<div class="Tabs Tabs--paint mt-3">
		<ul class="Tabs-nav Tabs-nav--icons">
			<li class="Tabs-navItem">
				<a href="#Test_item1" class="Tabs-navLink icon icon-file-text2 js-Tab">Description</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item2" class="Tabs-navLink icon icon-camera js-Tab">Photos</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item3" class="Tabs-navLink icon icon-insert-template js-Tab">Floorplan</a>
			</li>
		</ul>

		<div id="Test_item1" class="Tabs-body">
			hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
		</div>
		<div id="Test_item2" class="Tabs-body">
			hi 2
		</div>
		<div id="Test_item3" class="Tabs-body">
			hi 3
		</div>
	</div>

	<div class="Tabs Tabs--paint mt-3">
		<ul class="Tabs-nav">
			<li class="Tabs-navItem">
				<a href="#Test_item1" class="Tabs-navLink js-Tab">Description</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item2" class="Tabs-navLink js-Tab">Photos</a>
			</li>
			<li class="Tabs-navItem">
				<a href="#Test_item3" class="Tabs-navLink js-Tab">Floorplan</a>
			</li>
		</ul>

		<div id="Test_item1" class="Tabs-body">
			hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
		</div>
		<div id="Test_item2" class="Tabs-body">
			hi 2
		</div>
		<div id="Test_item3" class="Tabs-body">
			hi 3
		</div>
	</div>
```

Add .Tabs-nav--icons to add additional padding to tab navigation

*/

@media (max-width: 767px) {
  .Tabs--alt .Tabs-navItem {
    display: block;
  }

  .Tabs--alt .Tabs-navItem + .Tabs-navItem {
    margin-top: 2px;
  }

  .Tabs--alt .Tabs-navItem.is-active .Tabs-navLink {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    border: none;
    background-color: #06532a;
    color: #fff;
    border-color: transparent;
    text-indent: -9999px;
  }

  .Tabs--alt .Tabs-navItem.is-active .Tabs-navLink:before {
    content: '\ea0f';
    float: left;
    text-indent: 0;
    line-height: inherit;
  }

  .Tabs--alt .Tabs-navLink {
    background-color: #06532a;
    color: #fff;
    border-color: transparent;
  }

  .Tabs--alt .Tabs-nav--icons .Tabs-navLink {
    width: 100%;
    height: auto;
    text-indent: 0;
  }

  .Tabs--alt .Tabs-nav--icons .Tabs-navLink:before {
    position: relative;
    top: inherit;
    left: inherit;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    margin-right: 12px;
  }

  .Tabs--alt .Tabs-nav--icons .Tabs-navLink:after {
    font-family: 'ea-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -1px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    float: right;
    line-height: inherit;
  }

  .Tabs--alt .Tabs-body.is-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9997;
    overflow-y: scroll;
    padding: 72px 24px 24px;
    background-color: #fff;
  }
}

.Tabs--paint .Tabs-navItem.is-active .Tabs-navLink {
  background-color: #fff;
  color: #06532a;
  border-color: rgba(102, 102, 102, 0.14);
}

.Tabs--paint .Tabs-navItem.is-active .Tabs-navLink:after {
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #fff;
}

.Tabs--paint .Tabs-navLink {
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #9db847;
  color: #06532a;
  border-color: #9db847;
}

.Tabs--paint .Tabs-body {
  border: 1px solid rgba(102, 102, 102, 0.14);
}

@media (max-width: 767px) {
  .Tabs--paint .Tabs-navItem.is-active .Tabs-navLink {
    background-color: #9db847;
    color: #06532a;
  }
}

.Tabs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .Tabs-nav--3--mob .Tabs-navItem {
    width: 33.33333%;
    margin-left: -4px;
  }
}

.Tabs-nav--icons .Tabs-navLink {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  text-indent: -9999px;
  height: 3.125em;
  padding-left: 24px;
  padding-right: 24px;
}

.Tabs-nav--icons .Tabs-navLink:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-indent: 0;
}

@media (min-width: 768px) {
  .Tabs-nav--icons .Tabs-navLink {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.Tabs-navItem {
  display: inline-block;
}

.Tabs-navLink {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background-color: transparent;
  border: 1px solid transparent;
  color: #666;
}

.Tabs-navItem.is-active .Tabs-navLink {
  position: relative;
  background-color: #fff;
  color: #06532a;
  border-color: transparent;
}

.Tabs-navItem.is-active .Tabs-navLink:after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background-color: #06532a;
}

.Tabs-body {
  display: none;
  padding: 24px;
}

.Card .Tabs-body {
  padding-left: 0;
  padding-right: 0;
}

.Tabs-body.is-active {
  display: block;
}

@media (max-width: 767px) {
  .Tabs-body--slimMob {
    padding-left: 0;
    padding-right: 0;
  }
}

.TabTog {
  display: none;
}

.TabTog.is-active {
  display: block;
}

/*doc
---
title: Taskbar
name: taskbar
category: Component
---

Taskbars are used to a fixed bar at the bottom of a content area.
In situations you want to overlay the taskbar add .Taskbar-wrap to the taskbars parent element.
The taskbar will then be contained to this element.

```html_example
	<div class="Taskbar-wrap">
		<div class="Taskbar Taskbar--bottom">
				<div class="Taskbar-item">
					<div class="buttonGroup buttonGroup--fluid--mob">
						<a href="#" class="button button--accent icon icon-arrow-left2">Back to search results</a>
						<a href="#" class="button button--secondary">Value my property</a>
					</div>
				</div>
				<div class="Taskbar-item Taskbar-item--alt">
					<a href="#" class="button button--accent icon icon-share">Share</a>
					<a href="#" class="button button--accent icon icon-star-full">Save &amp; alert</a>
				</div>
			</div>
	</div>
```

Adding .Taskbar--bottom positions over content at the top of the content.
Adding .Taskbar--top positions over content at the top of the content.
*/

.Taskbar-wrap {
  position: relative;
}

.Taskbar {
  background-color: rgba(6, 83, 42, 0.9);
}

@media (min-width: 768px) {
  .Taskbar {
    padding: 18px 48px;
  }
}

@media (min-width: 768px) {
  .Taskbar--top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .Taskbar--bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .Taskbar-item {
    float: left;
  }
}

@media (min-width: 768px) {
  .Taskbar-item--alt {
    float: right;
  }
}

.Tiles {
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

@media (min-width: 768px) {
  .Tiles {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.Tiles .Grid {
  margin-left: -24px;
  margin-right: -24px;
}

@media (min-width: 768px) {
  .Tiles .Grid {
    margin-left: -48px;
    margin-right: -48px;
  }
}

.Tiles .Tiles {
  padding: 0;
}

.Tiles-column {
  display: inline-block;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
  padding: 0;
}

@media (max-width: 767px) {
  .Tiles-column {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.Tiles-item {
  display: block;
  position: relative;
  padding-bottom: 100%;
  margin: 1.75%;
  background-color: #ddd;
}

.Tiles-item--m {
  padding-bottom: 50%;
}

@media (min-width: 768px) {
  .Tiles-item--s {
    padding-bottom: 93%;
    margin: 3.5%;
  }
}

.Tiles-item--splash {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  color: #fff;
}

.Tiles-itemBody {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
}

/*doc
---
title: Footer
name: footer
category: Template
---

The footer template shows an example of how a footer could be styled

```html_example
	<footer class="panel paint">
		<div class="Grid">
			<div class="Grid-column">
				<div class="vcard">
					<span class="fn">Agent name, <span>
					<span class="adr">
						<span class="street-address">Street name, </span>
						<span class="region">Region, </span>
						<span class="postal-code">Postal Code</span>
					</span>
				</div>

				<ul class="Soldiers type-upper copy-xs mt-3">
					<li class="Soldiers-item"><a href="#" class="link-text">Privacy Policy</a></li>
					<li class="Soldiers-item"><a href="#" class="link-text">Cookie Policy</a></li>
					<li class="Soldiers-item"><a href="#" class="link-text">Contact Us</a></li>
				</ul>

				<small class="type-text">Copyright © Website or business name. All rights reserved.</small>
			</div>
		</div>

		<div class="Grid mt-3">
			<div class="Grid-column s-1/2--tab">
				<ul class="Soldiers">
					<li class="Soldiers-item">
						<a href="#" class="cutter-circle link-fill icon icon-only icon-twitter">
							Twitter
						</a>
					</li>
					<li class="Soldiers-item">
						<a href="#" class="cutter-circle link-fill icon icon-only icon-facebook">
							Facebook
						</a>
					</li>
					<li class="Soldiers-item">
						<a href="#" class="cutter-circle link-fill icon icon-only icon-google-plus">
							Google+
						</a>
					</li>
				</ul>
			</div>

			<div class="Grid-column s-1/2--tab">
				<ul class="Soldiers typeRight--tab">
					<li class="Soldiers-item">
						<a href="#" class="">
							<img src="http://placehold.it/40x40" alt="">
						</a>
					</li>
					<li class="Soldiers-item">
						<a href="#" class="">
							<img src="http://placehold.it/80x40" alt="">
						</a>
					</li>
					<li class="Soldiers-item">
						<a href="#" class="">
							<img src="http://placehold.it/100x40" alt="">
						</a>
					</li>
					<li class="Soldiers-item">
						<a href="#" class="">
							<img src="http://placehold.it/60x40" alt="">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</footer>
```
*/

.button--tertiary {
  background-color: #FBF182;
}

.button--alt {
  background-color: rgba(6, 83, 42, 0.78);
  border-color: #fff;
  color: #fff;
}

.button--alt:hover {
  background-color: #06532a;
  border-color: #fff;
  color: #fff;
}

.paint-panelBorder {
  border: 1px solid #06532a;
}

.splash--brand {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.splash--brand:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 112px;
  height: 112px;
  z-index: 0;
  background-image: url("/assets/img/logos/brand/c096693b19e9e357ca7cfbcc5530a49ec30f70d6/trans-brand.png");
  background-size: 100% auto;
  background-position: 18px 12px;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .splash--brand:before {
    width: 152px;
    height: 152px;
    background-position: 27px 15px;
  }
}

.splash--brand:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  height: 12px;
  background-color: #9db847;
}

.splash--brand > * {
  position: relative;
  z-index: 1;
}

.link-fill:hover,
.link-fill:focus {
  background-color: #9db847;
}

.link-contrast:hover {
  color: #06532a;
}

.link-underlineHover:hover {
  color: #fff;
}

.Card--alt {
  border: 3px solid #06532a;
}

.Card--alt-thin {
  border: 1px solid #06532a;
}

.Nav--inline .Nav-link:hover {
  color: #06532a;
}

.Nav--inline .Nav-item.is-active .Nav-link:hover {
  color: #bf1622;
}

.Nav--bar .Nav-link:hover {
  background-color: #fff;
  color: #bf1622;
}

.Search-input option {
  color: #000;
}

.Sidebar .Nav-link:hover,
.Sidebar .Nav-link:focus {
  color: #bf1622;
}

/*# sourceMappingURL=styles.css.map */