/*
	Theme Name:   Grayside Insurance
	Theme URI:    https://www.brokernetwork.co.uk/
	Description:  Grayside Insurance Theme
	Author:       Broker Network
	Author URI:   https://www.brokernetwork.co.uk
	Version:      1.0
	License:      GNU General Public License v2.0
	License URI: http://www.opensource.org/licenses/gpl-license.php
*/

@charset "UTF-8";
/* ==========================================================================
   $FONTELLO FONT PLUGIN
   ========================================================================== */
@font-face {
  font-family: 'fontello';
  src: url("../webfonts/fontello.eot?53701667");
  src: url("../webfonts/fontello.eot?53701667#iefix") format("embedded-opentype"), url("../webfonts/fontello.woff?53701667") format("woff"), url("../webfonts/fontello.ttf?53701667") format("truetype"), url("../webfonts/fontello.svg?53701667#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="i"]:before, [class*=" i"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iLinkedin:before {
  content: '\e800';
}

/* '?' */
.iOk:before {
  content: '\e801';
}

/* '?' */
.iFacebook:before {
  content: '\e802';
}

/* '?' */
.iTwitter:before {
  content: '\e803';
}

/* '?' */
.iCancel:before {
  content: '\e804';
}

/* '?' */
.iListBullet:before {
  content: '\e805';
}

/* '?' */
.iMenu:before {
  content: '\e806';
}

/* '?' */
.iLeftOpen:before {
  content: '\e807';
}

/* '?' */
.iRightOpen:before {
  content: '\e808';
}

/* '?' */
.iAngleLeft:before {
  content: '\e809';
}

/* '?' */
.iAngleRight:before {
  content: '\e80a';
}

/* '?' */
.iLinkedinSq:before {
  content: '\e80b';
  font-size: 1.2em;
  color: #007bb5 !important;
}

/* '?' */
.iTwitterSq:before {
  content: '\e80c';
  font-size: 1.2em;
  color: #00aced !important;
}

/* '?' */
.iFacebookSq:before {
  content: '\e80d';
  font-size: 1.2em;
  color: #3b5998 !important;
}

/* '?' */
/* ==========================================================================
   $BASE
   ========================================================================== */
/**
Default styles for single unclassed elements
*/
/*------------------------------------*$RESET
\*------------------------------------*/
/**
Mostly use normalize, but with some additions here. 
*/
/**
Remove default margins, ready to be defined more carefully to control vertical
 rhythm
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0;
}

/*------------------------------------*$GENERIC
\*------------------------------------*/
/**
//@todo: Consider overriding Webkit's default subpixel antialiasing.
Depends on font and device so test carefully
General rule: DO use antialised with light text on dark bg, DON'T use
on dark text on light bg (i.e. stick with Webskit default)

* {
  -webkit-font-smoothing: antialiased;
}

*/
html {
  overflow-y: scroll;
  overflow-x:hidden;
  min-height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: #58595B;
}

body {
	margin-top:158px;
  background: #fff;
}

body.scrolled-down {
	margin-top:158px;
}

::-moz-selection {
  background: #368896;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #368896;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #368896;
  color: #fff;
  text-shadow: none;
}

/**
* Where `margin-bottom` is concerned, this value will be the same as the
* base line-height. This allows us to keep a consistent vertical rhythm.
* As per: csswizardry.com/2012/06/single-direction-margin-declarations
*/
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre {
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
}

/**
* `hr` elements only take up a few pixels, so we need to give them special
* treatment regarding vertical rhythm.
*/
hr {
  margin-bottom: 22px;
  margin-bottom: 1.375rem;
}

/**
* Where `margin-left` is concerned we want to try and indent certain elements
* by a consistent amount. Define that amount once, here.
*/
ul, ol, dd {
  margin-left: 48px;
  margin-left: 3rem;
}

/*------------------------------------*$BASIC TYPE
\*------------------------------------*/
em {
  font-style: italic;
}

/*------------------------------------*$HEADINGS
\*------------------------------------*/
/**
* As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
*
* When we define a heading we also define a corresponding class to go with it.
* This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
* heading hierarchy.
*/
h1, .alpha {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.33333;
  /*color: #368896;*/
  color: #10a6b4;
  font-family: "Kameron", serif;
  font-weight: 400;
}

h2, .beta {
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 1.6;
  color: #368896;
  font-family: "Kameron", serif;
  font-weight: 400;
}

h3, .gamma {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #58595B;
  font-family: "Kameron", serif;
  font-weight: 400;
}

h4, .delta {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #58595B;
  font-family: "Kameron", serif;
  font-weight: 400;
}

h5, .epsilon {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: #58595B;
  font-family: "Kameron", serif;
  font-weight: 400;
}

h6, .zeta {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.71429;
  font-weight: 400;
}

/**
 * A series of classes for setting massive type; for use in heroes, mastheads,
 * promos, etc.
 */
 
.full-width{ width:100%; }
.left-content{ float:left; }
.right-content{ float:right; }
 
.giga,
.mega,
.kilo {
  color: #368896;
  font-family: "Kameron", serif;
  font-weight: 400;
}

.giga {
  font-size: 72px;
  font-size: 4.5rem;
  line-height: 1;
}

.mega {
  font-size: 54px;
  font-size: 3.375rem;
  line-height: 1.33333;
}

.kilo {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1.2;
}

/**
.loudHeading adds a background and padding. This shoudl span to viewport edges
 so make sure it isn't wrapped in .lContainer
*/
.loudHeading {
  padding: 24px;
  background: #eeeff0;
  color: #58585a;
  text-align: center;
  margin-bottom: 36px;
}

/***** VERTICAL CENTRE CONTENT *****/
.center-outer{ display:table; height:100%; width:100%; }
.center-inner{ display:table-cell; vertical-align:middle; }

/*------------------------------------*$LINKS
\*------------------------------------*/
a:link, a:visited, a:hover, a:active {
  border-bottom: 1px solid #fff;
  color: #368896;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

a:hover {
  border-bottom: 1px solid #368896;
}

.plain-link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent !important;
}

/*------------------------------------*$BASIC LISTS
\*------------------------------------*/
/* Suqare bullets to match financial site */
ul {
  list-style-type: square;
}

/* ==========================================================================
   $LAYOUT
   ========================================================================== */
/*------------------------------------*$GLOBAL BOX MODEL
\*------------------------------------*/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

/*------------------------------------*$CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
 * and over in your markup.
 */
.cf:after, .lContainer:after, .lLeft:after,
.lMiddle:after,
.lRight:after, .l2Col:after, .l3Col:after, .lContact:after, .lQuote:after, .nav:after, .masthead .lContainer:after, .siteFooter:after, .siteFooter form:after, .teamMember:after {
  content: "";
  display: table;
  clear: both;
}

/*------------------------------------*$GRID
\*------------------------------------*/
/**
 * Fluid and nestable grid system, e.g.:
 *
   <div class="grid">

       <div class="gridItem  oneThird">
           <p>One third grid</p>
       </div><!--

    --><div class="gridItem  twoThirds">
           <p>Two thirds grid</p>
       </div><!--

    --><div class="gridItem  oneHalf">
           <p>One half grid</p>
       </div><!--

    --><div class="gridItem  oneQuarter">
           <p>One quarter grid</p>
       </div><!--

    --><div class="gridItem  oneQuarter">
           <p>One quarter grid</p>
       </div>

   </div>
 *
 * Demo: jsfiddle.net/inuitcss/CLYUC
 *
 */
/**
 * Grid wrapper
 */
.grid {
  margin-left: -24px;
  list-style: none;
  margin-bottom: 0;
  letter-spacing: -0.36em;
}

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

/**
 * Very infrequently occuring grid wrappers as children of grid wrappers.
 */
.grid > .grid {
  margin-left: 0;
}

/**
 * Grid
 */
.gridItem {
  display: inline-block;
  width: 100%;
  padding-left: 24px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
}

/*------------------------------------*$GENERIC PAGE LAYOUT
\*------------------------------------*/
/**
Styles for standard page layout. These form the shelves onto which modules 
are placed.
*/
/* CONTAINER */
/**
.lContainer sets a max width and centers content
Can be used on its own or within a .l-full-bleed element if background needs to 
stretch to screen edges
1.  Set max width and centralise containent in viewport
2.  When viewport < $max-width content will be flush to sides so add padding to 
    prevent this.
3.  Add less padding on compact screens
*/
.lContainer {
  position: relative;
  max-width: 1160px;
  /* [1] */
  margin-left: auto;
  /* [1] */
  margin-right: auto;
  /* [1] */
}

@media only screen and (max-width: 1208px) {
  .lContainer {
    padding-left: 24px;
    /* [2] */
    padding-right: 24px;
    /* [2] */
  }
}

@media only screen and (max-width: 480px) {
  .lContainer {
    padding-left: 12px;
    /* [3] */
    padding-right: 12px;
    /* [3] */
  }
}

/*------------------------------------*$2 COL LAYOUT
\*------------------------------------*/
/**
A .l2Col contains a left column containing the main content, and a right sidebar
 with promotional asides
e.g. basic page
*/
.l2Col .lLeft {
  margin-bottom: 48px;
}

@media only screen and (min-width: 500px) and (max-width: 799px) {
  .l2Col .sidebar > section {
    float: left;
    width: 40%;
    margin-right: 48px;
  }
}

@media only screen and (min-width: 800px) {
  .l2Col .lLeft {
    float: left;
    width: 75%;
    padding-right: 72px;
  }
  .l2Col .lRight {
    float: left;
    width: 25%;
    margin-left: 0;
    margin-top: 96px;
  }
}

@media only screen and (min-width: 1060px) {
  .l2Col .lLeft {
    float: left;
    width: 80%;
    padding-right: 144px;
  }
  .l2Col .lRight {
    width: 20%;
  }
}

/*------------------------------------*$3 COL LAYOUT
\*------------------------------------*/
/**
A .l3Col contains a left column with Secondary Nav, a central column
containing the main content, and a right sidebar with promotional asides
e.g. product page
*/
.l3Col .lMiddle {
  margin-bottom: 48px;
}

.secondaryNav.sticky{
	position: fixed;
	top: 130px;
}

.secondaryNav.sticky-bottom{
	position:absolute;
	bottom:0;
}

@media only screen and (min-width: 580px) and (max-width: 1099px) {
  .l3Col .sidebar > section {
    float: left;
    width: 40%;
    margin-right: 48px;
  }
}

@media only screen and (min-width: 801px) {
  .l3Col .lMiddle {
    float: left;
    width: 75%;
  }
  .l3Col .lLeft {
    float: left;
    width: 25%;
    margin-top: 96px;
    padding-right: 48px;
  }
  .l3Col .lRight {
    margin-left: 25%;
    width: 75%;
  }
}

@media only screen and (min-width: 1100px) {
  .l3Col .lMiddle {
    width: 55%;
    padding-right: 72px;
  }
  .l3Col .lRight {
    float: left;
    width: 20%;
    margin-left: 0;
    margin-top: 96px;
  }
}

/*------------------------------------*$BLOG LAYOUT
\*------------------------------------*/
/**
Make left sidebar smaller than standard 3col
*/
/*
@media only screen and (min-width: 500px) and (max-width: 1099px) {
  .l3Col.lBlog .sidebar > section {
    float: left;
    width: 40%;
    margin-right: 48px;
  }
}

@media only screen and (min-width: 801px) {
  .l3Col.lBlog .lMiddle {
    float: left;
    width: 82.5%;
  }
  .l3Col.lBlog .lLeft {
    float: left;
    width: 17.5%;
    margin-top: 72px;
    padding-right: 48px;
  }
  .l3Col.lBlog .lRight {
    margin-left: 17.5%;
    width: 82.5%;
  }
}

@media only screen and (min-width: 1100px) {
  .l3Col.lBlog .lLeft {
    width: 15%;
    padding-right: 72px;
  }
  .l3Col.lBlog .lMiddle {
    width: 65%;
    padding-right: 72px;
  }
  .l3Col.lBlog .lRight {
    float: left;
    width: 20%;
    margin-left: 0;
    margin-top: 72px;
  }
}
*/

/*------------------------------------*$CONTACT PAGE LAYOUT
\*------------------------------------*/
/**
The contact page contains a left column with text (address, contact details) and
 a right column containing a contact form
*/
@media screen and (min-width: 800px) {
  .lContact .mainContent .left {
    float: left;
    width: 60%;
    padding-right: 72px;
  }
  .lContact .mainContent .right {
    float: left;
    width: 40%;
  }
}

/*------------------------------------*$GET A QUOTE PAGE LAYOUT
\*------------------------------------*/
/**
The contact page contains a left column with text (address, contact details) and
 a right column containing a contact form
*/
@media screen and (min-width: 800px) {
  .lQuote .left {
    float: left;
    width: 60%;
    padding-right: 72px;
  }
  .lQuote .right {
    float: right;
    width: 40%;
  }
}

/* ==========================================================================
   $NAV
   ========================================================================== */
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.nav {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

/**
 * `.navStacked` extends `.nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  navStacked">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.navStacked > li {
  display: list-item;
}

.navStacked > li > a {
  display: block;
}

/* ==========================================================================
   $PAGINATION
   ========================================================================== */
/**
 * Basic pagination object, extends `.nav`.
 * Requires some funky commenting to collapse any white-space caused by the
 * `display:inline-block;` rules.
 *
   <ol class="nav  pagination">
       <li class=paginationFirst>First</li>
       <li class=paginationPrev>Previous</li>
       <li><a href=/page/1>1</a></li>
       <li><a href=/page/2>2</a></li>
       <li class=isCurrent><a href=/page/3>3</a></li>
       <li><a href=/page/4>4</a></li>
       <li><a href=/page/5>5</a></li>
       <li class=paginationNext><a href=/page/next>Next</a></li>
       <li class=paginationLast><a href=/page/last>Last</a></li>
   </ol>
 *
 * Demo: jsfiddle.net/inuitcss/9Y6PU
 *
 */
.pagination {
  /**
     * Remove whitespace caused by `inline-block`.
     */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  margin: 0; 
  list-style: none;
}

.pagination > li {
  padding: 12px;
  letter-spacing: normal;
  word-spacing: normal;
  float:left;
}

.pagination > li > a {
  padding: 6px 12px;
  margin: -12px;
  border: 1px solid #d5d6d8;
  margin-right: 0.2em;
  color: #58595B;
}

.pagination > li > a:hover {
  border-color: #58595B;
}

.pagination > li > a.isCurrent {
  border-color: #368896;
  color: #368896;
}

.paginationFirst a:before {
  content: "\00AB" "\00A0";
}

.paginationLast a:after {
  content: "\00A0" "\00BB";
}

/* ==========================================================================
   $FORMS
   ========================================================================== */
/**
 * Group sets of form fields in a list, e.g.:
 *
   <ul class=formFields>
       <li>
           <label />
           <input />
       </li>
       <li>
           <label />
           <select />
       </li>
       <li>
           <label />
           <input />
       </li>
   </ul>
 *
 */
.formFields {
  list-style: none;
  margin: 0;
}

.formFields > li {
  margin-bottom: 12px;
}

.formFields > li:last-child {
  margin-bottom: 0;
}

.formFields label {
  display: block;
  margin-bottom: 4px;
}

/**
Add style to inputs - padding and border
*/
.textInput,
textarea {
  width: 100%;
  padding: 12px;
  background: #FFF;
  border: 1px solid transparent;
  color: #58595B;
  outline: none;
}

.textInput:focus,
textarea:focus {
  border: 1px solid #1b444b;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
}

textarea {
  height: 120px;
}

/**
Hidden captcha field
*/
.formCaptureField {
  display: none !important;
}

/**
Form actions
*/
.formActions {
  /* Small help text */
}

.formActions small {
  display: block;
  margin-top: 12px;
}

/**
Error states
*/
label.error {
  margin: 4px 0;
  font-size: 0.9em;
}

.textInput.error {
  background: #FFF url(../img/icons/error.png) no-repeat right 50%;
}

/**
COMPACT FORMS
Reduce padding on compact forms, e.g. newsletter signup in Footer
*/
.formCompact .textInput,
.formCompact textarea {
  padding: 4.8px;
}

/**
BRAND FORMS
Use .brandForm to create a highlted stand out form
*/
.brandForm {
  max-width: 40em;
  padding: 24px;
  background: #eeeff0;
}

.brandForm .textInput,
.brandForm textarea {
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
}

div.wpcf7 .ajax-loader{ position: absolute; right: 75px; }
.siteFooter div.wpcf7-response-output{ float:right; }






/* ==========================================================================
   $LISTS
   ========================================================================== */
/**
.bigList creates a large attention-grabbing list
*/
.bigList {
  font-size: 20px;
  font-size: 1.25rem;
  font-family: "Kameron", serif;
  font-weight: 300;
}

.bigList > li {
  margin-bottom: 12px;
}

/**
.tickList adds a tick icon for each list item
*/
.tickList {
  list-style: none;
  margin-left: 0;
  padding-left: 1.4em;
}

.tickList > li {
  text-indent: -1.4em;
}

.tickList > li:before {
  content: "\e801";
  float: left;
  font-family: fontello;
  color: #368896;
  width: 1.4em;
}

/* ==========================================================================
   $BUTTONS
   ========================================================================== */
/**
 * Base button styles.
 *
 * 1. Allow us to better style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Stop buttons wrapping and looking broken.
 * 4. Make buttons inherit font styles.
 * 5. Force all elements using beautons to appear clickable.
 * 6. Normalise box model styles.
 * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
 *    there is 1em of space above and below that text. We therefore apply 1em
 *    of space to the left and right, as padding, to keep consistent spacing.
 * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
 */
.btn,
a.btn {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  white-space: nowrap;
  /* [3] */
  font-family: inherit;
  /* [4] */
  font-size: 100%;
  /* [4] */
  cursor: pointer;
  /* [5] */
  border: none;
  /* [6] */
  margin: 0;
  /* [6] */
  padding-top: 0;
  /* [6] */
  padding-bottom: 0;
  /* [6] */
  line-height: 3;
  /* [7] */
  padding-right: 1em;
  /* [7] */
  padding-left: 1em;
  /* [7] */
  /*background: #8fccd6;*/
  background-color:#10a6b4;
  font-family: "Kameron", serif;
  color: #fff;
}

.btn,
.btn:hover,
a.btn,
a.btn:hover {
  text-decoration: none;
  /* [9] */
}

.btn:hover,
a.btn:hover {
  background: #69bbc9;
}

.btn:active,
.btn:focus,
a.btn:active,
a.btn:focus {
  outline: none;
}

.btn:active,
a.btn:active {
  position: relative;
  top: 1px;
}

.btnRound,
a.btnRound {
  border-radius: 4px;
}

.btnGrad {
  background: #368896;
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #62b8c6), color-stop(49%, #62b8c6), color-stop(80%, #368896), color-stop(100%, #368896));
  background: -webkit-linear-gradient(top, #62b8c6 0%, #62b8c6 49%, #368896 80%, #368896 100%);
  background: linear-gradient(to bottom, #62b8c6 0%, #62b8c6 49%, #368896 80%, #368896 100%);
  font-size: 18px;
  font-size: 1.125rem;
  color: #fff;
  border-bottom: none;
}

/* ==========================================================================
   $ICONS
   ========================================================================== */
/**
We use a webfont generated by Fontello. See /plugins/fontello.scss
usual markup is:

<a><i class="i-twitter"></i> Twitter</a>

If we want to visually hide the text and show only the icon, add class of
 .iReplace to the parent element:

<a><i class="i-twitter"></i> <span class="visuallyHidden">Twitter</span></a>
*/
/* ==========================================================================
   $EXTRA INFO
   ========================================================================== */
/**
Smaller text setioned off with top/bottom borders. E.g. FOS info on contact page
*/
/* section */
.extraInfo {
  margin-top: 72px;
  font-size: 0.8em;
  padding: 1em 0;
  border-top: 1px solid #d5d6d8;
  border-bottom: 1px solid #d5d6d8;
}

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

/* ==========================================================================
   $BROWSE HAPPY PROMPT
   ========================================================================== */
.browseHappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   $CONTACT HEADER
   ========================================================================== */
.contactHeader {
  background: #eeeff0;
  border-bottom: 1px solid #d5d6d8;
  text-align: right;
  color: #bdbfc2;
  font-family: "Kameron", serif;
  font-size: 17px;
  font-size: 1.0625rem;
}

@media screen and (max-width: 640px) {
  .contactHeader {
    font-size: 0.9em;
  }
}

.contactHeader .nav {
  max-width: 1160px;
  margin: 0 auto;
}

.contactHeader li {
  padding: 8px 24px;
  border-left: 1px solid #d5d6d8;
  color: #368896;
}

@media screen and (max-width: 640px) {
  .contactHeader li {
    padding: 12px;
  }
}

.contactHeader li:last-child {
  padding-right: 0;
}

.contactHeader li a {
  border-bottom: none;
  text-decoration: none;
  margin-right: 0.3em;
}

.contactHeader li a:last-child {
  margin-right: 0;
}

.contactHeader li a:hover {
  color: #58595B;
}

@media screen and (max-width: 500px) {
  .contactHeader .socialLinks {
    display: none;
  }
}

/* ==========================================================================
   $MASTHEAD
   ========================================================================== */
/**
 See also primaryNav.scss
 */
/* Add padding to masthead */
.masthead{
	float: left;
	width: 100%;
	/*height: 113px;*/
	/* NEW VERSION */
	position:fixed;
	top:0;
	left:0;
	height:158px;
	z-index: 10000;
	transition:all .2s;
}

#sticky-header{
	/*height: 113px;*/
	/* NEW VERSION */
	height:158px;
	background: #fff;
	z-index: 10000;
	transition:all .2s;
}
/*#sticky-header.active{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background: #fff;
    width: 100%;
}*/

.masthead .lContainer {
  position: relative;
  height: 114px;
  padding-top: 18px;
  padding-bottom: 18px;
  transition:all .2s;
}

body.scrolled-down .masthead{ height: 109px; }
body.scrolled-down #sticky-header{ height: 109px; }
body.scrolled-down .masthead .lContainer{ height: 60px; }



/**
Vertical-center primaryNav wrt masthead

Logo is unknown height, making .masthead unknown height. Use display: table
to vertically center .primaryNav in this unknown height
Only do this when .primayNav visible, above 1100px
*/
@media screen and (min-width: 1100px) {
  .masthead .lContainer {
    display: table;
    /*height: 100%;*/
  }
  .masthead .lContainer nav {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
}

/* ==========================================================================
   $SITE LOGO
   ========================================================================== */
/* a */
.masthead .siteLogo {
  display: block;
  float: left;
  height: 73px;
  overflow: hidden;
  transition:all .2s;
}

.masthead .siteLogo img {
    width: 211px;
	height: 73px;
	max-height:none;
	transition:all .2s;
  }

.siteLogo:link, .siteLogo:visited, .siteLogo:hover, .siteLogo:active {
  border: none;
}

body.scrolled-down .masthead .siteLogo{ height: 33px }
body.scrolled-down .masthead .siteLogo img{ transform: translate(-34px,-42px); }

/* Make space for menu icon on tiny screens */
@media screen and (max-width: 380px) {
  .siteLogo {
    padding-right: 5em;
  }
  .siteLogo img {
    max-width: 100%;
  }
}

/* ==========================================================================
   $PRIMARY NAV
   ========================================================================== */
/**
See also masthead.scss
*/
/* Visual styles for top level links */
.primaryNav a {
  border-bottom: none;
  color: #58595B;
  font-family: "Kameron", serif;
  font-size: 17px;
  font-size: 1.0625rem;
  line-height: 1;
  font-weight: 300;
}

.primaryNav a:hover {
  color: #368896;
}

.primaryNav a.isCurrent {
  color: #368896;
  font-weight: 400;
}

/**
Level 2 Dropdown

1. Positioning context for dropdowns
2. Style dropdown
3. Hide dropdown intially
4. Add top border. Can't use border property as we're using padding to create
   illusion of dropwon being positioned lower than it actually is
5. Add caret triangle
*/
.primaryNav > li {
  position: relative;
  /* [1] */
}

.primaryNav > li > ul {
  /* [2] */
  display: block;
  position: absolute;
  top: 100%;
  left: -9999em;
  /* [3] */
  white-space: nowrap;
  margin-left: 0;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 24px;
  padding-bottom: 12px;
  list-style: none;
  text-align: left;
  background: #FFF;
  z-index: 10;
  box-shadow: 1px 14px 10px rgba(0, 0, 0, 0.2);
}

.primaryNav > li > ul:after {
  /* [4] */
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 4px;
  background: #368896;
}

.primaryNav > li > ul:before {
  /* [5] */
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -8px;
  border-bottom: 8px solid #368896;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.primaryNav > li > ul a {
  display: block;
  padding: 6px 0;
}

/**
Responsive Nav 

On wide screens...
1. Make horizonal on wide screens
2. Show level 2 dropdown on hover
3. Hide toggle
*/
@media screen and (min-width: 1160px) {
  .primaryNav {
    /* [1] */
    display: block !important;
    float: right;
    text-align: right;
    margin-bottom: 0;
  }
  .primaryNav > li {
    float: left;
    padding: 3px 18px;
  }
  .primaryNav > li:last-child {
    padding-right: 0;
    border-right: none;
  }
  .primaryNav > li:hover > ul {
    left: 0;
    /* [2] */
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .primaryNavToggle {
    display: none;
    /* [3] */
  }
}

/**
Responsive Nav

On narrow screens...
1.  Style and position toggle
2.  Position toggle vertically in unknown height parent
3.  Add icon. Need to position absolutely so changing icons font-size doesn't
    effect line height and make button jump

When toggle clicked...
4.  Switch menu icon to clsoe icon
4A. Increase font-size to make icons same size
4B. Reposition to keep icons aligned

5. Style primaryNav as vertically-stacked dropdown
6. Hide initially - see theme.js, which reveals primaryNav when
   .primaryNavToggle clicked
   @todo: Make more accessible using jsut CSS classes
*/
@media screen and (max-width: 1159px) {
  a.primaryNavToggle {
    /* [1] */
    display: block;
    position: absolute;
    /* [2] */
    top: 50%;
    /* [2] */
    right: 24px;
    /* [2] */
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    /* [2] */
    border: none;
    color: #368896;
    font-size: 20px;
    line-height: 1;
    font-family: "Kameron", serif;
    overflow: visible;
  }
  a.primaryNavToggle:hover {
    color: #296670;
  }
  a.primaryNavToggle:before {
    /* [3] */
    content: "\e806";
    display: block;
    width: 20px;
    height: 100%;
    position: absolute;
    left: -24px;
    top: 0;
    font-family: fontello;
    margin-right: 0.3em;
    vertical-align: bottom;
  }
  a.primaryNavToggle.isExpanded:before {
    content: "\e804";
    /* [4] */
    font-size: 23px;
    /* [4A] */
    top: -3px;
    /* [4B] */
  }
  /* Hide primaryNav */
  .primaryNav {
    /* [5] */
    display: none;
    /* [6] */
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 200;
    width: 100%;
    padding: 24px 24px 12px 24px;
    background: #FFF;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 8px 0px rgba(0, 0, 0, 0.15);
  }
  .primaryNav > li {
    display: block;
    margin-bottom: 12px;
  }
}

/* Hide 'menu' text on small screens */
@media screen and (max-width: 450px) {
  a.primaryNavToggle {
    text-indent: -999em;
  }
  a.primaryNavToggle:before {
    text-indent: 0;
  }
}

/* ==========================================================================
   $SECONDARY NAV
   ========================================================================== */
.secondaryNav ul > li.parent {
  border-bottom: 1px solid #eeeff0;
  margin-bottom: 12px;
  font-weight: 300;
}

@media screen and (min-width: 810px) {
  .secondaryNav ul > li.parent a {
    font-size: 18px;
    font-size: 1.125rem;
    color: #368896;
  }
  .secondaryNav ul > li.parent a:after {
    content: ":";
  }
}

.secondaryNav ul > li > a {
  display: inline-block;
  margin-bottom: 6px;
  color: #58595B;
  border-bottom: none;
  font-family: "Kameron", serif;
  font-size: 16px;
  font-size: 1rem;
}

.secondaryNav ul > li > a:hover {
  color: #368896;
}

.secondaryNav ul > li > a.isCurrent {
  color: #FFF;
  background: #368896;
  padding: 4px 8px;
  font-weight: 300;
}

@media screen and (min-width: 810px) {
  .secondaryNav ul > li > a.isCurrent:before {
    content: '\e80a';
    font-family: 'fontello';
    position: relative;
    left: -1.5em;
    margin-right: -1em;
    color: #368896;
    font-weight: 800;
  }
}

/**
Make inline list when compact
*/
@media only screen and (max-width: 800px) {
  .secondaryNav ul > li {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
  }
  .secondaryNav ul > li.parent {
    border-bottom: none;
    margin-bottom: 0;
  }
  .secondaryNav ul > li > a {
    padding: 3px 6px;
    margin-bottom: 0;
    border: 1px solid #368896;
    border-radius: 3px;
    font-size: 14px;
    font-size: 0.875rem;
  }
  .secondaryNav ul > li > a.isCurrent {
    color: #FFF;
    padding: 3 6px;
  }
}

/**
Switch from <ul> to <select> dropdown when tiny screen
See also theme.js
*/
/* Hide initially */
.secondaryNav select {
  display: none;
}

/* Show below 600px */
@media screen and (max-width: 600px) {
  .secondaryNav ul {
    display: none;
  }
  .secondaryNav select {
    display: block;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   $BREADCRUMB NAV
   ========================================================================== */
.breadcrumbNav {
  margin-bottom: 6px;
  font-size: 14px;
  font-size: 0.875rem;
  color: #7e7f82;
}

@media screen and (min-width: 810px) {
  .breadcrumbNav {
    position: relative;
    top: -12px;
  }
}

.breadcrumbNav a {
  color: #7e7f82;
  border-bottom: none;
}

.breadcrumbNav a:hover {
  color: #368896;
}

/* ==========================================================================
   $SITE FOOTER
   ========================================================================== */
/**
Site-wide footer
*/
.siteFooter {
  margin-top: 48px;
  padding: 48px 0;
  /*background: #368896;*/
  background:#6a6a6a;
  color: #fff;
  font-size: 13px;
  font-size: 0.8125rem;
}

.siteFooter a {
  color: #fff;
  border-bottom: none;
}

.siteFooter a:hover {
  border-bottom: 1px solid #fff;
}

.siteFooter b {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.siteFooter .socialLinks > a {
  border-bottom: none;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.33333;
}

.siteFooter .right {
  padding-top: 24px;
}

.siteFooter small {
  display: block;
  padding-top: 24px;
}

.siteFooter img + img {
  margin-left: 12px;
}

.footer-column{ float:left; }
#footer-column-1{ width: 24%; }
#footer-column-2{ width: 15%; }
#footer-column-3{ width: 24%; }
#footer-column-3 p{ margin-bottom: 3px; clear: both; float: left; width: 100%; }
.footer-contact-icon{ background-repeat: no-repeat; background-position: 0 50%; float: left; width: 15px; height: 19px; background-size: contain; margin-right: 5px; }
#footer-contact-icon-phone{ background-image:url(../img/icons/phone-icon-grey.png); }
#footer-contact-icon-email{ background-image:url(../img/icons/email-icon-grey.png); }
.footer-contact-item{ float: left; }
#footer-contact-phone{  }
#footer-contact-email{  }
#footer-column-4{ width: 27%; }
#footer-column-5{ width: 10%; }
#footer-column-5 .socialLinks{ float:right; }

#footer-partners-wrapper{ clear:both; }
#footer-partners{ /*width: 225px; display: block;*/ width: auto; display: table; margin: 0 auto; }
#footer-partners a{ float: left; border-bottom:none; }
#footer-partners img{ float:left; margin-right:20px; margin-left:0; }
#footer-partners #footer-partner-bn{ margin-top: 16px; }
#footer-partners #footer-partner-biba{ margin-top: 6px; }
#footer-partners #footer-partner-cii{ margin-right:0; }
#footer-legal{ clear:both; }
#footer-legal p{ text-align:center; }




@media screen and (min-width: 560px) {
  .siteFooter .left {
    float: left;
    margin-right: 48px;
  }
  .siteFooter .middle {
    float: left;
  }
  .siteFooter .right {
    clear: both;
  }
}

@media screen and (min-width: 780px) {
  .siteFooter .right {
    clear: none;
    float: right;
    width: 40%;
    margin-top: 0;
    padding-left: 48px;
    padding-top: 0;
    text-align: right;
  }
  .siteFooter .socialLinks {
    margin-bottom: 38.4px;
  }
  .siteFooter small {
    clear: both;
    width: 100%;
    text-align: center;
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
  }
}

.siteFooter form {
  margin-bottom: 36px;
}

.siteFooter form label {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 12px;
  color: #fff;
}

.siteFooter form .textInput {
  width: 100%;
  max-width: 25em;
  margin-bottom: 12px;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
	#footer-column-1{ width: 33%; margin-bottom:20px; }
	#footer-column-2{ width: 33%; margin-bottom:20px; }
	#footer-column-3{ width: 33%; margin-bottom:20px; }
	#footer-column-4{ width: 60%; clear: left; }
	#footer-column-5{ width: 35%; }
}

@media screen and (max-width:549px) {
	#footer-column-1{ width: 60%; }
	#footer-column-2{ width: 40%; }
	#footer-column-3{ width: 100%; clear:left; margin-bottom: 40px; }
	#footer-column-4{  }
	#footer-column-5{  }
}



/* ==========================================================================
   $HIGHLIGHTS
   ========================================================================== */
/**
Key benefits/highlights featured on homepage - an unordered list followed by a
 paragraph (optional)

Below 700px: stack each item
1.  Above 700px: use display: table to accommodate either 3 or 4 items
2.  Use table-lauyout: fixed to force all items to same width
*/
/* section */
.highlights {
  margin: 48px 0 24px 0;
  text-align: center;
}

.highlights ul {
  margin-left: 0;
  margin-bottom: 24px;
  padding-left: 0;
  list-style: none;
}

@media screen and (min-width: 700px) {
  .highlights ul {
    display: table;
    /* [1] */
    table-layout: fixed;
    /* [2] */
    width: 100%;
  }
}

.highlights ul > li {
  padding: 0 12px;
  margin-bottom: 48px;
  font-size: 20px;
  font-size: 1.25rem;
  font-family: "Kameron", serif;
  font-weight: 300;
  display: block;
}

@media screen and (min-width: 700px) {
  .highlights ul > li {
    display: table-cell;
    /* [1] */
  }
}

@media screen and (min-width: 900px) {
  .highlights ul > li {
    padding: 0 24px;
  }
}

.highlights ul > li a {
  display: block;
  color: #58595B;
  border: none;
  text-decoration: none;
}

.highlights ul > li a:hover {
  color: #368896;
}

.highlights ul > li a:hover img {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-transition: -webkit-transform 0.2s linear;
          transition: transform 0.2s linear;
}

.highlights ul > li img {
  display: block;
  margin: 0 auto 12px auto;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.2s linear;
          transition: transform 0.2s linear;
}

/* ==========================================================================
   $SIGNPOSTS
   ========================================================================== */
/**
Cross-sell signposts found at bottom of most pages
*/
.signposts {
  margin-top: 48px;
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid #d5d6d8;
  text-align: center;
}

.page-id-7 .signposts {
	border-top:none;
}

@media screen and (min-width: 550px) {
  .signposts .gridItem {
    width: 33.33%;
  }
}

a.signpost {
  display: block;
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  margin-bottom: 24px;
  color: #58595B;
  border-bottom: none;
  /* Fix for legacy TinyMCE which wrapped image in superfluous <p> */
}

a.signpost h3 {
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: 6px solid #368896;
  color: #58595B;
}

a.signpost img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: opacity 0.2s linear;
          transition: opacity 0.2s linear;
}

a.signpost:hover img {
  opacity: 0.7;
  -webkit-transition: opacity 0.2s linear;
          transition: opacity 0.2s linear;
}

a.signpost > p {
  margin-bottom: 0;
}

a.signpost img + p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100%;
  margin-bottom: 0;
  padding: 12px;
  background: #368896;
  background: rgba(54, 136, 150, 0.9);
  color: #fff;
  font-weight: 600;
  text-align: left;
  -webkit-transition: bottom 0.5s ease-in;
          transition: bottom 0.5s ease-in;
}

@media screen and (min-width: 650px) and (max-width: 800px) {
  a.signpost img + p {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.71429;
  }
}

a.signpost:hover img + p {
  bottom: 0;
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

/* ==========================================================================
   $ARTICLE EXTRACT
   ========================================================================== */
/**
Article extract on Blog/News Listing
*/

#main-blog .lLeft{ width:20%; }
#main-blog .lMiddle{ width:60%; }

.articleExtract {
	float: left;
	width: 50%;
	margin-bottom: 48px;
	padding-right: 20px;
}

.articleExtract:nth-of-type(2n+1){ clear:left; }

.teaser-image-wrapper{ float:left; width:100%; }
.blog-teaser-image{ float: left; width: 100%; }
.teaser-content-wrapper{ float: left; width: 100%; padding: 25px; border-left: 1px solid #EEEFF0; border-right: 1px solid #EEEFF0; border-bottom: 1px solid #EEEFF0; }
.articleExtract h2 { margin-bottom: 0; }
.articleExtract time { display: block; margin-bottom: 12px; font-size: 0.8em; color: #7e7f82; }
.teaser-excerpt{ font-size: 0.8rem; border-top: 1px solid #EEEFF0; padding-top: 8px; }
.teaser-read-more{ margin-bottom:0; }
.articleExtract .teaser-read-more-link{ background: #368896; color: #fff; padding: 7px 13px; font-size: 0.8rem; }
.articleExtract .teaser-read-more-link:hover{ text-decoration:none; border:none; }
.desktop-device .articleExtract .teaser-read-more-link:hover{ background-color:#8fccd6; }

@media screen and (max-width:1099px){
	#main-blog .lLeft{ width:25%; }
	#main-blog .lMiddle{ width:75%; }
	#main-blog .lRight{  }
}

@media screen and (max-width:799px){
	#main-blog .lLeft{ width:100%; }
	#main-blog .lMiddle{ width:100%; }
	#main-blog .lRight{  }
}



/***************************** OTHER BLOG PAGES STYLING ******************************/

/* SEARCH FORM */
.search-form{ float: left; width: 100%; height: 40px; margin-bottom:30px; border:1px solid #368896; }
.search-form .search-field{ float: left; width: calc(100% - 40px); height:100%; padding:5px 12px; border: none; box-sizing: border-box; font-size:0.9rem; }
.search-form .search-submit{ position:relative; float:left; width:40px; height:100%; border:none;  background-color:#368896; }
.submit-arrow-line{ position: absolute; background-color: #fff; height: 1px; width: 10px; left: 16px; }
.submit-arrow-line-1{ transform:rotate(45deg); top: 16px; }
.submit-arrow-line-2{ transform:rotate(-45deg); top: 22px; }



/* SINGLE PAGE BODY */
.single-post-body-image{ float:left; width:100%; margin-bottom:20px; }
.single-post-body-image img{ float:left; width:100%; }
.single-post-heading{ float:left; width:100%; padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid #EEEFF0; }
.single-post-heading .entry-title{ margin-bottom:0; }
.single-post-heading time{ font-size:0.9rem; }
.single-post-content{ float:left; width:100%;  }
.single-post-content p{  }
.single-post-content blockquote{ padding:25px 35px; background-color:#EEEFF0; color:#368896; border-left:3px solid #368896; }
.single-post-content blockquote p{ margin:0; }



/* SEARCH RESULTS */
.search-result-teaser{ float:left; width:100%; margin-bottom:70px; }
.search-result-teaser .entry-header{ float:left; width:100%; padding-bottom:10px; margin-bottom: 10px; border-bottom:1px solid #EEEFF0; }
.search-result-teaser .entry-header h2{ margin-bottom:0; }
.search-result-teaser .entry-meta{ float:left; width:100%; }
.search-result-teaser .entry-meta time{ font-size:0.9rem; }
.search-result-teaser .entry-summary{ float:left; width:100%; }
.search-result-teaser .entry-summary p{ margin-bottom:15px; }
.search-result-teaser .entry-footer{ float:left; width:100%; }
.search-result-teaser .entry-read-more-link{ float:left; padding:5px 12px; background-color:#368896; border-bottom:none; color:#fff; font-size: 0.9rem; }
.search-result-teaser .entry-read-more-link:hover{ text-decoration:none; border-bottom:none; }
.desktop-device .search-result-teaser .entry-read-more-link:hover{ background-color:#8fccd6; }






/* ==========================================================================
   $BANNER
   ========================================================================== */
/**
Full-width banner
//@todo: Change markup dependent on content, for SEO
*/
.banner {
  padding: 18px 0;
  margin-bottom: 48px;
  /*background: #368896;*/
  background-color: #6a6a6a;
  color: #fff;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-family: "Kameron", serif;
  text-align: center;
}

@media only screen and (max-width: 1208px) {
  .banner {
    padding-left: 24px;
    /* [2] */
    padding-right: 24px;
    /* [2] */
  }
}

@media all and (min-width: 768px) {
  .banner {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 480px) {
  .banner {
    padding-left: 12px;
    /* [3] */
    padding-right: 12px;
    /* [3] */
  }
}

.banner .btn {
  line-height: 2.5;
  text-transform: none;
  margin-left: 0.5em;
  font-weight: 300;
  font-size: 18px;
  font-size: 1.125rem;
  vertical-align: baseline;
}

.banner .btn b {
  font-weight: inherit;
}

/* ==========================================================================
   $HERO BANNER and CAROUSEL
   ========================================================================== */
/**
1.  Trick to center vertically - see http://codepen.io/shshaw/full/gEiDt#Images
*/
.hero,
.heroCarousel {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 240px;
  width: 100%;
}

@media screen and (min-width: 800px) {
  .hero,
  .heroCarousel {
    height: 300px;
  }
}

.hero img,
.heroCarousel img {
  width: 100%;
  position: absolute;
  /* [1] */
  left: 0;
  /* [1] */
  top: 0;
  /* [1] */
  right: 0;
  /* [1] */
  bottom: 0;
  /* [1] */
  margin-top: auto;
  /* [1] */
  margin-bottom: auto;
  /* [1] */
  z-index: 1;
}

/**
Position intro panel above image on right
1.  Same height as parent .hero
2.  Make flush with RHS on small screens/so text in line with main content on big
screens
3.  Make strapline stand out
*/
.heroIntro {
  display: block;
  position: relative;
  float: right;
  /*width: 350px;*/
  width: 100%;
  height: 240px;
  /* [1] */
  margin-right: -24px;
  /* [2] */
  padding: 0 24px;
  z-index: 2;
  /*background: #dee6ef;
  background-color: rgba(222, 230, 239, 0.8);*/
  background:none;
  text-align: left;
  border-bottom: none !important;
  /* Read more button */
}

.heroIntro:hover {
  border-bottom: none !important;
}

@media screen and (min-width: 800px) {
  .heroIntro {
    height: 300px;
    /* [1] */
  }
}

.heroIntro .inner {
  display: block;
  position: relative;
  /*top: 50%;*/
  top: 42%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.heroIntro p {
  margin-bottom: 0;
}

.heroIntro .kilo {
  margin-bottom: 0;
  /*color: #58585a;*/
  color: #fff;
  font-size:3.5rem;
}

.heroIntro p:last-child {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.33333;
  text-shadow: 0px 1px 1px white;
}

.heroIntro a {
  float: left;
  /*padding: 3px 9px 4px;
  margin: 10px 0 0;
  border: 1px solid #58585a;*/
  border-radius: 7px;
  /*color: #58585a;*/
  -webkit-transition: color 0.1s linear, background-color 0.1s linear;
          transition: color 0.1s linear, background-color 0.1s linear;
  /* NEW VERSION */
  padding: 9px 23px 9px;
  margin: 15px 0 0;
  background-color:#10a6b4;
  border:none;
  color:#fff;
}

.heroIntro a:hover {
  color: #fff;
  /*background-color: #58585a;*/
  background-color:#69bbc9;
}

@media screen and (max-width:767px){
	.heroIntro .kilo{ font-size:2.5rem; }
}

@media screen and (max-width:479px){
	.heroIntro .kilo{ font-size:1.5rem; }
}







/*------------------------------------*$HERO CAROUSEL
\*------------------------------------*/
.heroCarousel {
  position: relative;
  z-index: 1;
}

.heroCarouselSlide {
  width: 100%;
  z-index: 2;
}

.heroCarouselArrowNav {
  z-index: 1000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  overflow: visible;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

.heroCarousel .nextSlide,
.heroCarousel .prevSlide {
  position: absolute;
  display: block;
  width: 40px;
  height: 100%;
  z-index: 10;
  border-bottom: none;
  top: 120px;
}

@media screen and (min-width: 800px) {
  .heroCarousel .nextSlide,
  .heroCarousel .prevSlide {
    top: 150px;
  }
}

.heroCarousel .nextSlide:before,
.heroCarousel .prevSlide:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 80px;
  margin-top: -40px;
  font-size: 80px;
  line-height: 1;
  vertical-align: top;
  font-family: fontello;
  color: #e6e7e8;
  color: #e6e7e8;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

.heroCarousel .nextSlide {
  right: 0;
  margin-right: -50px;
  text-align: right;
}

.heroCarousel .nextSlide:before {
  content: "\e80a";
}

@media screen and (max-width: 1280px) {
  .heroCarousel .nextSlide {
    margin-right: 12px;
  }
}

.heroCarousel .prevSlide {
  left: 0;
  margin-left: -50px;
  text-align: left;
}

.heroCarousel .prevSlide:before {
  content: "\e809";
}

@media screen and (max-width: 1280px) {
  .heroCarousel .prevSlide {
    margin-left: 12px;
  }
}

#home-tile-video{ position:absolute; top:0; left:0; width:100%; min-height: 240px; }




/********************************* TWITTER FEED ***********************************/
.twitter-section-wrapper{ position:relative; width:100%; padding: 100px 20px; /*background:url(../img/content/city-in-the-distance-banner.jpg) no-repeat 50% 50%;*/ background-size: cover; color:#fff; font-size: 0.9rem; }
.twitter-section-mask{ position:absolute; top:0; left:0; width:100%; height:100%; /*background-color:rgba(0,0,0,0.7);*/ background-color:#9CCAD4; }
.twitter-column{ float:left; }

.twitter-intro{ width:33.3%; padding-right:100px; }
.twitter-intro h2{ color:#fff; }
.twitter-intro p{  }

.twitter-arrows{ float: left; width: 100%; margin-bottom: 20px; }
.twitter-arrow{ float: left; margin-right: 20px; height: 25px; position: relative; width: 15px; cursor:pointer; }
.twitter-arrows .twitter-arrow{ border-bottom:none; }
.twitter-arrow-left{  }
.twitter-arrow-right{  }
.twitter-arrow-line{ position:absolute; height:1px; width:15px; background-color:#368896; }
.twitter-arrow-line-top{ transform: rotate(45deg); top: 6px; }
.twitter-arrow-line-bottom{ transform: rotate(-45deg); top: 16px; }
.twitter-arrow-left .twitter-arrow-line-top,
.twitter-arrow-right .twitter-arrow-line-bottom{ transform: rotate(-45deg); }
.twitter-arrow-right .twitter-arrow-line-top,
.twitter-arrow-left .twitter-arrow-line-bottom{ transform: rotate(45deg); }
.twitter-intro .twitter-link-all-tweets{ color:#fff; border-bottom:none; }

.twitter-tweets{ float: left; width: 66.6%; }
.twitter-tweets ul{ margin: 0; list-style:none; }
.tweet-wrapper{ width: 50%; /*padding: 0 30px;*/ padding: 0 15px; text-align: center; }
.tweet-content-wrapper{ height:200px; padding: 0 20px; border: 1px solid #fff; background: rgba(255,255,255,0.1); border-radius: 5px; }
.tweet-wrapper .twitter-image{ padding-bottom: 10px; }
.tweet-wrapper .twitter-image .iTwitter{ color:#368896; font-size: 2rem; }
.tweet{  }
.tweet a{ border-bottom:none; }
.tweetDate{ margin-bottom:10px; color:#368896; }

body.page-id-7 .siteFooter{ margin-top:0; }



@media screen and (max-width:1149px){
	.tweet-content-wrapper{ height: 240px; }
}

@media screen and (max-width:1023px){
	.twitter-intro{ padding-right:30px; }
	.tweet-content-wrapper{ height:300px; }
}
@media screen and (max-width:767px){
	.twitter-section-wrapper > .lContainer{ padding-left:0; padding-right:0; }
	.twitter-intro{ width:100%; padding-right:0; margin-bottom: 30px; }
	.twitter-tweets{ width:100%; }
	.tweet-content-wrapper{ height: 250px; }
}
@media screen and (max-width:599px){
	.tweet-content-wrapper{ height: 300px; }
}
@media screen and (max-width:479px){
	.twitter-tweets .slick-slide{ padding: 0 10px; }
	.tweet-content-wrapper{ height: 200px; }
}
@media screen and (max-width:399px){
	.tweet-content-wrapper{ height: 250px; }
}






/* ==========================================================================
   $MAP
   ========================================================================== */
/**
A (Google) map which spans full width of screen on contact page.
Extends .hero
*/
/* div */
.heroMap > iframe {
  width: 100% !important;
}

/* ==========================================================================
   $GET IN TOUCH
   ========================================================================== */
/**
Get in touch CTA found in sidebar
*/
.getInTouch {
  max-width: 290px;
  padding: 30px 24px 24px 24px;
  margin-bottom: 24px;
  background: #eeeff0;
  font-family: "Kameron", serif;
  text-align: center;
  font-weight: 400;
}

.getInTouch p {
  margin-bottom: 12px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
  /**
        <a> and !important styles needed for iOS which makes phone no into link
        */
}

.getInTouch p a {
  color: #58595B !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.getInTouchOption,
a.getInTouchOption {
  display: block;
  padding: 12px 0;
  margin: 6px 0;
  background: #368896;
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #62b8c6), color-stop(49%, #62b8c6), color-stop(80%, #368896), color-stop(100%, #368896));
  background: -webkit-linear-gradient(top, #62b8c6 0%, #62b8c6 49%, #368896 80%, #368896 100%);
  background: linear-gradient(to bottom, #62b8c6 0%, #62b8c6 49%, #368896 80%, #368896 100%);
  font-size: 18px;
  font-size: 1.125rem;
  color: #fff;
  border-bottom: none;
}

/**
Get in touch button is a form on product pages, so needs styling as anchor
*/
.getInTouch form#quote {
  cursor: pointer;
}






/* ==========================================================================
   HOME PAGE
   ========================================================================== */
   
/***** MAIN CONTENT *****/
#home-main-content-text, #home-main-content-image{ float:left; width:50%; }
#home-main-content-text{ padding-right: 100px; }
#home-main-content-image{ padding-left:50px; }

#home-main-content-text p{ font-family: "Kameron", serif; font-size:1.2rem; letter-spacing:-0.25; }
#home-main-content-text p strong{ color:#10a6b4; }

@media screen and (max-width:767px){
	#home-main-content-text, #home-main-content-image{ width:100%; padding-left:0; padding-right:0; margin-bottom:50px; }
	#home-main-content-image img{ width: 370px; max-width: 100%; margin: 0 auto; display: block; }
}



/***** PARTNER LOGOS *****/
#home-partner-logos{ margin-top: 50px; padding: 30px 0; background-color: #eeeff0; }
.home-partner-logo-wrapper{ float:left; width:33.3%; border-right:1px solid #b1b7bc; }
.home-partner-logo-wrapper:last-of-type{ border:none; }
.home-partner-logo{ display: block; height: 80px; margin: auto; width: 120px; text-align: center; }
.home-partner-logo > a{ border:none; }
.home-partner-logo > a > img{  }

@media screen and (max-width:479px){
	.home-partner-logo-wrapper{ width:100%; border:none; }
}



/***** PAGE TEASERS *****/
#home-signpost-teasers .grid{ margin-left:0; }
#home-signpost-teasers .signposts{ margin-top:0; padding-top:0; }
#home-signpost-teasers .signposts .gridItem{ position:relative; padding-left:0; }
#home-signpost-teasers .signposts .gridItem img{ transition:all 1s; }
#home-signpost-teasers .signposts .gridItem .signpost{ margin:0; }
#home-signpost-teasers .signposts .gridItem .signpost:hover img{ opacity:1; transform:scale(1.05); }
#home-signpost-teasers .signposts .gridItem .mask{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); transition:all 1s; }
#home-signpost-teasers .signposts .gridItem .signpost:hover .mask{ background:rgba(0,0,0,.6); }
#home-signpost-teasers .signposts .gridItem .mask h3{ border: none; padding: 12px 20px; color: #fff; font-size: 2rem; width: 300px; display: block; margin: auto; float: none; }

@media screen and (max-width:1023px){
	#home-signpost-teasers .signposts .gridItem .mask h3{ font-size: 1.5rem; float: left; width: 100%; }
}



/***** HIGHLIGHTS *****/
#highlights-why-choose-home{ margin: 100px 0 70px 0; }
#highlights-why-choose-home h2{ margin-bottom: 50px; color:#10a6b4; font-size: 2.5rem; }

@media screen and (max-width:767px){
	#highlights-why-choose-home h2{ padding:0 20px; font-size:2rem; }
}
@media screen and (max-width:479px){
	#highlights-why-choose-home h2{ padding:0 20px; font-size:1.5rem; }
}







/* ==========================================================================
   $TEAM MEMBER
   ========================================================================== */
/**
Team member profile on About/Team page
*/
.teamMember {
  clear: both;
  margin: 48px 0;
}

.teamMember h2 {
  color: #368896;
  margin-bottom: 6px;
}

.teamMember h3 {
  margin-bottom: 12px;
}

.teamMember .left p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.71429;
}

.teamMember img {
  max-height: 150px;
  width: auto;
}

@media screen and (min-width: 1060px) {
  .teamMember .left {
    float: left;
    width: 40%;
  }
  .teamMember .right {
    float: right;
    width: 60%;
    padding-left: 48px;
  }
  .teamMember img {
    max-height: none;
    height: auto;
    width: 100%;
  }
}

/* ==========================================================================
   $HELPERS
   ========================================================================== */
/**
A series of helper classes to use arbitrarily. Only use a helper class if an
element/component doesn’t already have a class to which you could apply this
styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
that ruleset as opposed to adding the `.float--left` class to the markup.
*/
/*------------------------------------*$HIDING ELEMENTS
\*------------------------------------*/
/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyHidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyHidden.focusable:active,
.visuallyHidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*------------------------------------*$LAYOUT/SPACING
\*------------------------------------*/
/**
.centered positions an elment in the horizontal center of its parent
*/
.centered,
.centred {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/**
Add/remove margins
*/
.push {
  margin: 24px !important;
}

.pushTop {
  margin-top: 24px !important;
}

.pushBottom {
  margin-bottom: 24px !important;
}

.flush {
  margin: 0 !important;
}

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

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

.landmark {
  margin-bottom: 48px;
}

/*------------------------------------*$TYPE
\*------------------------------------*/
/**
 * Text alignment
 */
.textLeft {
  text-align: left  !important;
}

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

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

/*------------------------------------*$BRAND
\*------------------------------------*/
.brand {
  color: #368896;
}

/* ==========================================================================
   $PRINT
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links for images, or javascript/internal links
     */
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/*# sourceMappingURL=style.css.map */







#footer-column-2 .quickLinks{
	margin: 0;
}

#menu-footer-menu{
	margin: 0;
	list-style: none;
}