/*
 *	Theme Name:		Kelly Commercial Water Treatment
 *	Description:	WordPress theme for exclusive use by the Kelly Commercial Water Treatment website.
 *	Author:			Daniel O'Connor (Avatar Ltd.)
 *	Version:		1
 */
/* http://meyerweb.com/eric/tools/css/reset/
 * v2.0 | 20110126
 * License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

html {
  height: 100%; }

body {
  background: #fff;
  color: #444;
  font: 16px/1 "Roboto", sans-serif;
  height: 100%; }

a {
  color: #d60101; }

.button,
button,
input[type='submit'],
a[href$='.pdf']:only-child {
  background: #d50101;
  background: -moz-linear-gradient(top, #fe0000 0%, #ad0202 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fe0000), color-stop(100%, #ad0202));
  background: -webkit-linear-gradient(top, #fe0000 0%, #ad0202 100%);
  background: -o-linear-gradient(top, #fe0000 0%, #ad0202 100%);
  background: -ms-linear-gradient(top, #fe0000 0%, #ad0202 100%);
  background: linear-gradient(to bottom, #fe0000 0%, #ad0202 100%);
  border: 0;
  border-radius: 0.125em;
  -moz-box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.15);
  box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.15);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  -moz-osx-font-smoothing: crisp;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  padding: 1em 3em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0.0625em 0.0625em rgba(0, 0, 0, 0.15); }
  .button:hover,
  button:hover,
  input[type='submit']:hover,
  a[href$='.pdf']:only-child:hover {
    background: #bc0101;
    background: -moz-linear-gradient(top, #e50000 0%, #940202 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e50000), color-stop(100%, #940202));
    background: -webkit-linear-gradient(top, #e50000 0%, #940202 100%);
    background: -o-linear-gradient(top, #e50000 0%, #940202 100%);
    background: -ms-linear-gradient(top, #e50000 0%, #940202 100%);
    background: linear-gradient(to bottom, #e50000 0%, #940202 100%); }
  .button:active,
  button:active,
  input[type='submit']:active,
  a[href$='.pdf']:only-child:active {
    background: #a80101;
    background: -moz-linear-gradient(top, #940202 0%, #bc0101 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #940202), color-stop(100%, #bc0101));
    background: -webkit-linear-gradient(top, #940202 0%, #bc0101 100%);
    background: -o-linear-gradient(top, #940202 0%, #bc0101 100%);
    background: -ms-linear-gradient(top, #940202 0%, #bc0101 100%);
    background: linear-gradient(to bottom, #940202 0%, #bc0101 100%); }
  .button:after,
  button:after,
  input[type='submit']:after,
  a[href$='.pdf']:only-child:after {
    content: "";
    display: inline-block;
    font-family: "FontAwesome";
    margin-left: 0.5em; }

.image {
  background-color: #333;
  background-position: center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
  position: relative; }
  .image img {
    bottom: -99999em;
    display: block;
    left: -99999em;
    margin: auto;
    max-width: 100%;
    position: absolute;
    right: -99999em;
    top: -99999em; }

#lightbox {
  background: rgba(0, 0, 0, 0.85);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 100; }
  #lightbox:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
  #lightbox img {
    display: inline-block;
    height: auto;
    margin: 0 auto;
    max-height: 90%;
    max-width: 90%;
    position: relative;
    vertical-align: middle;
    width: auto;
    z-index: 2; }

.content > :last-child {
  margin-bottom: 0; }
.content p {
  line-height: 1.5;
  margin-bottom: 1.5em; }
.content em {
  font-style: italic; }
.content strong {
  font-weight: bold; }
.content ol, .content ul {
  margin-bottom: 2em; }
.content ul li {
  line-height: 1.5;
  margin-bottom: 1em;
  padding-left: 2em; }
  .content ul li:before {
    background: #d50101;
    background: -moz-linear-gradient(top, #fe0000 0%, #ad0202 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fe0000), color-stop(100%, #ad0202));
    background: -webkit-linear-gradient(top, #fe0000 0%, #ad0202 100%);
    background: -o-linear-gradient(top, #fe0000 0%, #ad0202 100%);
    background: -ms-linear-gradient(top, #fe0000 0%, #ad0202 100%);
    background: linear-gradient(to bottom, #fe0000 0%, #ad0202 100%);
    border-radius: 0.5em;
    content: "";
    display: inline-block;
    height: 0.5em;
    margin: 0 1.5em 0 -2em;
    width: 0.5em; }
.content ol li {
  counter-increment: ol;
  line-height: 1.5;
  margin-bottom: 1em;
  padding-left: 2em; }
  .content ol li:before {
    content: counter(ol);
    display: inline-block;
    margin-left: -2em;
    width: 2em; }
.content h2 {
  color: #2261a5;
  font-size: 2em;
  line-height: 1.25;
  margin: 2em 0 1em 0; }
  .content h2:first-child {
    margin-top: 0; }
.content h3 {
  color: #32b4e5;
  font-size: 1.25em;
  margin: 2em 0 1em 0; }
  .content h3:first-child {
    margin-top: 0; }
.content .alignleft {
  clear: left;
  float: left;
  margin: 0 1.5em 1.5em 0; }
.content .alignright {
  clear: right;
  float: right;
  margin: 0 0 2em 2em; }
.content .aligncenter {
  display: block;
  margin: 0 auto 2em auto; }
.content .alignnone {
  display: block;
  margin-bottom: 2em; }
.content .wp-caption-dd,
.content .wp-caption-text {
  font-size: 0.875em;
  margin-top: 0.75em;
  text-align: right; }
  .content .wp-caption-dd:before,
  .content .wp-caption-text:before {
    background: #2a8ac5;
    background: -moz-linear-gradient(left, #32b4e5 0%, #2261a5 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #32b4e5), color-stop(100%, #2261a5));
    background: -webkit-linear-gradient(left, #32b4e5 0%, #2261a5 100%);
    background: -o-linear-gradient(left, #32b4e5 0%, #2261a5 100%);
    background: -ms-linear-gradient(left, #32b4e5 0%, #2261a5 100%);
    background: linear-gradient(to right, #32b4e5 0%, #2261a5 100%);
    content: "";
    display: block;
    height: 0.25em;
    margin-bottom: 0.75em; }
.content a[href$='.pdf']:before {
  content: "";
  display: inline-block;
  font-family: "FontAwesome";
  margin-right: 0.5em; }
.content a[href$='.pdf']:after {
  content: none; }
.content a[href$='.pdf']:only-child {
  padding: 0.75em 1.5em; }

#header {
  background: #2261a5 url(images/kelly-water-treatment-landscape.jpg) top center no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -moz-box-shadow: inset 0 -0.0625em rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 -0.0625em rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -0.0625em rgba(0, 0, 0, 0.15); }
  .home #header {
    background-position: bottom center;
    height: 54em; }
  #header #bar {
    background: #fff;
    -moz-box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10; }
    #header #bar > div {
      margin: 0 auto;
      width: 70em; }
      #header #bar > div:after {
        clear: both;
        content: "";
        display: block; }
  #header #logo {
    float: left;
    padding: 1.5em 0; }
    #header #logo img {
      display: block;
      height: 4em;
      width: 12.875em; }
  #header nav {
    float: right;
    padding: 1.5em 0;
    width: 54em; }
    #header nav ul {
      height: 4em;
      overflow: hidden;
      text-align: justify; }
      #header nav ul:before {
        content: "";
        display: inline-block; }
      #header nav ul:after {
        content: "";
        display: inline-block;
        width: 100%; }
    #header nav li {
      display: inline-block;
      padding: 1em 0;
      text-align: center; }
    #header nav a {
      border-radius: 2px;
      color: #2261a5;
      display: block;
      padding: 0.5em 1em;
      text-decoration: none;
      text-overflow: hidden; }
      #header nav a:hover {
        background: #2260a4;
        background: -moz-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2584c2), color-stop(100%, #1f3d87));
        background: -webkit-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
        background: -o-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
        background: -ms-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
        background: linear-gradient(to bottom, #2584c2 0%, #1f3d87 100%);
        -moz-box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.1);
        box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.1);
        color: #fff;
        text-shadow: 0.0625em 0.0625em rgba(0, 0, 0, 0.1); }
      #header nav a:active {
        background: #204e95;
        background: -moz-linear-gradient(top, #1f3d87 0%, #2260a4 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f3d87), color-stop(100%, #2260a4));
        background: -webkit-linear-gradient(top, #1f3d87 0%, #2260a4 100%);
        background: -o-linear-gradient(top, #1f3d87 0%, #2260a4 100%);
        background: -ms-linear-gradient(top, #1f3d87 0%, #2260a4 100%);
        background: linear-gradient(to bottom, #1f3d87 0%, #2260a4 100%);
        -moz-box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.1);
        box-shadow: inset -0.0625em -0.0625em rgba(0, 0, 0, 0.1);
        color: #fff;
        text-shadow: 0.0625em 0.0625em rgba(0, 0, 0, 0.1); }
  #header section {
    color: #fff;
    -moz-osx-font-smoothing: crisp;
    -webkit-font-smoothing: antialiased; }
    #header section > div {
      margin: 0 auto;
      padding-top: 13.5em;
      text-align: center;
      width: 70em; }
    #header section .content {
      font-size: 1.5em;
      padding: 0 10em;
      text-shadow: 0.04166em 0.04166em rgba(0, 0, 0, 0.15); }
    #header section p {
      margin-bottom: 1.5em; }
    #header section .button {
      -moz-box-shadow: inset -0.05em -0.05em rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset -0.05em -0.05em rgba(0, 0, 0, 0.15);
      box-shadow: inset -0.05em -0.05em rgba(0, 0, 0, 0.15);
      font-size: 1.25em;
      margin: 0 auto;
      text-shadow: 0.05em 0.05em rgba(0, 0, 0, 0.15); }
  #header h1 {
    color: #fff;
    font-size: 2em;
    border-top: 3.5em solid transparent;
    padding: 2em 0;
    text-align: center; }

#content > div {
  margin: 0 auto;
  padding: 5em 0;
  width: 70em; }
  #content > div:after {
    clear: both;
    content: "";
    display: block; }
#content .content {
  width: 39em; }
  #content .content .alignright {
    margin-right: -31em; }

.page-template-page-commercial-installations #content > div {
  margin: 0 auto;
  width: 50em; }
  .page-template-page-commercial-installations #content > div > .content {
    margin-bottom: 5em;
    width: auto; }
.page-template-page-commercial-installations #organisations > li {
  margin-bottom: 5em; }
.page-template-page-commercial-installations #organisations section:after {
  clear: both;
  content: "";
  display: block; }
.page-template-page-commercial-installations #organisations .info {
  float: right;
  width: 30em; }
.page-template-page-commercial-installations #organisations .logo {
  float: left;
  width: 15em; }
.page-template-page-commercial-installations #organisations img {
  display: block;
  margin: 0 auto;
  max-height: 7.5em;
  max-width: 15em;
  height: auto;
  width: auto; }
.page-template-page-commercial-installations #organisations h2 {
  color: #2261a5;
  font-size: 2em;
  margin-bottom: 1em; }
.page-template-page-commercial-installations #organisations .content {
  width: auto; }
.page-template-page-commercial-installations #organisations .gallery {
  clear: both;
  padding-top: 2em;
  text-align: justify; }
  .page-template-page-commercial-installations #organisations .gallery:after {
    content: "";
    display: inline-block;
    width: 100%; }
  .page-template-page-commercial-installations #organisations .gallery li {
    background: yellow;
    display: inline-block;
    vertical-align: top;
    width: 15em; }
    .page-template-page-commercial-installations #organisations .gallery li:first-child:nth-last-child(4), .page-template-page-commercial-installations #organisations .gallery li:first-child:nth-last-child(4) ~ * {
      width: 11em; }
      .page-template-page-commercial-installations #organisations .gallery li:first-child:nth-last-child(4) .image, .page-template-page-commercial-installations #organisations .gallery li:first-child:nth-last-child(4) ~ * .image {
        height: 11em; }
  .page-template-page-commercial-installations #organisations .gallery .image {
    height: 20em; }

.page-template-page-narrow .content {
  margin: 0 auto; }

#contact-details {
  float: left;
  width: 35em; }
  #contact-details h2 {
    color: #2261a5;
    font-size: 2em;
    margin-bottom: 1em; }
  #contact-details iframe {
    background: #eee;
    border: 0;
    height: 28em;
    margin-bottom: 2em;
    width: 100%; }
  #contact-details dl {
    clear: both;
    content: "";
    display: block;
    line-height: 1.5; }
    #contact-details dl:after {
      clear: both;
      content: "";
      display: block; }
  #contact-details dt {
    clear: left;
    color: #2261a5;
    float: left;
    margin-bottom: 1em;
    width: 10em; }
  #contact-details dd {
    float: left;
    margin-bottom: 1em; }

#contact-form {
  float: right;
  width: 30em; }
  #contact-form h2 {
    color: #2261a5;
    font-size: 2em;
    margin-bottom: 1em; }
  #contact-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 2em; }
    #contact-form .wpcf7-form-control-wrap:after {
      background: #2c7ab6;
      background: -moz-linear-gradient(left, #3ab7e6 0%, #1f3d87 100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3ab7e6), color-stop(100%, #1f3d87));
      background: -webkit-linear-gradient(left, #3ab7e6 0%, #1f3d87 100%);
      background: -o-linear-gradient(left, #3ab7e6 0%, #1f3d87 100%);
      background: -ms-linear-gradient(left, #3ab7e6 0%, #1f3d87 100%);
      background: linear-gradient(to right, #3ab7e6 0%, #1f3d87 100%);
      clear: both;
      content: "";
      display: block;
      height: 0.25em;
      margin-top: 0.25em; }
  #contact-form input[type='text'],
  #contact-form input[type='email'],
  #contact-form textarea {
    background: #eee;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font: inherit;
    margin-top: 1em;
    padding: 1em;
    width: 100%; }
    #contact-form input[type='text']:focus,
    #contact-form input[type='email']:focus,
    #contact-form textarea:focus {
      background: #ddd;
      outline: none; }
  #contact-form textarea {
    line-height: 1.5; }

#features {
  background: #2261a5 url(images/containers.jpg) center no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  border-top: 1em solid #fff;
  height: 52em; }
  #features > div {
    margin: 0 auto;
    padding: 6em 0;
    width: 70em; }
    #features > div:after {
      clear: both;
      content: "";
      display: block; }
  #features ul {
    display: table;
    height: 100%;
    width: 100%; }
  #features li {
    display: table-cell;
    height: 100%; }
    #features li:first-child section {
      margin-left: 0; }
  #features section {
    color: #fff;
    height: 100%;
    margin-left: 5em;
    padding-bottom: 3em;
    position: relative;
    text-align: center;
    text-shadow: 0.0625em 0.0625em rgba(0, 0, 0, 0.2);
    width: 20em; }
  #features h2 {
    font-size: 1.5em;
    line-height: 1.5;
    margin-bottom: 1em; }
  #features .content {
    margin-bottom: 1.5em;
    padding: 0 2em; }
  #features .button {
    bottom: 0;
    left: 50%;
    margin-left: -5em;
    padding: 1em 0;
    position: absolute;
    width: 10em; }

.major {
  padding-bottom: 5em; }
  .major:first-of-type {
    padding-top: 5em; }
  .major > div {
    margin: 0 auto;
    position: relative;
    width: 70em; }
    .major > div > div {
      width: 32.5em; }
      .major > div > div > :last-child {
        margin-bottom: 0; }
  .major h2 {
    color: #2261a5;
    font-size: 2em;
    margin-bottom: 1em; }
  .major .content {
    margin-bottom: 2em; }
  .major .image {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 32.5em; }
    .major .image:before, .major .image:after {
      background: #d50101;
      background: -moz-linear-gradient(left, #fe0000 0%, #ad0202 100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fe0000), color-stop(100%, #ad0202));
      background: -webkit-linear-gradient(left, #fe0000 0%, #ad0202 100%);
      background: -o-linear-gradient(left, #fe0000 0%, #ad0202 100%);
      background: -ms-linear-gradient(left, #fe0000 0%, #ad0202 100%);
      background: linear-gradient(to right, #fe0000 0%, #ad0202 100%);
      border: 0 solid #fff;
      content: "";
      display: block;
      height: 1em;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 2; }
    .major .image:before {
      border-bottom-width: 0.5em;
      top: 0; }
    .major .image:after {
      border-top-width: 0.5em;
      bottom: 0; }

.major:nth-of-type(even) > div > div {
  margin-left: auto; }
.major:nth-of-type(even) .image {
  left: 0;
  right: auto; }

#brands {
  background: #2261a5 url(images/mountain-range.jpg) bottom center no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -moz-box-shadow: inset 0 -0.0625em rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 -0.0625em rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -0.0625em rgba(0, 0, 0, 0.15);
  height: 30em; }
  #brands > div {
    color: #fff;
    margin: 0 auto;
    padding: 5em 0;
    text-shadow: 0.0625em 0.0625em rgba(0, 0, 0, 0.2);
    width: 70em; }
  #brands h2 {
    font-size: 1.5em;
    margin-bottom: 1.5em;
    text-align: center; }
  #brands ul {
    background: #fff;
    -moz-box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
    height: 4em;
    overflow: hidden;
    padding: 2em 5em;
    text-align: justify; }
    #brands ul:after {
      content: "";
      display: inline-block;
      width: 100%; }
  #brands li {
    display: inline-block;
    vertical-align: middle; }
  #brands a {
    opacity: 0.9;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s; }
    #brands a:hover {
      opacity: 1; }
  #brands img {
    height: auto;
    max-height: 4em;
    max-width: 6em;
    width: auto; }

#footer {
  background: #eee url(images/grip-floor-2.png);
  -moz-background-size: 4.9375em;
  -o-background-size: 4.9375em;
  -webkit-background-size: 4.9375em;
  background-size: 4.9375em;
  color: #666; }
  #footer > div {
    margin: 0 auto;
    padding: 3em 0;
    text-align: justify;
    width: 70em; }
    #footer > div:after {
      content: "";
      display: inline-block;
      width: 100%; }
    #footer > div > div {
      display: inline-block;
      font-size: 0.875em;
      vertical-align: top; }
      #footer > div > div:last-child {
        text-align: right; }
      #footer > div > div > :last-child {
        margin-bottom: 0; }
  #footer h2 {
    color: #2261a5;
    font-size: 1.25em;
    margin-bottom: 1em; }
  #footer p {
    line-height: 1.5;
    margin-bottom: 1em; }
  #footer dl {
    line-height: 1.5; }
    #footer dl:after {
      clear: both;
      content: "";
      display: block; }
  #footer dt {
    clear: left;
    color: #2261a5;
    float: left;
    width: 8em; }
  #footer dd {
    float: left; }
  #footer ul {
    line-height: 1.5; }
  #footer li:before {
    color: #2261a5;
    content: "";
    display: inline-block;
    font-family: "FontAwesome";
    margin-right: 0.5em; }
  #footer a[href*='google']:before {
    background: #dd4b39;
    border-radius: 2em;
    color: #fff;
    content: "";
    display: inline-block;
    font-family: "FontAwesome";
    height: 1em;
    line-height: 1;
    margin-right: 0.5em;
    padding: 0.5em 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 0.0625em 0.0625em rgba(0, 0, 0, 0.2);
    width: 2em; }

@media only screen and (max-width: 1184px) {
  body {
    font-size: 15px; } }
@media only screen and (max-width: 1184px) {
  body {
    font-size: 14px; } }
@media only screen and (max-width: 1036px) {
  body {
    font-size: 13px; } }
@media only screen and (max-width: 962px) {
  body {
    font-size: 12px; } }
@media only screen and (max-width: 888px) {
  body {
    font-size: 16px; }

  .home #header {
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 41em; }

  #header {
    -moz-background-size: auto;
    -o-background-size: auto;
    -webkit-background-size: auto;
    background-size: auto; }
    #header #bar > div {
      padding: 1em 20% 1em 0;
      text-align: center;
      width: auto; }
    #header #logo {
      float: none; }
      #header #logo img {
        margin: 0 auto; }
    #header nav {
      background: #2260a4;
      background: -moz-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2584c2), color-stop(100%, #1f3d87));
      background: -webkit-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
      background: -o-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
      background: -ms-linear-gradient(top, #2584c2 0%, #1f3d87 100%);
      background: linear-gradient(to bottom, #2584c2 0%, #1f3d87 100%);
      cursor: pointer;
      float: none;
      padding: 2.25em 0;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: 20%; }
      #header nav:before {
        color: #fff;
        content: "";
        font-family: "FontAwesome";
        font-size: 1.5em; }
      #header nav.active ul {
        display: block; }
      #header nav ul {
        bottom: 0;
        display: none;
        height: auto;
        overflow: auto;
        position: fixed;
        right: 0;
        top: 6em; }
        #header nav ul:before {
          content: none; }
      #header nav li {
        background: #fff;
        display: block;
        padding: 0 1em; }
        #header nav li:first-child {
          -moz-box-shadow: inset 0 0.0625em rgba(0, 0, 0, 0.15);
          -webkit-box-shadow: inset 0 0.0625em rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 0.0625em rgba(0, 0, 0, 0.15);
          padding-top: 1em; }
        #header nav li:last-child {
          -moz-box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
          -webkit-box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.0625em rgba(0, 0, 0, 0.15);
          padding-bottom: 1em; }
      #header nav a {
        padding: 1em 2em; }
    #header section > div {
      padding-top: 7em;
      width: auto; }
    #header section .content {
      font-size: 1em;
      padding: 2em; }
      #header section .content p:last-child {
        margin-bottom: 0; }
      #header section .content br {
        display: block;
        margin-top: 1em; }
    #header section .button {
      font-size: 1em; }
    #header h1 {
      border-top-width: 4em;
      font-size: 1.5em;
      line-height: 1.25em;
      padding: 1.5em 1.33333em; }

  #content > div {
    padding: 2em;
    width: auto; }
  #content .content {
    width: auto; }
    #content .content h2 {
      font-size: 1.5em; }
    #content .content p {
      font-size: 0.875em; }
    #content .content .alignright,
    #content .content .alignleft,
    #content .content .alignnone,
    #content .content .aligncenter {
      clear: both;
      height: auto;
      margin: 0 auto 2em auto;
      max-width: 100%;
      float: none;
      width: auto; }
      #content .content .alignright img,
      #content .content .alignleft img,
      #content .content .alignnone img,
      #content .content .aligncenter img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
        width: auto; }
    #content .content a[href$=".pdf"]:only-child {
      display: block;
      line-height: 1.25; }

  .page-template-page-commercial-installations #content > div {
    width: auto; }
    .page-template-page-commercial-installations #content > div > .content {
      margin-bottom: 2em; }
  .page-template-page-commercial-installations #organisations li {
    margin-bottom: 3em; }
  .page-template-page-commercial-installations #organisations .logo {
    float: none;
    margin-bottom: 2em;
    width: auto; }
  .page-template-page-commercial-installations #organisations .info {
    float: none;
    width: auto; }
  .page-template-page-commercial-installations #organisations h2 {
    font-size: 1.5em; }
  .page-template-page-commercial-installations #organisations .gallery {
    padding-right: 1em; }
    .page-template-page-commercial-installations #organisations .gallery li {
      margin: 0 0 1em 0;
      position: relative;
      width: 49% !important; }
      .page-template-page-commercial-installations #organisations .gallery li:nth-child(even) {
        left: 1em; }
      .page-template-page-commercial-installations #organisations .gallery li:nth-last-child(-n+2) {
        margin-bottom: 0; }
    .page-template-page-commercial-installations #organisations .gallery .image {
      height: auto !important;
      padding-top: 100%; }

  #contact-details {
    float: none;
    margin-bottom: 2em;
    width: auto; }
    #contact-details h2 {
      font-size: 1.5em; }
    #contact-details iframe {
      height: 18em; }
    #contact-details dl {
      font-size: 0.875em; }
    #contact-details dt {
      width: 8em; }

  #contact-form {
    float: none;
    width: auto; }
    #contact-form h2 {
      font-size: 1.5em; }
    #contact-form .wpcf7 {
      font-size: 0.875em; }
    #contact-form input[type='submit'] {
      width: 100%; }

  #features {
    background: url(images/containers-small.jpg) top center;
    height: 58em; }
    #features > div {
      padding: 3em;
      width: auto; }
    #features ul {
      display: block;
      width: auto; }
    #features li {
      display: block; }
    #features section {
      margin: 0 0 2em 0;
      padding-bottom: 0;
      width: auto; }
    #features h2 {
      font-size: 1.25em;
      margin-bottom: 0.75em; }
    #features .content {
      font-size: 0.875em;
      margin-bottom: 1.25em;
      padding: 0; }
    #features .button {
      bottom: auto;
      font-size: 0.875em;
      left: auto;
      margin: 0;
      padding: 1em 2em;
      position: static;
      width: auto; }

  .major {
    padding-bottom: 2em; }
    .major:first-of-type {
      padding-top: 2em; }
    .major > div {
      padding: 0 2em;
      width: auto; }
      .major > div > div {
        float: none;
        margin-bottom: 2em;
        width: auto; }
    .major h2 {
      font-size: 1.5em;
      line-height: 1.25; }
    .major .content {
      font-size: 0.875em; }
    .major .button {
      display: block; }
    .major .image {
      height: auto;
      padding-top: 75%;
      position: relative;
      right: auto;
      top: auto;
      width: auto; }
      .major .image:before, .major .image:after {
        height: 0.5em; }

  #brands > div {
    padding: 2em;
    width: auto; }
  #brands h2 {
    font-size: 1.25em;
    line-height: 1.25;
    margin-bottom: 1em; }
  #brands ul {
    height: auto;
    padding: 1em; }
    #brands ul:after {
      content: none; }
  #brands li {
    display: table;
    height: 5em;
    float: left;
    width: 50%; }
  #brands a {
    display: table-cell;
    vertical-align: middle; }
  #brands img {
    display: block;
    margin: 0 auto; }

  #footer > div {
    padding: 2em;
    width: auto; }
    #footer > div:after {
      content: none; }
    #footer > div > div {
      display: block;
      font-size: 0.75em;
      margin-bottom: 2em; }
      #footer > div > div:last-child {
        margin-bottom: 0;
        text-align: left; }
  #footer h2 {
    margin-bottom: 0.5em; }
  #footer dl {
    line-height: 2; }
  #footer ul {
    line-height: 2; }
    #footer ul:after {
      clear: both;
      content: "";
      display: block; }
  #footer li {
    float: left;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50%; }
  #footer p {
    line-height: 2; }
    #footer p a {
      display: inline-block;
      padding: 0 0.5em; } }