@charset "UTF-8";

/* Variables

-------------------------------------------------------------- */

/* Variable imports

-------------------------------------------------------------- */

/* UCL Colours

-------------------------------------------------------------- */

/* Indigo colour palette

-------------------------------------------------------------- */

/* Colour Variant - for gradients

-------------------------------------------------------------- */

/* Generic grayscale

-------------------------------------------------------------- */

/* Colour by element

-------------------------------------------------------------- */

/* Project specific

-------------------------------------------------------------- */

/*hover colour*/

/* Image sizing

-------------------------------------------------------------- */

/* Z index values

-------------------------------------------------------------- */

/* Module spacing

-------------------------------------------------------------- */

/* layout

-------------------------------------------------------------- */

/* lists

-------------------------------------------------------------- */

/* Font stacks

-------------------------------------------------------------- */

/* Breakpoints

-------------------------------------------------------------- */

/* Development/Production environments

-------------------------------------------------------------- */

/* Mixins

-------------------------------------------------------------- */

/*



    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

-------------------------------------------------------------- */

/* Helper classes

-------------------------------------------------------------- */

/* 

* 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 {

  zoom: 1; }

  .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 dependencies

-------------------------------------------------------------- */

/* 

* 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: #000000;

  text-decoration: none; }



mark {

  background-color: #ff9;

  color: #000000;

  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.30645%; }

  @media only screen and (max-width: 989px) {

    .block--col-1 {

      display: block;

      float: left;

      margin-left: 0%;

      margin-right: -100%;

      width: 31.59722%; } }

  @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.33675%;

  margin-right: -100%;

  width: 31.28827%; }

  @media only screen and (max-width: 989px) {

    .block--col-2 {

      display: block;

      float: left;

      margin-left: 34.20139%;

      margin-right: -100%;

      width: 31.59722%; } }

  @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.65532%;

  margin-right: -100%;

  width: 31.27734%; }

  @media only screen and (max-width: 989px) {

    .block--col-3 {

      display: block;

      float: left;

      margin-left: 68.40278%;

      margin-right: -100%;

      width: 31.59722%; } }

  @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.37803%; }

.layout-horizontal--nav-2col .site-content__sidebar {

  display: block;

  float: left;

  margin-left: 74.41038%;

  margin-right: -100%;

  width: 25.58962%; }

@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: 71.37803%; }

@media only screen and (max-width: 989px) {

	.layout-horizontal--nav-1col .site-content__main {

  width: 100%; }

}



.layout-horizontal--nav-1col .site-content__sidebar {

  display: block; }



@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.8715%; }

.layout-vertical--nav-2col .site-content__sidebar {

  display: block;

  float: left;

  margin-left: 66.80507%;

  margin-right: -100%;

  width: 33.19493%; }

@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.7;

  -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, .page-head, .media, .island, .islet, .pill, .responsive-container, .advert, .menu-block, .box, .input-group, .accordion, .video-wrap {

  margin-bottom: 1.5em; }

img {

  margin-bottom: 2px; }



/* Headings

-------------------------------------------------------------- */

h1, h2, h3 {

  font-weight: 300; }



h1, h2, h3, h4, h5, h6 {

  margin-top: 0;

  margin-bottom: .2em;

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



/* 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: #ccc;

  clear: both;

  font-size: 12px;

  font-size: 1.2rem; }



ins {

  background-color: #F0F0F0;

  color: #000000;

  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;

    zoom: 1;

    *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;

  white-space: pre; }



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;

  zoom: 1;

  *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.0303%;

  margin-right: -100%;

  width: 63.85859%;

  box-sizing: border-box;

  padding-left: 1.51515%;

  padding-right: 1.51515%; }



.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.0303%;

  margin-right: -100%;

  width: 63.85859%; }



.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.51515%;

  position: relative;

  padding-left: 1.51515%;

  padding-right: 1.51515%;

  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: #ffffff;

  border: 1px solid #DD6868; }



.error {

  color: #c60f13; }



/* 

* Base name: Buttons

* Note: N/A

-------------------------------------------------------------- */

.btn {

  background-color: #666;

  color: #ffffff;

  text-align: center;

  cursor: pointer;

  text-decoration: none;

  color: #ffffff;

  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;

  zoom: 1;

  *display: inline;

  font-size: 14px;

  font-size: 1.4rem; }

  .btn:active {

    background-color: #505050; }

  .btn:hover, .btn:active, .btn:focus {

    background-color: #615957;

    color: #ffffff;

    text-decoration: none; }

  .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: #cccccc;

    background: linear-gradient(#e8e8e4 0%, #cccccc 100%); }



button {

  background: #40403e;

  cursor: pointer;

  padding: 0.7rem;

  color: #ffffff;

  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: #8c8279;

  background: linear-gradient(#9c9188 0%, #8c8279 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: #8c8279; }



.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;

        zoom: 1;

        *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.42929%;

  clear: none;

  float: left;

  margin-left: 0;

  margin-right: 3.0303%; }



.img-pull-right {

  margin-bottom: 1em;

  margin-top: 1em;

  display: block;

  float: left;

  margin-left: 51.4596%;

  margin-right: -100%;

  width: 48.42929%;

  clear: none;

  float: right;

  margin-right: 0;

  margin-left: 3.0303%; }



.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 - http://www.ucl.ac.uk/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.79688%; } }



@media (max-width: 619px) {

  .col--2-sm {

    display: block;

    float: left;

    margin-left: 53.04688%;

    margin-right: -100%;

    width: 46.79688%; } }



/* Tablet grid (3 columns)

-------------------------------------------------------------- */

@media (min-width: 768px) {

  .col--1-md {

    display: block;

    float: left;

    margin-left: 0%;

    margin-right: -100%;

    width: 31.59722%; } }



@media (min-width: 768px) {

  .col--2-md {

    display: block;

    float: left;

    margin-left: 34.20139%;

    margin-right: -100%;

    width: 31.59722%; } }



@media (min-width: 768px) {

  .col--3-md {

    display: block;

    float: left;

    margin-left: 68.40278%;

    margin-right: -100%;

    width: 31.59722%; } }



@media (min-width: 768px) {

  .col--1-2-md {

    display: block;

    float: left;

    margin-left: 0%;

    margin-right: -100%;

    width: 65.79861%; } }



@media (min-width: 768px) {

  .col--2-3-md {

    display: block;

    float: left;

    margin-left: 34.20139%;

    margin-right: -100%;

    width: 65.79861%; } }



@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.86532%; } }



@media (min-width: 990px) {

  .col--1-2-lg-layout {

    display: block;

    float: left;

    margin-left: 0%;

    margin-right: -100%;

    width: 31.30645%; } }



@media (min-width: 990px) {

  .col--1-3-lg-layout {

    display: block;

    float: left;

    margin-left: 0%;

    margin-right: -100%;

    width: 65.62502%; } }



@media (min-width: 990px) {

  .col--1-4-lg-layout {

    display: block;

    float: left;

    margin-left: 0%;

    margin-right: -100%;

    width: 71.32997%; } }



@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.89562%;

    margin-right: -100%;

    width: 8.41083%; } }



@media (min-width: 990px) {

  .col--2-3-lg-layout {

    display: block;

    float: left;

    margin-left: 22.89562%;

    margin-right: -100%;

    width: 42.7294%; } }



@media (min-width: 990px) {

  .col--2-4-lg-layout {

    display: block;

    float: left;

    margin-left: 22.89562%;

    margin-right: -100%;

    width: 48.43434%; } }



@media (min-width: 990px) {

  .col--2-5-lg-layout {

    display: block;

    float: left;

    margin-left: 22.89562%;

    margin-right: -100%;

    width: 77.03704%; } }



@media (min-width: 990px) {

  .col--3-lg-layout {

    display: block;

    float: left;

    margin-left: 34.33675%;

    margin-right: -100%;

    width: 31.28827%; } }



@media (min-width: 990px) {

  .col--3-4-lg-layout {

    display: block;

    float: left;

    margin-left: 34.33675%;

    margin-right: -100%;

    width: 36.99322%; } }



@media (min-width: 990px) {

  .col--3-5-lg-layout {

    display: block;

    float: left;

    margin-left: 34.33675%;

    margin-right: -100%;

    width: 65.59591%; } }



@media (min-width: 990px) {

  .col--4-5-lg-layout {

    display: block;

    float: left;

    margin-left: 68.65532%;

    margin-right: -100%;

    width: 31.27734%; } }



@media (min-width: 990px) {

  .col--5-lg-layout {

    display: block;

    float: left;

    margin-left: 74.36027%;

    margin-right: -100%;

    width: 25.57239%; } }



/* 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.0303%;

    margin-right: -100%;

    width: 12.39899%; } }



@media (min-width: 990px) {

  .col--3-lg-content {

    display: block;

    float: left;

    margin-left: 51.4596%;

    margin-right: -100%;

    width: 12.39899%; } }



@media (min-width: 990px) {

  .col--4-lg-content {

    display: block;

    float: left;

    margin-left: 66.88889%;

    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.42929%; } }



@media (min-width: 990px) {

  .col--2-3-lg-content {

    display: block;

    float: left;

    margin-left: 36.0303%;

    margin-right: -100%;

    width: 27.82828%; } }



@media (min-width: 990px) {

  .col--2-4-lg-content {

    display: block;

    float: left;

    margin-left: 36.0303%;

    margin-right: -100%;

    width: 63.85859%; } }



@media (min-width: 990px) {

  .col--3-4-lg-content {

    display: block;

    float: left;

    margin-left: 51.4596%;

    margin-right: -100%;

    width: 48.42929%; } }



@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.60417%; } }

@media (min-width: 990px) {

  .col--float {

    clear: none;

    float: left;

    margin-left: 0;

    margin-right: 3.0303%; } }



@media (min-width: 990px) {

  .col--float-content {

    clear: none;

    float: left;

    margin-left: 0;

    margin-right: 3.0303%; } }



/* 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; } }



/* Patterns

-------------------------------------------------------------- */

/*

* 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, .accordion__description a {

    font-weight: bold; }



.accordion__title a {

  color: #000000;

  display: block; }



.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 #0097A9;

  background: #fafafa;

  overflow: hidden;

  padding-top: 0.2em;

  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.0303%;

  padding-right: 3.0303%; }

  .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: #ffffff;

  text-decoration: none;

  background-color: #B5BD00;

  font-size: 14px;

  font-size: 1.4rem; }

  .blocked-link:hover, .blocked-link:active, .blocked-link:focus {

    color: #ffffff;

    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.0303%;

  margin-right: -100%;

  width: 63.85859%; }

  @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: 25%;

  color: #ffffff;

  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;

  zoom: 1;

  *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 {

    content: "/";

    color: #aaaaaa;

    margin: 0 0.75em;

    position: relative;

    top: 1px; }

  .breadcrumb__item:last-child:after {

    content: " ";

    margin: 0; }



.breadcrumb__item--current > a {

  text-decoration: none;

  cursor: default;

  color: #333333; }



/* 

* 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(//cdn.ucl.ac.uk/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(//cdn.ucl.ac.uk/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 {

  margin-top: 2px;	

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



.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: Footer

* Use: Handling links, credits and footnotes

* Note: N/A

-------------------------------------------------------------- */

.footer__inner {

  background-color: #40403e;

  padding: 40px 35px;

  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: #ffffff; }



.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: #ffffff;

      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-size: auto 100%;

  background-position: 106% bottom;

  background-image: url("//cdn.ucl.ac.uk/indigo/images/ucl-logo.svg");

  background-repeat: repeat-x;

  position: relative;

  left: -35px;

  background-color: #0097A9;

  border-bottom: 0.5em solid #0097A9; }

  @media only screen and (max-width: 767px) {

    .header--mobile {

      display: block; } }

  .header--mobile.no-svg {

    background-image: url("//cdn.ucl.ac.uk/indigo/images/ucl-logo-cropped-white.png");

    background-repeat: no-repeat;

    background-position: right bottom;

    background-color: #000000;

    background-size: 30%; }

  .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%; }

      .header__close img {

        vertical-align: middle;

        display: -moz-inline-stack;

        display: inline-block;

        *vertical-align: auto;

        zoom: 1;

        *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(//cdn.ucl.ac.uk/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.40278%;

  margin-right: -100%;

  width: 31.59722%;

  display: block;

  float: left;

  margin-left: 74.36027%;

  margin-right: -100%;

  width: 25.57239%; }



@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.0303%;

  padding-right: 3.0303%; }

  .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("//cdn.ucl.ac.uk/indigo/images/success.png"); }

html.backgroundsize .message--warning {

  background-image: url("//cdn.ucl.ac.uk/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: #ffffff;

  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 .wrapper {

        background-color: #444; } }

  .masthead img {

    width: auto; }



.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: 100%;

      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: 55%;

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

  @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;

    zoom: 1;

    *display: inline; }



.masthead__link {

  font-weight: 400;

  color: #ffffff;

  text-decoration: none; }

  .masthead__link:hover, .masthead__link:active, .masthead__link:focus {

    color: #ffffff; }



/* 

* Pattern name: Nav

* Use: Styling lists used for navigation areas

* Note: Modifiers define positioning of navigation

-------------------------------------------------------------- */

.nav ul {

  margin-left: 0; }



.nav--left li {

  margin-bottom: 0.5em; }

  .nav--left li ul {

    margin: 10px 5%;

    font-size: 14px;

    font-size: 1.4rem; }



.nav--top {

  display: none;

  width: 100%;

  background-color: #0097A9;

  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 {

	color: #FFFFFF;				

      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: #0097A9;

      padding: 0.5em 35px;

      max-width: 1400px;

      margin: auto;

      overflow: hidden; }

    .nav--top.nav--sticky-active a {

      color: #ffffff; }



.nav--mobile {

  display: none; }

  @media only screen and (max-width: 767px) {

    .nav--mobile {

      display: block; }

      .nav--mobile ul:nth-child(n+2) {

        padding-left: 1em; } }



/*

- Multi-layer sliding navigation

- Stu Robson

- http://codepen.io/sturobson/pen/d01f0fc84172afc650d1dedcaa2ab118?editors=010

-------------------------------------------------------------------------------*/

.nav--subnav {

  box-sizing: border-box;

  background-color: transparent;

  color: white;

  width: 100%;

  position: relative;

  overflow: hidden; }

  .nav--subnav a {

    text-decoration: none;

    vertical-align: middle; }



.subnav__list {

  margin-top: 0;

  position: absolute;

  top: 0;

  width: 100%;

  background: transparent;

  z-index: 1;

  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); }

  .subnav__list ul {

    right: 200%;

    left: 100%;

    box-sizing: border-box; }

    .subnav__list ul li {

      box-sizing: border-box; }

  .subnav__list .nav--active {

    left: 0;

    right: 0; }

    .subnav__list .nav--active > li > a {

      visibility: visible; }

  .subnav__list.nav--hidden > li > a {

    visibility: hidden; }



.subnav__item.parent > a:after {

  content: " >";

  position: absolute;

  right: 0; }

.subnav__item.back a {

  border-bottom: 1px transparent solid; }

  .subnav__item.back a:before {

    content: "< ";

    position: relative;

    top: -2px; }

.subnav__item.top-level a {

  border-bottom: 1px transparent solid; }

  .subnav__item.top-level a:before {

    content: "< ";

    position: relative;

    top: -2px; }

.subnav__item a {

  display: block;

  position: relative; }



.nav--left.nav--subnav {

  position: relative; }

  .nav--left.nav--subnav ul li {

    margin: 0 0 0.5em 0;

    line-height: 1.7;

    font-size: 16px;

    font-size: 1.6rem; }

  .nav--left.nav--subnav li ul {

    margin: 0; }



.nav--mobile {

  margin-top: 1em; }

  .nav--mobile .subnav__list {

    padding: 0; }

    @media only screen and (max-width: 767px) {

      .nav--mobile .subnav__list ul:nth-child(n+2) {

        padding-left: 0; } }

  .nav--mobile.nav--subnav ul li a {

    color: white; }

  .nav--mobile .subnav__item.back a {

    color: #ccc; }

  .nav--mobile .subnav__item.top-level a {

    color: #ccc; }

  .nav--mobile .subnav__item a:hover {

    color: #ccc; }



/*** 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;

  zoom: 1;

  *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: -webkit-grab;

  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: #bbb;

      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;

  zoom: 1;

  *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: #0097A9;

  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: #ffffff;

  display: none;

  font-size: 12px;

  font-size: 1.2rem; }



.photograph--show {

  background-image: url('//www.geog.ucl.ac.uk/images-homepage/2016-08/banner.jpg');	

  padding-bottom: 36%; }

  .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;

    zoom: 1;

    *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: #ffffff;

  padding: 0px 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.89562%;

  margin-right: -100%;

  width: 77.03704%; }

  @media only screen and (max-width: 989px) {

    .site-content__body {

      display: block;

      float: left;

      margin-left: 34.20139%;

      margin-right: -100%;

      width: 65.79861%; } }

  @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.46605%; }

  @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: 74.80507%;

  margin-right: -100%;

  width: 25.19493%; }

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

    .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("//cdn.ucl.ac.uk/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:hover {

  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

  transition: box-shadow ease-in-out .15s; }



@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("//cdn.ucl.ac.uk/indigo/images/social-buttons/social-icons@2x.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: #ffffff;

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



.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: #7c7c7c;

  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.20139%;

    margin-right: -100%;

    width: 65.79861%; } }

@media only screen and (min-width: 990px) {

  .search-page__sub-container--right-col {

    display: block;

    float: left;

    margin-left: 22.91105%;

    margin-right: -100%;

    width: 77.08895%; } }

.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.48316%;

      clear: left; }

    .search-page__listings.half-width-items article.content-item:nth-child(even) {

      display: block;

      float: left;

      margin-left: 51.51684%;

      margin-right: -100%;

      width: 48.48316%; }

.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: #000000;

    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.37803%; }

  .search-page__facets button, .search-page__facets submit {

    display: block;

    float: left;

    margin-left: 74.41038%;

    margin-right: -100%;

    width: 25.58962%; }

  @media only screen and (min-width: 768px) {

    .search-page__facets {

      display: block;

      float: left;

      margin-left: 0%;

      margin-right: -100%;

      width: 31.59722%; } }

  @media only screen and (min-width: 990px) {

    .search-page__facets {

      display: block;

      float: left;

      margin-left: 0%;

      margin-right: -100%;

      width: 19.87871%;

      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: #ffffff; }

    .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: #ffffff; }



/* 

* 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: #ffffff;

  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;

  zoom: 1;

  *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%; }