﻿@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* Transition and animation mixins */
/* Border radius mixins */
/* Border radius mixin */
/* Box shadow mixins */
/* Mixin for keeping mobile and desktop navs separate when they look completely different */
/* media query mixins that use breakpoints set in constants.scss */
/* Flexbox mixins */
/* Form mixins */
/* Miscellaneous mixins */
/* The fonts will need updating to use the appropriate webfonts. */
body {
  font-family: Helvetica, Arial, sans-serif;
}

html {
  font-size: 16px;
  font-weight: 100;
  line-height: 1.5rem;
  height: 100%;
  min-height: 600px;
}
@media only screen and (max-width: 568px) {
  html {
    font-size: 14px;
  }
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
}

h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 44px;
  line-height: 2.75rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 568px) {
  h1 {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 34px;
    line-height: 2.125rem;
  }
}

h2, h3 {
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 32px;
  line-height: 2rem;
}

em {
  font-family: Helvetica, Arial, sans-serif;
}

.material-icons {
  vertical-align: top;
}

.file-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/icons/File_Icon.svg);
  background-size: auto 20px;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: top;
  transition: opacity 0.2s ease;
}
.file-icon.white {
  background-image: url(../images/icons/File_Icon_Outline_White.png);
}
.file-icon.large {
  width: 57px;
  height: 57px;
  background-size: auto 57px;
}

/* SVG */
#file-icon {
  width: 47px;
  height: 60px;
  vertical-align: bottom;
  transition: fill 0.3s ease;
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgb(255, 255, 255);
}

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.5);
}

/*** Look at "include(spanX)" instead of using span class names ***/
.row {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: block;
  width: 100%;
  /* Can't decide whether this will be useful, or will cause issues */
}
.row [class^=span] {
  float: left;
  position: relative;
  margin: 0 1.25%;
}
.row .expand {
  margin: 0;
}
.row .expand.double {
  padding-right: 1.25%;
}
.row .expand.double + [class^=span] {
  margin-left: 0;
}
@media only screen and (min-width: 569px) {
  .row.vertical-centre {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  html.no-flexbox .row.vertical-centre {
    display: block;
  }
  html.no-flexbox .row.vertical-centre [class^=span] {
    display: table-cell;
    vertical-align: middle;
    float: none;
    padding: 0 1.25%;
  }
  html.no-flexbox .row.vertical-centre [class^=span] img {
    width: 100%;
  }
}
.row .text-right {
  text-align: right;
}
.row .text-centre {
  text-align: center;
}
.row .inner-row {
  margin-left: -2.6%;
}
.row .inner-row [class^=span] {
  margin-right: 0;
  margin-left: 2.6%;
}
.row [class*=border-left] {
  margin-left: 0;
  padding-left: 1.25%;
}
@media only screen and (min-width: 569px) {
  .row.gapless {
    padding: 0 1.25%;
  }
}
.row.gapless [class^=span] {
  margin: 0;
}
@media only screen and (min-width: 569px) {
  .row.gapless .span4 {
    width: 33.3333333333%;
  }
}
@media only screen and (max-width: 568px) {
  .row.gapless [class^=span] {
    width: 100% !important;
    margin: 0 !important;
  }
}
.row .span1 {
  width: 5.8333333333%;
}
.row .span1.expand {
  width: 8.3333333333%;
}
.row .span2 {
  width: 14.1666666667%;
}
.row .span2.expand {
  width: 16.6666666667%;
}
.row .span3 {
  width: 22.5%;
}
.row .span3.expand {
  width: 25%;
}
.row .span4 {
  width: 30.8333333333%;
}
.row .span4.expand {
  width: 33.3333333333%;
}
.row .span5 {
  width: 39.1666666667%;
}
.row .span5.expand {
  width: 41.6666666667%;
}
.row .span6 {
  width: 47.5%;
}
.row .span6.expand {
  width: 47.5%;
}
.row .span7 {
  width: 55.8333333333%;
}
.row .span7.expand {
  width: 58.3333333333%;
}
.row .span8 {
  width: 64.1666666667%;
}
.row .span8.expand {
  width: 66.6666666667%;
}
.row .span9 {
  width: 72.5%;
}
.row .span9.expand {
  width: 75%;
}
.row .span10 {
  width: 80.8333333333%;
}
.row .span10.expand {
  width: 83.3333333333%;
}
.row .span11 {
  width: 89.1666666667%;
}
.row .span11.expand {
  width: 91.6666666667%;
}
.row .span12 {
  width: 97.5%;
}
.row .span12.expand {
  width: 100%;
}
.row .offset1 {
  margin-left: 9.5833333333%;
}
.row .offset2 {
  margin-left: 17.9166666667%;
}
.row .offset3 {
  margin-left: 26.25%;
}
.row .offset4 {
  margin-left: 34.5833333333%;
}
.row .offset5 {
  margin-left: 42.9166666667%;
}
.row .offset6 {
  margin-left: 51.25%;
}
.row .offset7 {
  margin-left: 59.5833333333%;
}
.row .offset8 {
  margin-left: 67.9166666667%;
}
.row .offset9 {
  margin-left: 76.25%;
}
.row .offset10 {
  margin-left: 84.5833333333%;
}
.row .offset11 {
  margin-left: 92.9166666667%;
}
.row:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

@media only screen and (max-width: 568px) {
  section .row [class^=span] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  section .row [class*=offset] {
    margin-left: 0;
  }
}
/*** BUTTON Styles ***/
.button {
  display: inline-block;
  padding: 12px 40px;
  font-size: 18px;
  line-height: 24px;
  max-height: 192px;
  background-color: #331471;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  transition: background-color 0.2s ease;
  float: right;
  border-radius: 5px;
}
.button i {
  transition: transform 0.3s ease;
}
.button:hover {
  background-color: #42d66d;
}
.button:hover i {
  transform: translateY(-1px);
}
.button.clear {
  background-color: transparent;
  transition: color 0.2s ease;
  border: 1px solid #2c2c29;
  color: #2c2c29;
  padding: 12px;
}
.button.clear:hover {
  background-color: transparent;
  color: #331471;
}
.button i {
  margin-right: 5px;
  vertical-align: bottom;
}

.smallbutton {
  display: inline-block;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 24px;
  max-height: 192px;
  min-width: 150px;
  height: 42px;
  background-color: #331471;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border-radius: 5px;
}
.smallbutton:hover {
  background-color: #42d66d;
}
.smallbutton.clear {
  background-color: transparent;
  transition: color 0.2s ease;
  border: 1px solid #2c2c29;
  color: #2c2c29;
  padding: 12px;
}
.smallbutton.clear:hover {
  background-color: transparent;
  color: #331471;
}
.smallbutton i {
  margin-right: 2px;
  vertical-align: bottom;
}

.rich-text {
  /* We're using an inner-outer file structure here so that the umbraco text 
  	editor in the CMS can use a different scss file which imports the inner 
  	file but not the outer file. richtext-rte will be used by the site as well
  	as the CMS, the code here will only be used by the site, not the cms. So code
  	being used by the CMS text editor should NOT be put here
  */
  /* We're using an inner-outer file structure here so that the umbraco text 
  	editor in the CMS can use a different scss file which imports the inner 
  	file but not the outer file. This file will be used by the site as well
  	as the CMS, richtext.scss will only be used by the site, not the cms
  */
  /* TODO: Add blockquote styling */
}
.rich-text > *:last-child {
  margin-bottom: 0;
}
.rich-text .left-float {
  margin: 0 10px 10px 0;
}
.rich-text .right-float {
  margin: 0 0 10px 10px;
}
.rich-text p, .rich-text li {
  font-size: 16px;
  font-size: 1rem;
  line-height: 26px;
  line-height: 1.625rem;
  font-weight: 100;
}
.rich-text p a, .rich-text li a {
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.rich-text p a:hover, .rich-text li a:hover {
  text-decoration: underline;
}
.rich-text p {
  margin-bottom: 30px;
}
.rich-text img {
  margin-bottom: 30px;
  width: 100%;
  height: auto;
  border-left: 8px solid #331471;
}
.rich-text table {
  width: 100%;
  display: block;
  overflow: auto;
  overflow-y: hidden;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 20px 0;
}
.rich-text table caption {
  font-weight: bold; /* font-family Univers Bold */
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 26px;
  line-height: 1.625rem;
  margin-bottom: 30px;
  text-align: left;
}
.rich-text table caption a {
  color: inherit;
  font-family: Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.rich-text table caption a:hover {
  color: #331471;
}
@media only screen and (max-width: 568px) {
  .rich-text table caption {
    margin-bottom: 15px;
    display: block;
  }
  .rich-text table caption a {
    display: block;
  }
}
.rich-text table th, .rich-text table td {
  padding: 5px 15px;
}
.rich-text table th:first-child, .rich-text table td:first-child {
  padding-left: 0;
}
.rich-text table th:last-child, .rich-text table td:last-child {
  padding-right: 0;
}
.rich-text table thead th {
  text-align: left;
  color: #2c2c29;
  font-weight: bold; /* font-family Univers Bold */
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  line-height: 1.125rem;
  text-transform: uppercase;
}
.rich-text table tbody td {
  font-weight: 100;
  /* font-family: Univers Light */
}
.rich-text table .button {
  padding: 8px 12px 7px 12px;
  font-size: 14px;
  line-height: 18px;
  min-width: 130px;
  text-align: center;
}
@media (min-width: 861px) {
  .rich-text table.document-table th, .rich-text table.document-table td {
    width: 10%;
  }
}
@media (max-width: 860px) {
  .rich-text table.document-table thead {
    display: none;
  }
  .rich-text table.document-table tr {
    display: block;
    margin-bottom: 20px;
  }
  .rich-text table.document-table tr:last-child {
    margin-bottom: 0;
  }
  .rich-text table.document-table td {
    display: inline-block;
    padding-left: 0;
    padding-right: 15px;
  }
  .rich-text table.document-table td:first-child, .rich-text table.document-table td:last-child {
    display: block;
  }
  .rich-text table.document-table td[title] {
    font-size: 12px;
    line-height: 16px;
    padding-bottom: 0;
    text-transform: uppercase;
  }
  .rich-text table.document-table td[title]:before {
    content: attr(title);
    color: #2c2c29;
    margin-right: 3px;
    font-weight: bold;
  }
  .rich-text table.document-table td:last-child {
    padding-top: 20px;
  }
  .rich-text table.document-table td:first-child {
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
  }
}
@media (min-width: 981px) {
  .rich-text table.manage-docs th:last-child, .rich-text table.manage-docs td:last-child {
    width: 20%;
    min-width: 220px;
  }
  .rich-text table.manage-docs th .button, .rich-text table.manage-docs td .button {
    min-width: 100px;
  }
}
.rich-text table.manage-users th, .rich-text table.manage-users td {
  width: 25%;
}
.rich-text table.manage-users th:last-child, .rich-text table.manage-users td:last-child {
  min-width: 429px;
}
.rich-text table.manage-users th:last-child .button, .rich-text table.manage-users td:last-child .button {
  margin-left: 5px;
}
@media all and (max-width: 980px) {
  .rich-text table.manage-users thead {
    display: none;
  }
  .rich-text table.manage-users tr {
    display: block;
    margin-bottom: 20px;
  }
  .rich-text table.manage-users tr:last-child {
    margin-bottom: 0;
  }
  .rich-text table.manage-users th, .rich-text table.manage-users td {
    width: auto;
  }
  .rich-text table.manage-users th:last-child, .rich-text table.manage-users td:last-child {
    min-width: 0;
    padding-top: 5px;
  }
  .rich-text table.manage-users th:last-child .button, .rich-text table.manage-users td:last-child .button {
    margin-right: 5px;
    margin-left: 0;
    margin-bottom: 10px;
  }
  .rich-text table.manage-users td {
    display: block;
    padding-left: 0;
    padding-right: 15px;
  }
}
.rich-text ul, .rich-text ol {
  margin-bottom: 20px;
}
.rich-text ul {
  list-style: disc outside;
  padding-left: 1.5em;
}
.rich-text ol {
  list-style: decimal outside;
  padding-left: 1.5em;
}
.rich-text li {
  padding-bottom: 7px;
}
@media (min-width: 981px) {
  .rich-text li {
    max-width: 80%;
  }
}
.rich-text blockquote {
  position: relative;
}
.rich-text blockquote:before, .rich-text blockquote:after {
  content: "“";
  position: absolute;
  font-style: normal;
  top: 0;
  left: 0;
}
.rich-text blockquote:after {
  content: "”";
}
.rich-text blockquote:after {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}

/*** Hero Banner Styles ***/
.hero-area {
  min-height: 50vh;
  background-color: #989898;
}

/*** Global and page-specific form style ***/
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px 0;
  position: relative;
}

label.hidden, legend.hidden {
  visibility: hidden;
  height: 0 !important;
  width: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
}

legend {
  font-weight: bold;
  color: #2c2c29;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 22px;
  line-height: 1.375rem;
}
legend:not(.hidden) > div {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
@media all and (max-width: 980px) {
  legend:not(.hidden) > div {
    margin-bottom: 10px;
  }
}
legend .num {
  font-weight: 100;
  text-align: center;
  margin-right: 10px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 34px;
  display: inline-block;
  border: 1px solid #2c2c29;
  border-radius: 100%;
}

label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
  font-weight: bold;
  color: #2c2c29;
}
label.required:after {
  content: "*";
  color: #db0a16;
  margin-left: 5px;
  font-weight: bold;
}

.form-error {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  color: #fff;
  font-style: italic;
  text-shadow: 0 0 0 3px #2c2c29;
}
.form-error:before, .form-error:after {
  content: "*";
  color: #db0a16;
  font-weight: bold;
}

button {
  border: none;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  color: #2c2c29;
  background-color: #fff;
  font-size: 16px;
  line-height: 20px;
  border: 1px solid #2c2c29;
  border-radius: 5px;
  box-shadow: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-bottom: 5px;
}
input[type=search],
select[type=search],
textarea[type=search] {
  box-sizing: border-box;
  -webkit-appearance: none;
  border-radius: 0;
}
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #989898;
}
input:-moz-placeholder,
select:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 18- */
  color: #989898;
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
  color: #989898;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #989898;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
input:not([readonly=readonly]):focus,
select:not([readonly=readonly]):focus,
textarea:not([readonly=readonly]):focus {
  outline: 1px solid #331471;
  border-color: #331471;
  color: #331471;
}
input[readonly=readonly],
select[readonly=readonly],
textarea[readonly=readonly] {
  background-color: #dddddd;
  color: #666666;
  cursor: not-allowed;
}
input[disabled=disabled],
select[disabled=disabled],
textarea[disabled=disabled] {
  background-color: #dddddd;
  color: #666666;
  cursor: not-allowed;
}
input[type=radio], input[type=checkbox],
select[type=radio],
select[type=checkbox],
textarea[type=radio],
textarea[type=checkbox] {
  height: auto;
}
input[type=submit],
select[type=submit],
textarea[type=submit] {
  width: auto;
  border: none;
}
input.error,
select.error,
textarea.error {
  border-color: #db0a16;
  background-color: #fbe7e8;
}

.input-wrap .edit {
  position: absolute;
  right: 8px;
  top: 12px;
  font-size: 16px;
  line-height: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  cursor: pointer;
}

.input-wrap {
  position: relative;
}

input.mb-0, label.mb-0 {
  margin-bottom: 0;
}
input.mt-20, label.mt-20 {
  margin-top: 20px;
}

textarea {
  width: 100%;
  max-height: 129px;
}

.select-wrapper,
select {
  width: 100%;
}

select {
  padding: 10px 12px 11px 12px;
  cursor: pointer;
  appearance: auto;
  text-transform: uppercase;
}

.select-wrapper {
  position: relative;
}
.select-wrapper label {
  visibility: hidden;
  height: 0;
  margin: 0;
}
.select-wrapper .select-arrow {
  position: absolute;
  right: 5px; /* for border */
  bottom: 6px; /* for border */
  width: 26px;
  height: 26px; /* height of select-wrapper, minus 2 for border */
  background-color: #fff;
  pointer-events: none;
  /** NOTE: be sure to watch out for changes in heights based on changes in typograhpy sizes **/
}
.select-wrapper .select-arrow:before {
  content: "\f107";
  vertical-align: middle;
  width: 100%;
  color: #2c2c29;
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 26px;
  line-height: 1.625rem;
  /* line-height is height of select-arrow */
}
@media only screen and (max-width: 568px) {
  .select-wrapper .select-arrow {
    bottom: 21px;
  }
}
html.no-webgl.no-flexboxlegacy .select-wrapper .select-arrow {
  display: none;
}

input[type=radio],
input[type=checkbox] {
  position: absolute;
  left: -9999px;
}

input[type=file] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}
input[type=file] + input[type=text] {
  position: relative;
  max-width: 370px;
  display: inline-block;
  vertical-align: top;
  margin-right: 14px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.file-input {
  display: flex;
}
@media all and (max-width: 420px) {
  .file-input {
    display: block;
  }
  .file-input .button {
    display: block;
    margin-top: 10px;
    text-align: center;
  }
}

.file-info span {
  font-size: 14px;
  line-height: 24px;
  margin-right: 30px;
  display: inline-block;
}
.file-info span span {
  margin-right: 0;
}
.file-info .file-type,
.file-info .file-size {
  text-transform: uppercase;
}
@media (max-width: 1240px) {
  .file-info.flex {
    display: block;
  }
  .file-info [class^=span] {
    width: 97.5%;
    margin-bottom: 20px;
  }
  .file-info [class^=span]:last-child {
    margin-bottom: 0;
  }
}
@media all and (max-width: 420px) {
  .file-info span {
    margin-bottom: 5px;
  }
}

.radio-wrapper label,
.checkbox-wrapper label {
  position: relative;
  padding-left: 30px;
}
.radio-wrapper label:before,
.checkbox-wrapper label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 3px;
  left: 0;
  background-color: #fff;
}
.radio-wrapper.inline label,
.checkbox-wrapper.inline label {
  display: inline-block;
  margin-right: 30px;
}

.radio-wrapper label:before {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  border: 1px solid #dbdbdb;
}
.radio-wrapper input[type=radio]:checked + label:before,
.radio-wrapper input[type=radio]:checked + input + label:before {
  background-color: #dbdbdb;
}

.checkbox-wrapper label:before {
  content: "";
  color: #dbdbdb;
  border: 1px solid #dbdbdb;
  font-size: 18px;
  line-height: 17px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}
.checkbox-wrapper input[type=checkbox]:checked + label:before,
.checkbox-wrapper input[type=checkbox]:checked + input + label:before {
  content: "\f14a";
}
html.no-flexboxlegacy .checkbox-wrapper label:before {
  top: 11px;
}

.search-form {
  width: 100%;
}
@media (min-width: 981px) {
  .search-form {
    max-width: 400px;
  }
}
@media all and (max-width: 980px) {
  .search-form {
    padding-top: 10px;
    clear: both;
  }
}
.search-form fieldset {
  margin-bottom: 0;
  position: relative;
}
.search-form input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 12px 50px 17px 0;
  margin-bottom: 0;
}
.search-form input[type=search] {
  background-color: transparent;
}
.search-form input:focus, .search-form input:active {
  border-bottom-color: #331471;
}
.search-form button {
  position: absolute;
  width: 41px;
  height: 41px;
  right: 0;
  top: 0;
  border-radius: 100%;
  border: 1px solid #2c2c29;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.search-form button .material-icons {
  transition: color 0.2s ease;
  /* position fix due to the icon not being centred on iOS */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.search-form button:focus, .search-form button:active, .search-form button:hover {
  background-color: #331471;
  border-color: #331471;
}
.search-form button:focus .material-icons, .search-form button:active .material-icons, .search-form button:hover .material-icons {
  color: #fff;
}

/* Predictive Search styles */
.predictive-search {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: absolute;
  z-index: 2;
  /*display: none;*/
}
.predictive-search .category {
  background-color: #fff;
}
.predictive-search .category .heading {
  display: block;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  font-weight: bold; /* Univers Bold */
  padding: 13px 20px;
  margin: 0;
  background-color: #f3f3f3;
  color: #a7a7a7;
}
.predictive-search .category ul {
  padding: 15px 20px;
  margin: 0;
  list-style: none;
}
.predictive-search .category ul a {
  position: relative;
  display: block;
  padding: 8px 0;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  color: #2c2c29;
  font-weight: 100; /* Univers Light */
  transition: color 0.3s ease;
}
.predictive-search .category ul a.download {
  padding-right: 30px;
}
.predictive-search .category ul a:hover {
  color: #331471;
}
.predictive-search .category ul a i {
  position: absolute;
  top: 6px;
  right: 0;
}

/* Standard form styles */
.standard-form hr {
  margin: 35px 0 15px 0;
  border: none;
  border-top: 4px solid #e4e4e4;
}
.standard-form .search-form {
  width: auto;
}
.standard-form .search-form input[type=search] {
  padding-bottom: 10px;
  margin-right: 0;
  max-width: none;
}
.standard-form .search-form button[type=submit] {
  border: none;
}
.standard-form .search-form button[type=submit]:hover {
  background-color: transparent;
}
.standard-form .search-form button[type=submit]:hover i {
  color: #331471;
}
@media (min-width: 981px) {
  .standard-form input,
  .standard-form select {
    max-width: 370px;
  }
}
@media all and (max-width: 980px) {
  .standard-form hr {
    margin: 15px 0 0 0;
  }
  .standard-form .row [class^=span] {
    width: 97.5%;
    margin-top: 10px;
  }
}

.delete,
.reset {
  cursor: pointer;
  transition: color 0.3s ease;
}
html:not(.touch) .delete:hover,
html:not(.touch) .reset:hover {
  color: #331471;
}
.delete a,
.reset a {
  color: inherit;
}

.delete:hover i {
  animation: shake 0.3s linear forwards;
}

@keyframes shake {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0);
  }
}
.val-error input,
.val-error select,
.val-error textarea,
.val-error .k-dropdown-wrap.k-state-default,
.val-error .k-upload,
.val-error .e-uploadbox .e-inputbtn.e-btn,
.val-error .tagit,
.val-error .e-rte,
.val-error .e-upload {
  background-color: #FFC7C7 !important;
  border: 1px solid black;
}

.mandatoryField label::after {
  content: " *";
  color: #db0a16;
}

/*** GENERAL Content Styles ***/
section {
  position: relative;
}

.content {
  padding-top: 50px;
  padding-bottom: 50px;
}
@media only screen and (max-width: 1200px) {
  .content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/*** SLIDER / CAROUSEL Styles ***/
.slider {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.slider.slick-initialized {
  opacity: 1;
}
.slider .slide:focus {
  outline: 0;
}
.slider .slide .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
html.no-flexbox .slider .slide .row {
  display: block;
}
html.no-flexbox .slider .slide .row [class^=span] {
  display: table-cell;
  vertical-align: middle;
  float: none;
  padding: 0 1.25%;
}
html.no-flexbox .slider .slide .row [class^=span] img {
  width: 100%;
}

/* Arrows */
/* Left / Right arrows */
.arrows {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15px;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .arrows {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.arrows .arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
}
.arrows .arrow:before {
  content: "\f104";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 30px;
  line-height: 1.875rem;
  color: #fff;
}
.arrows .arrow.prev {
  left: 0;
}
.arrows .arrow.next {
  right: 0;
}
.arrows .arrow.next:before {
  content: "\f105";
}

/* DOTS Paging */
.slick-dots {
  position: absolute;
  bottom: 45px;
  width: 100%;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 10px;
  height: 10px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: none;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  outline: none;
  background-color: rgba(255, 255, 255, 0.5);
}
.slick-dots li.slick-active button {
  background-color: #fff;
}

.icon-youtube {
  width: 40px;
  height: 40px;
  fill: red;
}
.icon-youtube.-small {
  width: 20px;
  height: 20px;
  fill: blue;
}
.icon-youtube.-large {
  width: 100px;
  height: 100px;
  fill: green;
}
.icon-youtube.-xlarge {
  width: 250px;
  height: 250px;
  fill: #333;
}

.tab-list .tab,
.tab-accordion {
  position: relative;
  display: inline-block;
  padding: 14px 0;
  margin-right: 40px;
  cursor: pointer;
  /* font-family Univers */
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 24px;
  line-height: 1.5rem;
  color: #2c2c29;
  vertical-align: top;
}
.tab-list .tab.active:after,
.tab-accordion.active:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 5px;
  width: 100%;
  background-color: #331471;
}

.tab-accordion {
  text-align: left;
  padding-left: 25px;
  padding-right: 45px;
  background-color: #ebebeb;
  margin-right: 0;
  margin-top: 15px;
}
.tab-accordion[data-tab="0"] {
  margin-top: 0;
}
.tab-accordion .cross {
  top: 16px;
}
.tab-accordion.active .cross:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.tab-list {
  margin: 0;
  padding: 0;
  display: block;
  list-style-type: none;
  padding-left: 0;
  font-size: 0;
  border-bottom: 1px solid #2c2c29;
}
.tab-list .tab:before {
  display: none;
}

.tab-content {
  display: none;
  padding: 25px 0;
}
.tab-content > *:last-child {
  padding-bottom: 0;
}

.tab-accordion {
  display: block;
}

.cross {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 20px;
  top: 13px;
}
.cross:before, .cross:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  background-color: #2c2c29;
}
.cross:before {
  height: 4px;
  width: 100%;
  top: 8px;
  left: 0;
}
.cross:after {
  width: 4px;
  height: 100%;
  top: 0;
  left: 8px;
  will-change: transform;
  -webkit-transition: transform 0.2s ease;
  -moz-transition: transform 0.2s ease;
  -ms-transition: transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}

.tabbed-content {
  margin-bottom: 30px;
}

/* Mobile styles */
@media (min-width: 861px) {
  .tab-accordion {
    display: none;
  }
  .tab-content.active {
    display: block !important;
  }
}
@media (max-width: 860px) {
  .tab-list {
    display: none;
  }
  .tab-content {
    margin-bottom: 4px;
    padding: 0;
  }
  .tab-list .tab.active:after,
  .tab-accordion.active:after {
    display: none;
  }
}
@media only screen and (max-width: 568px) {
  .tab-accordion {
    padding-left: 15px;
  }
  .tab-accordion .cross {
    top: 15px;
  }
}
body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
body.mobile-nav-expanded {
  position: fixed;
}
body.cancel-transitions * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
body.breakpoint-indicators:after {
  content: "Mega";
  position: fixed;
  font-size: 12px;
  background: #989898;
  color: #fff;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  letter-spacing: 1px;
  z-index: 3000;
}
@media all and (max-width: 1200px) {
  body.breakpoint-indicators:after {
    content: "Huge";
  }
}
@media all and (max-width: 980px) {
  body.breakpoint-indicators:after {
    content: "Large";
  }
}
@media all and (max-width: 768px) {
  body.breakpoint-indicators:after {
    content: "Medium";
  }
}
@media all and (max-width: 568px) {
  body.breakpoint-indicators:after {
    content: "Small";
  }
}
@media all and (max-width: 420px) {
  body.breakpoint-indicators:after {
    content: "Tiny";
  }
}

* {
  -webkit-boz-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.inline {
  display: inline-block;
}

strong {
  font-weight: bold;
}

ul {
  padding-left: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

/* Cookie Notification styles */
.cookie-notification {
  background-color: #989898;
  color: #fff;
  display: none;
  padding: 10px;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .cookie-notification {
    padding: 10px 20px;
  }
}
@media only screen and (max-width: 568px) {
  .cookie-notification {
    padding: 10px 15px;
  }
}
.cookie-notification .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
html.no-flexbox .cookie-notification .row {
  display: block;
}
html.no-flexbox .cookie-notification .row [class^=span] {
  display: table-cell;
  vertical-align: middle;
  float: none;
  padding: 0 1.25%;
}
html.no-flexbox .cookie-notification .row [class^=span] img {
  width: 100%;
}
html.no-flexbox .cookie-notification .row [class^=span] {
  display: block;
  float: left;
  padding: 0;
}
.cookie-notification p {
  margin: 0;
  line-height: 1.5rem;
}
.cookie-notification a {
  color: #fff;
  text-decoration: underline;
}
.cookie-notification .close span {
  display: inline-block;
  padding: 10px 10px 10px 11px;
  background-color: #989898;
  cursor: pointer;
  position: relative;
  line-height: normal;
}
.cookie-notification .close span:before {
  content: "\f00d";
  font-size: 21px;
  color: #fff;
}

.InfinityNumber a {
  color: inherit;
  text-decoration: none;
  cursor: text;
}

.svg-sprite {
  display: none;
}

.grid-lines {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
.grid-lines .row {
  height: 100%;
}
.grid-lines .row [class^=span] {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
}
.grid-lines .row [class^=span]:first-child {
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
@media all and (max-width: 980px) {
  .grid-lines .row [class^=span] {
    width: 14.1666666667%;
  }
}
@media only screen and (max-width: 568px) {
  .grid-lines .row [class^=span] {
    width: 22.5%;
  }
}
@media only screen and (min-width: 641px) {
  .grid-lines {
    padding-left: 146px;
    padding-right: 30px;
  }
}

.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11111 !important;
}

.spinner-text {
  font-size: 1.4em;
  color: #555;
  margin-top: 20px;
  font-weight: bold;
}

.main-container {
  display: flex;
  height: 100%;
}
@media only screen and (max-width: 640px) {
  .main-container {
    display: block;
    height: auto;
  }
}

.site-content {
  flex-grow: 1;
  padding: 30px 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  transition: padding-left 0.2s ease;
}
.site-content .site-content-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .site-content {
    padding: 18px 25px 0 25px;
  }
}

.heading-area {
  padding-bottom: 40px;
}
.heading-area h1 {
  margin-bottom: 0;
}
.heading-area .title {
  font-weight: bold; /* font-family: Univers Bold */
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 26px;
  line-height: 1.625rem;
  margin: 20px 0 10px 0;
}
.heading-area .last-login {
  color: #a7a7a7;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
}
.heading-area a {
  color: inherit;
  font-family: Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease;
}
.heading-area a:hover {
  color: #331471;
}
.heading-area time {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 24px;
  line-height: 1.5rem;
  display: block;
  margin-top: 7px;
}

.key-contact .heading-area,
.latest-news .heading-area {
  padding-bottom: 20px;
}
.key-contact .heading-area .title,
.latest-news .heading-area .title {
  margin-top: 0;
}

.flex {
  display: flex;
}
.flex.vertically-centre {
  align-items: center;
}
.flex.space-between {
  justify-content: space-between;
}
.flex.justify-centre {
  justify-content: center;
}
.flex.wrap {
  flex-wrap: wrap;
}
@media all and (max-width: 768px) {
  .flex {
    display: block;
    text-align: left;
  }
  .flex a {
    margin-top: 10px;
  }
}

.main-content {
  flex: 1;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  position: relative;
  z-index: 1;
}
@media all and (max-width: 980px) {
  .site-header {
    display: block;
  }
}
@media only screen and (max-width: 640px) {
  .site-header .login-details {
    display: none;
  }
}

/*** Site Footer Styles ***/
.site-footer {
  background-color: #ebebeb;
  margin-top: 60px;
  padding: 60px 30px;
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-right: -30px;
  align-self: flex-end;
}
.site-footer .col {
  display: inline-block;
  padding-right: 30px;
}
.site-footer p {
  color: #7a7a7a;
  font-size: 14px;
  line-height: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  margin-bottom: 0;
}
.site-footer p a {
  color: #331471;
  text-decoration: none;
}
.site-footer p a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 640px) {
  .site-footer {
    width: calc(100% + 50px);
    margin-left: -25px;
    margin-right: -25px;
    margin-top: 30px;
    padding: 40px 30px 60px 30px;
  }
  .site-footer .col:last-child {
    margin-top: 15px;
  }
}

.back-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: #331471;
  text-align: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* transform for iOS */
}
.back-to-top i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 641px) {
  .back-to-top {
    display: none;
  }
}
@media only screen and (max-width: 640px) {
  .back-to-top {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
  .back-to-top.reveal {
    opacity: 1;
    visibility: visible;
  }
}

.site-navigation {
  position: relative;
  padding: 35px 30px;
  background-color: #331471;
  width: 116px;
}
.site-navigation.loaded {
  transition: width 0.2s ease;
}
.site-navigation ul {
  margin-top: 35px;
  margin-bottom: 0;
  list-style: none;
  text-align: left;
  padding-left: 17px;
}
@media only screen and (max-width: 640px) {
  .site-navigation ul {
    padding: 0 25px 25px 25px;
  }
}
.site-navigation ul li {
  padding-bottom: 0;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.5);
}
.site-navigation ul li:last-child {
  margin-bottom: 0;
}
.site-navigation ul li a {
  color: inherit;
  display: block;
  text-decoration: none;
  transition: color 0.2s ease;
}
@media only screen and (min-width: 641px) {
  .site-navigation ul li a {
    white-space: nowrap;
  }
}
.site-navigation ul li a span {
  display: inline-block;
  vertical-align: top;
  line-height: 24px;
  transition: opacity 0.2s ease;
  margin-left: 8px;
}
@media only screen and (min-width: 641px) {
  .site-navigation ul li a span {
    font-size: 0;
    opacity: 0;
  }
}
@media only screen and (max-width: 640px) {
  .site-navigation ul li a span {
    font-size: 18px;
    margin-left: 13px;
  }
}
.site-navigation ul li a .file-icon {
  opacity: 0.5;
}
.site-navigation ul li a.upload-document {
  transition: color 0.2s ease, padding 0.2s ease, background-color 0.2s ease;
}
.site-navigation ul li a.claims-viewer span > i {
  position: relative;
  font-size: 16px;
  margin-left: 5px;
  top: -3px;
}
.site-navigation ul li a:hover, .site-navigation ul li a.active {
  color: #fff;
}
.site-navigation ul li a:hover .file-icon, .site-navigation ul li a.active .file-icon {
  opacity: 1;
}
.site-navigation .expand-toggle {
  padding-left: 4px;
  padding-right: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
   supported by Chrome and Opera */
}
.site-navigation .expand-toggle .material-icons {
  color: #331471;
  transition: transform 0.2s ease;
}
@media (max-width: 1100px) {
  .site-navigation .expand-toggle {
    display: none;
  }
}
@media only screen and (min-width: 641px) {
  .site-navigation {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 10;
    /* Expanded state */
  }
  .site-navigation .login-details,
  .site-navigation .mobile-menu {
    display: none;
  }
  .site-navigation + .site-content {
    padding-left: 146px;
  }
  .site-navigation.expanded {
    width: 342px;
  }
  .site-navigation.expanded + .site-content {
    padding-left: 372px;
  }
  .site-navigation.expanded ul li a span {
    font-size: 18px;
    opacity: 1;
  }
  .site-navigation.expanded ul li a.upload-document {
    padding: 12px 20px;
    background-color: #331471;
    width: calc(100% - 17px);
    text-align: center;
  }
  .site-navigation.expanded ul li a.upload-document span {
    font-size: 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
  }
  .site-navigation.expanded .expand-toggle .material-icons {
    transform: rotate(180deg);
  }
}
@media only screen and (max-width: 640px) {
  .site-navigation {
    width: 100%;
    padding: 0;
    height: 78px;
    transition: height 0.3s ease;
    overflow: hidden;
  }
  .site-navigation.expanded {
    height: 100vh;
    overflow: auto;
  }
  .site-navigation .logo-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    height: 80px;
  }
}

.mobile-menu {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 36px;
}
.mobile-menu .icon-holder {
  position: relative;
  display: inline-block;
}
.mobile-menu .material-icons {
  will-change: opacity, transform;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu [data-class=close] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.mobile-menu.expanded [data-class=menu] {
  opacity: 0;
  transform: rotate(180deg);
}
.mobile-menu.expanded [data-class=close] {
  opacity: 1;
  transform: rotate(180deg);
}

/* Login Details */
.login-details {
  font-size: 16px;
  line-height: 18px;
  display: flex;
  align-items: center;
}
.login-details > div {
  padding-top: 12px;
  padding-bottom: 10px;
}
.login-details > div * {
  display: inline-block;
  vertical-align: middle;
}
.login-details .login-user {
  padding-right: 25px;
  color: #331471;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.login-details .login-user i {
  transition: transform 0.3s ease;
}
.login-details .login-user:hover {
  color: #42d66d;
}
.login-details .login-user:hover i {
  transform: translateY(-2px);
}
.login-details a {
  color: inherit;
  text-decoration: none;
}
.login-details .logout {
  padding-left: 25px;
  color: #331471;
}
.login-details .logout .material-icons {
  position: relative;
  will-change: transform;
  transition: transform 0.2s ease;
}
.login-details .logout:hover {
  color: #42d66d;
}
.login-details .logout:hover .material-icons {
  transform: translateX(5px);
}
.login-details .material-icons {
  position: relative;
  top: -2px;
}
@media (min-width: 641px) and (max-width: 980px) {
  .login-details {
    float: right;
  }
}
@media only screen and (max-width: 640px) {
  .login-details {
    justify-content: center;
    flex-wrap: wrap;
  }
  .login-details > div {
    padding: 18px 25px 16px 25px;
  }
  .login-details .login-user,
  .login-details .logout {
    color: #fff;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .login-details .login-user {
    border-right: none;
  }
}

.breadcrumbs ul {
  padding: 25px 0;
  margin: 0;
  list-style: none;
}
.breadcrumbs ul li {
  display: inline-block;
  vertical-align: top;
  color: #2c2c29;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin-right: 5px;
}
.breadcrumbs ul li:not(:last-child):after {
  content: "/";
  margin-left: 8px;
}
.breadcrumbs ul li a {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs ul li a:hover {
  color: #42d66d;
}

.pagination {
  margin: 30px auto 60px auto;
}
.pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0;
}
.pagination ul li {
  display: inline-block;
  width: 46px;
  height: 46px;
  font-size: 16px;
  line-height: 46px;
  border: 1px solid #2c2c29;
  transition: border-color 0.2s ease, color 0.2s ease;
  text-align: center;
  cursor: pointer;
  margin-right: 10px;
}
.pagination ul li i {
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.pagination ul li:hover, .pagination ul li.active {
  border-color: #331471;
  color: #fff;
  background-color: #331471;
}
.pagination ul li a {
  color: inherit;
}
@media only screen and (max-width: 568px) {
  .pagination {
    margin: 30px 0;
  }
  .pagination ul li {
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 28px;
    margin-right: 5px;
  }
  .pagination ul li i {
    top: -1px;
  }
}

/* Login specific styles */
.login-page {
  border-left: 9px solid #331471;
  background-image: url(../images/static-only/Login_Bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
}
.login-page > .row {
  width: 100%;
}
@media (min-width: 1201px) {
  .login-page > .row {
    width: calc(100% - 150px);
    max-width: none;
    margin: 0;
  }
}
@media only screen and (max-width: 1200px) {
  .login-page > .row {
    width: 100%;
    padding: 0 12%;
  }
}

.login-form {
  padding-top: 90px;
  padding-bottom: 90px;
  width: 100%;
  color: #fff;
}
@media only screen and (min-width: 569px) {
  .login-form {
    max-width: 260px;
  }
}
@media all and (max-width: 568px) {
  .login-form {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.login-form label {
  color: #dbdbdb;
}
.login-form input {
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease;
  border-color: transparent;
}
.login-form input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.login-form input:-moz-placeholder { /* Firefox 18- */
  color: rgba(0, 0, 0, 0.5);
}
.login-form input::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0, 0, 0, 0.5);
}
.login-form input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.login-form input:focus, .login-form input:active {
  background-color: #fff;
  border-color: transparent;
  color: #2c2c29;
}
.login-form p {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px;
  font-weight: 100;
}
.login-form p a {
  color: inherit;
  font-weight: 200;
}
.login-form p a:hover {
  text-decoration: none;
}

.form-title {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 44px;
  line-height: 2.75rem;
  margin-bottom: 15px;
}

/* Contact specific styles */
.key-contact:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.key-contact span {
  position: relative;
  display: block;
  clear: both;
}
.key-contact span.info {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  margin-bottom: 3px;
  padding-left: 23px;
}
.key-contact span.info a {
  color: #331471;
  text-decoration: none;
}
.key-contact span.info a:hover {
  text-decoration: underline;
}
.key-contact span i {
  position: absolute;
  left: 0;
  top: 1px;
}
.key-contact span.title {
  margin-bottom: 0;
}
.key-contact .contact-detail {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.key-contact .contact-detail img {
  border-radius: 100%;
  margin-right: 15px;
}
.key-contact .contact-detail span {
  margin-bottom: 0;
}
.key-contact .contact-detail .name {
  font-weight: bold; /* font-family Univers Bold */
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
}
.key-contact .contact-detail .job-title {
  font-weight: 100; /* font-family Univers Light */
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
}
@media only screen and (min-width: 641px) {
  .key-contact .contact-col {
    width: 50%;
    float: left;
    padding-right: 20px;
  }
}

.contact-page .key-contact {
  border-bottom: 4px solid #e4e4e4;
  padding-bottom: 30px;
}
.contact-page .key-contact .heading-area {
  padding-bottom: 20px;
}
.contact-page .key-contact .contact-detail {
  padding-top: 30px;
  border-top: 4px solid #e4e4e4;
}
@media all and (max-width: 1200px) {
  .contact-page .key-contact {
    width: 47.5%;
    margin-left: 1.25%;
  }
}

.other-contacts {
  margin-top: 50px;
}
.other-contacts .key-contact {
  margin-bottom: 40px;
}
@media all and (max-width: 980px) {
  .other-contacts {
    margin-top: 0;
  }
}
@media only screen and (max-width: 640px) {
  .other-contacts .key-contact {
    margin-bottom: 20px;
  }
}

@media all and (max-width: 980px) {
  .row .key-contact {
    width: 97.5%;
    margin-left: 1.25%;
    margin-bottom: 40px;
  }
  .row .key-contact .heading-area {
    display: flex;
  }
  .row .key-contact .heading-area a {
    margin-top: 0;
  }
}
@media all and (max-width: 980px) and (min-width: 641px) {
  .row.other-contacts .key-contact {
    width: 47.5%;
    padding-right: 20px;
  }
}
/* News specific styles */
.latest-news .news-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-right: 30px;
}
.latest-news .news-item span {
  display: block;
}
.latest-news .news-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.latest-news .news-item a:hover {
  color: #331471;
}
.latest-news .news-item img {
  width: 94px;
  height: auto;
  margin-right: 20px;
}
.latest-news .news-item > div {
  width: calc(100% - 114px);
}
.latest-news .news-item .news-title {
  font-weight: bold; /* font-family Univers Bold */
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
}
.latest-news .news-item time {
  font-weight: 100; /* font-family Univers Light */
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
}

@media all and (max-width: 980px) {
  .row .latest-news {
    width: 97.5%;
    margin-left: 1.25%;
  }
  .row .latest-news .heading-area {
    display: flex;
  }
  .row .latest-news .heading-area a {
    margin-top: 0;
  }
}
/* Account specific styles */
.account .account-heading {
  text-transform: uppercase;
  display: block;
  color: #a7a7a7;
  font-size: 12px;
  margin-bottom: 8px;
}
.account input {
  font-weight: 100;
  margin-bottom: 15px;
}

.password-area {
  margin-top: 40px;
}

/* Admin specific styles */
.admin-dashboard {
  display: flex;
  flex-wrap: wrap;
}
.admin-dashboard .admin-item {
  width: 33.3333333333%;
  text-align: center;
  padding: 50px 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.admin-dashboard .admin-item .material-icons,
.admin-dashboard .admin-item span {
  transition: color 0.3s ease;
}
.admin-dashboard .admin-item .material-icons {
  font-size: 60px;
}
.admin-dashboard .admin-item span {
  display: block;
  margin-top: 8px;
  font-weight: 100;
}
@media all and (max-width: 420px) {
  .admin-dashboard .admin-item span {
    font-size: 12px;
  }
}
.admin-dashboard .admin-item .actions {
  display: flex;
  flex-wrap: wrap;
  max-width: 250px;
  margin: 20px auto 0 auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.admin-dashboard .admin-item .actions a {
  color: inherit;
  width: 50%;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.admin-dashboard .admin-item .actions a:hover {
  color: #331471;
}
.admin-dashboard .admin-item .actions a:first-child {
  border-right: 1px solid #c2c2c2;
}
@media only screen and (min-width: 641px) {
  .admin-dashboard .admin-item .actions {
    visibility: hidden;
    opacity: 0;
  }
  html.touch .admin-dashboard .admin-item .actions {
    visibility: visible;
    opacity: 1;
  }
  .admin-dashboard .admin-item:hover {
    background-color: #fff;
    box-shadow: 0px 11px 29px 0 rgba(0, 0, 0, 0.14);
  }
  .admin-dashboard .admin-item:hover svg, .admin-dashboard .admin-item:hover .material-icons, .admin-dashboard .admin-item:hover span {
    color: #331471;
    fill: #331471;
  }
  .admin-dashboard .admin-item:hover .actions {
    opacity: 1;
    visibility: visible;
  }
}

@media all and (max-width: 768px) {
  .admin-dashboard .admin-item {
    width: 50%;
    padding: 35px 0;
  }
}
@media only screen and (max-width: 640px) {
  .admin-dashboard .admin-item {
    padding: 20px 0;
  }
  .admin-dashboard .admin-item .actions {
    display: block;
    margin-top: 10px;
  }
  .admin-dashboard .admin-item .actions a {
    display: block;
    width: 100%;
    position: relative;
  }
  .admin-dashboard .admin-item .actions a:first-child {
    border-right: none;
    padding-bottom: 3px;
    margin-bottom: 3px;
  }
  .admin-dashboard .admin-item .actions a:first-child:after {
    content: "";
    background-color: #c2c2c2;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    height: 1px;
  }
}
.groups label > a {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #989898;
  font-style: italic;
  float: right;
  text-decoration: none;
  transition: color 0.3s ease;
}
.groups label > a:hover {
  color: #331471;
}
@media all and (max-width: 980px) {
  .groups [class^=span] {
    margin-bottom: 20px;
  }
}

.user {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 0 0 0;
}
.user:first-of-type {
  padding-top: 18px;
}
.user > i {
  margin-right: 5px;
}
.user .delete {
  margin-left: auto;
}

@media only screen and (min-width: 641px) {
  .submit-area {
    display: flex;
    justify-content: space-between;
  }
  .submit-area div .button {
    margin-left: 15px;
  }
}
@media only screen and (max-width: 640px) {
  .submit-area .button {
    margin-left: 0;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.contact-information {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.contact-information input {
  margin-bottom: 15px;
}
.contact-information:last-child {
  margin-bottom: 0;
}
.contact-information:last-child input {
  margin-bottom: 0;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

.padding5 {
  padding: 5px;
}

.formLayout {
  min-height: 500px;
}

.alert-box {
  color: #555;
  font-family: Tahoma, Geneva, Arial, sans-serif;
  font-size: 11px;
  padding: 10px 10px 10px 36px;
  margin: 10px;
}

.alert-box span {
  font-weight: bold;
  text-transform: uppercase;
}

.error {
  background: #ffecec url("/Content/Images/alerts/error.png") no-repeat 10px 50%;
  border: 1px solid #f5aca6;
}

.success {
  background: #e9ffd9 url("/Content/Images/alerts/success.png") no-repeat 10px 50%;
  border: 1px solid #a6ca8a;
}

.warning {
  background: #fff8c4 url("/Content/Images/alerts/warning.png") no-repeat 10px 50%;
  border: 1px solid #f2c779;
}

.notice {
  background: #e3f7fc url("/Content/Images/alerts/notice.png") no-repeat 10px 50%;
  border: 1px solid #8ed9f6;
}

.ui-widget {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  z-index: 21111 !important;
}

.ui-widget-content {
  background: #f3f3f3;
  border: 1px solid #2c2c29;
  color: #2c2c29;
}

.ui-dialog {
  left: 0;
  outline: 0 none;
  padding: 0 !important;
  position: absolute;
  top: 0;
}

.ui-dialog .ui-dialog-content {
  background: none repeat scroll 0 0;
  border: 0 none;
  overflow: auto;
  position: relative;
  padding: 5px !important;
}

.ui-widget-header {
  background: #331471;
  border: 0;
  color: #fff;
  font-weight: normal;
  border-radius: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 0.5em;
  position: relative;
  font-size: 1em;
}

.ui-dialog-titlebar-close {
  display: inline-block;
  padding: 3px 14px;
  line-height: 24px;
  max-height: 192px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  right: 3px;
  top: 3px;
  position: absolute;
}

.ui-dialog-buttonset {
  text-align: center;
}

.ui-button {
  display: inline-block;
  padding: 3px 14px;
  line-height: 24px;
  max-height: 192px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  margin-right: 10px;
  margin-left: 10px;
}

.modalContainer {
  background-position: 50% 10%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  -ms-opacity: 0.9;
  opacity: 0.9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11111 !important;
}

.validateItemLabelStyle {
  color: red;
  font-weight: bold;
}

.ulerror {
  padding-left: 30px;
}
