@charset "UTF-8";
/*

Atomic design is philosophically complimentary with these CSS approaches:

* SMACSS by Jonathan Snook http://smacss.com/
* OOCSS by Nicole Sullivan http://oocss.org/
* BEM CSS Methology : http://bem.info/method/
* CSS Guidelines by Harry Roberts : http://cssguidelin.es/

Sass Globbing is used so an import utilising an asterisk (*) will use every
partial in the specified directory .

*/
/*------------------------------------*    $TOOLS
\*------------------------------------*/
/*------------------------------------*    RESET
\*------------------------------------*/
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

html,
body,
div,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
form,
legend,
label,
table,
header,
footer,
nav,
section,
figure {
  margin: 0;
  padding: 0; }

header,
footer,
nav,
section,
article,
hgroup,
figure {
  display: block; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

input {
  -webkit-appearance: none;
  -moz-appearance: none; }

/*------------------------------------*	FONTS
\*------------------------------------*/
/*------------------------------------*    GLOBAL MIXINS
\*------------------------------------*/
/**
 * Example of use
 *

    .example {
        @include font-size(12);

        @include mq(400) {
            @include font-size(14);
        }

        @include mq(M) {
            @include font-size(18);
        }
    }

 *
 */
/*------------------------------------*	VARIABLES
\*------------------------------------*/
/*------------------------------------* * THE IDEA BUREAU - GRID
 * https://github.com/theideabureau/grid
\*------------------------------------*/
.row {
  margin-left: -1.5rem;
  *zoom: 1; }
  .row:before, .row:after {
    content: ' ';
    /* 1 */
    display: table;
    /* 2 */ }
  .row:after {
    clear: both; }

.col {
  border: 0 solid transparent;
  float: left;
  box-sizing: border-box;
  background-clip: padding-box !important;
  border-left-width: 1.5rem;
  margin-left: 0;
  padding: 0 0; }

.S-hide {
  display: none; }

.S-1 {
  display: block;
  width: 8.33333%; }

.row--clearfix .S-1:nth-child(n) {
  clear: none; }

.row--clearfix .S-1:nth-child(12n+1) {
  clear: left; }

.S-2 {
  display: block;
  width: 16.66667%; }

.row--clearfix .S-2:nth-child(n) {
  clear: none; }

.row--clearfix .S-2:nth-child(6n+1) {
  clear: left; }

.S-3 {
  display: block;
  width: 25%; }

.row--clearfix .S-3:nth-child(n) {
  clear: none; }

.row--clearfix .S-3:nth-child(4n+1) {
  clear: left; }

.S-4 {
  display: block;
  width: 33.33333%; }

.row--clearfix .S-4:nth-child(n) {
  clear: none; }

.row--clearfix .S-4:nth-child(3n+1) {
  clear: left; }

.S-5 {
  display: block;
  width: 41.66667%; }

.row--clearfix .S-5:nth-child(n) {
  clear: none; }

.row--clearfix .S-5:nth-child(2n+1) {
  clear: left; }

.S-6 {
  display: block;
  width: 50%; }

.row--clearfix .S-6:nth-child(n) {
  clear: none; }

.row--clearfix .S-6:nth-child(2n+1) {
  clear: left; }

.S-7 {
  display: block;
  width: 58.33333%; }

.row--clearfix .S-7:nth-child(n) {
  clear: none; }

.row--clearfix .S-7:nth-child(1n+1) {
  clear: left; }

.S-8 {
  display: block;
  width: 66.66667%; }

.row--clearfix .S-8:nth-child(n) {
  clear: none; }

.row--clearfix .S-8:nth-child(1n+1) {
  clear: left; }

.S-9 {
  display: block;
  width: 75%; }

.row--clearfix .S-9:nth-child(n) {
  clear: none; }

.row--clearfix .S-9:nth-child(1n+1) {
  clear: left; }

.S-10 {
  display: block;
  width: 83.33333%; }

.row--clearfix .S-10:nth-child(n) {
  clear: none; }

.row--clearfix .S-10:nth-child(1n+1) {
  clear: left; }

.S-11 {
  display: block;
  width: 91.66667%; }

.row--clearfix .S-11:nth-child(n) {
  clear: none; }

.row--clearfix .S-11:nth-child(1n+1) {
  clear: left; }

.S-all {
  display: block;
  margin-left: 0;
  width: 100%; }

@media screen and (min-width: 640px) {
  .M-hide {
    display: none; }
  .M-1 {
    display: block;
    width: 8.33333%; }
  .row--clearfix .M-1:nth-child(n) {
    clear: none; }
  .row--clearfix .M-1:nth-child(12n+1) {
    clear: left; }
  .M-2 {
    display: block;
    width: 16.66667%; }
  .row--clearfix .M-2:nth-child(n) {
    clear: none; }
  .row--clearfix .M-2:nth-child(6n+1) {
    clear: left; }
  .M-3 {
    display: block;
    width: 25%; }
  .row--clearfix .M-3:nth-child(n) {
    clear: none; }
  .row--clearfix .M-3:nth-child(4n+1) {
    clear: left; }
  .M-4 {
    display: block;
    width: 33.33333%; }
  .row--clearfix .M-4:nth-child(n) {
    clear: none; }
  .row--clearfix .M-4:nth-child(3n+1) {
    clear: left; }
  .M-5 {
    display: block;
    width: 41.66667%; }
  .row--clearfix .M-5:nth-child(n) {
    clear: none; }
  .row--clearfix .M-5:nth-child(2n+1) {
    clear: left; }
  .M-6 {
    display: block;
    width: 50%; }
  .row--clearfix .M-6:nth-child(n) {
    clear: none; }
  .row--clearfix .M-6:nth-child(2n+1) {
    clear: left; }
  .M-7 {
    display: block;
    width: 58.33333%; }
  .row--clearfix .M-7:nth-child(n) {
    clear: none; }
  .row--clearfix .M-7:nth-child(1n+1) {
    clear: left; }
  .M-8 {
    display: block;
    width: 66.66667%; }
  .row--clearfix .M-8:nth-child(n) {
    clear: none; }
  .row--clearfix .M-8:nth-child(1n+1) {
    clear: left; }
  .M-9 {
    display: block;
    width: 75%; }
  .row--clearfix .M-9:nth-child(n) {
    clear: none; }
  .row--clearfix .M-9:nth-child(1n+1) {
    clear: left; }
  .M-10 {
    display: block;
    width: 83.33333%; }
  .row--clearfix .M-10:nth-child(n) {
    clear: none; }
  .row--clearfix .M-10:nth-child(1n+1) {
    clear: left; }
  .M-11 {
    display: block;
    width: 91.66667%; }
  .row--clearfix .M-11:nth-child(n) {
    clear: none; }
  .row--clearfix .M-11:nth-child(1n+1) {
    clear: left; }
  .M-all {
    display: block;
    margin-left: 0;
    width: 100%; } }

@media screen and (min-width: 1024px) {
  .L-hide {
    display: none; }
  .L-1 {
    display: block;
    width: 8.33333%; }
  .row--clearfix .L-1:nth-child(n) {
    clear: none; }
  .row--clearfix .L-1:nth-child(12n+1) {
    clear: left; }
  .L-2 {
    display: block;
    width: 16.66667%; }
  .row--clearfix .L-2:nth-child(n) {
    clear: none; }
  .row--clearfix .L-2:nth-child(6n+1) {
    clear: left; }
  .L-3 {
    display: block;
    width: 25%; }
  .row--clearfix .L-3:nth-child(n) {
    clear: none; }
  .row--clearfix .L-3:nth-child(4n+1) {
    clear: left; }
  .L-4 {
    display: block;
    width: 33.33333%; }
  .row--clearfix .L-4:nth-child(n) {
    clear: none; }
  .row--clearfix .L-4:nth-child(3n+1) {
    clear: left; }
  .L-5 {
    display: block;
    width: 41.66667%; }
  .row--clearfix .L-5:nth-child(n) {
    clear: none; }
  .row--clearfix .L-5:nth-child(2n+1) {
    clear: left; }
  .L-6 {
    display: block;
    width: 50%; }
  .row--clearfix .L-6:nth-child(n) {
    clear: none; }
  .row--clearfix .L-6:nth-child(2n+1) {
    clear: left; }
  .L-7 {
    display: block;
    width: 58.33333%; }
  .row--clearfix .L-7:nth-child(n) {
    clear: none; }
  .row--clearfix .L-7:nth-child(1n+1) {
    clear: left; }
  .L-8 {
    display: block;
    width: 66.66667%; }
  .row--clearfix .L-8:nth-child(n) {
    clear: none; }
  .row--clearfix .L-8:nth-child(1n+1) {
    clear: left; }
  .L-9 {
    display: block;
    width: 75%; }
  .row--clearfix .L-9:nth-child(n) {
    clear: none; }
  .row--clearfix .L-9:nth-child(1n+1) {
    clear: left; }
  .L-10 {
    display: block;
    width: 83.33333%; }
  .row--clearfix .L-10:nth-child(n) {
    clear: none; }
  .row--clearfix .L-10:nth-child(1n+1) {
    clear: left; }
  .L-11 {
    display: block;
    width: 91.66667%; }
  .row--clearfix .L-11:nth-child(n) {
    clear: none; }
  .row--clearfix .L-11:nth-child(1n+1) {
    clear: left; }
  .L-all {
    display: block;
    margin-left: 0;
    width: 100%; } }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0; }

.slick-list:focus {
  outline: none; }

.slick-list.dragging {
  cursor: pointer;
  cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block; }

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''; }

.slick-track:after {
  clear: both; }

.slick-loading .slick-track {
  visibility: hidden; }

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px; }

.slick-slide:focus {
  outline: 0; }

[dir='rtl'] .slick-slide {
  float: right; }

.slick-slide img {
  display: block; }

.slick-slide.slick-loading img {
  display: none; }

.slick-slide.dragging img {
  pointer-events: none; }

.slick-initialized .slick-slide {
  display: block; }

.slick-loading .slick-slide {
  visibility: hidden; }

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.slick-dots {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer; }
  .slick-dots button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent; }
    .slick-dots button:before {
      font-size: 30px;
      line-height: 20px;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 20px;
      height: 20px;
      content: "•";
      text-align: center;
      opacity: 0.25;
      color: #3C4655;
      -webkit-font-smoothing: antialiased;
      transition: opacity .2s ease; }

.slick-active button:before {
  opacity: 1; }

/*------------------------------------*    $BASE ELEMENTS
\*------------------------------------*/
/*

---
name: Base
category:
 - Typography
 - Typography/Base
---

## Base Type Styles

All of the spacing throughout the website is based from the type styling, conforming to a rule of 1.5 times the font-size.

```html
<p>The <em>quick</em> brown fox jumped over the <strong>lazy</strong> dog</p>
<small>The quick brown fox jumped over the lazy dog</small>
```

### Example Paragraphs

Here you can see two paragraphs of generated lorem-ipsum to get a feel of the line-height and spacing.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu porttitor mauris. Duis a viverra dolor, lacinia porta massa. Aliquam faucibus libero viverra rhoncus lobortis. Quisque malesuada euismod lorem ac luctus. Sed sit amet nunc tellus. Suspendisse maximus nunc sed mi vehicula rutrum. Praesent lobortis euismod turpis sit amet venenatis. Nullam eu enim suscipit, accumsan arcu ut, fringilla odio. Pellentesque ultrices accumsan leo, sit amet vulputate ipsum feugiat id. Pellentesque a pharetra quam. Aliquam rutrum, turpis hendrerit varius pulvinar, libero nisi congue augue, in condimentum diam urna volutpat lectus. Praesent at ipsum a lacus accumsan accumsan. Integer mollis velit ac urna efficitur, eget ultricies nisl posuere. Nullam elementum nunc ac ante fermentum, ac consequat felis scelerisque. Cras dui lacus, posuere semper magna et, ornare porta arcu.
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sit amet erat accumsan, sagittis metus eget, bibendum nisl. Curabitur dolor enim, bibendum id libero non, cursus iaculis libero. Vivamus orci nisl, posuere vel nibh eu, maximus ullamcorper augue. Vivamus scelerisque laoreet tristique. Donec ut urna lacus. Morbi et nisi sit amet leo vehicula pharetra sed ut elit. Pellentesque tincidunt, quam ut viverra tincidunt, lorem risus facilisis sapien, at gravida lorem dui fermentum arcu. Nam varius felis risus. Morbi a ipsum imperdiet, posuere lorem quis, tincidunt augue. Sed sed metus vitae nunc ullamcorper elementum. Vestibulum ornare augue tellus, vel accumsan augue euismod at. Quisque vitae convallis dolor, id tempus ipsum. Phasellus nisl ante, ullamcorper sit amet tortor at, suscipit venenatis sapien. Sed commodo odio in dolor tempus, eget rhoncus mauris bibendum.</p>
```

*/
#wpadminbar {
  top: auto !important;
  bottom: 0; }

html {
  font-size: 16px; }

html:root {
  margin-top: 0 !important; }

body {
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n4", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #424242;
  margin: 0;
  padding: 0;
  background-color: #FFF;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }
  @media screen and (min-width: 640px) {
    body:after {
      content: '';
      background: #000;
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 22em;
      bottom: 0;
      z-index: 100;
      transition: opacity .2s ease;
      pointer-events: none; }
    body.menu-active:after {
      opacity: .5; } }
  @media screen and (min-width: 1024px) {
    body {
      font-size: 18px; } }

p,
ul,
ol,
dl {
  margin-bottom: 1.5rem; }

small {
  font-size: .8rem; }

address {
  font-style: normal; }

strong,
b {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }

i,
em {
  font-style: italic; }

time {
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n6", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  color: #3C4655;
  letter-spacing: .1px;
  line-height: 1;
  display: block;
  margin-bottom: 1em; }
  @media screen and (min-width: 640px) {
    time {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    time {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 640px) {
    time {
      margin-bottom: 0.875em; } }

::-moz-selection {
  background: #329B5F;
  color: #FFF;
  text-shadow: none; }

::selection {
  background: #329B5F;
  color: #FFF;
  text-shadow: none; }

blockquote {
  padding: 0.5em 1em;
  margin: 0 0 1em;
  font-size: 20px;
  font-size: 1.25rem;
  border-left: 5px solid #424242; }
  blockquote p {
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n4", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 0.75rem; }
  blockquote footer {
    display: block; }

hr {
  border: 0 solid #424242;
  border-top-width: 1px;
  height: 1px;
  margin: 0 0 1em; }

/*

---
name: Utilities
category:
 - Layout
 - Layout/Utilities
---

## List of Utility Classes


### Color

These classes enforce the colour of the text to change:
- `.is-green`
- `.is-light-green`

```html
<h1 class="is-green">The brown fox</h1>
<h1 class="is-light-green">The brown fox</h1>
```

### Clearfix

> .cf

This is used to apply a clearfix.

Use this on container elements with floated children.


### Hidden

> .is-hidden

This is used to completely remove an element from the document flow and from screen-readers.

This is usually applied or removed with JavaScript.

> .is-visually-hidden

This is still visible to screen-readers, so it is used for accessibility purposes.


### Floats

> .pull-right

This is used to apply a right float.

> .pull-left

This is used to apply a left float.


### Alignment

> .align-right

This is used to apply `text-align: right;`

> .align-center

This is used to apply `text-align: center;`

> .align-left

This is used to apply `text-align: left;`

*/
.is-green {
  color: #329B5F !important; }

.is-bg-green {
  background-color: #329B5F !important; }

.is-light-green {
  color: #DAE376 !important; }

.is-bg-light-green {
  background-color: #DAE376 !important; }

.is-bg-light-green--transparent {
  background-color: rgba(218, 227, 118, 0.7) !important; }

.is-lightest-green {
  color: #D9F1E1 !important; }

.is-bg-lightest-green {
  background-color: #D9F1E1 !important; }

.is-bg-lemon {
  background-color: #FFF4C9 !important; }

.is-bg-beige {
  background-color: #F6F8DD !important; }

.is-yellow {
  color: #FAC44F !important; }

.is-bg-yellow {
  background-color: #FAC44F !important; }

.is-charcoal {
  color: #3C4655 !important; }

.is-bg-charcoal {
  background-color: #3C4655 !important; }

.cf, .band, .nav, .breadcrumbs {
  *zoom: 1; }

.cf:before, .band:before, .nav:before, .breadcrumbs:before,
.cf:after,
.band:after,
.nav:after,
.breadcrumbs:after {
  content: ' ';
  display: table; }

.cf:after, .band:after, .nav:after, .breadcrumbs:after {
  clear: both; }

.is-hidden {
  display: none !important;
  visibility: hidden !important; }

.is-visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

.pull-right {
  float: right; }

.pull-left {
  float: left; }

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

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

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

@media screen and (min-width: 1024px) {
  .is-large {
    font-size: 20px;
    font-size: 1.25rem; } }

@media screen and (min-width: 1024px) {
  .is-extra-large {
    font-size: 22px;
    font-size: 1.375rem; } }

img.alignright {
  float: right;
  margin-left: 1rem; }

img.aligncenter {
  display: block;
  margin: 0 auto; }

img.alignleft {
  float: left;
  margin-right: 1rem; }

/*------------------------------------*    LINKS
\*------------------------------------*/
a {
  text-decoration: underline;
  word-wrap: break-word; }
  a:hover, a:focus {
    text-decoration: none; }
  a:active {
    text-decoration: underline; }

p a {
  color: #329B5F; }

.site-footer a, .icon-card__copy a, .step-row__content a {
  text-decoration: none; }
  .site-footer a:hover, .icon-card__copy a:hover, .step-row__content a:hover, .site-footer a:focus, .icon-card__copy a:focus, .step-row__content a:focus {
    text-decoration: underline; }
  .site-footer a:active, .icon-card__copy a:active, .step-row__content a:active {
    text-decoration: none; }

.plain-text {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: #424242;
  letter-spacing: .1px;
  line-height: 1;
  text-decoration: none; }
  .plain-text:hover, .plain-text:focus, .plain-text:active {
    text-decoration: underline; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
  text-decoration: none; }
  h1 a:hover, h1 a:focus,
  h2 a:hover,
  h2 a:focus,
  h3 a:hover,
  h3 a:focus,
  h4 a:hover,
  h4 a:focus,
  h5 a:hover,
  h5 a:focus {
    text-decoration: underline; }
  h1 a:active,
  h2 a:active,
  h3 a:active,
  h4 a:active,
  h5 a:active {
    text-decoration: none; }

tbody tr a {
  color: inherit;
  text-decoration: underline; }
  tbody tr a:hover, tbody tr a:focus {
    text-decoration: none; }
  tbody tr a:active {
    text-decoration: underline; }

/*

---
name: Headings
category:
 - Typography
 - Typography/Headings
---

## Base Headings

The class structure follows the structure discussed by Harry Roberts in his article [practical font sizing in CSS](http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/) on CSS Wizardry.

```html
<h1 class="alpha">The brown fox</h1>
<h2 class="beta">The brown fox</h2>
<h3 class="gamma">The brown fox</h3>
<h4 class="delta">The brown fox</h4>
<h5 class="epsilon">The brown fox</h5>
<h6 class="zeta">The brown fox</h6>
```

## Utilities


### Style

Use the `.is-uppercase` class to enforce a heading to be in capitals.

```html
<h1 class="is-uppercase">The brown fox</h1>
```

### Spacing

Using `.drop` class applies only half the regular margin bottom.

```html
<h1 class="drop">The brown fox</h1>
<h1>The brown fox</h1>
<h1>The brown fox</h1>
```

*/
h1,
.alpha,
h2,
.beta,
.newsletter-block .newsletter-block__title,
.post-card__title,
h3,
.gamma,
h4,
.delta,
h5,
.epsilon,
h6,
.zeta {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.3;
  margin-bottom: 1rem; }
  h1.is-uppercase,
  .alpha.is-uppercase,
  h2.is-uppercase,
  .beta.is-uppercase,
  .newsletter-block .is-uppercase.newsletter-block__title,
  .is-uppercase.post-card__title,
  h3.is-uppercase,
  .gamma.is-uppercase,
  h4.is-uppercase,
  .delta.is-uppercase,
  h5.is-uppercase,
  .epsilon.is-uppercase,
  h6.is-uppercase,
  .zeta.is-uppercase {
    text-transform: uppercase; }
  h1.drop,
  .alpha.drop,
  h2.drop,
  .beta.drop,
  .newsletter-block .drop.newsletter-block__title,
  .drop.post-card__title,
  h3.drop,
  .gamma.drop,
  h4.drop,
  .delta.drop,
  h5.drop,
  .epsilon.drop,
  h6.drop,
  .zeta.drop {
    margin-bottom: .75rem; }
  h1 a,
  .alpha a,
  h2 a,
  .beta a, .newsletter-block .newsletter-block__title a, .post-card__title a,
  h3 a,
  .gamma a,
  h4 a,
  .delta a,
  h5 a,
  .epsilon a,
  h6 a,
  .zeta a {
    color: currentColor; }
  h1.sub-heading,
  .alpha.sub-heading,
  h2.sub-heading,
  .beta.sub-heading,
  .newsletter-block .sub-heading.newsletter-block__title,
  .sub-heading.post-card__title,
  h3.sub-heading,
  .gamma.sub-heading,
  h4.sub-heading,
  .delta.sub-heading,
  h5.sub-heading,
  .epsilon.sub-heading,
  h6.sub-heading,
  .zeta.sub-heading {
    font-size: 16px;
    font-size: 1rem; }
    @media screen and (min-width: 640px) {
      h1.sub-heading,
      .alpha.sub-heading,
      h2.sub-heading,
      .beta.sub-heading,
      .newsletter-block .sub-heading.newsletter-block__title,
      .sub-heading.post-card__title,
      h3.sub-heading,
      .gamma.sub-heading,
      h4.sub-heading,
      .delta.sub-heading,
      h5.sub-heading,
      .epsilon.sub-heading,
      h6.sub-heading,
      .zeta.sub-heading {
        font-size: 16px;
        font-size: 1rem; } }
    @media screen and (min-width: 1024px) {
      h1.sub-heading,
      .alpha.sub-heading,
      h2.sub-heading,
      .beta.sub-heading,
      .newsletter-block .sub-heading.newsletter-block__title,
      .sub-heading.post-card__title,
      h3.sub-heading,
      .gamma.sub-heading,
      h4.sub-heading,
      .delta.sub-heading,
      h5.sub-heading,
      .epsilon.sub-heading,
      h6.sub-heading,
      .zeta.sub-heading {
        font-size: 20px;
        font-size: 1.25rem; } }

h1,
.alpha {
  font-size: 20px;
  font-size: 1.25rem; }
  @media screen and (min-width: 640px) {
    h1,
    .alpha {
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (min-width: 1024px) {
    h1,
    .alpha {
      font-size: 46px;
      font-size: 2.875rem; } }
  h1.alt-font,
  .alpha.alt-font,
  .step-block__title,
  .step-row__title {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-size: 1.375rem; }
    @media screen and (min-width: 640px) {
      h1.alt-font,
      .alpha.alt-font,
      .step-block__title,
      .step-row__title {
        font-size: 22px;
        font-size: 1.375rem; } }
    @media screen and (min-width: 1024px) {
      h1.alt-font,
      .alpha.alt-font,
      .step-block__title,
      .step-row__title {
        font-size: 36px;
        font-size: 2.25rem; } }

h2,
.beta,
.newsletter-block .newsletter-block__title,
.post-card__title {
  font-size: 18px;
  font-size: 1.125rem; }
  @media screen and (min-width: 640px) {
    h2,
    .beta,
    .newsletter-block .newsletter-block__title,
    .post-card__title {
      font-size: 24px;
      font-size: 1.5rem; } }
  @media screen and (min-width: 1024px) {
    h2,
    .beta,
    .newsletter-block .newsletter-block__title,
    .post-card__title {
      font-size: 40px;
      font-size: 2.5rem; } }

h3,
.gamma {
  font-size: 15px;
  font-size: 0.9375rem; }
  @media screen and (min-width: 640px) {
    h3,
    .gamma {
      font-size: 19px;
      font-size: 1.1875rem; } }
  @media screen and (min-width: 1024px) {
    h3,
    .gamma {
      font-size: 35px;
      font-size: 2.1875rem; } }

h4,
.delta {
  font-size: 13px;
  font-size: 0.8125rem; }
  @media screen and (min-width: 640px) {
    h4,
    .delta {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    h4,
    .delta {
      font-size: 22px;
      font-size: 1.375rem; } }

h5,
.epsilon {
  font-size: 12px;
  font-size: 0.75rem; }
  @media screen and (min-width: 640px) {
    h5,
    .epsilon {
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (min-width: 1024px) {
    h5,
    .epsilon {
      font-size: 20px;
      font-size: 1.25rem; } }

h6,
.zeta {
  font-size: 12px;
  font-size: 0.75rem; }
  @media screen and (min-width: 640px) {
    h6,
    .zeta {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (min-width: 1024px) {
    h6,
    .zeta {
      font-size: 18px;
      font-size: 1.125rem; } }

/*

---
name: Lists
category:
 - Components
 - Components/Lists
---

## Unordered List

This is just a plain unordered list, no special classes have been applied.

```html
<ul>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
```

## Ordered List

This is just a plain ordered list, no special classes have been applied.

```html
<ol>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ol>
```

## Plain List

Using the `.is-plain` class on any list to remove margin and padding.

```html
<ul class="is-plain">
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
```

*/
ul {
  list-style: disc; }

ol,
ul {
  margin-bottom: 1.5rem; }
  ol.is-plain,
  ul.is-plain {
    list-style-type: none;
    margin: 0;
    padding: 0; }

ul ul,
ol ol {
  margin-bottom: 0; }

/*------------------------------------*    MEDIA ELEMENTS
\*------------------------------------*/
audio,
canvas,
img,
svg,
video {
  vertical-align: middle; }

iframe,
img {
  max-width: 100%;
  width: 100%; }

img {
  vertical-align: middle;
  height: auto;
  width: auto; }

a img {
  border: 0; }

/*------------------------------------*    FORMS
\*------------------------------------*/
fieldset, .ginput_container,
form {
  border: 0;
  padding: 0;
  margin: 0; }

fieldset, .ginput_container {
  margin-bottom: 1.5rem; }

label,
legend {
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.125;
  display: block;
  margin-bottom: .5em;
  color: #3C4655;
  cursor: pointer; }

abbr[title="Required"] {
  color: #3C4655;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="color"],
input[type="number"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="datetime"],
input[type="datetime-local"],
textarea {
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n4", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  padding: .5em;
  width: 100%;
  border: 1px solid #3C4655;
  margin-bottom: 0;
  color: #3C4655;
  background-color: #FFF;
  border-radius: 2px; }
  @media screen and (min-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="color"],
    input[type="number"],
    input[type="range"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="datetime"],
    input[type="datetime-local"],
    textarea {
      border-radius: 4px; } }

input[type="color"] {
  width: auto; }

textarea {
  display: block;
  line-height: 1.5rem;
  resize: vertical; }

::-webkit-input-placeholder {
  color: #989898; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #989898; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #989898; }

:-ms-input-placeholder {
  color: #989898; }

.flex-input, #gform_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .flex-input input:not([type="submit"]), #gform_1 input:not([type="submit"]) {
    border-right: 0;
    border-radius: 2px 0 0 2px; }
    @media screen and (min-width: 1024px) {
      .flex-input input:not([type="submit"]), #gform_1 input:not([type="submit"]) {
        border-radius: 4px 0 0 4px; } }
  .flex-input button, #gform_1 button,
  .flex-input [type="submit"], #gform_1 [type="submit"] {
    padding: 0 1em;
    margin: 0;
    border-radius: 0 2px 2px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media screen and (min-width: 640px) {
      .flex-input button, #gform_1 button,
      .flex-input [type="submit"], #gform_1 [type="submit"] {
        padding: 0 .5rem; } }
    @media screen and (min-width: 1024px) {
      .flex-input button, #gform_1 button,
      .flex-input [type="submit"], #gform_1 [type="submit"] {
        padding: 0 1rem;
        border-radius: 0 4px 4px 0; } }

/*------------------------------------*    TABLES
\*------------------------------------*/
table {
  color: #3C4655;
  background: #FFF;
  width: 100%;
  text-align: center;
  border-spacing: 0;
  border-right: 1px solid #e9e6e0; }
  table:last-child {
    margin-bottom: 1.5rem; }

th {
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #e9e6e0;
  padding: 8px 0; }
  @media screen and (min-width: 640px) {
    th {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    th {
      font-size: 22px;
      font-size: 1.375rem; } }
  @media screen and (min-width: 640px) {
    th {
      padding: 10px 0; } }
  @media screen and (min-width: 1024px) {
    th {
      font-weight: 600;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
      padding: 16px; } }

td {
  font-size: 14px;
  border-bottom: 1px solid #e9e6e0;
  border-left: 1px solid #e9e6e0;
  padding: 14px 0;
  width: 33%; }
  @media screen and (min-width: 640px) {
    td {
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    td {
      padding: 30px; } }

tbody tr {
  padding: 1em; }

/*------------------------------------*    $LAYOUT
\*------------------------------------*/
/*------------------------------------*	BAND
\*------------------------------------*/
.band {
  margin-bottom: 1.5rem; }

.band--thin {
  margin-bottom: 0.75rem; }

.band--thick {
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 640px) {
    .band--thick {
      margin-bottom: 3rem; } }

.band--extra-thick {
  margin-bottom: 2.25rem; }
  @media screen and (min-width: 640px) {
    .band--extra-thick {
      margin-bottom: 4.5rem; } }

.band--double-thick {
  margin-bottom: 3rem; }
  @media screen and (min-width: 640px) {
    .band--double-thick {
      margin-bottom: 6rem; } }

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 640px) {
    .flex-container {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.flex-container--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

@media screen and (min-width: 640px) {
  .flex-container--3 .flex-container__item {
    -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
    max-width: 33.33%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

@media screen and (min-width: 640px) {
  .flex-container--3 .flex-container__item--large {
    -ms-flex-preferred-size: 66.66%;
        flex-basis: 66.66%;
    max-width: 66.66%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

@media screen and (min-width: 640px) {
  .flex-container--2 .flex-container__item {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

@media screen and (min-width: 640px) {
  .flex-container--2--L .flex-container__item {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

@media screen and (min-width: 1024px) {
  .flex-container--2--L .flex-container__item {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

.flex-container__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }
  .flex-container--border .flex-container__item:nth-child(odd) {
    border-top: 1px solid #d3d1cd;
    border-bottom: 1px solid #d3d1cd; }
    @media screen and (min-width: 640px) {
      .flex-container--border .flex-container__item:nth-child(odd) {
        border-top: 0;
        border-bottom: 0;
        border-left: 1px solid #d3d1cd;
        border-right: 1px solid #d3d1cd; } }

/*

---
name: Footer
category:
 - Layout
 - Layout/Footer
---

```html
<footer class="site-footer">

	<div class="wrapper wrapper--padded">

		<section class="row">

			<div class="col S-all M-4">

				<h6 class="is-green is-uppercase">Other Services</h6>

				<address class="site-footer__address">
					<ul class="is-plain">
						<li>Unit 10</li>
						<li>Ilton Business Park</li>
						<li>Ilminster</li>
						<li>TA19 9DU</li>
					</ul>
				</address>

				<ul class="is-plain">
					<li>Call: <a href="tel:01460 55655">01460 55655</a></li>
					<li>Fax: 01460 55770</li>
					<li>Email: <a href="mailto:info@chudleyinternational.com">info@chudleyinternational.com</a></li>
				</ul>

			</div>

			<div class="site-footer__colophon / col S-hide M-all">
				<span>&copy; 2016 Chudley Moving &amp; Shipping. All rights reserved.</span>
				<span class="pull-right">Designed and Built by <a href="https://theideabureau.co">The Idea Bureau</a></span>
			</div>

		</section>

	</div>

</footer>
```

*/
.site-footer {
  background-color: #3C4655;
  color: #F7F6F4;
  padding: 2.625em 0 3.125em; }
  @media screen and (min-width: 640px) {
    .site-footer {
      padding: 3em 0 1.5em; } }
  @media screen and (min-width: 1024px) {
    .site-footer {
      padding: 5.0625em 0 1.6875em; } }
  .site-footer a {
    color: inherit; }
  .site-footer h6 {
    margin-bottom: 10px; }
  .site-footer .row {
    position: relative; }

.footer-ombuds {
  position: absolute;
  bottom: 7.3rem;
  right: 0;
  width: 100px; }
  @media screen and (min-width: 640px) {
    .footer-ombuds {
      right: auto;
      bottom: 3.5rem;
      left: 1.5rem; } }
  @media screen and (min-width: 1024px) {
    .footer-ombuds {
      bottom: 4.5rem;
      width: auto; } }

.site-footer__address {
  margin-bottom: 40px; }
  @media screen and (min-width: 640px) {
    .site-footer__address {
      margin-bottom: 20px; } }
  @media screen and (min-width: 1024px) {
    .site-footer__address {
      margin-bottom: 40px; } }

.site-footer__colophon {
  font-size: 10px;
  font-size: 0.625rem;
  clear: both;
  margin-top: 38px; }
  @media screen and (min-width: 640px) {
    .site-footer__colophon {
      font-size: 10px;
      font-size: 0.625rem; } }
  @media screen and (min-width: 1024px) {
    .site-footer__colophon {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (min-width: 1024px) {
    .site-footer__colophon {
      margin-top: 54px; } }
  .site-footer__colophon a {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.site-footer__sub-wrapper {
  background-color: #FFF;
  padding: 1rem 0; }

.site-footer__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 640px) {
    .site-footer__sub {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }

.site-footer__sub-item {
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n4", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  color: #3C4655;
  text-decoration: none;
  display: block;
  padding-left: 3.25em;
  position: relative;
  min-height: 2rem; }
  @media screen and (min-width: 640px) {
    .site-footer__sub-item {
      -webkit-box-flex: 0;
          -ms-flex: 0 1 48%;
              flex: 0 1 48%; } }
  @media screen and (min-width: 800px) {
    .site-footer__sub-item {
      padding-left: 0; } }
  .site-footer__sub-item:hover, .site-footer__sub-item:active, .site-footer__sub-item:focus {
    text-decoration: underline; }
  .site-footer__sub-item svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    margin-right: 1rem; }
    @media screen and (min-width: 800px) {
      .site-footer__sub-item svg {
        position: static; } }
  .site-footer__sub-item .facebook {
    width: 1.1rem;
    margin-left: .45rem;
    fill: #3B5998; }
    @media screen and (min-width: 800px) {
      .site-footer__sub-item .facebook {
        margin-left: 0; } }
  .site-footer__sub-item .twitter {
    width: 2rem;
    fill: #00ACEE; }
  .site-footer__sub-item:first-child {
    margin-bottom: 1rem; }
    @media screen and (min-width: 640px) {
      .site-footer__sub-item:first-child {
        margin-bottom: 0; } }
  @media screen and (min-width: 1024px) {
    .site-footer__sub-item:last-child {
      text-align: right; } }

/*

---
name: Hamburger
category:
 - Layout
 - Layout/Hamburger
---

The hamburger animates on click to a cross. It is used to show the menu on smaller screens. Here we're using the `.hamburger--demo` class for presentation purposes only.

```html
<div class="hamburger hamburger--demo">
	<div class="hamburger-box">
		<div class="hamburger-inner"></div>
	</div>
</div>
<div class="menu-active">
	<div class="hamburger hamburger--demo">
		<div class="hamburger-box">
			<div class="hamburger-inner"></div>
		</div>
	</div>
</div>
```

*/
.hamburger--demo {
  display: block !important;
  position: static !important;
  float: left !important;
  margin-right: 1.5rem; }

.hamburger {
  overflow: visible;
  height: 30px;
  float: right;
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  cursor: pointer;
  transition: top .2s ease; }
  @media screen and (min-width: 640px) {
    .hamburger {
      top: 23px;
      right: 34px; }
      .is-welcome .hamburger {
        top: 63px; }
      .site-header__container--scrolling .hamburger {
        top: 19px; }
        .is-welcome .site-header__container--scrolling .hamburger {
          top: 59px; } }
  @media screen and (min-width: 1024px) {
    .hamburger {
      top: 26px; }
      .is-welcome .hamburger {
        top: 66px; }
      .site-header__container--scrolling .hamburger {
        top: 24px; }
        .is-welcome .site-header__container--scrolling .hamburger {
          top: 64px; } }
  @media screen and (min-width: 1280px) {
    .hamburger {
      display: none; } }
  .menu-active .hamburger .hamburger-inner {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    transition-delay: .14s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .menu-active .hamburger .hamburger-inner, .menu-active .hamburger .hamburger-inner:before, .menu-active .hamburger .hamburger-inner:after {
      border-radius: 0;
      height: 6px; }
    .menu-active .hamburger .hamburger-inner:before {
      top: 0;
      opacity: 0;
      transition: top .1s ease, opacity .1s .14s ease; }
    .menu-active .hamburger .hamburger-inner:after {
      width: 30px;
      bottom: 0;
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
      transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger-box {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
  transition-duration: .1s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger-inner, .hamburger-inner:before, .hamburger-inner:after {
    width: 30px;
    height: 4px;
    background-color: #329B5F;
    border-radius: 1px;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: ease; }
  .hamburger-inner:before, .hamburger-inner:after {
    content: '';
    display: block; }
  .hamburger-inner:before {
    top: -10px;
    transition: top .1s .14s ease, opacity .1s ease; }
  .hamburger-inner:after {
    bottom: -10px;
    transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

/*

---
name: Header
category:
 - Layout
 - Layout/Header
---

This is a presentation preview of the main header, the style changes slightly at the different breakpoints, and when the page is scrolled.


```html
<header class="site-header__container">

	<div class="wrapper wrapper--padded">

		<div class="site-header">

			<div class="site-header__logo">
				<a href="/">
					<img class="logo logo--desktop" src="/wp-content/themes/chdint-v1/assets/img/site-logo.svg">
					<img class="logo logo--desktop logo--desktop-scrolled" src="/wp-content/themes/chdint-v1/assets/img/site-logo-plain.svg">
					<img class="logo logo--mobile" src="/wp-content/themes/chdint-v1/assets/img/site-logo-small.svg">
				</a>
			</div>

			<nav class="site-nav__container">

				<ul class="nav / site-nav">

					<li class="site-nav__home">
						<a href="/">Home</a>
					</li>

					<li class="site-nav__about">
						<a href="/about">About</a>
					</li>

					<li>
						<a href="/uk-removals" class="is-dropdown" data-index="1">UK Removals</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Planning</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Packing</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Storage</a>
					</li>

					<li>
						<a href="/international-removals" class="is-dropdown" data-index="2">International</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Preparation</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Paperwork</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Arrival</a>
					</li>

					<li>
						<a href="/antiques-shipping">Antiques &amp; Fine Art</a>
					</li>

					<li>
						<a href="/our-services" class="is-dropdown" data-index="3">Our Services</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Specialist Packing</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Storage Solutions</a>
					</li>

					<li class="site-nav__sub-nav">
						<a href="#">Bespoke Crates</a>
					</li>

					<li class="site-nav__contact-link">
						<a href="#">Contact</a>
					</li>

				</ul> <!-- / .site-nav -->

			</nav> <!-- / .site-nav__container -->

			<div class="site-nav__dropdown">
				<span class="nav-dropdown-arrow"></span>
				<div class="nav-dropdown-section">
					<a href="#1" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-yellow">Planning</span>
						<span class="nav-dropdown-block__content">Estimating the price of your move through detailed surveys</span>
					</a>
					<a href="#2" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-green">Packing</span>
						<span class="nav-dropdown-block__content">Take advantage of our expert guidance or pack yourself with our supplied materials</span>
					</a>
					<a href="#3" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-light-green">Storage</span>
						<span class="nav-dropdown-block__content">Keeping your belongings safe in our secure storage warehouse</span>
					</a>
				</div>
				<div class="nav-dropdown-section">
					<a href="#1" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-yellow">Preparation</span>
						<span class="nav-dropdown-block__content">Organise arrangements for your personal belongings</span>
					</a>
					<a href="#2" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-green">Paperwork</span>
						<span class="nav-dropdown-block__content">Preparing the necessary paperwork required by authorities</span>
					</a>
					<a href="#3" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-light-green">Arrival</span>
						<span class="nav-dropdown-block__content">Transporting your belongings overseas safely to your new address</span>
					</a>
				</div>
				<div class="nav-dropdown-section">
					<a href="#1" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-yellow">Specialist Packing</span>
						<span class="nav-dropdown-block__content">Protect your most treasured items during your move</span>
					</a>
					<a href="#2" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-green">Storage Solutions</span>
						<span class="nav-dropdown-block__content">Explore our storage solutions to accommodate your belongings safely</span>
					</a>
					<a href="#3" class="nav-dropdown-block">
						<span class="nav-dropdown-block__title / is-light-green">Bespoke Crates</span>
						<span class="nav-dropdown-block__content">Use our high quality bespoke crates to ransport your Fine Art and Anqitues</span>
					</a>
				</div>
			</div>

			<a class="site-header__phone" href="tel:0146055655" title="Call us">01460 55655</a>

		</div>

		<div class="hamburger">
			<div class="hamburger-box">
				<div class="hamburger-inner"></div>
			</div>
		</div>

	</div>

</header>
```

*/
.site-header__spacer {
  height: 3.9375em;
  background: #F7F6F4; }
  @media screen and (min-width: 640px) {
    .site-header__spacer {
      height: 5em; } }
  @media screen and (min-width: 1280px) {
    .site-header__spacer {
      height: 5em; } }
  @media screen and (min-width: 1440px) {
    .site-header__spacer {
      height: 5.5em; } }

.welcome-banner {
  display: none; }
  @media screen and (min-width: 640px) {
    .welcome-banner {
      font-weight: 600;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 40px;
      background-color: #329B5F;
      color: #FFF;
      text-align: center;
      padding-right: 1.5rem;
      position: fixed;
      height: 40px;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10; }
      html.is-welcome .welcome-banner {
        display: block; } }
  @media screen and (min-width: 1024px) {
    .welcome-banner {
      padding-right: 2.5rem; } }
  .welcome-banner a {
    color: inherit; }

.welcome-banner__close {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: .5rem;
  height: 1rem;
  width: 1rem;
  fill: #FFF;
  cursor: pointer; }
  @media screen and (min-width: 1024px) {
    .welcome-banner__close {
      right: 2rem; } }

.site-header__container {
  background: #F7F6F4;
  padding: 0.625em 0;
  padding-right: 1.0625em; }
  @media screen and (min-width: 640px) {
    .site-header__container {
      padding: 1.1875em 0; } }
  @media screen and (min-width: 1280px) {
    .site-header__container {
      padding: 1.5625em 0; } }

.site-header__container--fixed {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  transition: all .2s ease; }
  @media screen and (min-width: 640px) {
    .is-welcome .site-header__container--fixed {
      top: 40px; } }

.site-header__container--scrolling {
  background: rgba(247, 246, 244, 0.95);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 640px) {
    .site-header__container--scrolling {
      padding: 1em 0; } }
  @media screen and (min-width: 1280px) {
    .site-header__container--scrolling {
      padding: 0.88889em 0; } }
  @media screen and (min-width: 640px) {
    .site-header__container--scrolling .site-header__logo {
      height: 2.5em; } }
  @media screen and (min-width: 1280px) {
    .site-header__container--scrolling .site-header__logo {
      height: 2.22222em; } }
  .site-header__container--scrolling .logo--desktop {
    opacity: 0; }
  .site-header__container--scrolling .logo--desktop-scrolled {
    opacity: 1; }

@media screen and (min-width: 1280px) {
  .site-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; } }

.site-header .button {
  display: none; }
  @media screen and (min-width: 640px) {
    .site-header .button {
      font-weight: 600;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
      padding: .5rem 1.5rem;
      margin: 0 1.5rem 0 0;
      display: inline-block;
      float: right; } }
  @media screen and (min-width: 1280px) {
    .site-header .button {
      margin: 0;
      float: none; } }

.site-header__logo {
  position: relative;
  float: left;
  width: 12.5em;
  height: 2.6875em;
  transition: all .2s ease; }
  @media screen and (min-width: 640px) {
    .site-header__logo {
      width: 8.25em;
      height: 2.625em; } }
  @media screen and (min-width: 1280px) {
    .site-header__logo {
      width: 8.33333em;
      height: 2.33333em; } }
  .site-header__logo img {
    width: 100%; }

.logo {
  transition: all .2s ease; }

.logo--mobile {
  margin-top: 0.5em; }
  @media screen and (min-width: 640px) {
    .logo--mobile {
      display: none; } }

.logo--desktop {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: none; }
  @media screen and (min-width: 640px) {
    .logo--desktop {
      display: block; } }

.logo--desktop-scrolled {
  opacity: 0;
  top: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0); }

.site-nav__container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  padding-top: 2.7em;
  padding-bottom: 1.5em;
  background: #F7F6F4;
  text-align: center;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
  transition: all .2s ease;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; }
  .menu-active .site-nav__container {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1; }
  @media screen and (min-width: 640px) {
    .site-nav__container {
      width: 22em;
      left: auto;
      padding-top: 5.7em;
      padding-left: 1.875em;
      text-align: left; } }
  @media screen and (min-width: 1280px) {
    .site-nav__container {
      position: static;
      top: auto;
      right: auto;
      left: auto;
      bottom: auto;
      -webkit-transform: none;
              transform: none;
      opacity: 1;
      width: auto;
      background: none;
      display: block;
      float: right;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 0;
      margin: 0;
      overflow: hidden; } }
  @media screen and (min-width: 1440px) {
    .site-nav__container {
      margin: 0 6em 0 3em; } }
  .site-nav__container .site-nav {
    position: relative; }
    .site-nav__container .site-nav li {
      padding-left: 0;
      margin-top: 1em; }
      .site-nav__container .site-nav li:first-child {
        margin-top: 0; }
      @media screen and (min-width: 640px) {
        .site-nav__container .site-nav li {
          margin-top: .7em; } }
      @media screen and (min-width: 1280px) {
        .site-nav__container .site-nav li {
          margin-top: 0;
          margin-left: 2.55556em;
          float: left;
          text-transform: uppercase; } }
    .site-nav__container .site-nav a {
      font-weight: 700;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 28px;
      font-size: 1.75rem;
      color: #3C4655;
      text-decoration: none; }
      @media screen and (min-width: 1280px) {
        .site-nav__container .site-nav a {
          font-size: 14px;
          font-size: 0.875rem; } }
      .site-nav__container .site-nav a.active, .site-nav__container .site-nav a:hover, .site-nav__container .site-nav a:active, .site-nav__container .site-nav a:focus {
        color: #329B5F;
        text-decoration: none; }
    @media screen and (min-width: 1280px) {
      .site-nav__container .site-nav .site-nav__about {
        display: none; } }
    .site-nav__container .site-nav .site-nav__contact-link {
      margin-top: 3em;
      margin-bottom: 3em; }
      @media screen and (min-width: 1280px) {
        .site-nav__container .site-nav .site-nav__contact-link {
          display: none; } }
      .site-nav__container .site-nav .site-nav__contact-link a {
        color: #329B5F; }
  @media screen and (min-width: 1280px) {
    .site-nav__container .site-nav__wide-only {
      display: none; } }
  @media screen and (min-width: 1280px) {
    .site-nav__container .site-nav__sub-nav {
      display: none; } }
  .site-nav__container .site-nav__sub-nav a {
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "lft-etica-n6", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-size: 1.125rem; }

.this-wont-exist {
  display: block; }

.site-header__phone {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  text-decoration: none;
  color: #3C4655;
  display: none;
  position: relative;
  float: right;
  margin-top: 0.5em;
  margin-right: 4.375em;
  background-image: url("../img/phone.svg");
  background-repeat: no-repeat;
  background-size: 23px; }
  @media screen and (min-width: 640px) {
    .site-header__phone {
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (min-width: 1024px) {
    .site-header__phone {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 640px) {
    .site-header__phone {
      display: inline-block;
      position: relative;
      padding-left: 36px; } }
  @media screen and (min-width: 1280px) {
    .site-header__phone {
      margin-top: 4px;
      margin-right: 0; } }
  .site-header__phone:hover, .site-header__phone:active, .site-header__phone:focus {
    color: #329B5F; }

.site-nav__dropdown {
  display: none; }
  @media screen and (min-width: 1280px) {
    .site-nav__dropdown {
      display: block;
      position: absolute;
      top: 50%;
      width: 342px;
      padding: 0;
      background: #FFF;
      border-radius: 2px;
      box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.5);
      will-change: top, left, opacity, contents;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s linear, height .2s linear, left .2s ease-in-out, top .2s ease-in-out; } }
  .site-nav__dropdown.is-active {
    opacity: 1;
    pointer-events: all; }
  .site-nav__dropdown.is-inactive {
    opacity: 0;
    pointer-events: none; }
  .site-nav__dropdown .is-active:hover {
    opacity: 1;
    pointer-events: all; }
  .site-nav__dropdown .nav-dropdown-section {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    top: 100%; }
  .site-nav__dropdown[data-active="1"] .nav-dropdown-section:nth-of-type(1),
  .site-nav__dropdown[data-active="2"] .nav-dropdown-section:nth-of-type(2),
  .site-nav__dropdown[data-active="3"] .nav-dropdown-section:nth-of-type(3) {
    opacity: 1;
    pointer-events: inherit;
    position: static; }

.nav-dropdown-arrow {
  position: relative;
  display: block; }
  .nav-dropdown-arrow:after, .nav-dropdown-arrow:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .nav-dropdown-arrow:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FFF;
    border-width: 9px;
    margin-left: -9px; }
  .nav-dropdown-arrow:before {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FFF;
    border-width: 12px;
    margin-left: -12px; }

.nav-dropdown-block {
  position: relative;
  display: block;
  padding: 1rem 2rem;
  border-bottom: 1px solid #F7F6F4;
  color: inherit;
  text-decoration: none; }
  .nav-dropdown-block:hover.nav-dropdown-block--yellow {
    background-color: #FFF4C9; }
  .nav-dropdown-block:hover.nav-dropdown-block--green {
    background-color: #D9F1E1; }
  .nav-dropdown-block:hover.nav-dropdown-block--light-green {
    background-color: #F6F8DD; }
  .nav-dropdown-block:active, .nav-dropdown-block:focus {
    text-decoration: none; }
  .nav-dropdown-block:last-child {
    border-bottom: 0;
    margin-bottom: 0; }
  .nav-dropdown-block svg {
    position: absolute;
    top: 1rem;
    left: 1rem;
    height: 2rem;
    max-width: 2rem; }
  .nav-dropdown-block span {
    padding-left: 2rem; }

.nav-dropdown-section--plain span {
  padding-left: 0; }

.nav-dropdown-block--parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 1.1rem; }
  .nav-dropdown-block--parent:hover {
    color: #329B5F; }
    .nav-dropdown-block--parent:hover svg {
      stroke: currentColor; }
  .nav-dropdown-block--parent svg {
    position: static;
    stroke: #3C4655; }
  .nav-dropdown-block--parent span {
    margin: 0;
    padding-left: 1rem; }

.nav-dropdown-block__title {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  display: block;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: .5rem; }

.nav-dropdown-block__content {
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n4", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.5;
  display: block; }

/*------------------------------------*	ISLAND
\*------------------------------------*/
.island {
  padding: 1.5rem; }
  @media screen and (min-width: 640px) {
    .island {
      padding: 3rem 1.5rem; } }
  @media screen and (min-width: 1024px) {
    .island {
      padding: 6rem 1.5rem; } }

.island--slim {
  padding: 1.5rem; }
  @media screen and (min-width: 640px) {
    .island--slim {
      padding: 3rem 1.5rem; } }

@media screen and (min-width: 640px) {
  .island--thick {
    padding: 3rem; } }

@media screen and (min-width: 1024px) {
  .island--thick {
    padding: 4.5rem; } }

.island--flat-bottom {
  padding-bottom: 0; }

.island--bordered {
  border: 1px solid #329B5F;
  padding: 0.625em; }

/*------------------------------------*    LAYOUT
\*------------------------------------*/
.wrapper, .quality-strip {
  padding: 0;
  margin: 0 auto;
  max-width: 1440px; }

.wrapper--padded, .quality-strip {
  padding: 0 1rem; }
  @media screen and (min-width: 1024px) {
    .wrapper--padded, .quality-strip {
      padding: 0 3rem; } }

.wrapper--copy {
  max-width: 50rem;
  padding: 0 1rem; }
  @media screen and (min-width: 1024px) {
    .wrapper--copy {
      padding: 0 3rem; } }

article.wrapper--copy ol {
  counter-reset: section;
  list-style-type: none; }

article.wrapper--copy li::before {
  counter-increment: section;
  content: counters(section, ".") " "; }

/*------------------------------------*    NAVIGATION
\*------------------------------------*/
.nav {
  list-style-type: none;
  padding: 0;
  margin: 0; }
  .nav a {
    text-decoration: none; }
    .nav a:hover, .nav a:focus {
      text-decoration: underline; }
    .nav a:active {
      text-decoration: none; }
  .nav li {
    list-style: none; }

.nav--horizontal li {
  float: left;
  padding-left: 0; }

.nav--horizontal a {
  display: block; }

.nav--vertical li {
  margin-bottom: 1em; }
  .nav--vertical li:last-child {
    margin-bottom: 0; }

.nav--vertical a {
  display: inline-block; }

/*------------------------------------*	PARAGRAPH
\*------------------------------------*/
@media screen and (min-width: 640px) {
  .paragraph--thin p {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto; } }

@media screen and (min-width: 1024px) {
  .paragraph--thin p {
    max-width: 40%; } }

@media screen and (min-width: 640px) {
  .paragraph--slim p {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto; } }

@media screen and (min-width: 1024px) {
  .paragraph--slim p {
    max-width: 70%; } }

/*------------------------------------*    $MODULAR
\*------------------------------------*/
/*

---
name: Angle Strip
category:
 - Components
 - Components/Angle Strip
---

This is a section of content used to highlight the services provided by Chudley.

```html
<div class="wrapper">
	<section class="angle-strip angle-strip--green">
		<div class="angle-strip__main">
			<div class="angle-strip__icon"><img src="/wp-content/themes/chdint-v1/assets/img/icon-box.svg" /></div>
			<h2 class="angle-strip__title">Specialist Packing</h2>
			<p>We can supply all the packing materials you may need to protect your treasured items during your move. If you are choosing this service with packing then our move plan and quotation will include the cost of materials. If however you choose to pack yourself then we can still supply you with any packing materials you may need.</p>
		</div>
		<div class="angle-strip__colour">
			<h4 class="is-green">Service Highlights</h4>
			<ul class="is-plain">
				<li>Packing materials are sources from the BAR</li>
				<li>All materials are reasonably prices</li>
				<li>Bubble wrap in different sized rolls for more fragile items</li>
				<li>All other essential materials are available (tape, marker pens, etc.)</li>
			</ul>
		</div>
	</section>
	<section class="angle-strip angle-strip--reverse angle-strip--yellow">
		<div class="angle-strip__main">
			<div class="angle-strip__icon"><img src="/wp-content/themes/chdint-v1/assets/img/icon-storage.svg" /></div>
			<h2 class="angle-strip__title">Storage Solutions</h2>
			<p>We can offer you storage solutions within your house move. In our central Somerset, fully secure warehouse, we have many solutions to accommodate your belongings safely and securely. We also offer storage in London, where we run weekly transport services to and from the home counties offering part or full load services for all customers. There is also storage should you have suffered flood or fire damage in your property.</p>
		</div>
		<div class="angle-strip__colour">
			<h4 class="is-yellow">Service Highlights</h4>
			<ul class="is-plain">
				<li>Packing materials are sources from the BAR</li>
				<li>All materials are reasonably prices</li>
				<li>Bubble wrap in different sized rolls for more fragile items</li>
				<li>All other essential materials are available (tape, marker pens, etc.)</li>
			</ul>
		</div>
	</section>
</div>
```

*/
.angle-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #3C4655;
  overflow: hidden; }
  @media screen and (min-width: 640px) {
    .angle-strip {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

@media screen and (min-width: 640px) {
  .angle-strip--reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse; } }

.angle-strip--green .angle-strip__colour {
  background-color: #D9F1E1; }
  .angle-strip--green .angle-strip__colour li:before {
    background-color: #329B5F; }

.angle-strip--yellow .angle-strip__colour {
  background-color: #FFF4C9; }
  .angle-strip--yellow .angle-strip__colour li:before {
    background-color: #FAC44F; }

.angle-strip--lime .angle-strip__colour {
  background-color: #F6F8DD; }
  .angle-strip--lime .angle-strip__colour li:before {
    background-color: #DAE376; }

.angle-strip__main,
.angle-strip__colour {
  padding: 1.5rem; }

@media screen and (min-width: 640px) {
  .angle-strip__main {
    padding: 5rem 2.5rem;
    -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

@media screen and (min-width: 1024px) {
  .angle-strip__main {
    padding: 5rem; } }

.angle-strip__main p:first-child {
  margin-top: 2em; }

.angle-strip__main p:last-child {
  margin-bottom: 0; }

@media screen and (min-width: 640px) {
  .angle-strip__main p {
    padding-left: 5.8em; } }

.angle-strip__icon {
  float: left;
  background-color: #D9F1E1;
  border-radius: 50%;
  padding: 1em;
  margin-right: 1.7em; }
  .angle-strip--yellow .angle-strip__icon {
    background-color: #FFF4C9; }
  .angle-strip--lime .angle-strip__icon {
    background-color: #F6F8DD; }
  .angle-strip__icon img {
    width: 2em;
    height: 2em; }

.angle-strip__title {
  margin-top: 1em; }
  @media screen and (min-width: 640px) {
    .angle-strip__title {
      margin-top: .7em; } }
  @media screen and (min-width: 1024px) {
    .angle-strip__title {
      margin-top: .3em; } }

@media screen and (min-width: 640px) {
  .angle-strip__colour {
    position: relative;
    padding: 2.5rem;
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

@media screen and (min-width: 1024px) {
  .angle-strip__colour {
    padding: 2.5rem 4rem; } }

.angle-strip__colour h4 {
  margin-bottom: 1.7em; }

.angle-strip__colour li {
  position: relative;
  list-style-type: none;
  margin-bottom: 1.8em;
  padding-left: 2.3rem; }
  .angle-strip__colour li:before {
    display: block;
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    content: ''; }
    @media screen and (min-width: 640px) {
      .angle-strip__colour li:before {
        top: .6rem;
        width: .65rem;
        height: .65rem; } }

/*

---
name: Breadcrumbs
category:
 - Components
 - Components/Breadcrumbs
---

```html
<nav class="breadcrumbs">

	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>

</nav>
```

*/
.breadcrumbs {
  font-size: 1rem;
  margin: 2.5rem 0 1rem; }
  .breadcrumbs ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .breadcrumbs li {
    float: left;
    margin: 0; }
    .breadcrumbs li:after {
      content: '';
      display: block;
      float: right;
      background: url("../img/breadcrumbs-arrow.svg") no-repeat center center;
      width: 5px;
      height: 1.5rem;
      margin: 0 1.5rem 0 1rem; }
    .breadcrumbs li:last-child a {
      color: #329B5F; }
    .breadcrumbs li:last-child:after {
      content: initial; }
  .breadcrumbs a {
    color: #3C4655;
    text-decoration: none; }
    .breadcrumbs a:hover, .breadcrumbs a:active, .breadcrumbs a:focus {
      color: #329B5F;
      text-decoration: none; }

/*

---
name: Buttons
category:
 - Components
 - Components/Buttons
---

## Button Sizes

Buttons are created by either using the `.button` class, button element, or submit input. Use the `.button--large` modifier to use a bigger button style.

```html
<a class="button">Button</a>
<a class="button button--large">Button</a>
```

## Variations

### Colour

* Use the `.button--green` modifier.

```html
<a class="button button--green">Button</a>
<a class="button button--large button--green">Button</a>
```

### Style

* Use the `.button--ghost` modifier.

```html
<a class="button button--ghost">Button</a>
<a class="button button--ghost button--green">Button</a>
```

*/
.button,
button,
input[type="submit"] {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  background: #3C4655;
  color: #F7F6F4;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  display: inline-block;
  padding: .75rem 2rem;
  margin-bottom: 0.75rem;
  vertical-align: middle;
  border: 2px solid #3C4655;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease; }
  @media screen and (min-width: 640px) {
    .button,
    button,
    input[type="submit"] {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    .button,
    button,
    input[type="submit"] {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (min-width: 1024px) {
    .button,
    button,
    input[type="submit"] {
      line-height: 1.1; } }
  .button svg,
  button svg,
  input[type="submit"] svg {
    width: 1em;
    height: 1em;
    fill: currentColor; }
    @media screen and (min-width: 1024px) {
      .button svg,
      button svg,
      input[type="submit"] svg {
        width: 1.3em;
        height: 1.3em; } }
  .button:hover, .button:active, .button:focus,
  button:hover,
  button:active,
  button:focus,
  input[type="submit"]:hover,
  input[type="submit"]:active,
  input[type="submit"]:focus {
    background: transparent;
    color: #3C4655;
    text-decoration: none; }
    .button:hover svg, .button:active svg, .button:focus svg,
    button:hover svg,
    button:active svg,
    button:focus svg,
    input[type="submit"]:hover svg,
    input[type="submit"]:active svg,
    input[type="submit"]:focus svg {
      fill: currentColor; }

.button--large {
  font-size: 14px;
  font-size: 0.875rem;
  padding: 1rem 3rem; }
  @media screen and (min-width: 640px) {
    .button--large {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    .button--large {
      font-size: 20px;
      font-size: 1.25rem; } }

.button--ghost {
  background: transparent;
  color: #3C4655; }
  .button--ghost:hover, .button--ghost:active, .button--ghost:focus {
    background: #3C4655;
    color: #F7F6F4; }

.button--green {
  background: #329B5F;
  border-color: #329B5F; }
  .button--green:hover, .button--green:active, .button--green:focus {
    background: #F7F6F4;
    color: #329B5F;
    border-color: #329B5F; }

.button--ghost.button--green {
  background: transparent;
  color: #329B5F;
  border-color: #329B5F; }
  .button--ghost.button--green:hover, .button--ghost.button--green:active, .button--ghost.button--green:focus {
    background: #329B5F;
    color: #F7F6F4; }

.button--white {
  background: #329B5F;
  border-color: #FFF;
  color: #FFF; }
  .button--white:hover, .button--white:active, .button--white:focus {
    background: #FFF;
    color: #329B5F;
    border-color: #FFF; }

.button--ghost.button--white {
  background: transparent;
  border-color: #FFF;
  color: #FFF; }
  .button--ghost.button--white:hover, .button--ghost.button--white:active, .button--ghost.button--white:focus {
    background: #FFF;
    color: #329B5F;
    border-color: #FFF; }

.button--flat {
  margin: 0; }

.chromeframe-banner {
  font-size: 1rem;
  background-color: #CC181E;
  color: #FFF;
  text-align: center;
  padding: .5rem 1.5rem .5rem .5rem;
  height: 40px; }
  @media screen and (min-width: 1024px) {
    .chromeframe-banner {
      padding: .5rem 2.5rem .5rem .5rem; } }
  .chromeframe-banner a {
    color: inherit; }

.content-block {
  color: #3C4655;
  padding: 3em 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.content-block__title {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  letter-spacing: .2px;
  line-height: 1;
  margin-bottom: 0.6em; }
  @media screen and (min-width: 640px) {
    .content-block__title {
      font-size: 19px;
      font-size: 1.1875rem; } }
  @media screen and (min-width: 1024px) {
    .content-block__title {
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (min-width: 640px) {
    .content-block__title {
      font-weight: 600;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      font-family: "lft-etica-n6", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: .1px;
      margin-bottom: 0.63158em; } }
  @media screen and (min-width: 1024px) {
    .content-block__title {
      letter-spacing: .4px;
      margin-bottom: 0.9em; } }
  .content-block__title p {
    margin-bottom: 1.5em; }
    @media screen and (min-width: 640px) {
      .content-block__title p {
        margin-bottom: 0.75em; } }
    @media screen and (min-width: 1024px) {
      .content-block__title p {
        margin-bottom: 1.5em; } }

/*

---
name: Dropdown
category:
 - Components
 - Components/Dropdown
---

```html
<div class="dropdown dropdown-custom">
	<span class="dropdown-custom__view">Month</span>
	<div class="dropdown-custom__container">
		<div>
			<a>January</a>
			<a>February</a>
			<a>March</a>
			<a>April</a>
		</div>
	</div>
</div>
```

*/
.dropdown, select {
  position: relative;
  height: 42px;
  font-size: 1rem;
  text-indent: .5em;
  color: #3C4655;
  padding: 0;
  margin: 0;
  width: 100%;
  border: 1px solid #3C4655;
  border-radius: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: url("../img/icon-dropdown.svg") no-repeat center right 0.5em/14px; }
  @media screen and (min-width: 640px) {
    .dropdown, select {
      border-radius: 4px;
      background-size: 16.5px; } }
  @media screen and (min-width: 1024px) {
    .dropdown, select {
      background-size: 14px; } }

.dropdown--white {
  background-color: #FFF; }

/*

---
name: Hero
category:
 - Components
 - Components/Hero
---

This is the default hero with just a title, hero's can also contain:
- Paragraph copy
- Buttons
- Image left

```html
<section class="hero">
	<div class="wrapper">
		<div class="hero__content">
			<h1>We pride ourselves on delivering a high quality service for <span class="is-green">UK Removals</span></h1>
		</div>
	</div>
</section>
```

### Slim

The slim variation has reduced padding top and bottom.

```html
<section class="hero hero--slim">
	<div class="wrapper">
		<div class="hero__content">
			<h1>We pride ourselves on delivering a high quality service for <span class="is-green">UK Removals</span></h1>
		</div>
	</div>
</section>
```

### With Extras

This hero includes a paragraph and some buttons.

```html
<section class="hero hero--slim">
	<div class="wrapper">
		<div class="hero__content">
			<h1>Our Services</h1>
			<p>We provide other services that can be added to your removals package to make your move less stressful</p>
			<a class="button">Get a quote</a>
			<a class="button button--ghost">Contact us</a>
		</div>
	</div>
</section>
```

*/
.hero {
  color: #3C4655;
  padding: 3.125em 0;
  background-color: #F7F6F4;
  text-align: center; }
  @media screen and (min-width: 640px) {
    .hero {
      padding: 4.1875em 0;
      text-align: left; } }
  @media screen and (min-width: 1440px) {
    .hero {
      padding: 6.11111em 0; } }

@media screen and (max-width: 640px) {
  .hero--image {
    background-image: none !important; }
    .hero--image .button--white {
      color: inherit;
      border-color: inherit; } }

@media screen and (min-width: 640px) {
  .hero--image {
    color: #F7F6F4; } }

.hero--slim {
  padding: 1.5em 0; }
  @media screen and (min-width: 640px) {
    .hero--slim {
      padding: 3.0625em 0; } }
  @media screen and (min-width: 1440px) {
    .hero--slim {
      padding: 2.94444em 0; } }

@media screen and (min-width: 768px) {
  .hero__content {
    max-width: 80%; } }

@media screen and (min-width: 1024px) {
  .hero__content {
    max-width: 90%; } }

@media screen and (min-width: 1440px) {
  .hero__content {
    max-width: 80%; } }

.hero__content h1 {
  margin-bottom: 0.65em; }
  @media screen and (min-width: 640px) {
    .hero__content h1 {
      margin-bottom: 0.83333em; } }
  @media screen and (min-width: 1024px) {
    .hero__content h1 {
      margin-bottom: 0.67391em; } }

.hero__content p {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  letter-spacing: .1px;
  margin-bottom: 1.6em; }
  @media screen and (min-width: 640px) {
    .hero__content p {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    .hero__content p {
      font-size: 22px;
      font-size: 1.375rem; } }
  @media screen and (min-width: 640px) {
    .hero__content p {
      margin-bottom: 1.5em; } }
  @media screen and (min-width: 1024px) {
    .hero__content p {
      margin-bottom: 1.22727em; } }

@media screen and (min-width: 425px) {
  .hero__content .button:nth-of-type(1) {
    margin-right: 1.25em; } }

@media screen and (min-width: 1024px) {
  .hero__content .button:nth-of-type(1) {
    margin-right: 3.33333em; } }

.hero--number {
  padding: 1.5rem 0; }
  @media screen and (min-width: 640px) {
    .hero--number {
      padding: 2.5rem 0 1.5rem; } }
  .hero--number span {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: 0.75rem;
    color: #3C4655;
    text-transform: uppercase;
    display: block; }
    @media screen and (min-width: 640px) {
      .hero--number span {
        font-size: 14px;
        font-size: 0.875rem; } }
  .hero--number h1 {
    text-align: left;
    margin: 0; }

.hero--number__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .hero--number__content > svg {
    height: 60px;
    width: 42px;
    margin-right: 1rem;
    opacity: .6; }
    @media screen and (min-width: 640px) {
      .hero--number__content > svg {
        height: 110px;
        width: 112px;
        margin-right: 0; } }

.hero--number__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .hero--number__text span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .hero--number__text svg {
    display: none; }
    @media screen and (min-width: 640px) {
      .hero--number__text svg {
        stroke: #3C4655;
        display: inline;
        width: 1.5em;
        height: 1.5em;
        margin-right: .5rem; } }
    @media screen and (min-width: 1024px) {
      .hero--number__text svg {
        width: 2em;
        height: 2em;
        margin-right: 1rem; } }

@media screen and (min-width: 1024px) {
  .icon-hero h1 {
    font-size: 36px;
    line-height: 1.1; } }

/*

---
name: Icon Card
category:
 - Components
 - Components/Icon Card
---

This component is made up of an image on the left, and centered information on the right.

```html
<div class="icon-card">
	<img class="icon-card__media" src="/wp-content/themes/chdint-v1/assets/img/map-icon.svg" alt="Our address">
	<div class="icon-card__copy">
		<span>Unit 10 Ilton business Park,</span>
		<span>Ilton, Ilminster,</span>
		<span>TA19 9DU</span>
	</div>
</div>
```

*/
.icon-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 1024px) {
    .icon-card {
      margin-bottom: 54px; } }

.icon-card__media {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 10px; }
  @media screen and (min-width: 1024px) {
    .icon-card__media {
      width: 75px;
      height: 75px; } }

.icon-card__copy {
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n4", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #3C4655; }
  .icon-card__copy span {
    display: block; }
  .icon-card__copy a {
    color: inherit; }

@media screen and (min-width: 1024px) {
  .icon-card--spaced {
    margin-bottom: 4rem; } }

.icon-card--spaced .icon-card__media {
  margin-right: 1.5rem; }
  @media screen and (min-width: 1024px) {
    .icon-card--spaced .icon-card__media {
      margin-right: 3rem;
      width: 104px;
      height: 104px; } }

.icon-card--spaced .icon-card__copy {
  font-size: 14px;
  font-size: 0.875rem; }
  @media screen and (min-width: 640px) {
    .icon-card--spaced .icon-card__copy {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (min-width: 1024px) {
    .icon-card--spaced .icon-card__copy {
      font-size: 18px;
      font-size: 1.125rem; } }
  .icon-card--spaced .icon-card__copy p:last-child {
    margin: 0; }

/*

---
name: Icon Panel
category:
 - Components
 - Components/Icon Panel
---

This is a panel that breaks up the page by displaying similarly to a call-to-action.

```html
<section class="icon-panel">
	<div class="icon-panel__background"></div>
	<div class="wrapper">
		<p>We've been, moving for the past 20 years so we understand how stressful moving can be, which is why we offer a selection of bespoke services to help aid the stress of a move.</p>
	</div>
</section>
```

## Call To Action

This variation has both text and a button.

```html
<section class="icon-panel icon-panel--cta">
	<div class="icon-panel__background"></div>
	<div class="wrapper wrapper--padded">
		<div class="icon-panel__inner">
			<div class="icon-panel__main">
				<h2 class="icon-panel__heading">Ready for a quote?</h2>
				<p>Use our quote form to submit your details, this normally takes approximately 5-10 minutes. Alternatively, talk to us and we can arrange a survey with you</p>
			</div>
			<a class="button button--white button--flat">Get started today</a>
		</div>
	</div>
</section>
```

*/
@-webkit-keyframes rainingIcons {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 500px, 0);
            transform: translate3d(0, 500px, 0); } }
@keyframes rainingIcons {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 500px, 0);
            transform: translate3d(0, 500px, 0); } }

.icon-panel__background {
  background-image: url("../img/repeating-icons.png");
  background-size: 200px;
  opacity: .2;
  position: absolute;
  top: -1000px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-animation-name: rainingIcons;
          animation-name: rainingIcons;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear; }
  @media screen and (min-width: 640px) {
    .icon-panel__background {
      background-repeat: space; } }

.icon-panel {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: .1px;
  color: #F7F6F4;
  position: relative;
  display: block;
  overflow: hidden;
  clear: both;
  background-color: #329B5F;
  padding: 2.4em 0; }
  @media screen and (min-width: 640px) {
    .icon-panel {
      font-size: 24px;
      font-size: 1.5rem;
      padding: 3.33333em 0; } }
  @media screen and (min-width: 1100px) {
    .icon-panel {
      font-size: 40px;
      font-size: 2.5rem;
      padding: 3.4em 0; } }
  .icon-panel p {
    margin-bottom: 0;
    line-height: inherit; }
    @media screen and (min-width: 640px) {
      .icon-panel p {
        max-width: 75%; } }
  .icon-panel .wrapper, .icon-panel .quality-strip {
    position: relative;
    z-index: 1; }

.icon-panel--cta {
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n4", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  letter-spacing: normal;
  padding: 3em 0; }
  @media screen and (min-width: 640px) {
    .icon-panel--cta {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (min-width: 1024px) {
    .icon-panel--cta {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (min-width: 640px) {
    .icon-panel--cta {
      padding: 2.14286em 2.5em; } }
  @media screen and (min-width: 1024px) {
    .icon-panel--cta {
      padding: 3.05556em 8.44444em; } }
  .icon-panel--cta p {
    max-width: 100%;
    margin-bottom: 1.5em; }
    @media screen and (min-width: 640px) {
      .icon-panel--cta p {
        line-height: 1.7;
        margin: 0; } }
    @media screen and (min-width: 1024px) {
      .icon-panel--cta p {
        line-height: 1.4; } }

.icon-panel--small {
  padding: 3.0625em 1.25em 2.9375em; }
  @media screen and (min-width: 640px) {
    .icon-panel--small {
      padding: 4.5em 2.1875em; } }
  @media screen and (min-width: 1024px) {
    .icon-panel--small {
      padding: 6.11111em 3.55556em; } }
  .icon-panel--small .icon-panel__inner {
    display: block; }
  .icon-panel--small .icon-panel__main {
    margin-bottom: 1.5rem; }
  @media screen and (min-width: 640px) {
    .icon-panel--small .icon-panel__background {
      background-size: initial; } }

@media screen and (min-width: 640px) {
  .icon-panel__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; } }

@media screen and (min-width: 1024px) {
  .icon-panel__inner {
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial; }
    .icon-panel__inner .button {
      margin: 0 auto; } }

@media screen and (min-width: 640px) {
  .icon-panel__main {
    -ms-flex-preferred-size: 66%;
        flex-basis: 66%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; } }

.icon-panel__heading {
  margin-bottom: 0.72222em; }
  @media screen and (min-width: 640px) {
    .icon-panel__heading {
      margin-bottom: 0.45833em; } }
  @media screen and (min-width: 1024px) {
    .icon-panel__heading {
      margin-bottom: 0.675em; } }

.icon-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem; }
  @media screen and (min-width: 640px) {
    .icon-heading {
      margin-bottom: 0; } }
  .icon-heading img {
    width: 80px;
    height: 80px;
    margin-right: 1rem; }
    @media screen and (min-width: 1024px) {
      .icon-heading img {
        margin-right: 2rem; } }
  .icon-heading h2 {
    margin: 0; }

@media screen and (min-width: 640px) {
  .icon-section p {
    padding-left: calc(80px + 1rem); } }

@media screen and (min-width: 1024px) {
  .icon-section p {
    padding-left: calc(80px + 2rem); } }

/*------------------------------------*	ICONS
\*------------------------------------*/
/*

---
name: Image Block
category:
 - Components
 - Components/Image Block
---

This component contains an image with some text overlayed and is normally half of a row.

```html
<section class="image-block" style="background-image: url(http://placehold.it/500)">
	<h3>Virtual Surveys</h3>
	<p>Here at Chudley Moving &amp; Shipping we now offer virtual surveys meaning you can get a removal quote in the comfort of your own home. This can be done over Skype or Facetime!</p>
	<div class="virtual-survey__footer">
		<span>Supported by:</span>
		<svg><use xlink:href="#icon-skype" /></svg>
		<svg><use xlink:href="#icon-apple" /></svg>
	</div>
</section>
```

*/
.image-block {
  color: #3C4655;
  padding: 1em 1.25em 2.9375em;
  background-size: cover;
  background-repeat: no-repeat; }
  @media screen and (min-width: 640px) {
    .image-block {
      padding: 1.75em 2.1875em; } }
  @media screen and (min-width: 1024px) {
    .image-block {
      padding: 3em 3.55556em; } }

.map-block {
  padding: 40px 1rem 55px;
  background-size: cover;
  background-position: center;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 640px) {
    .map-block {
      padding: 55px 20% 110px;
      background-size: contain;
      margin-bottom: 3rem; } }
  @media screen and (min-width: 1024px) {
    .map-block {
      padding: 110px 27% 220px; } }

.virtual-survey__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .virtual-survey__footer svg {
    width: 2em;
    height: 2em;
    stroke: currentColor;
    fill: transparent; }

.info-block {
  color: #FFF;
  background-color: #329B5F;
  padding: 1.5rem 0;
  text-align: center; }
  @media screen and (min-width: 640px) {
    .info-block {
      padding: 2rem 0; } }
  @media screen and (min-width: 1024px) {
    .info-block {
      padding: 3.4rem 0; } }
  .info-block h2 {
    margin-top: 1.5rem;
    margin-bottom: .6em; }
    @media screen and (min-width: 640px) {
      .info-block h2 {
        font-size: 19px;
        margin-top: 3rem; } }
    @media screen and (min-width: 1024px) {
      .info-block h2 {
        font-size: 35px;
        margin-top: 2.4rem;
        margin-bottom: .7em; } }
    .info-block h2:first-child {
      margin-top: 0; }
  .info-block p {
    margin-bottom: 0; }
    @media screen and (min-width: 640px) {
      .info-block p {
        font-size: 14px; } }
    @media screen and (min-width: 1024px) {
      .info-block p {
        font-size: 18px; } }

.jump-to {
  display: block;
  margin-top: 2rem;
  color: #3C4655; }
  @media screen and (min-width: 640px) {
    .jump-to {
      text-align: right;
      margin-top: 3.5rem; } }
  @media screen and (min-width: 1024px) {
    .jump-to {
      margin-top: 4.5rem; } }
  .jump-to a {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    color: inherit;
    display: block;
    margin-top: 1.5rem;
    margin-left: 3rem;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    position: relative; }
    @media screen and (min-width: 640px) {
      .jump-to a {
        font-size: 18px;
        font-size: 1.125rem; } }
    @media screen and (min-width: 1024px) {
      .jump-to a {
        font-size: 24px;
        font-size: 1.5rem; } }
    @media screen and (min-width: 640px) {
      .jump-to a {
        display: inline-block;
        margin-top: 0;
        margin-left: 5.5rem; } }
    .jump-to a:hover, .jump-to a:active, .jump-to a:focus {
      border-color: currentColor; }
      .jump-to a:hover.jump-to__1, .jump-to a:active.jump-to__1, .jump-to a:focus.jump-to__1 {
        border-color: #FAC44F; }
      .jump-to a:hover.jump-to__2, .jump-to a:active.jump-to__2, .jump-to a:focus.jump-to__2 {
        border-color: #329B5F; }
      .jump-to a:hover.jump-to__3, .jump-to a:active.jump-to__3, .jump-to a:focus.jump-to__3 {
        border-color: #DAE376; }
    .jump-to a:before {
      position: absolute;
      left: -3.5rem;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      content: '';
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-size: 100%; }

.jump-to__title {
  font-size: 20px;
  font-size: 1.25rem;
  color: inherit;
  display: block; }
  @media screen and (min-width: 640px) {
    .jump-to__title {
      font-size: 20px;
      font-size: 1.25rem; } }
  @media screen and (min-width: 1024px) {
    .jump-to__title {
      font-size: 22px;
      font-size: 1.375rem; } }
  @media screen and (min-width: 640px) {
    .jump-to__title {
      display: inline; } }

.jump-to__1 {
  border-color: #FAC44F; }
  .jump-to__1:before {
    background-image: url("../img/jump-to-1.svg"); }

.jump-to__2 {
  border-color: #329B5F; }
  .jump-to__2:before {
    background-image: url("../img/jump-to-2.svg"); }

.jump-to__3 {
  border-color: #DAE376; }
  .jump-to__3:before {
    background-image: url("../img/jump-to-3.svg"); }

/*------------------------------------*	MEDIA OBJECT
\*------------------------------------*/
.media {
  display: block; }

.media__object {
  margin-bottom: 1rem; }
  @media screen and (min-width: 640px) {
    .media__object {
      float: left;
      margin-right: 1rem;
      margin-bottom: 0; } }
  @media screen and (min-width: 1024px) {
    .media__object {
      margin-right: 2rem; } }

@media screen and (min-width: 640px) {
  .media--reversed .media__object {
    float: right;
    margin-right: 0;
    margin-left: 1rem; } }

@media screen and (min-width: 1024px) {
  .media--reversed .media__object {
    margin-left: 2rem; } }

.media__body {
  overflow: hidden;
  display: block; }

.pagination a {
  color: #329B5F;
  text-decoration: none; }
  .pagination a:hover, .pagination a:active, .pagination a:focus {
    text-decoration: underline; }

/*

---
name: Newsletter Block
category:
 - Components
 - Components/Newsletter Block
---

This component contains a newsletter signup and is normally half of a row.

```html
<section class="newsletter-block">

	<h5 class="newsletter-block__title">Want to keep up to date?</h5>

	<p>Enter your email address and stay informed of our latest news, offers and information</p>

	<form class="flex-input">
		<input type="email" placeholder="Email">
		<button type="submit"><svg><use xlink:href="/wp-content/themes/chdint-v1/assets/img/icons.svg#icon-arrow" /></svg></button>
	</form>

</section>
```

*/
.newsletter-block {
  background-color: #F7F6F4;
  color: #3C4655;
  padding: 3.0625em 1.25em; }
  @media screen and (min-width: 640px) {
    .newsletter-block {
      padding: 4.5em 4em; } }
  @media screen and (min-width: 1024px) {
    .newsletter-block {
      padding: 6.11111em 7.22222em; } }
  .newsletter-block .newsletter-block__title {
    color: currentColor; }
  .newsletter-block .flex-input, .newsletter-block #gform_1 {
    max-width: 17em; }

/*

---
name: Post Card
category:
 - Components
 - Components/Post Card
---

This is the default card object that links to a news post.

```html
<article class="post-card">
	<a class="post-card__link">
		<h2 class="post-card__title">Don't forget IACF's Ardingly Antiques Fair</h2>
		<time class="post-card__date">10th February 2016</time>
		<p>As an antique transporter, packer and shipper we are regular attendees to Europes major antiques and collectors fairs. Whilst ICAF's Newark fair boasts the title as Europes largest and Arthur Swallow's Lincoln fair is a big contender to its neighbour, don't forget IACF's Ardingly fair&hellip;</p>
		<span class="plain-text">Read more</span>
	</a>
</article>
<article class="post-card">
	<a class="post-card__link">
		<h2 class="post-card__title">Don't forget IACF's Ardingly Antiques Fair</h2>
		<time class="post-card__date">10th February 2016</time>
		<p>As an antique transporter, packer and shipper we are regular attendees to Europes major antiques and collectors fairs. Whilst ICAF's Newark fair boasts the title as Europes largest and Arthur Swallow's Lincoln fair is a big contender to its neighbour, don't forget IACF's Ardingly fair&hellip;</p>
		<span class="plain-text">Read more</span>
	</a>
</article>
<article class="post-card">
	<a class="post-card__link">
		<h2 class="post-card__title">Don't forget IACF's Ardingly Antiques Fair</h2>
		<time class="post-card__date">10th February 2016</time>
		<p>As an antique transporter, packer and shipper we are regular attendees to Europes major antiques and collectors fairs. Whilst ICAF's Newark fair boasts the title as Europes largest and Arthur Swallow's Lincoln fair is a big contender to its neighbour, don't forget IACF's Ardingly fair&hellip;</p>
		<span class="plain-text">Read more</span>
	</a>
</article>
```

*/
.post-card {
  color: #676767;
  text-decoration: none;
  display: block;
  padding-bottom: 1.875em;
  margin-bottom: 1.875em;
  border-bottom: 1px solid #d3d1cd; }
  @media screen and (min-width: 1024px) {
    .post-card {
      padding-bottom: 3em;
      margin-bottom: 3em;
      transition: box-shadow .2s ease; } }
  .post-card:last-of-type {
    border: 0; }
  .post-card:hover, .post-card:active, .post-card:focus {
    text-decoration: none; }
  .post-card:last-child .post-card {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0; }

.post-card__title {
  color: #329B5F;
  margin-bottom: 0.33333em; }
  @media screen and (min-width: 640px) {
    .post-card__title {
      margin-bottom: 0.73684em; } }
  @media screen and (min-width: 1024px) {
    .post-card__title {
      margin-bottom: 0.4em; } }

.post-card__date {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n4", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #3C4655;
  display: block;
  margin-bottom: 0.71429em; }
  @media screen and (min-width: 640px) {
    .post-card__date {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (min-width: 1024px) {
    .post-card__date {
      font-size: 20px;
      font-size: 1.25rem; } }
  @media screen and (min-width: 640px) {
    .post-card__date {
      margin-bottom: 1.5em; } }
  @media screen and (min-width: 1024px) {
    .post-card__date {
      margin-bottom: 1.35em; } }

.post-card p {
  letter-spacing: .1px;
  margin-bottom: 0.9375em; }
  @media screen and (min-width: 1024px) {
    .post-card p {
      padding-right: 1.5rem;
      margin-bottom: 0.83333em; } }

/*

---
name: Quality Strip
category:
 - Components
 - Components/Quality Strip
---

These are the quality assurance logos that have been certified from outside sources.

```html
<div class="quality-strip">
	<div class="quality-strip__reviews">

		<svg><use xlink:href="#icon-star"></svg>
		<svg><use xlink:href="#icon-star"></svg>
		<svg><use xlink:href="#icon-star"></svg>
		<svg><use xlink:href="#icon-star"></svg>
		<svg><use xlink:href="#icon-star"></svg>
		<span class="quality-strip__review-score">9.4 / 10</span>

		<span class="quality-strip__reference-line">See all our reviews on</span>
		<img src="/wp-content/themes/chdint-v1/assets/img/quality-logos/reference-line.svg" alt="reference line" />

	</div>
	<div class="quality-strip__logos">
		<img class="reference-line" src="/wp-content/themes/chdint-v1/assets/img/quality-logos/reference-line.svg" alt="reference line" />
		<img src="/wp-content/themes/chdint-v1/assets/img/quality-logos/bar-approved.jpg" />
		<img src="/wp-content/themes/chdint-v1/assets/img/quality-logos/quality-assured2.jpg" />
	</div>
</div>
```

 */
.quality-strip {
  padding-top: 1.5625em;
  padding-bottom: 1.5625em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media screen and (min-width: 1024px) {
    .quality-strip {
      padding-top: 2rem;
      padding-bottom: 2rem; } }
  @media screen and (min-width: 1200px) {
    .quality-strip {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .quality-strip p {
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: none; }
    @media screen and (min-width: 640px) {
      .quality-strip p {
        display: block; } }

.quality-strip__reviews {
  display: none;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #3C4655;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media screen and (min-width: 640px) {
    .quality-strip__reviews {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (min-width: 1024px) {
    .quality-strip__reviews {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (min-width: 1200px) {
    .quality-strip__reviews {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .quality-strip__reviews svg {
    fill: currentColor;
    width: 1.11111em;
    height: 1.11111em;
    margin-right: .35em;
    margin-top: .5em; }
  .quality-strip__reviews img {
    width: 150px; }
  .quality-strip__reviews a {
    text-decoration: none;
    color: currentColor; }
    .quality-strip__reviews a:hover {
      text-decoration: underline; }

.quality-strip__review-score {
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n6", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-right: 2.25em;
  margin-left: .5em;
  margin-top: .5em; }

.quality-strip__reference-line {
  margin-right: .75em;
  margin-top: .5em; }

.quality-strip__logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .quality-strip__logos img {
    max-height: 3.125em;
    margin-right: 1em; }
    .quality-strip__logos img:last-child {
      display: none;
      margin-right: 0; }
      @media screen and (min-width: 640px) {
        .quality-strip__logos img:last-child {
          display: block; } }
    @media screen and (min-width: 640px) {
      .quality-strip__logos img {
        margin-right: 2em; } }
    @media screen and (min-width: 1024px) {
      .quality-strip__logos img {
        max-height: 4.44444em; } }
  .quality-strip__logos .reference-line {
    display: none;
    max-height: 3.33333em; }
    @media screen and (min-width: 600px) {
      .quality-strip__logos .reference-line {
        display: block; } }
    @media screen and (min-width: 1200px) {
      .quality-strip__logos .reference-line {
        display: none; } }
  .quality-strip__logos iframe {
    width: 220px;
    margin: 0 auto !important; }
    @media screen and (min-width: 640px) {
      .quality-strip__logos iframe {
        margin-right: 2em !important; } }

.section-topper {
  margin-bottom: 0; }
  .section-topper p:last-child {
    margin-bottom: 0; }
  @media screen and (min-width: 640px) {
    .section-topper {
      margin-bottom: 1.5rem; } }

/*

---
name: Service Card
category:
 - Components
 - Components/Service Card
---

This is a card that's used to act as a call-to-action for the services offered, it consists of:
- An icon
- A title
- A description
- [Optional] A Button

```html
<div class="service-card">
	<img class="service-card__icon" src="/wp-content/themes/chdint-v1/assets/img/icon-truck.svg" />
	<h3 class="service-card__title">One off / Part load shipping</h3>
	<p class="service-card__copy">Do you only require one off or part load shipping?</p>
	<a class="button button--green button--ghost">Find out more</a>
</div>
```

### Panel Variation

This version is a fully clickable panel.

```html
<a class="service-card service-card--panel">
	<img class="service-card__icon" src="/wp-content/themes/chdint-v1/assets/img/icon-truck.svg" />
	<h3 class="service-card__title">One off / Part load shipping</h3>
	<p class="service-card__copy">Do you only require one off or part load shipping?</p>
</a>
```

*/
.service-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2.5em 0;
  color: #3C4655;
  text-align: center; }
  @media screen and (min-width: 640px) {
    .service-card {
      padding: 2.5em 0; } }
  @media screen and (min-width: 1024px) {
    .service-card {
      padding: 4.44444em 0; } }

.service-card--panel {
  text-decoration: none;
  transition: background .2s linear; }
  .service-card--panel:hover, .service-card--panel:active, .service-card--panel:focus {
    background-color: #F7F6F4;
    text-decoration: none; }
    .service-card--panel:hover .service-card__icon, .service-card--panel:active .service-card__icon, .service-card--panel:focus .service-card__icon {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }

.service-card__icon {
  height: 3.75em;
  margin-bottom: 3em;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease; }
  @media screen and (min-width: 640px) {
    .service-card__icon {
      margin-bottom: 2em; } }
  @media screen and (min-width: 1024px) {
    .service-card__icon {
      height: 3.88889em;
      margin-bottom: 2.66667em; } }

.service-card__title {
  font-size: 18px;
  font-size: 1.125rem;
  color: #329B5F;
  margin-bottom: .5em; }
  @media screen and (min-width: 640px) {
    .service-card__title {
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (min-width: 1024px) {
    .service-card__title {
      font-size: 22px;
      font-size: 1.375rem; } }
  @media screen and (min-width: 640px) {
    .service-card__title {
      margin-bottom: .8em; } }
  @media screen and (min-width: 1024px) {
    .service-card__title {
      margin-bottom: 1em; } }

.service-card__copy {
  font-size: 16px;
  font-size: 1rem;
  max-width: 60%; }
  @media screen and (min-width: 640px) {
    .service-card__copy {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (min-width: 1024px) {
    .service-card__copy {
      font-size: 18px;
      font-size: 1.125rem; } }
  .service-card--panel .service-card__copy {
    margin-bottom: 0; }
  @media screen and (min-width: 640px) {
    .service-card__copy {
      max-width: 75%; } }
  @media screen and (min-width: 1024px) {
    .service-card__copy {
      margin-bottom: 3rem; } }
  @media screen and (min-width: 1440px) {
    .service-card__copy {
      max-width: 60%; } }

.other-service-sections .flex-container__item {
  border-bottom: 1px solid #d3d1cd; }
  .other-service-sections .flex-container__item:last-child {
    border-bottom: 0; }
  @media screen and (min-width: 640px) {
    .other-service-sections .flex-container__item {
      border-bottom: 0; } }

/*------------------------------------*    $SHARE
\*------------------------------------*/
.share {
  list-style-type: none;
  margin: 5px 0 0;
  padding: 0; }
  .share li {
    float: left;
    margin-left: .5em; }
  .share a {
    text-decoration: none; }

/*------------------------------------*    SIDEBAR
\*------------------------------------*/
/*

---
name: Slide Tile
category:
 - Components
 - Components/Slide Tile
---

This component appears only on the homepage, it is a collection of 3 links to the 3 main services.

```html
<div class="wrapper">

	<section class="slide-tile-container">

		<div class="slide-tile-container__inner">

			<div class="slide-tile__inner slide-tile__inner--primary">
				<a class="slide-tile" style="background-image: url(http://unsplash.it/576/890)">
					<div class="slide-tile__cover">
						<h2 class="slide-tile__title">UK</h2>
						<p class="slide-tile__copy">Removals &amp; Shipping</p>
					</div>
				</a>
			</div>

			<div class="slide-tile__inner slide-tile__inner--secondary">

				<a class="slide-tile slide-tile--right" style="background-image: url(http://unsplash.it/864/445)">
					<div class="slide-tile__cover">
						<h2 class="slide-tile__title">International</h2>
						<p class="slide-tile__copy">Removals &amp; Shipping</p>
					</div>
				</a>

				<a class="slide-tile slide-tile--left" style="background-image: url(http://unsplash.it/864/445)">
					<div class="slide-tile__cover">
						<h2 class="slide-tile__title">Antiques</h2>
						<p class="slide-tile__copy">Removals &amp; Shipping</p>
					</div>
				</a>

			</div>

		</div>

	</section>

</div>
```

*/
@media screen and (min-width: 640px) {
  .slide-tile-container {
    position: relative; }
    .slide-tile-container:before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 56.25%; }
    .slide-tile-container > .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; } }

@media screen and (min-width: 640px) {
  .slide-tile-container__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; } }

.slide-tile__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.slide-tile__inner--primary {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2; }
  @media screen and (min-width: 640px) {
    .slide-tile__inner--primary {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.slide-tile__inner--secondary {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3; }

.slide-tile {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  @media screen and (max-width: 640px) {
    .slide-tile {
      position: relative; }
      .slide-tile:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 61.875%; }
      .slide-tile > .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media screen and (min-width: 640px) {
    .slide-tile {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; }
      .slide-tile:hover .slide-tile__cover:before, .slide-tile:active .slide-tile__cover:before, .slide-tile:focus .slide-tile__cover:before {
        bottom: -700px; } }

.slide-tile--right:hover .slide-tile__cover:before, .slide-tile--right:active .slide-tile__cover:before, .slide-tile--right:focus .slide-tile__cover:before {
  left: -500px; }

.slide-tile--left:hover .slide-tile__cover:before, .slide-tile--left:active .slide-tile__cover:before, .slide-tile--left:focus .slide-tile__cover:before {
  right: -500px; }

.slide-tile__cover {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  padding: 0.875em 1.25em;
  transition: all .2s ease-in-out; }
  @media screen and (min-width: 640px) {
    .slide-tile__cover {
      top: 0;
      -webkit-transform: none;
              transform: none;
      padding: 1.25em 2.0625em; } }
  @media screen and (min-width: 1024px) {
    .slide-tile__cover {
      padding: 2.66667em 3em; } }
  .slide-tile__cover:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #329B5F;
    z-index: -1;
    transition: all .2s ease; }
    @media screen and (min-width: 640px) {
      .slide-tile__cover:before {
        background-color: rgba(50, 155, 95, 0.8); } }
  @media screen and (min-width: 640px) {
    .slide-tile--right .slide-tile__cover {
      top: 0;
      right: auto;
      bottom: 0;
      left: 100%;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  .slide-tile--right .slide-tile__cover:before {
    background-color: #FAC44F; }
    @media screen and (min-width: 640px) {
      .slide-tile--right .slide-tile__cover:before {
        background-color: rgba(250, 196, 79, 0.8); } }
  @media screen and (min-width: 640px) {
    .slide-tile--left .slide-tile__cover {
      top: 0;
      right: 100%;
      bottom: 0;
      left: auto;
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  .slide-tile--left .slide-tile__cover:before {
    background-color: #DAE376; }
    @media screen and (min-width: 640px) {
      .slide-tile--left .slide-tile__cover:before {
        background-color: rgba(218, 227, 118, 0.8); } }

.slide-tile__title {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-size: 2.25rem;
  color: #F7F6F4;
  line-height: 1;
  margin-bottom: 0.19444em; }
  @media screen and (min-width: 640px) {
    .slide-tile__title {
      font-size: 36px;
      font-size: 2.25rem; } }
  @media screen and (min-width: 1024px) {
    .slide-tile__title {
      font-size: 52px;
      font-size: 3.25rem; } }
  @media screen and (min-width: 1024px) {
    .slide-tile__title {
      margin-bottom: 0.25em; } }
  @media screen and (min-width: 640px) {
    .slide-tile--left .slide-tile__title {
      margin-right: 1em; } }

.slide-tile__copy {
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #3C4655;
  margin: 0; }
  @media screen and (min-width: 640px) {
    .slide-tile__copy {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (min-width: 1024px) {
    .slide-tile__copy {
      font-size: 20px;
      font-size: 1.25rem; } }
  @media screen and (min-width: 1024px) {
    .slide-tile__copy {
      letter-spacing: .5px; } }

/*------------------------------------*    SOCIAL
\*------------------------------------*/
.social--youtube {
  color: #CC181E; }
  .social--youtube:hover, .social--youtube:active, .social--youtube:focus {
    color: #9e1317; }

.social--twitter {
  color: #00ACEE; }
  .social--twitter:hover, .social--twitter:active, .social--twitter:focus {
    color: #0087bb; }

.social--facebook {
  color: #3B5998; }
  .social--facebook:hover, .social--facebook:active, .social--facebook:focus {
    color: #2d4373; }

.social--google {
  color: #DD4B39; }
  .social--google:hover, .social--google:active, .social--google:focus {
    color: #c23321; }

.social--linkedin {
  color: #007BB6; }
  .social--linkedin:hover, .social--linkedin:active, .social--linkedin:focus {
    color: #005983; }

/*

---
name: Step Blocks
category:
 - Components
 - Components/Step Blocks
---


```html
<div class="step-blocks / flex-container flex-container--3">
	<section class="step-block step-block--yellow / flex-container__item">
		<h2 class="step-block__title / is-uppercase">Collection</h2>
		<p>Here at Chudley Moving &amp; Shipping we aim to provide a high quality service, which is why we will collect your antiques</p>
	</section>
	<section class="step-block step-block--green / flex-container__item">
		<h2 class="step-block__title / is-uppercase">Packing</h2>
		<p>Using our best packing materials that have been tested over a number of years we will make sure that your antique items are safely prepared for transportation</p>
	</section>
	<section class="step-block step-block--lime / flex-container__item">
		<h2 class="step-block__title / is-uppercase">Delivery</h2>
		<p>We will deliver your antique goods directly to your destination and also offer assistance with unpacking</p>
	</section>
</div>
```

*/
.step-blocks {
  counter-reset: stepBlocks; }

.step-block {
  counter-increment: stepBlocks;
  color: #3C4655;
  padding: 2.96875em 0.5rem 1.71875em; }
  @media screen and (min-width: 640px) {
    .step-block {
      padding: 4.03125em 1.5rem 7.09375em; } }
  @media screen and (min-width: 1024px) {
    .step-block {
      padding: 10.75em 1.5rem 9.375em; } }
  .step-block p,
  .step-block a {
    padding-left: 50px; }
    @media screen and (min-width: 640px) {
      .step-block p,
      .step-block a {
        padding-left: 0; } }
    @media screen and (min-width: 1024px) {
      .step-block p,
      .step-block a {
        padding-left: 95px; } }

.step-block--yellow {
  background-color: #FFF4C9; }
  .step-block--yellow .step-block__title:before {
    color: #FAC44F; }

.step-block--green {
  background-color: #D9F1E1; }
  .step-block--green .step-block__title:before {
    color: #329B5F; }

.step-block--lime {
  background-color: #F6F8DD; }
  .step-block--lime .step-block__title:before {
    color: #DAE376; }

.step-block__title {
  position: relative;
  padding-left: 50px; }
  @media screen and (min-width: 640px) {
    .step-block__title {
      padding-left: 65px; } }
  @media screen and (min-width: 1024px) {
    .step-block__title {
      padding-left: 95px; } }
  .step-block__title:before {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 90px;
    font-size: 5.625rem;
    content: counter(stepBlocks);
    line-height: .85;
    position: absolute;
    bottom: 0;
    left: 0; }
    @media screen and (min-width: 640px) {
      .step-block__title:before {
        font-size: 90px;
        font-size: 5.625rem; } }
    @media screen and (min-width: 1024px) {
      .step-block__title:before {
        font-size: 150px;
        font-size: 9.375rem; } }

.generic-step-block {
  position: relative; }
  .generic-step-block img {
    display: none; }
    @media screen and (min-width: 1024px) {
      .generic-step-block img {
        display: block;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem; } }

.step-blocks--aligned .flex-container__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .step-blocks--aligned .flex-container__item > * {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%; }
  .step-blocks--aligned .flex-container__item > a {
    -ms-flex-item-align: end;
        align-self: flex-end; }

/*

---
name: Step Rows
category:
 - Components
 - Components/Step Rows
---


```html
<div class="step-rows">
	<section class="step-row step-row--yellow">
		<div class="step-row__content">
			<div class="step-row__header">
				<svg><use xlink:href="#icon-1" /></svg>
				<h2 class="step-row__title / is-uppercase">Planning your move</h2>
			</div>
			<p>We’ll carry out a detailed survey and give you an estimate for your move. Alternatively, you can complete the survey yourself sing our mobile video App or online form.</p>
			<p>Did you know that we offer virtual surveys?</p>
			<a>Read more</a>
		</div>
		<figure class="step-row__media">
			<img src="/wp-content/themes/chdint-v1/assets/img/uk-removals-step-1.png">
		</figure>
	</section>
	<section class="step-row step-row--green">
		<figure class="step-row__media">
			<img src="/wp-content/themes/chdint-v1/assets/img/uk-removals-step-2.png">
		</figure>
		<div class="step-row__content / number-2">
			<div class="step-row__header">
				<svg><use xlink:href="#icon-2" /></svg>
				<h2 class="step-row__title / is-uppercase">Packing</h2>
			</div>
			<p>We will expertly pack everything for you or, if you prefer, you can do it yourself. We’ll supply all the materials you need to keep your belongings safe dyring their journey.</p>
			<p>Did you know that we offer our very own bespoke packing services?</p>
			<a>Read more</a>
		</div>
	</section>
	<section class="step-row step-row--lime">
		<div class="step-row__content / number-3">
			<div class="step-row__header">
				<svg><use xlink:href="#icon-3" /></svg>
				<h2 class="step-row__title / is-uppercase">Storage</h2>
			</div>
			<p>If your new home isn’t quite ready yet, we’ll keep your things safely in our secure storage warehouse.</p>
			<p>Ask about our de-clutter service too.</p>
			<a>Read more</a>
		</div>
		<figure class="step-row__media">
			<img src="/wp-content/themes/chdint-v1/assets/img/uk-removals-step-3.png">
		</figure>
	</section>
</div>
```

*/
.step-row {
  color: #3C4655;
  padding: 1rem; }
  @media screen and (min-width: 640px) {
    .step-row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 3rem 1rem;
      overflow: hidden; } }
  @media screen and (min-width: 1024px) {
    .step-row {
      margin-bottom: 10rem; }
      .step-row:last-child {
        margin-bottom: 4rem; } }

.step-row--yellow {
  background-color: #FFF4C9; }
  @media screen and (min-width: 640px) {
    .step-row--yellow {
      background-color: transparent; } }
  .step-row--yellow .step-row__title:before {
    color: #FAC44F; }

.step-row--green {
  background-color: #D9F1E1; }
  @media screen and (min-width: 640px) {
    .step-row--green {
      background-color: transparent; } }
  .step-row--green .step-row__title:before {
    color: #329B5F; }

.step-row--lime {
  background-color: #F6F8DD; }
  @media screen and (min-width: 640px) {
    .step-row--lime {
      background-color: transparent; } }
  .step-row--lime .step-row__title:before {
    color: #DAE376; }

.step-row__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline; }
  .step-row__header svg {
    width: 27px;
    height: 45px;
    opacity: .6;
    margin-right: 1rem; }
    @media screen and (min-width: 640px) {
      .step-row__header svg {
        width: 45px;
        height: 85px; } }
    @media screen and (min-width: 1024px) {
      .step-row__header svg {
        width: 69px;
        height: 115px; } }

@media screen and (min-width: 640px) {
  .number-2 svg {
    height: 83px;
    width: 57px; } }

@media screen and (min-width: 1024px) {
  .number-2 svg {
    height: 103px;
    width: 77px; } }

@media screen and (min-width: 640px) {
  .number-2.step-row__content p,
  .number-2.step-row__content a {
    padding-left: 72px; } }

@media screen and (min-width: 1024px) {
  .number-2.step-row__content p,
  .number-2.step-row__content a {
    padding-left: 92px; } }

@media screen and (min-width: 640px) {
  .number-3 svg {
    height: 70px; } }

@media screen and (min-width: 1024px) {
  .number-3 svg {
    height: 103px;
    width: 65px; } }

@media screen and (min-width: 1024px) {
  .number-3.step-row__content p,
  .number-3.step-row__content a {
    padding-left: 82px; } }

.step-row__title {
  position: relative;
  margin-bottom: 1rem;
  letter-spacing: .31px; }
  @media screen and (min-width: 640px) {
    .step-row__title {
      margin-bottom: .5rem; } }
  @media screen and (min-width: 1024px) {
    .step-row__title {
      margin-bottom: 1.5rem;
      letter-spacing: .5px; } }

@media screen and (min-width: 640px) {
  .step-row__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 45%;
            flex: 0 0 45%; } }

@media screen and (min-width: 1024px) {
  .step-row__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
            flex: 0 0 40%; } }

@media screen and (min-width: 640px) {
  .step-row__content p,
  .step-row__content a {
    padding-left: 60px; } }

@media screen and (min-width: 1024px) {
  .step-row__content p,
  .step-row__content a {
    padding-left: 86px; } }

.step-row__content p:last-of-type {
  margin-bottom: .5em; }

.step-row__content a {
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.step-row__media {
  display: none; }
  @media screen and (min-width: 640px) {
    .step-row__media {
      display: block;
      position: relative;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; }
      .step-row__media img {
        height: 160px;
        max-width: none;
        position: absolute;
        top: 0;
        left: 0; }
      .step-row__media.step-row__media--reverse {
        overflow: hidden; }
        .step-row__media.step-row__media--reverse img {
          left: -50px; } }
  @media screen and (min-width: 1024px) {
    .step-row__media {
      padding: 0 3rem; }
      .step-row__media img {
        height: 240px;
        left: 2rem; }
      .step-row__media.step-row__media--reverse img {
        right: 2rem; } }

/*

---
name: Testimonials
category:
 - Components
 - Components/Testimonials
---

This component is primarily a blockquote and it is featured as a carousel.

```html
<section class="user-testimonial__container">

	<img class="user-testimonial__quote" src="/wp-content/themes/chdint-v1/assets/img/icon-quote.svg" />

	<div class="/js-slick">

		<blockquote class="user-testimonial">
			<p>After a quick discussion over the phone with the Chudley team they organised a survey of our house the next day!</p>
			<footer><cite>David Andrews</cite>, Somerset</footer>
		</blockquote>

	</div>

</section>
```

*/
.user-testimonial__container {
  position: relative;
  text-align: center;
  padding: 1.5em 0 3em; }
  @media screen and (min-width: 640px) {
    .user-testimonial__container {
      padding: 2.5em 0 3em; } }
  @media screen and (min-width: 1024px) {
    .user-testimonial__container {
      padding: 3.88889em 0 4.44444em; } }

.user-testimonial__quote {
  margin-bottom: 1.5em;
  width: 3.75em; }
  @media screen and (min-width: 1024px) {
    .user-testimonial__quote {
      margin-bottom: 1.66667em; } }

.user-testimonial {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border: 0; }
  .user-testimonial p {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-size: 0.9375rem;
    letter-spacing: .5px;
    color: #3C4655;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.8em; }
    @media screen and (min-width: 640px) {
      .user-testimonial p {
        font-size: 16px;
        font-size: 1rem; } }
    @media screen and (min-width: 1024px) {
      .user-testimonial p {
        font-size: 20px;
        font-size: 1.25rem; } }
    @media screen and (min-width: 640px) {
      .user-testimonial p {
        letter-spacing: .6px;
        max-width: 80%;
        margin-bottom: 0.875em; } }
    @media screen and (min-width: 1024px) {
      .user-testimonial p {
        letter-spacing: .7px;
        margin-bottom: 1.35em; } }
  .user-testimonial footer,
  .user-testimonial cite {
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: 0.75rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #3C4655; }
    @media screen and (min-width: 640px) {
      .user-testimonial footer,
      .user-testimonial cite {
        font-size: 12px;
        font-size: 0.75rem; } }
    @media screen and (min-width: 1024px) {
      .user-testimonial footer,
      .user-testimonial cite {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (min-width: 1024px) {
      .user-testimonial footer,
      .user-testimonial cite {
        letter-spacing: .5px; } }

/*

---
name: Tick List
category:
 - Components
 - Components/Tick List
---


```html
<ul class="tick-list / flex-container flex-container--2 flex-container--wrap">
	<li class="flex-container__item">We are a family run business who understand the stress of moving and are here to assist you</li>
	<li class="flex-container__item">We offer a variety of extra services to make your move go smoothly</li>
	<li class="flex-container__item">We now offer virtual surveys through Skype so you can get a quote from your own home</li>
	<li class="flex-container__item">We are a certified and accredited removals company</li>
</ul>
```

*/
.tick-list {
  list-style-type: none;
  color: #3C4655;
  padding: 3rem 1.5rem;
  margin: 0; }
  @media screen and (min-width: 640px) {
    .tick-list {
      padding: 3rem; } }
  @media screen and (min-width: 1024px) {
    .tick-list {
      padding: 3.88889em; } }
  .tick-list li {
    font-size: 15px;
    font-size: 0.9375rem;
    letter-spacing: .2px;
    position: relative;
    padding-left: 3em;
    margin-bottom: 1.5rem; }
    @media screen and (min-width: 640px) {
      .tick-list li {
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (min-width: 1024px) {
      .tick-list li {
        font-size: 18px;
        font-size: 1.125rem; } }
    .tick-list li:last-child {
      margin-bottom: 0; }
    @media screen and (min-width: 640px) {
      .tick-list li {
        padding-left: 2.66667em;
        margin-bottom: 1.6em; }
        .tick-list li:nth-child(odd) {
          padding-right: 1.5rem; }
        .tick-list li:nth-last-child(-n+2) {
          margin-bottom: 0; } }
    @media screen and (min-width: 1024px) {
      .tick-list li {
        padding-left: 3.44444em;
        margin-bottom: 3.33333em; }
        .tick-list li:nth-last-child(-n+2) {
          margin-bottom: 0; } }
    .tick-list li:before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 1.8em;
      height: 1.8em;
      background-image: url("../img/icon-tick-circle.svg");
      background-repeat: no-repeat;
      background-size: cover; }
      @media screen and (min-width: 1024px) {
        .tick-list li:before {
          width: 1.88889em;
          height: 1.88889em; } }

/*------------------------------------*    $NON-MODULAR
\*------------------------------------*/
.fof {
  padding: 4rem 1rem; }
  @media screen and (min-width: 640px) {
    .fof {
      padding: 10rem 2rem; } }
  .fof h2,
  .fof h3 {
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "lft-etica-n4", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .fof h2 {
    margin-bottom: 1.8rem; }
  .fof a {
    text-decoration: underline; }
    .fof a:hover, .fof a:focus {
      text-decoration: none; }
    .fof a:active {
      text-decoration: underline; }
  .fof .flex-container {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

.fof__title {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 1.7rem; }
  @media screen and (min-width: 1440px) {
    .fof__title {
      font-size: 72px;
      font-size: 4.5rem; } }

.antique-wrapper {
  max-width: 1041px;
  padding: 0 1rem;
  margin: 0 auto; }
  @media screen and (min-width: 640px) {
    .antique-wrapper {
      padding: 0 3rem; } }
  @media screen and (min-width: 1041px) {
    .antique-wrapper {
      padding: 0; } }

.antique-table {
  margin-bottom: 3rem; }
  .antique-table time {
    font-size: 13px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "lft-etica-n7", "lft-etica", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.3;
    margin-bottom: .5rem; }
    @media screen and (min-width: 640px) {
      .antique-table time {
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (min-width: 1024px) {
      .antique-table time {
        font-size: 20px;
        font-size: 1.25rem; } }
    @media screen and (min-width: 1024px) {
      .antique-table time {
        margin-bottom: 1rem; } }

@media screen and (min-width: 640px) {
  .contact__wrapper--icons {
    max-width: 538px;
    margin-bottom: 1.3em; } }

@media screen and (min-width: 1024px) {
  .contact__wrapper--icons {
    max-width: 1440px;
    margin-bottom: 0; } }

@media screen and (min-width: 640px) {
  .contact__wrapper--form {
    max-width: 481px; } }

@media screen and (min-width: 1024px) {
  .contact__wrapper--form {
    max-width: 577px; } }

@media screen and (min-width: 1024px) {
  .contact-title {
    margin-bottom: 75px; }
    .contact-title p {
      margin-bottom: 0; } }

body.home section.hero {
  min-height: 12em; }
  @media screen and (min-width: 640px) {
    body.home section.hero {
      min-height: 18em; } }
  @media screen and (min-width: 1024px) {
    body.home section.hero {
      min-height: 20em; } }
  @media screen and (min-width: 1440px) {
    body.home section.hero {
      min-height: 24em; } }

.letter--hidden {
  display: none; }

@-webkit-keyframes cursor-blink {
  0% {
    opacity: 0; }
  49% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes cursor-blink {
  0% {
    opacity: 0; }
  49% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }

.js-word-cursor {
  position: relative;
  display: inline-block;
  height: .725em;
  width: .15em;
  margin-left: .075em;
  background-color: currentColor;
  -webkit-animation: cursor-blink 1s infinite;
          animation: cursor-blink 1s infinite; }
  .js-word-cursor:before, .js-word-cursor:after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    right: 0;
    height: .1em;
    background-color: currentColor; }
  .js-word-cursor:before {
    bottom: 100%; }
  .js-word-cursor:after {
    top: 100%; }

#gform_1 .gfield_label {
  display: none; }

#gform_1 .ginput_container,
#gform_1 .gform_button {
  margin: 0; }

#gform_1 .gform_body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

#gform_1 .gform_footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

#gform_1 .validation_error {
  display: none; }

#gform_1 .validation_message {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .9rem;
  color: #CC181E;
  position: absolute;
  margin-bottom: 1rem; }

#gform_1 .gfield_error input {
  border-color: #CC181E; }

ul.gform_fields {
  margin: 0;
  padding: 0; }
  ul.gform_fields li {
    list-style-type: none; }

span.gfield_required {
  display: none; }

.gform_footer {
  text-align: right; }

@media screen and (max-width: 640px) {
  #gform_submit_button_4 {
    width: 100%; } }

#gform_4 .validation_error,
#gform_4 .validation_message {
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-family: "freight-sans-pro-n7", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .9rem;
  margin-bottom: 1rem;
  color: #CC181E; }

#gform_4 .gfield_error input,
#gform_4 .gfield_error textarea {
  border-color: #CC181E; }

#gform_4 .gfield_error .ginput_container {
  margin-bottom: .75rem; }

.gform_ajax_spinner {
  height: 16px; }

#gform_ajax_spinner_1 {
  margin-top: 11px; }

#gform_ajax_spinner_4 {
  margin-bottom: 11px; }

.taunton-map {
  display: block;
  margin: 0 auto; }
  @media screen and (min-width: 350px) {
    .taunton-map {
      max-width: 350px; } }

.country-switcher {
  width: 15.625em;
  max-width: 100%; }

@media screen and (min-width: 1024px) {
  .main-content-copy {
    font-size: 22px;
    font-size: 1.375rem; } }

@media screen and (min-width: 640px) {
  .main-content-copy--reverse {
    text-align: right; } }

/*

---
name: Virtual Surveys
category:
 - Components
 - Components/Virtual Surveys
---

```html
<section class="virtual-surveys / image-block">
	<h3>Virtual Surveys</h3>
	<p>Here at Chudley Moving &amp; Shipping we now offer virtual surveys meaning you can get a removal quote in the comfort of your own home. This can be done over Skype or Facetime!</p>
	<span>Supported by: <svg><use xlink:href="#icon-skype" /></svg><svg><use xlink:href="#icon-apple" /></svg></span>
</section>

```

*/
.virtual-surveys {
  position: relative;
  background-image: url("../img/virtual.jpg");
  padding: 1.5625em 1rem; }
  @media screen and (min-width: 640px) {
    .virtual-surveys {
      padding: 2.1875em; } }
  @media screen and (min-width: 1024px) {
    .virtual-surveys {
      background-image: url("../img/virtual-desktop.jpg");
      background-position: 30% center;
      padding: 3em 3.55556em; } }
  .virtual-surveys p {
    max-width: 320px; }
  .virtual-surveys span {
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-family: "freight-sans-pro-n6", "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 0.875rem; }
    @media screen and (min-width: 640px) {
      .virtual-surveys span {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (min-width: 1024px) {
      .virtual-surveys span {
        font-size: 18px;
        font-size: 1.125rem; } }
    @media screen and (min-width: 640px) {
      .virtual-surveys span {
        position: absolute;
        bottom: 1.7em; } }
    @media screen and (min-width: 1024px) {
      .virtual-surveys span {
        bottom: 3.5em; } }
  .virtual-surveys svg {
    height: 2.5em;
    width: 2.5em;
    margin-left: .5em; }

/*------------------------------------*	$PRINT STYLES
\*------------------------------------*/
/*------------------------------------*    PRINT STYLES
\*------------------------------------*/
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ''; }
  pre,
  blockquote {
    border: 1px solid #424242;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

@media all and (min-width: 320px) and (max-width: 767px) {
.quote-col {
    width: 100%;  
}
.quote-left {    
    padding: 20px 15px;
}
.quote-left h2 {
    font-size: 24px;    
}
.quote-left h6 {   
    margin: 0px 0px 20px 0px;
}
.quote-right {
    padding: 20px 15px;
    margin-top: 20px;
}
.row-sec {
    display: block;
   margin: 0px 0px;
    overflow: hidden;
}
.col6 {
    width: 100%;
}
.card-sec {
    margin: 40px auto 40px;
}
.card-sec h2 {
    font-size: 24px;
    padding: 0px 15px;
}
.card-sec p {
    font-size: 14px;
    padding: 0px 15px;
}
.col4 {
    width: 100%;
    float: left;
    padding: 0px 15px;
}
.card-box {
    margin-top: 20px;
    padding: 30px 20px;
}
.card-desc h3 {
    font-size: 21px;
    margin: 9px 0px 0px 0px;
}
.card-desc ul li a {
    font-size: 14px;
}
.quote-right .row-sec {
    margin: 0px -15px;
}

}
/* E (min-width: 320px) and (max-width: 767px)*/
@media all and (min-width: 768px) and (max-width: 991px) {

}
/* E (min-width: 768px) and (max-width: 991px)*/
@media all and (min-width: 992px) and (max-width: 1024px) {

}
/* E (min-width: 992px) and (max-width: 1024px)*/
@media all and (min-width: 768px) and (max-width: 1024px) {
.quote-col {
    width: 100%;  
}
.quote-left {    
    padding: 20px 15px;
}
.quote-left h2 {
    font-size: 24px;    
}
.quote-left h6 {   
    margin: 0px 0px 20px 0px;
}
.quote-right {
    padding: 20px 15px;
    margin-top: 20px;
}
.row-sec {
    display: block;
   margin: 0px 0px;
    overflow: hidden;
}
.col6 {
    width: 100%;
}
.card-sec {
    margin: 40px auto 40px;
}
.card-sec h2 {
    font-size: 24px;
    padding: 0px 15px;
}
.card-sec p {
    font-size: 14px;
    padding: 0px 15px;
}
.col4 {
    width: 100%;
    float: left;
    padding: 0px 15px;
}
.card-box {
    margin-top: 20px;
    padding: 30px 20px;
}
.card-desc h3 {
    font-size: 21px;
    margin: 9px 0px 0px 0px;
}
.card-desc ul li a {
    font-size: 14px;
}
.quote-right .row-sec {
    margin: 0px -15px;
}
}
/* E (min-width: 768px) and (max-width: 1024px)*/
@media all and (min-width: 1025px) and (max-width: 1400px) {
.card-sec .row-sec {
    margin: 0px 0px;
}
.card-box {
    margin-top: 40px;
    padding: 31px 20px;
}

}
/* E (min-width: 1200px) and (max-width: 1280px)*/