/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
img,
object,
embed {
  max-width: 100%;
}
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}
/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
/* New IE doesn't default to block */
main {
  display: block;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-weight: bold;
  vertical-align: bottom;
}
td {
  font-weight: normal;
  vertical-align: top;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}
input[type="radio"] {
  vertical-align: text-bottom;
}
input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline;
}
.ie6 input {
  vertical-align: text-bottom;
}
select,
input,
textarea {
  font: 99% sans-serif;
}
table {
  font-size: inherit;
  font: 100%;
}
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover,
a:active {
  outline: none;
}
small {
  font-size: 85%;
}
strong,
th {
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
}
td,
td img {
  vertical-align: top;
}
/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {
  cursor: pointer;
}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}
/* make buttons play nice in IE */
button {
  width: auto;
  overflow: visible;
}
/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}
/* prevent BG image flicker upon hover */
/* Border box sizing */
*,
*:before,
*:after {
  box-sizing: border-box;
}
/* Variables  */
/* Fonts */
/* Paths */
/* Line height */
/* Colours */
/* Bright Blue */
/* tab focus for keyboard navigation */
/* tab focus for keyboard navigation */
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* Typography (most type is set at the component level)
-------------------------------------------------------------------------------*/
body {
  font: 100%/1.5em 'Open Sans', sans-serif;
  color: #000;
}
p {
  padding-bottom: 1.5em;
}
/* Headers */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 400;
}
h1,
.h1 {
  font-size: 2em;
  margin: 0 0 0.75em 0;
  line-height: 1em;
  color: #004fa3;
}
@media only screen and (min-width: 43em) {
  h1,
  .h1 {
    font-size: 2.8em;
  }
}
h2,
.h2 {
  font-size: 1.75em;
  margin: 0;
  line-height: 1em;
  margin-top: 0.25em;
}
@media only screen and (min-width: 87.5em) {
  h2,
  .h2 {
    font-size: 2em;
  }
}
h2.centered,
.h2.centered {
  color: #004fa3;
  margin: 2em auto 0 auto;
  text-align: center;
}
h2.ul,
.h2 ul {
  font-style: italic;
  font-weight: 700;
  border-bottom: 2px solid #2b9fd2;
  display: inline-block;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 37em) {
  h2.ul,
  .h2 ul {
    margin-left: 1em;
    margin-right: 1em;
  }
}
h3,
.h3 {
  font-size: 1.75em;
  margin: 0 0 0.75em 0;
  font-family: 'Open Sans', sans-serif;
}
h4,
.h4 {
  font-size: 1.35em;
  margin: 0 0 0.75em 0;
}
h5,
h6,
.h5,
.h6 {
  font-size: 1.125rem;
  margin: 0 0 0.75rem 0;
  font-weight: 700;
}
/* Links */
a {
  color: #3c7e9a;
  text-decoration: none;
  /*	j.mp/webkit-tap-highlight-color */
}
a:hover,
a:focus {
  color: #004fa3;
}
a:link {
  -webkit-tap-highlight-color: #3c7e9a;
}
a.no-click {
  cursor: default;
}
p {
  font-size: 1.25em;
  line-height: 1.25em;
}
p.xlarge {
  font-size: 1.5em;
  padding-bottom: 0.5em;
  line-height: 1em;
}
@media only screen and (min-width: 43em) {
  p.xlarge {
    font-size: 3.5em;
  }
}
p.f2 {
  font-size: 1.5em;
}
@media only screen and (min-width: 43em) {
  p.f2 {
    font-size: 3em;
    line-height: 1.25em;
  }
}
p.large {
  font-size: 1.5em;
}
@media only screen and (max-width: 30em) {
  p.large {
    font-size: 1em;
  }
}
/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
  background: #004fa3;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #004fa3;
  color: #fff;
  text-shadow: none;
}
/* Layout
-------------------------------------------------------------------------------*/
/* apply a natural box layout model to all elements. http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.wrapper {
  margin: 0 auto;
  position: relative;
  text-align: left;
  max-width: 1400px;
  width: 100%;
}
.wrapper:before,
.wrapper:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.wrapper:after {
  clear: both;
}
.wrapper-expanded {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  text-align: left;
  width: 100%;
}
.wrapper-expanded:before,
.wrapper-expanded:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.wrapper-expanded:after {
  clear: both;
}
.padding-standard {
  padding: 1em 2%;
}
.padding-hoz {
  padding-left: 1.25em;
  padding-right: 1.25em;
}
@media only screen and (min-width: 37em) {
  .padding-hoz {
    padding-left: 5em;
    padding-right: 5em;
  }
}
.padding-hoz-small {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
@media only screen and (min-width: 37em) {
  .padding-hoz-small {
    padding-left: 2.5em;
    padding-right: 2.5em;
  }
}
.padding-vert {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}
@media only screen and (min-width: 37em) {
  .padding-vert {
    padding-top: 5em;
    padding-bottom: 5em;
  }
}
.padding-top {
  padding-top: 1.25em !important;
}
@media (min-width: 64em) {
  .padding-hoz-xl {
    padding-left: 5em;
    padding-right: 5em;
  }
  .padding-vert-xl {
    padding-top: 5em;
    padding-bottom: 5em;
  }
}
.margin-hoz {
  margin: 2em auto;
}
.margin-bot {
  margin-bottom: 2em;
}
.maxwidth-15 {
  max-width: 50%;
}
@media only screen and (min-width: 43em) {
  .maxwidth-15 {
    max-width: 15%;
  }
}
.bob {
  width: 50%;
}
@media only screen and (min-width: 43em) {
  .bob {
    width: 15%;
  }
}
.maxwidth-25 {
  max-width: 25%;
}
.maxwidth-50 {
  max-width: 50%;
}
.width-100 {
  width: 100%;
}
.row {
  /* clear: both;*/
  display: block;
}
.row:before,
.row:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.row:after {
  clear: both;
}
.layout-main-content {
  width: 100%;
}
@media only screen and (min-width: 43em) {
  .layout-main-content {
    float: left;
    width: 66.66666667%;
  }
}
.layout-sidebar {
  width: 100%;
}
@media only screen and (min-width: 43em) {
  .layout-sidebar {
    float: left;
    width: 33.33333333%;
  }
}
.layout-main-full {
  /* Override layout-main-content */
  width: 100%!important;
  background: #ecf0f3;
}
/* General width positioning classes 
   I tend to avoid these and go with content/context speicific clasess (layout-main-content, layout-sidebar) as there's no correct rule for how these should react at different breakpoints. 
*/
.col-25 {
  display: block;
  width: 25%;
  float: left;
}
.col-33 {
  display: block;
  width: 33%;
  float: left;
}
.col-50 {
  display: block;
  width: 50%;
  float: left;
}
.col-66 {
  display: block;
  width: 66%;
  float: left;
}
.col-75 {
  display: block;
  width: 75%;
  float: left;
}
.col-clear {
  display: block;
  width: 100%;
  float: none;
  clear: both;
}
@media only screen and (min-width: 43em) {
  .image-left-40 {
    float: left;
    width: 40%;
  }
}
.image-left-40 img {
  display: block;
  height: auto !important;
  padding: 0 0 0.25em 0;
  width: 100% !important;
}
/* Helper classese with body copy on left side and side navigation on right side 
-------------------------------------------------------------------------------*/
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}
/*
 * Bring attention to something that needs to be completed
 */
.todo {
  background: yellow;
  color: #000;
}
/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}
/*
 * 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;
}
/*
 * Used by Honeepot captcha
 */
.screen-reader {
  display: block !important;
  left: -9999px !important;
  position: absolute !important;
  top: -9999px !important;
}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}
.clearleft {
  display: block;
  clear: left;
}
.clearfloat {
  clear: both;
  display: block;
  height: 1px;
  line-height: 1px;
}
.widescreenonly {
  display: none;
  visibility: hidden;
  width: 0;
}
@media only screen and (min-width: 58em) {
  .smallscreenonly {
    display: none!important;
    visibility: hidden;
    width: 0;
    height: 0;
  }
}
@media only screen and (min-width: 37em) {
  .xsmallscreenonly {
    display: none!important;
    visibility: hidden;
    width: 0;
    height: 0;
  }
}
@media only screen and (max-width: 43em) {
  .is-collapsed-smallscreen {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media only screen and (max-width: 57.99em) {
  .is-collapsed-medlargescreen {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
.small-screen-only {
  /* Show only on small screen */
}
@media only screen and (min-width: 37em) {
  .small-screen-only {
    display: none!important;
    visibility: hidden;
  }
}
.medium-screen-below {
  /* Show only on medium and small screens */
}
@media only screen and (min-width: 43em) {
  .medium-screen-below {
    display: none!important;
    visibility: hidden;
  }
}
.medlarge-screen-below {
  /* Show only on med large and smaller screens */
}
@media only screen and (min-width: 45em) {
  .medlarge-screen-below {
    display: none!important;
    visibility: hidden;
  }
}
.small-screen-plus {
  /* Show on anything above small screen */
  display: none;
  visibility: hidden;
}
@media only screen and (min-width: 37em) {
  .small-screen-plus {
    display: inherit;
    visibility: visible;
  }
}
.mediumwide-screen-plus {
  /* Show on anything above medium wide screen */
  display: none;
  visibility: hidden;
}
@media only screen and (min-width: 45em) {
  .mediumwide-screen-plus {
    display: inherit;
    visibility: visible;
  }
}
.wide-screen-only {
  /* Show only on wide screen */
}
@media only screen and (max-width: 37em) {
  .wide-screen-only {
    display: none!important;
    visibility: hidden!important;
    width: 0!important;
  }
}
@media only screen and (min-width: 37em) {
  .wide-screen-only {
    display: inherit;
    visibility: visible;
  }
}
@media only screen and (max-width: 43em) {
  .small-screen-hide {
    display: none!important;
    visibility: hidden;
  }
}
.no-padding {
  padding: 0 !important;
}
.no-padding-right {
  padding-right: 0 !important;
}
.no-border {
  border: 0 !important;
}
.inlineblock {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.standard-shadows {
  box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.25), 0px -5px 5px rgba(50, 50, 50, 0.1);
}
.textshadows {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
/* Color functions */
/* Text & editor content. Usually applied to content that comes from an RTE, but also useful for any body copy with bullets
--------------------------------------------------------------------------------------------------------------------------*/
.copy-block {
  font-size: 1em;
  background: #fff;
  position: relative;
}
.copy-block.transparent {
  background: transparent;
  margin: 2em;
}
.copy-block ul,
.copy-block ol {
  list-style-type: disc;
  list-style-position: outside;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  padding: 0 0 0 1.5em;
  font-size: 1.25em;
}
.copy-block ul ul,
.copy-block ol ul {
  font-size: 1em;
}
.copy-block ol {
  list-style-type: decimal;
}
.copy-block li {
  padding: 0em;
}
.copy-block a {
  color: #3c7e9a;
}
.copy-block a:hover {
  color: #004fa3;
}
.copy-block blockquote {
  color: #353535;
  font-size: 1em;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5em;
  margin-bottom: 1.5em;
  padding: 0;
}
.copy-block blockquote cite {
  border-left: 2px solid #2babe2;
  display: block;
  font-weight: bold;
  font-size: 1.25em;
  font-style: normal;
  margin-left: 1em;
  padding-left: 1em;
}
.copy-block h2 {
  font-size: 2em;
  margin-bottom: 1em;
}
@media only screen and (min-width: 37em) {
  .copy-block h2 {
    font-size: 3.15em;
  }
}
.copy-block h2.h3 {
  font-size: 1.75em;
  margin: 0 0 0.75em 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}
.copy-block .mod {
  width: 100%;
}
@media only screen and (max-width: 57.99em) {
  .copy-block .mod {
    flex-direction: column;
  }
}
@media only screen and (min-width: 58em) {
  .copy-block .mod {
    width: 31%;
  }
}
@media only screen and (min-width: 58em) {
  .copy-block .mod.double {
    width: 49%;
  }
}
.copy-block .mod h3 {
  color: #004fa3;
  font-size: 2.5em;
  line-height: 1.15em;
  margin-top: 0.5em;
}
.copy-block .mod li {
  padding-bottom: 0.5em;
}
.copy-block .mod ul ul {
  margin-bottom: 0;
  margin-top: 0.5em;
}
.copy-block .center-links {
  margin: auto;
  width: 100%;
  text-align: center;
  color: #004fa3;
  margin-top: 2em;
}
@media only screen and (min-width: 37em) {
  .copy-block .btn-alt {
    margin-left: 2em;
  }
}
.copy-block .triangle {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 2em solid #fff;
}
.copy-block h3,
.copy-block h4 {
  font-weight: bold;
}
.icon {
  width: 20%;
  float: left;
  margin-right: 0.5em;
}
@media only screen and (min-width: 37em) {
  .icon {
    width: 64px;
  }
}
.news-block h3 {
  margin-bottom: 0;
}
.news-content-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.news-container {
  order: 1;
  overflow-wrap: break-word;
  padding: 1.25em;
  width: 100%;
  word-wrap: break-word;
}
.news-container h1 {
  margin-bottom: 6rem;
}
.twitter-timeline-container {
  border-bottom: 2em solid #ecf0f3;
  max-height: 66.67vh;
  overflow: auto;
  padding: calc(1.25em - 10px);
  width: 100%;
}
@media (min-width: 37em) {
  .news-container {
    padding: 5em;
  }
  .twitter-timeline-container {
    padding: calc(5em - 10px);
  }
}
@media (min-width: 64em) {
  .news-container {
    align-self: flex-end;
    order: 0;
    padding: 0;
    padding-right: 2.5em;
    position: sticky;
    bottom: 5em;
    width: 66.6667%;
  }
  .twitter-timeline-container {
    border-bottom: 0;
    margin-left: auto;
    max-height: none;
    padding: 0;
    padding-left: 2.5em;
    overflow-y: auto;
    width: 33.3333%;
  }
}
.date {
  display: block;
  font-size: 0.8333333em;
}
/* Footer 
-------------------------------------------------------------------------------*/
.footer-site {
  background: #ecf0f3;
  clear: both;
  /* Clear floated elements so the background shows throw */
  font-size: 0.875em;
  padding: 1em 2.5% 1em 2.5%;
}
.footer-site:before,
.footer-site:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.footer-site:after {
  clear: both;
}
.footer-site a {
  text-decoration: underline;
  color: #262324;
}
.footer-site a:hover,
.footer-site a:focus {
  color: #2b9fd2;
}
.footer-site span,
.footer-site .nav-footer {
  float: left;
  margin-right: 1.5em;
}
@media only screen and (max-width: 44.99em) {
  .footer-site .displayflex {
    flex-direction: column;
  }
}
.footer-smalltype {
  /* All the small print: copyright, privacy policy, legal terms, etc. */
  font-size: 0.83333em;
}
@media only screen and (min-width: 45em) {
  .footer-credits {
    width: 66.6666667%;
  }
}
.logos {
  text-align: center;
}
@media only screen and (min-width: 45em) {
  .logos {
    float: right;
    width: 33.3333333%;
    text-align: right;
  }
}
.logos img {
  vertical-align: top;
  margin-right: 2em;
}
.logos img:last-child {
  margin-right: 0;
}
#message {
  margin-top: 2em;
  display: block;
}
/* Forms 
-------------------------------------------------------------------------------**/
form {
  -webkit-transform: translateZ(0);
  line-height: 1.5em;
}
form label {
  color: #262324;
  display: block;
  padding-top: 0.5em;
  font-weight: 700;
}
form label.focus {
  color: #2b9fd2;
}
form select,
form input,
form textarea,
form input[type="file"] {
  background: #ecf0f3;
  border: 1px solid #cdd7df;
  height: 3em;
  padding: 0.1em 0.5em;
}
form input:focus,
form textarea:focus,
form select:focus {
  outline: 0;
  border-color: #2b9fd2;
}
form textarea {
  height: 8em;
  padding-top: 0.5em;
}
form input[type="submit"],
form textarea,
form input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0;
}
form .btn-default {
  background: #004fa3;
  font-weight: 400;
  border: none;
  width: 25%;
  float: right;
  height: 3em;
  line-height: 3em;
  padding-top: 0;
}
form .btn-default:hover,
form .btn-default:focus {
  background: #2b9fd2;
}
@media only screen and (max-width: 37em) {
  form .btn-default {
    padding-left: 0.1em;
    padding-right: 0.1em;
  }
}
form .form-control {
  width: 74%;
}
form .label-file {
  margin-top: -0.7em;
  font-weight: 700;
}
form input[type="submit"] {
  background: #004fa3;
  width: 50%;
  color: #fff;
  margin-top: 1.5em;
  border: 0;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus {
  background: #2b9fd2;
}
form #attachment {
  left: 0;
  max-width: 100%;
}
/* Input field widths */
.fld-25,
.fld-33,
.fld-50,
.fld-66,
.fld-75,
.fld-100 {
  width: 100%;
}
@media only screen and (min-width: 43em) {
  /* Input field widths */
  .fld-25 {
    width: 25%;
  }
  .fld-33 {
    width: 33%;
  }
  .fld-50 {
    width: 50%;
  }
  .fld-66 {
    width: 66%;
  }
  .fld-75 {
    width: 75%;
  }
}
.label-plain {
  color: #000;
  display: inline;
  font-weight: normal;
}
.error {
  color: red;
}
/* Form button */
button {
  border: 0;
  line-height: 1.5em;
  padding: 0;
  position: relative;
  cursor: pointer;
  overflow: visible;
  /* removes extra side padding in IE */
}
button::-moz-focus-inner {
  border: none;
  /* overrides extra padding in Firefox */
}
button span {
  position: relative;
  display: block;
  white-space: nowrap;
}
.form-home-search {
  font-size: 0.875m;
}
.form-home-search input,
.form-home-search select {
  font-size: 0.875em !important;
}
.form-home-search p {
  font-size: 0.85714286em;
}
#FoundNoteWrapper {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.fld-checkbox {
  float: left;
  margin-right: 0.5em;
}
/* Site Header (additional styles can be found in navigation-responsive)
	- header-site: wrapper
	- header-layout-secondary: layout wrapper that groups secondary nav and search
	- site-logo: you know ;)
	- header-search: specialized styles for the header search form
-------------------------------------------------------------------------------*/
.site-logo {
  /* The logo changes size based on breakpoint */
  clear: both;
  display: block;
  max-width: 400px;
  width: 100%;
  padding: 2em 2em 1em 2em;
  text-align: center;
  margin: auto;
}
@media only screen and (min-width: 45em) {
  .site-logo {
    clear: none;
    float: left;
    padding: 2em 0 2em 2em;
    width: 30%;
  }
}
@media only screen and (min-width: 58em) {
  .site-logo {
    width: 50%;
  }
}
.site-logo img {
  height: auto;
  width: 100%;
}
.header-site:before,
.header-site:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.header-site:after {
  clear: both;
}
.header-layout-secondary {
  text-align: center;
  display: block;
  color: #004fa3;
  font-size: 2.5em;
  line-height: 0.83333em;
  padding-bottom: 1em;
  font-weight: 700;
}
.header-layout-secondary i {
  font-size: 0.667em;
  font-style: inherit;
}
.header-layout-secondary span {
  font-weight: 400;
  font-size: 0.533em;
}
@media only screen and (min-width: 45em) {
  .header-layout-secondary {
    float: right;
    text-align: right;
    padding: 1.067em 1.067em 1.067em 0;
    width: 70%;
  }
}
@media only screen and (min-width: 58em) {
  .header-layout-secondary {
    width: 50%;
  }
}
/* Site Navigation

nav-primary
nav-section
nav-breadcrumbs
nav-footer
nav-pagination

/* Primary Navigation
 -----------------------------------------------------------------------------------------------*/
[data-visually-hidden="true"] {
  display: none;
}
[data-visually-hidden="false"] {
  display: block;
}
.nav-primary {
  background: #3b4967;
  position: relative;
  clear: both;
  font-size: 1em;
  float: left;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
}
.nav-primary ul {
  float: none;
  clear: both;
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-primary ul .dropdown {
  position: absolute;
  z-index: 10;
  width: 100%;
  background: #ACBCC9;
  top: 100%;
  left: 0;
}
@media only screen and (min-width: 58em) {
  .nav-primary ul .dropdown {
    width: 15em;
  }
}
.nav-primary ul .dropdown li {
  line-height: 1.25em;
  min-height: 40px;
  border-right: 0;
  border-bottom: 1px solid #3f4e6d;
}
.nav-primary ul .dropdown li a {
  padding: 1em 1em 0.5em 1em;
  color: #262324;
  text-align: left;
}
.nav-primary ul .dropdown li a:hover,
.nav-primary ul .dropdown li a:focus {
  text-decoration: underline;
}
.nav-primary li {
  position: relative;
  display: inherit;
  align-items: stretch;
  border-right: 1px solid #3f4e6d;
}
.nav-primary li li {
  position: static;
}
.nav-primary li:last-child {
  border: 0;
}
.nav-primary li a {
  color: #fff;
  display: inherit;
  text-transform: uppercase;
  padding: 0.5em 0.5em;
  height: auto;
  text-align: center;
  align-items: center;
}
.nav-primary li a span {
  border-bottom: 2px solid transparent;
}
.nav-primary li a:hover span,
.nav-primary li a:focus span {
  border-bottom: 2px solid #2b9fd2;
}
.nav-primary li.is-active a {
  border-bottom: 2px solid #2b9fd2;
}
.nav-primary.is-collapsed-smallscreen {
  position: relative;
  height: 0;
  overflow: hidden;
  display: none;
}
/* Desktop width */
@media only screen and (min-width: 64.1em) {
  .nav-primary li a {
    padding: 1em 2em 0.5em 2em;
    text-align: center;
  }
  .nav-primary:before,
  .nav-primary:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
  }
  .nav-primary:after {
    clear: both;
  }
}
@media only screen and (max-width: 57.99em) {
  .nav-primary {
    display: block;
    position: absolute;
    z-index: 50;
  }
  .nav-primary ul {
    display: block;
  }
  .nav-primary ul li {
    display: block;
    width: 100%;
    border-right: 1px solid #3f4e6d;
  }
  .nav-primary ul li a {
    text-align: left;
    padding-left: 1em;
    line-height: 40px;
  }
  .nav-primary ul li a br {
    display: none;
  }
  .nav-primary ul li .dropdown {
    position: static;
    display: block;
    height: auto;
  }
  .single {
    border-bottom: 1px solid #4e6087;
  }
}
@media only screen and (max-width: 44.99em) {
  .nav-primary ul li li {
    border-bottom: #3f4e6d 1px solid;
    border-right: 0;
  }
  .nav-primary .dropdown li {
    width: 100%;
    display: block !important;
  }
}
/* Side or Section navigation for content pages
 -----------------------------------------------------------------------------------------------*/
.nav-section {
  width: 100%;
  float: none;
  font-size: 1em;
  margin-bottom: 1.5em;
}
.nav-section ul {
  float: none;
  clear: both;
  text-align: left;
  margin: 0;
  padding: 0;
}
.nav-section li {
  display: block;
  margin: 0;
  padding: 0;
}
.nav-section li a {
  display: block;
  padding: 0.5em 1em;
  color: #004fa3;
}
.nav-section li a:hover {
  color: #fff;
  background: #004fa3;
}
.nav-section li.is-active a {
  background-color: #ecf0f3;
  color: #000;
}
.nav-section li.is-active a:hover {
  color: #000 !important;
}
/* Breadcrumbs
 -----------------------------------------------------------------------------------------------*/
.nav-breadcrumbs {
  color: #000;
  padding: 0.25em 0 0.25em 0;
  font-size: 0.875em;
  margin-bottom: 2em;
}
.nav-breadcrumbs li {
  display: inline;
  border-right: 1px solid #262324;
  margin-left: 0.5em;
  padding-right: 0.5em;
}
.nav-breadcrumbs li:last-child {
  border-right: 0;
}
.nav-breadcrumbs li:first-child {
  margin-left: 0;
}
.nav-breadcrumbs a {
  color: #262324;
}
.nav-breadcrumbs a:hover,
.nav-breadcrumbs a:focus {
  color: #2b9fd2;
}
/* Footer nav
 -----------------------------------------------------------------------------------------------*/
.nav-footer ul {
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 100%;
}
.nav-footer li {
  float: left;
  display: inline;
  padding-right: 1.5em;
}
.nav-footer a {
  color: #262324;
  font-weight: 700;
  text-decoration: underline;
}
.nav-footer a:hover {
  color: #004fa3;
}
/* Related Content Navigation */
.related-content {
  margin-bottom: 1.5em;
}
.related-content h3 {
  border-bottom: 1px solid #ACBCC9;
  font-size: 1.333em;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0;
}
.related-content li {
  padding-top: 0.75em;
}
.related-content li a {
  border-bottom: 1px solid #000;
  color: #000;
}
.related-content li a:visited {
  color: #000;
}
.related-content li a:hover,
.related-content li a:focus {
  color: #fff;
  background: #004fa3;
}
.related-content li a:active {
  color: #fff;
  background: #004fa3;
}
/* Nav Pagination 
  -----------------------------------------------------------------------------------------------*/
.nav-pagination {
  clear: left;
  display: block;
  padding-top: 1em;
}
.nav-pagination ul {
  text-align: left;
  margin-left: 0;
}
.nav-pagination li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
  padding: 0 0.25em 0 0;
}
.nav-pagination li a {
  background: #004fa3;
  color: #fff;
  display: block;
  line-height: 1em;
  padding: 0.25em 0.75em 0.25em 0.75em;
  text-align: center;
  text-decoration: none;
}
.nav-pagination li a:hover,
.nav-pagination li a:focus {
  color: #fff;
  background: #00739e;
}
.nav-pagination li.is-active a {
  background: #00739e;
  color: #fff;
}
.btn {
  padding: 0.5em 1em;
  font-size: 1em;
  font-weight: normal;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 2px solid #fff;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
a.btn {
  color: #fff;
  text-decoration: none !important;
}
a.btn:hover,
a.btn:focus {
  color: #2b9fd2;
  text-decoration: none !important;
  border: 2px solid #2b9fd2;
}
.btn-alt {
  border: 2px solid #004fa3;
  display: inline-block;
  width: auto;
  padding: 0.5em 5em;
  color: #004fa3 !important;
}
.btn-alt:hover,
.btn-alt:focus {
  color: #2b9fd2 !important;
}
.btn-main {
  background: #004fa3;
  width: auto;
  display: inline-block;
  padding: 1em;
  margin: 1em 0;
  border: 0;
}
.btn-main:hover,
.btn-main:focus {
  background: #2b9fd2;
  color: #fff !important;
  border: 0 !important;
}
/* Primary Nav Drop Down Button - vissible on mobile, toggles the visibility of the primary navigation
------------------------------------------------------------------------------------------------------*/
.btn-nav-primary {
  background: #3b4967;
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 0.5em 5% 0.5em 5%;
  margin-bottom: 0!important;
  *margin-left: 0.3em;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: normal;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}
.btn-nav-primary:hover,
.btn-nav-primary:focus {
  color: #fff;
  background-color: #2b9fd2;
}
/* Skip to main content */
.skip-link {
  background: #004fa3;
  color: #fff !important;
  padding: 0.5em;
  left: 0;
  position: absolute;
  top: -100px;
  z-index: 101;
}
.skip-link:focus {
  top: 0;
}
/* Search btn
------------------------------------------------------------------------------------------------*/
.btn-search {
  margin-bottom: 0;
  padding: 0;
  height: 40px;
  width: 40px;
}
/* Icons 
------------------------------------------------------------------------------------------------*/
[class^="ico-"],
[class*=" ico-"] {
  display: inline-block;
  height: 36px;
  line-height: 1em;
  vertical-align: text-top;
  margin: 0 0 0 0.5em;
  width: 36px;
}
.ico-menu {
  background: url(/assets/images/interface/nav-site-handle.png) no-repeat 0 0;
  cursor: pointer;
  vertical-align: middle;
}
/* Flexbox helper functions */
.displayflex {
  -js-display: flex;
  display: flex;
}
.flexwrap {
  flex-wrap: wrap;
}
.flex-justify-space-between {
  justify-content: space-between;
}
.flex-justify-space-around {
  justify-content: space-around;
}
.flex-align-center {
  align-items: center;
}
.flex-align-start {
  align-items: flex-start;
}
.flex-align-end {
  align-items: flex-end;
}
.flex-justify-center {
  justify-content: center;
}
.flex-align-stretch {
  align-items: stretch;
}
.flex-align-content-stretch {
  align-content: stretch;
}
.flex-align-self-center {
  align-self: center;
}
.flex-align-self-stretch {
  align-self: stretch;
}
.flex-direction-row {
  flex-direction: row;
}
.flex-direction-column {
  flex-direction: column;
}
.flex-direction-row-reverse {
  flex-direction: row-reverse;
}
.flex-direction-column-reverse {
  flex-direction: column-reverse;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .hero-modules.displayflex {
    display: inline-block !important;
    width: 100%;
  }
}
.hero-modules a {
  border-right: 1px solid #fff;
}
.hero-modules a:last-child {
  border-right: 0;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .hero-modules a {
    float: left;
    width: 25%;
  }
  .hero-modules a:last-child {
    border-right: 2px solid transparent;
  }
}
.hero-modules .mod {
  width: 100%;
  position: relative;
}
.hero-modules .mod img {
  line-height: 0;
  display: inherit;
}
.hero-modules .mod .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 79, 163, 0.8);
  text-align: center;
  color: #fff;
  padding: 1em;
  font-size: 1.25em;
}
@media only screen and (min-width: 45em) {
  .hero-modules .mod .caption {
    font-size: 1.5em;
  }
}
@media only screen and (min-width: 43em) {
  .hero-modules .mod .caption {
    height: 28%;
    padding: 1.75vw 0 0 0;
  }
}
@media only screen and (max-width: 42.99em) {
  .hero-modules.displayflex {
    flex-direction: column;
  }
  .hero-modules .mod {
    width: 100%;
  }
}
.page-heading {
  background: #fff;
  text-align: center;
  z-index: 99;
  padding: 2em 0 0.1em 0;
}
@media only screen and (min-width: 43em) {
  .page-heading {
    margin-top: -5vw;
  }
}
.modules {
  margin-top: 2em;
}
.modules .mod {
  padding: 2.5em;
  color: #fff;
  width: 100%;
  position: relative;
  text-align: center;
}
@media only screen and (min-width: 45em) {
  .modules .mod {
    width: 32%;
  }
}
@media only screen and (min-width: 64.1em) {
  .modules .mod {
    text-align: left;
  }
}
.modules .mod img {
  margin: auto;
}
@media only screen and (min-width: 64.1em) {
  .modules .mod img {
    float: left;
  }
}
@media only screen and (min-width: 64.1em) and (max-width: 70em) {
  .modules .mod img {
    width: 15%;
  }
}
@media only screen and (min-width: 64.1em) {
  .modules .mod h2 {
    float: left;
    margin-left: 0.75em;
  }
}
.modules .mod p {
  margin-top: 1em;
  margin-bottom: 3em;
}
@media only screen and (min-width: 37em) {
  .modules .mod p {
    margin-bottom: 5em;
  }
}
.modules .mod.primary {
  background: #004fa3;
}
.modules .mod.secondary {
  background: #3b4967;
}
.modules .mod.tertiary {
  background: #5a7992;
}
.modules .mod span {
  position: absolute;
  bottom: 2.5em;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2.5em;
}
@media only screen and (max-width: 44.99em) {
  .modules.displayflex {
    flex-direction: column;
  }
}
.clients {
  background: #fff;
  margin-top: 2em;
}
.clients h3 {
  font-size: 2em;
  line-height: 1.25em;
  text-align: center;
}
@media only screen and (min-width: 43em) {
  .clients h3 {
    font-size: 3em;
  }
}
@media only screen and (max-width: 30em) {
  .clients h3 {
    font-size: 1.5em;
  }
}
.clients .logo {
  margin: 0.5%;
  align-items: center;
  display: inherit;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/@cStripe1+0,f8f8f9+100 */
  background: #ecf0f3;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ecf0f3 0%, #f8f8f9 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@cStripe1', endColorstr='@cStripe2', GradientType=0);
  /* IE6-9 */
  width: 100%;
  text-align: center;
  padding: 3em 0;
  box-sizing: border-box;
}
@media only screen and (min-width: 37em) {
  .clients .logo {
    width: 30%;
  }
}
@media only screen and (min-width: 45em) {
  .clients .logo {
    width: 24%;
  }
}
@media only screen and (min-width: 58em) {
  .clients .logo {
    width: 15.6666667%;
  }
}
.clients .logo img {
  width: 65%;
  margin: auto;
}
.success-story {
  background: #3b4967;
  margin: 2em 0;
  color: #fff;
  position: relative;
}
.success-story .copy {
  width: 100%;
  padding: 2.5em;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .success-story .copy {
    width: 50%;
    float: left;
  }
}
@media all and (max-width: 44.99em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .success-story .copy {
    width: 100%;
  }
}
@media only screen and (max-width: 30em) {
  .success-story .copy {
    padding: 1em;
  }
}
.success-story .copy h4,
.success-story .copy .h4 {
  font-style: italic;
  padding-bottom: 0.25em;
  border-bottom: 2px solid #2b9fd2;
  display: inline-block;
  zoom: 1;
  *display: inline;
  font-size: 1.75em;
  margin-bottom: 4.25vw;
  font-size: 1.35em;
  margin: 0 0 0.75em 0;
}
.success-story .btn {
  width: 100%;
}
@media only screen and (min-width: 45em) {
  .success-story .btn {
    width: 75%;
  }
}
@media only screen and (max-width: 44.99em) {
  .success-story .displayflex {
    flex-direction: column-reverse;
  }
}
.success-story .banners img {
  width: 100%;
}
.success-story .banners {
  height: 50vh;
}
@media only screen and (min-width: 45em) {
  .success-story .banners {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    width: 100%;
    height: auto;
  }
  .success-story .banners > img {
    position: absolute;
    top: 50%;
    min-height: 100%;
    display: block;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    min-width: 100%;
    max-width: inherit;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .success-story.displayflex {
    display: inline-block !important;
    width: 100%;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .success-story .banners {
    width: 50%;
  }
  .success-story .banners > img {
    top: 0;
    left: 0;
  }
}
@media all and (max-width: 44.99em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .success-story .banners {
    width: 100%;
  }
}
.nav-tabs {
  text-align: center;
}
@media only screen and (min-width: 45em) {
  .nav-tabs {
    position: absolute;
    bottom: 1.5em;
    left: 2.25em;
  }
}
.nav-tabs ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.nav-tabs li {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  border: 2px solid #2b9fd2;
  background: transparent;
  cursor: pointer;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-right: 0.3em;
}
.nav-tabs li:hover,
.nav-tabs li:focus {
  background: #2b9fd2;
}
.nav-tabs li.is-active {
  background: #2b9fd2;
}
.section-header {
  width: 100%;
}
@media only screen and (max-width: 57.99em) {
  .section-header.displayflex {
    flex-direction: column;
  }
}
.section-header .copy {
  background: url(/assets/images/interface/bkg-gradient.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  padding: 1em 2em;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .section-header .copy {
    min-width: 50%;
    max-width: 690px;
  }
}
@media only screen and (min-width: 58em) {
  .section-header .copy div {
    max-width: 690px;
    float: right;
  }
}
.section-header .copy h1,
.section-header .copy .h1 {
  font-size: 2.5em;
}
@media only screen and (max-width: 30em) {
  .section-header .copy h1,
  .section-header .copy .h1 {
    font-size: 1.5em;
  }
}
.section-header .copy h2,
.section-header .copy .h2 {
  margin-bottom: 0.5em;
}
.section-header .copy h3,
.section-header .copy .h3 {
  margin-bottom: 0.5em;
  font-weight: 700;
  font-size: 1.75em;
  margin: 0 0 0.75em 0;
  font-family: 'Open Sans', sans-serif;
}
@media only screen and (max-width: 57.99em) {
  .section-header .banners img {
    width: 100%;
  }
  .section-header .btn-main {
    width: 100%;
  }
}
@media only screen and (min-width: 58em) {
  .section-header .banners {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    width: 100%;
    height: auto;
  }
  .section-header .banners > img {
    position: absolute;
    top: 50%;
    min-height: 100%;
    display: block;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    min-width: 100%;
    max-width: inherit;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .section-header .banners {
    min-width: 50%;
  }
}
.colour-block {
  background: #3b4967;
}
@media only screen and (max-width: 44.99em) {
  .colour-block {
    flex-direction: column-reverse;
  }
}
.colour-block .banners {
  line-height: 0;
  height: 50vh;
}
@media only screen and (min-width: 45em) {
  .colour-block .banners {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    width: 100%;
    height: auto;
  }
  .colour-block .banners > img {
    position: absolute;
    top: 50%;
    min-height: 100%;
    display: block;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    min-width: 100%;
    max-width: inherit;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .colour-block .banners {
    width: 50%;
    float: left;
  }
  .colour-block .banners > img {
    top: 0;
    left: 0;
  }
}
@media all and (max-width: 44.99em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .colour-block .banners {
    width: 100%;
    max-height: 100%;
    overflow: hidden;
  }
}
.colour-block .copy {
  width: 100%;
  color: #fff;
  padding: 3em;
}
@media all and (max-width: 44.99em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .colour-block .copy {
    width: 100%;
  }
}
.colour-block .copy h2 {
  font-size: 3.5em;
  margin-bottom: 1em;
}
@media only screen and (max-width: 37em) {
  .colour-block .copy h2 {
    font-size: 2.5em;
  }
}
.colour-block .copy-white {
  color: #fff;
  padding: 3em;
}
@media only screen and (min-width: 58em) {
  .colour-block .btn {
    width: 50%;
  }
}
.bullets {
  list-style: disc;
  margin-left: 1em;
}
.bullets li {
  padding-bottom: 0.5em;
}
.mod-header {
  color: #004fa3;
  font-size: 2.5em !important;
  line-height: 1.15em;
  margin-top: 0.5em;
  font-weight: bold;
}
.products {
  margin-top: 2em;
}
.products h2,
.products .h2 {
  font-style: italic;
  font-weight: 700;
  border-bottom: 2px solid #2b9fd2;
  display: inline-block;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 37em) {
  .products h2,
  .products .h2 {
    margin-left: 1em;
    margin-right: 1em;
  }
}
.products .prod-mod {
  background: #fff;
  width: 100%;
  margin-bottom: 1.5em;
}
@media only screen and (min-width: 37em) {
  .products .prod-mod {
    width: 49%;
  }
}
@media only screen and (min-width: 58em) {
  .products .prod-mod {
    width: 32%;
  }
}
.products .prod-mod .banner {
  line-height: 0;
}
.products .prod-mod .banner img {
  width: 100%;
}
.products .prod-mod .copy {
  background: #fff;
  padding: 2em;
}
.products .prod-mod .copy h3 {
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
}
.products .prod-mod .copy ul {
  list-style: disc;
  margin: 0 0 1em 1em;
}
@media only screen and (min-width: 37em) and (max-width: 87.5em) {
  .products {
    padding-left: 2em;
    padding-right: 2em;
  }
}
.case h2 {
  font-style: italic;
  font-weight: 700;
  border-bottom: 2px solid #2b9fd2;
  display: inline-block;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 37em) {
  .case h2 {
    margin-left: 1em;
    margin-right: 1em;
  }
}
.case .copy {
  background: #fff;
  margin-bottom: 2em;
  padding: 2em;
}
.clients-single .logo {
  width: 100%;
}
@media only screen and (min-width: 37em) {
  .clients-single .logo {
    width: 49%;
  }
}
@media only screen and (min-width: 58em) {
  .clients-single .logo {
    width: 24%;
  }
}
.clients-five .logo {
  width: 100%;
}
@media only screen and (min-width: 37em) {
  .clients-five .logo {
    width: 49%;
  }
}
@media only screen and (min-width: 58em) {
  .clients-five .logo {
    width: 19%;
  }
}
@media only screen and (min-width: 45em) {
  .contact-right {
    float: right;
    width: 50%;
  }
}
.contact-right iframe {
  max-width: 100%;
}
@media only screen and (min-width: 45em) {
  .contact-left {
    float: left;
    width: 50%;
  }
}
/* Contact Form Block */
.contact-form {
  background: #004fa3;
  padding: 1em;
  box-sizing: border-box;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .displayflex {
    display: block !important;
  }
}
@media only screen and (min-width: 43em) {
  .contact-form {
    padding: 2.5em;
  }
}
.contact-form h3,
.contact-form .h3,
.contact-form h2.h3 {
  color: #fff;
  text-align: center;
  font-size: 2.5em;
  line-height: 1.15em;
}
@media only screen and (min-width: 43em) {
  .contact-form h3,
  .contact-form .h3,
  .contact-form h2.h3 {
    font-size: 3em;
    line-height: 1.5em;
  }
}
@media only screen and (max-width: 37em) {
  .contact-form h3,
  .contact-form .h3,
  .contact-form h2.h3 {
    font-size: 2em;
  }
}
.contact-form .h4 {
  color: #000;
  text-align: left;
}
.contact-form .contacts {
  color: #fff;
  font-size: 1.25em;
  width: 33.3333333%;
  padding-right: 2%;
  box-sizing: border-box;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .contacts {
    float: left;
  }
}
.contact-form .contacts .profile {
  width: 40%;
  box-sizing: border-box;
}
@media only screen and (min-width: 64.1em) {
  .contact-form .contacts .profile {
    padding-right: 1em;
  }
}
.contact-form .contacts .profile img {
  width: 100%;
}
@media all and (min-width: 64.1em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .contacts .profile {
    float: left;
  }
}
.contact-form .contacts .info {
  width: 100%;
}
@media only screen and (min-width: 64.1em) {
  .contact-form .contacts .info {
    width: 60%;
  }
}
@media all and (min-width: 64.1em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .contacts .info {
    float: left;
  }
}
.contact-form .contacts .title {
  font-size: 0.833333em;
  padding-bottom: 1.5em;
  display: block;
}
.contact-form .contacts a {
  color: #fff;
}
.contact-form .contacts a:hover,
.contact-form .contacts a:focus {
  color: #2b9fd2;
}
.contact-form .contacts h5,
.contact-form .contacts .h5,
.contact-form .contacts h3.h5 {
  margin-bottom: 0.1em;
  font-size: 1.125em;
  margin: 0 0 0.1rem 0;
  font-weight: 700;
}
.contact-form .contacts .contact:first-child {
  margin-bottom: 1em;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .contacts .info {
    float: left;
  }
}
.contact-form .contacts p {
  font-size: 1em;
}
@media only screen and (max-width: 64.1em) {
  .contact-form .contacts .displayflex {
    flex-direction: column;
  }
  .contact-form .contacts .profile {
    text-align: center;
    margin: auto;
  }
  .contact-form .contacts .info {
    text-align: center;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .contacts .displayflex {
    display: block !important;
  }
}
.contact-form .form {
  width: 66.6666667%;
  background: #fff;
  padding: 2em;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .form {
    float: right;
  }
}
.contact-form .form h4,
.contact-form .form .h4,
.contact-form .form h3.h4 {
  font-size: 1.75em;
  /*position: relative;
            .inlineblock();
            &:before{
                 content : "";
                  position: absolute;
                  left    : 0;
                  bottom  : 0;
                  height  : 1px;
                  width   : 60%;  
                  border-bottom:2px solid @cAccent1;
            }*/
}
@media only screen and (min-width: 58em) {
  .contact-form .form .col-1 {
    width: 40%;
    padding-right: 1.5em;
    box-sizing: border-box;
  }
}
@media all and (min-width: 58em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .form .col-1 {
    float: left;
  }
}
.contact-form .form .col-2 {
  position: relative;
}
@media only screen and (min-width: 58em) {
  .contact-form .form .col-2 {
    width: 60%;
  }
}
@media all and (min-width: 58em) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .form .col-2 {
    float: left;
  }
}
@media only screen and (max-width: 57.99em) {
  .contact-form .form .displayflex {
    flex-direction: column;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contact-form .form .displayflex {
    display: block !important;
  }
}
@media only screen and (max-width: 44.99em) {
  .contact-form .displayflex {
    flex-direction: column;
  }
  .contact-form .form,
  .contact-form .contacts,
  .contact-form .form .col-1,
  .contact-form .form .col-2 {
    width: 100%;
  }
}