@charset "UTF-8";
/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0; }

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0; }

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0; }

@font-face {
  font-family: 'SlateStd';
  src: url("/assets/typography/SlateStd/SlateStd.otf");
  font-style: normal;
  font-weight: normal; }

@font-face {
  font-family: 'SlateStd-Bold';
  src: url("/assets/typography/SlateStd/SlateStd-Bold.otf");
  font-style: normal;
  font-weight: bold; }

@font-face {
  font-family: 'SlateStd-Light';
  src: url("/assets/typography/SlateStd/SlateStd-Light.otf");
  font-style: normal;
  font-weight: lighter; }

@font-face {
  font-family: 'SlateStd-Medium';
  src: url("/assets/typography/SlateStd/SlateStd-Medium.otf");
  font-style: normal;
  font-weight: bold; }

@font-face {
  font-family: 'GothamRnd-Medium';
  src: url("/assets/typography/SlateStd/SlateStd-Medium.otf");
  font-style: normal;
  font-weight: bold; }

@font-face {
  font-family: 'CuriousSans-Bold';
  src: url("/assets/typography/CuriousSans/CuriousSans-Bold.otf");
  font-style: normal;
  font-weight: bold; }

@font-face {
  font-family: 'GothamRnd-Medium';
  src: url("/assets/typography/GothamRounded/GothamRnd-Medium.otf");
  font-style: normal;
  font-weight: bold; }

body {
  font-family: SlateStd-Light; }

h1 {
  font-family: SlateStd-Bold;
  font-size: 32px;
  line-height: 24px;
  letter-spacing: -0.32px; }

h2 {
  font-family: SlateStd-Bold;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.31px; }

h3 {
  font-family: SlateStd-Bold;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.23px;
  margin-bottom: 5px; }

p {
  margin-bottom: 15px; }

.page {
  min-height: 100vh; }

/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/1  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.o-layout` block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */
/* Default/mandatory classes.
   ========================================================================== */
/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */
.o-layout {
  display: block;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  list-style: none;
  /* [1] */
  margin-left: -24px;
  /* [3] */
  font-size: 0; }

/**
   * 1. Required in order to combine fluid widths with fixed gutters.
   * 2. Allows us to manipulate grids vertically, with text-level properties,
   *    etc.
   * 3. Default item alignment is with the tops of each other, like most
   *    traditional grid/layout systems.
   * 4. By default, all layout items are full-width (mobile first).
   * 5. Gutters provided by left padding:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   * 6. Fallback for old IEs not supporting `rem` values.
   */
.o-layout__item {
  box-sizing: border-box;
  /* [1] */
  display: inline-block;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */
  padding-left: 24px;
  /* [5] */
  font-size: 16px;
  /* [6] */
  font-size: 1rem; }

/* Gutter size modifiers.
   ========================================================================== */
.o-layout--tiny {
  margin-left: -6px; }
  .o-layout--tiny > .o-layout__item {
    padding-left: 6px; }

.o-layout--small {
  margin-left: -12px; }
  .o-layout--small > .o-layout__item {
    padding-left: 12px; }

.o-layout--large {
  margin-left: -48px; }
  .o-layout--large > .o-layout__item {
    padding-left: 48px; }

.o-layout--huge {
  margin-left: -96px; }
  .o-layout--huge > .o-layout__item {
    padding-left: 96px; }

.o-layout--flush {
  margin-left: 0; }
  .o-layout--flush > .o-layout__item {
    padding-left: 0; }

/* Vertical alignment modifiers.
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 */
.o-layout--middle > .o-layout__item {
  vertical-align: middle; }

/**
 * Align all grid items to the bottoms of each other.
 */
.o-layout--bottom > .o-layout__item {
  vertical-align: bottom; }

/* Fill order modifiers.
   ========================================================================== */
/**
 * Fill up the layout system from the centre.
 */
.o-layout--center {
  text-align: center; }
  .o-layout--center > .o-layout__item {
    text-align: left; }

/**
 * Fill up the layout system from the right-hand side.
 */
.o-layout--right {
  text-align: right; }
  .o-layout--right > .o-layout__item {
    text-align: left; }

/**
 * Reverse the rendered order of the grid system.
 */
.o-layout--reverse {
  direction: rtl; }
  .o-layout--reverse > .o-layout__item {
    direction: ltr;
    text-align: left; }

.o-layout-fixed-width {
  max-width: 960px;
  margin: 0 auto; }

.o-layout-full-width {
  max-width: 100%;
  margin: inherit; }

.o-layout-padding {
  padding: 10px; }

.o-layout-padding-10-vertical {
  padding: 0 10px; }

.o-layout-padding-35-10 {
  padding: 35px 10px; }

.o-layout-padding-70-10 {
  padding: 70px 10px; }

.o-layout-no-padding {
  padding: 0; }

.o-layout__float-left {
  float: left; }

@media (min-width: 46.25em) {
  .o-layout-fixed-width\@tablet {
    max-width: 960px;
    margin: 0 auto; }
  .o-layout-full-width\@tablet {
    max-width: 100%;
    margin: inherit; }
  .o-layout-padding\@tablet {
    padding: 10px; }
  .o-layout-padding-30-0-0-20\@tablet {
    padding: 30px 0 0 20px; }
  .o-layout-no-padding\@tablet {
    padding: 0; }
  .o-layout__float-left\@tablet {
    float: left; }
  .o-layout--reverse\@tablet {
    direction: rtl; }
    .o-layout--reverse\@tablet > .o-layout__item {
      direction: ltr;
      text-align: left; } }

.o-video-responsive-container {
  position: relative;
  padding-bottom: 54.6%;
  padding-top: 25px;
  height: 0; }

.o-video-responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.o-box-left-border {
  position: relative;
  font-family: SlateStd-Light;
  font-size: 16px;
  letter-spacing: 0.05px;
  line-height: 24px;
  padding-left: 10px;
  margin-bottom: 30px; }
  .o-box-left-border::after {
    content: '';
    position: absolute;
    height: calc(100% - 0.3em);
    top: 0;
    left: 0;
    width: 2px;
    background-color: #64656e; }
  .o-box-left-border--white::after {
    background-color: #ffffff; }
  .o-box-left-border__header {
    font-family: SlateStd-Bold;
    font-size: 18px;
    letter-spacing: -0.23px;
    line-height: 24px;
    margin-bottom: 5px; }
  .o-box-left-border p:not(:last-child) {
    margin-bottom: 10px; }
  .o-box-left-border ul {
    list-style-type: none; }

@media (min-width: 46.25em) {
  .o-box-left-border {
    font-size: 18px;
    padding-left: 18px; }
    .o-box-left-border::after {
      height: calc(100% - 0.4em); }
    .o-box-left-border__header {
      font-size: 24px;
      letter-spacing: -0.31px;
      margin-bottom: 20px; } }

.o-text-and-image-block {
  margin-bottom: 35px; }
  .o-text-and-image-block__image {
    width: 100%; }
  .o-text-and-image-block__text {
    padding: 10px; }

@media (min-width: 46.25em) {
  .o-text-and-image-block__image {
    vertical-align: top;
    padding-left: 3%;
    width: 30%; }
    .o-text-and-image-block__image--full-width {
      width: 97%;
      padding-left: 0;
      float: right; }
  .o-text-and-image-block__text {
    float: left;
    padding: 0; } }

.header {
  border-bottom: 1px solid #000000;
  height: 60px; }
  .header--light {
    border-bottom: 1px solid #656484; }
  .header__inner {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .header__logo-link {
    display: block; }
  .header__logo {
    height: 28px; }
  .header__contact {
    text-decoration: none;
    color: #000000;
    height: 28px; }
  .header__contact-text {
    display: inline-block;
    vertical-align: top;
    margin-top: 7px; }
    .header__contact-text--light {
      color: white; }
  .header__contact-icon {
    display: none; }

@media (min-width: 46.25em) {
  .header {
    height: 115px; }
    .header__logo {
      height: 39px; }
    .header__contact-text {
      font-size: 18px;
      letter-spacing: 0.05px;
      line-height: 25px;
      margin-top: 4px; }
    .header__contact-icon {
      display: inline-block;
      height: 28px;
      margin-left: 14px; } }

.form-item {
  margin-bottom: 14px; }
  .form-item__label {
    font-family: SlateStd-Medium;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 26px;
    display: block; }
  .form-item__input {
    display: block;
    width: 100%;
    border: 1px solid #000000;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px; }
    .form-item__input--trick {
      visibility: hidden;
      height: 0;
      width: 0;
      padding: 0;
      margin: 0; }
  .form-item__textarea {
    display: block;
    width: 100%;
    border: 1px solid #000000;
    box-sizing: border-box;
    padding: 10px; }
  .form-item__note {
    font-family: SlateStd-Light;
    font-size: 15px;
    margin-left: 15px; }

.c-btn {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  margin: 0;
  cursor: pointer;
  border: none;
  padding: 12px 20px 7px 20px;
  font-size: 14px; }
  .c-btn, .c-btn:hover, .c-btn:active, .c-btn:focus {
    border: none;
    text-decoration: none; }
  .c-btn--primary {
    background-color: #4a4a4a; }
    .c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus {
      color: #ffffff; }
    .c-btn--primary:hover, .c-btn--primary:focus {
      background-color: #4a4a4a;
      color: #ffffff; }
  .c-btn--rnd {
    border-radius: 5px; }
  .c-btn--full-width {
    width: 100%;
    display: block; }

.pre-footer__header {
  font-family: SlateStd-Bold;
  font-size: 14px;
  letter-spacing: -0.18px;
  line-height: 24px;
  margin-bottom: 8px; }

.pre-footer__item {
  vertical-align: middle; }

.pre-footer__img {
  width: 100%; }

.footer {
  border-top: 1px solid #000000; }
  .footer .footer-mobile {
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    position: relative; }
    .footer .footer-mobile__logo-img {
      position: absolute;
      left: 10px;
      bottom: 0; }
  .footer .footer-desktop {
    display: none; }

@media (min-width: 46.25em) {
  .footer {
    height: 55px; }
    .footer .footer-mobile {
      display: none; }
    .footer .footer-desktop {
      display: block;
      position: relative;
      height: 100%;
      line-height: 64px; }
      .footer .footer-desktop__logo-img {
        position: absolute;
        right: 10%;
        bottom: 0; } }

.home .home-intro {
  background-color: #F8E81C; }
  .home .home-intro__container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .home .home-intro__header {
    -ms-flex-order: 1;
    order: 1;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    font-family: SlateStd-Bold;
    font-size: 64px;
    letter-spacing: -0.64px;
    line-height: 48px;
    margin-top: 16px; }
  .home .home-intro__about {
    -ms-flex-order: 3;
    order: 3;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 18px;
    letter-spacing: 0.05px;
    line-height: 25px;
    margin-top: 32px; }
  .home .home-intro__top-para {
    font-weight: bold; }
  .home .home-intro__img-container {
    -ms-flex-order: 2;
    order: 2;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%; }
  .home .home-intro__img {
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    height: 85px;
    box-sizing: border-box; }

.home .home-gas-station-guru {
  width: 100%; }
  .home .home-gas-station-guru__link {
    display: block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000; }
    .home .home-gas-station-guru__link:hover {
      background-color: #F8F8F8; }
      .home .home-gas-station-guru__link:hover .home-gas-station-guru__img {
        opacity: 0.8; }
  .home .home-gas-station-guru__img {
    display: inline-block;
    width: 100%; }
  .home .home-gas-station-guru__label {
    text-transform: uppercase;
    font-family: SlateStd-Bold;
    font-size: 14px;
    letter-spacing: -0.18px;
    line-height: 24px; }
  .home .home-gas-station-guru__header {
    font-family: SlateStd-Bold;
    font-size: 30px;
    margin-bottom: 10px; }
  .home .home-gas-station-guru__content {
    font-size: 18px;
    letter-spacing: 0.05px;
    line-height: 25px; }

.home .home-gel__link {
  display: block;
  text-decoration: none;
  background-color: #787796;
  color: #ffffff; }
  .home .home-gel__link:hover {
    background-color: #61608B; }

.home .home-gel__label {
  text-transform: uppercase;
  font-family: SlateStd-Bold;
  font-size: 14px;
  letter-spacing: -0.18px;
  line-height: 24px; }

.home .home-gel__header {
  font-family: SlateStd-Bold;
  font-size: 30px;
  margin-bottom: 10px; }

.home .home-gel__content {
  font-size: 18px;
  letter-spacing: 0.05px;
  line-height: 25px;
  margin-bottom: 30px; }

.home .home-gel__explain-img-container {
  margin-bottom: 30px; }

.home .home-gel__explain-img {
  width: 100%; }

.home .home-gel__example-img {
  display: inline-block;
  vertical-align: top;
  width: 30%; }
  .home .home-gel__example-img:not(:last-child) {
    margin-right: 5%; }

@media (min-width: 46.25em) {
  .home .home-intro {
    background-color: #F8E81C; }
    .home .home-intro__container {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    .home .home-intro__header {
      -ms-flex-order: 1;
      order: 1;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }
    .home .home-intro__about {
      -ms-flex-order: 2;
      order: 2;
      -ms-flex-preferred-size: 75%;
      flex-basis: 75%; }
    .home .home-intro__img-container {
      -ms-flex-order: 3;
      order: 3;
      -ms-flex-preferred-size: 25%;
      flex-basis: 25%; }
    .home .home-intro__img {
      height: inherit;
      width: 80%;
      float: right; }
  .home .home-gas-station-guru {
    height: 500px;
    position: relative; }
    .home .home-gas-station-guru__link {
      height: 100%; }
    .home .home-gas-station-guru__img-container {
      height: 100%;
      width: 50%;
      position: absolute; }
    .home .home-gas-station-guru__img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .home .home-gas-station-guru__about {
      margin-left: 50%;
      width: 50%;
      display: inline-block;
      vertical-align: top; } }

.gas-station {
  color: #64656e;
  font-size: 18px; }
  .gas-station--bg-pale-grey {
    background-color: #f2f5f8; }
  .gas-station--bg-plantation-gradient {
    background: linear-gradient(-180deg, #223E43 0%, #4D9098 100%); }
  .gas-station__header {
    padding-top: 38px;
    padding-bottom: 33px;
    font-size: 32px; }
  .gas-station__about_section {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column; }
    .gas-station__about_section__one {
      -ms-flex-order: 1;
      order: 1; }
      .gas-station__about_section__one li {
        list-style-type: none; }
    .gas-station__about_section__two {
      -ms-flex-order: 2;
      order: 2; }
    .gas-station__about_section__img-mobile-container {
      -ms-flex-order: 3;
      order: 3;
      text-align: center;
      padding: 11px 0 100px 0; }
      .gas-station__about_section__img-mobile-container img {
        width: 90%; }
    .gas-station__about_section__three {
      -ms-flex-order: 4;
      order: 4; }
  .gas-station__outer-iso-interior-container {
    display: inherit;
    width: 100%; }
  .gas-station__img-iso-container {
    width: 100%;
    text-align: center; }
    .gas-station__img-iso-container img {
      width: 95%; }
  .gas-station__img-interior-container {
    width: 100%;
    text-align: center;
    margin: 23px 0 16px 0; }
    .gas-station__img-interior-container img {
      width: 95%; }
  .gas-station__ul-storyboard {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 22px; }
    .gas-station__ul-storyboard li {
      -ms-flex: 1;
      flex: 1;
      list-style: none;
      text-align: center; }
    .gas-station__ul-storyboard img {
      width: 95%; }
  .gas-station__img-gas-station {
    display: block;
    width: 100%; }
  .gas-station__permission {
    font-family: SlateStd-Light;
    font-size: 18px;
    letter-spacing: 0.05px;
    line-height: 25px;
    color: #000000; }

@media (min-width: 46.25em) {
  .gas-station__about_section {
    display: inherit; }
    .gas-station__about_section > div {
      width: 50%; }
    .gas-station__about_section__img-mobile-container {
      float: right;
      z-index: 5;
      position: relative; }
      .gas-station__about_section__img-mobile-container img {
        width: 60%; }
  .gas-station__outer-iso-interior-container {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: -200px;
    min-height: 200px; }
  .gas-station__img-iso-container {
    -ms-flex: 1;
    flex: 1; }
    .gas-station__img-iso-container img {
      width: 95%; }
  .gas-station__img-interior-container {
    -ms-flex: 1.5;
    flex: 1.5;
    transform: translate3d(0, -200px, 0); }
    .gas-station__img-interior-container img {
      width: 95%; }
  .gas-station__ul-storyboard {
    -ms-flex-direction: row;
    flex-direction: row; }
  .gas-station__permission {
    height: 30px;
    margin-top: -30px;
    text-align: right;
    color: #ffffff;
    padding: 0; } }

@media (min-width: 61.25em) {
  .gas-station__img-interior-container {
    transform: translate3d(0, -240px, 0); } }

@media (min-width: 81.25em) {
  .gas-station__img-interior-container {
    transform: translate3d(0, -270px, 0); } }

.gel {
  color: #ffffff; }

.contact__header {
  margin-bottom: 23px;
  font-family: SlateStd-Bold;
  font-size: 30px;
  margin-bottom: 23px; }

.contact__message-sent {
  background-color: #d9e3ca;
  color: #6b8246;
  border: #a3bc7c solid 1px;
  padding: 12px 5px 5px 5px;
  margin-bottom: 20px; }

.gel .intro {
  background-color: #787796;
  padding-top: 20px; }
  .gel .intro__bbc-logo {
    display: inline-block; }
  .gel .intro__gel-logo {
    display: inline-block;
    height: 38px;
    margin-left: 20px;
    vertical-align: middle;
    font-family: SlateStd-Bold;
    font-size: 32px;
    letter-spacing: -0.32px;
    line-height: 24px; }
  .gel .intro__client-details {
    display: inline-block;
    margin-left: 20px; }

@media (min-width: 46.25em) {
  .gel .intro__bbc-logo {
    width: 140px; }
  .gel .intro__gel-logo {
    height: 44px;
    margin-left: 35px; }
  .gel .intro__client-details {
    font-size: 18px;
    margin-left: 35px; }
  .gel .intro__client-text {
    max-width: 75%; } }

.gel .site-audit {
  background-color: #656484;
  padding: 39px 0 20px; }
  .gel .site-audit__header {
    font-family: SlateStd-Bold;
    font-size: 24px;
    letter-spacing: -0.31px;
    line-height: 24px;
    margin-bottom: 17px; }
  .gel .site-audit .large-text-sandwich {
    font-family: "HelveticaNeue", Helvetica;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: -0.31px;
    line-height: 24px;
    margin-bottom: 40px; }
    .gel .site-audit .large-text-sandwich__outer-slice {
      color: #fb86d6; }

@media (min-width: 46.25em) {
  .gel .site-audit .large-text-sandwich {
    font-size: 48px;
    letter-spacing: -1.34px;
    line-height: 48px;
    margin-bottom: 40px; } }

.gel .pattern-breakdown {
  padding-top: 23px;
  background-color: #787796; }
  .gel .pattern-breakdown__header {
    margin-bottom: 17px; }
  .gel .pattern-breakdown .pattern-overview-image {
    margin-bottom: 35px; }
    .gel .pattern-breakdown .pattern-overview-image--desktop {
      display: none; }
  .gel .pattern-breakdown .image-patterns {
    margin-bottom: 35px; }
    .gel .pattern-breakdown .image-patterns__images img {
      width: 100%; }
    .gel .pattern-breakdown .image-patterns__text {
      padding: 10px; }
  .gel .pattern-breakdown .info-panels {
    margin-bottom: 35px; }
    .gel .pattern-breakdown .info-panels__images img {
      width: 100%; }
    .gel .pattern-breakdown .info-panels__text {
      padding: 10px; }
  .gel .pattern-breakdown .headlines {
    display: none; }
  .gel .pattern-breakdown .button-examples {
    margin-bottom: 35px; }
    .gel .pattern-breakdown .button-examples__images img {
      width: 60px; }
  .gel .pattern-breakdown .interaction-examples {
    margin-bottom: 35px; }
    .gel .pattern-breakdown .interaction-examples__version-one {
      vertical-align: middle;
      margin-bottom: 10px; }
      .gel .pattern-breakdown .interaction-examples__version-one img {
        width: 15%;
        padding-right: 3%; }
    .gel .pattern-breakdown .interaction-examples__version-two {
      vertical-align: middle;
      margin-bottom: 10px; }
      .gel .pattern-breakdown .interaction-examples__version-two img {
        width: 18%;
        padding-right: 10%; }
    .gel .pattern-breakdown .interaction-examples__version-three {
      vertical-align: middle;
      margin-bottom: 10px; }
      .gel .pattern-breakdown .interaction-examples__version-three img {
        width: 22%;
        padding-right: 10%; }
  .gel .pattern-breakdown .complete-examples__text {
    margin-bottom: 10px; }
  .gel .pattern-breakdown .complete-examples-videos {
    padding-bottom: 30px; }
    .gel .pattern-breakdown .complete-examples-videos__video-container {
      margin-bottom: 10px; }
    .gel .pattern-breakdown .complete-examples-videos__video {
      width: 100%; }

@media (min-width: 46.25em) {
  .gel .pattern-breakdown .pattern-overview-image {
    display: none; }
    .gel .pattern-breakdown .pattern-overview-image--desktop {
      display: inherit;
      margin-bottom: 40px; }
  .gel .pattern-breakdown .image-patterns__images img {
    vertical-align: top;
    padding-left: 3%;
    width: 30%; }
  .gel .pattern-breakdown .image-patterns__text {
    float: left;
    padding: 0; }
  .gel .pattern-breakdown .info-panels__images img {
    vertical-align: bottom;
    padding-left: 3%;
    width: 30%; }
  .gel .pattern-breakdown .info-panels__text {
    float: left;
    padding: 0; }
  .gel .pattern-breakdown .headlines {
    display: inherit;
    margin-bottom: 35px; }
    .gel .pattern-breakdown .headlines__images img {
      vertical-align: bottom;
      padding-left: 3%;
      width: 30%; }
  .gel .pattern-breakdown .interaction-examples {
    padding: 0 10px;
    padding-left: 2.2%; }
    .gel .pattern-breakdown .interaction-examples__version-one img {
      width: 13.5%;
      padding-right: 2.5%; }
    .gel .pattern-breakdown .interaction-examples__version-two img {
      width: 27%;
      padding-right: 5%; }
    .gel .pattern-breakdown .interaction-examples__version-three img {
      width: 27%;
      padding-right: 5%; }
  .gel .pattern-breakdown .complete-examples-videos {
    text-align: center;
    padding-bottom: 40px; } }

.gel .pattern-library {
  background-color: #656484;
  padding-top: 50px; }

.gel .what-is-gel {
  background-color: #787796;
  padding-top: 30px; }
  .gel .what-is-gel__video_container {
    margin-bottom: 100px; }
  .gel .what-is-gel__video {
    width: 100%; }

@media (min-width: 46.25em) {
  .gel .what-is-gel {
    padding-top: 60px; } }

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * inuitcss generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, inuitcss will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, inuitcss can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$inuit-fractions` list.
 */
.u-1\/1 {
  width: 100% !important; }

.u-1\/2 {
  width: 50% !important; }

.u-2\/2 {
  width: 100% !important; }

.u-1\/3 {
  width: 33.33333% !important; }

.u-2\/3 {
  width: 66.66667% !important; }

.u-3\/3 {
  width: 100% !important; }

.u-1\/4 {
  width: 25% !important; }

.u-2\/4 {
  width: 50% !important; }

.u-3\/4 {
  width: 75% !important; }

.u-4\/4 {
  width: 100% !important; }

.u-1\/5 {
  width: 20% !important; }

.u-2\/5 {
  width: 40% !important; }

.u-3\/5 {
  width: 60% !important; }

.u-4\/5 {
  width: 80% !important; }

.u-5\/5 {
  width: 100% !important; }

.u-1\/6 {
  width: 16.66667% !important; }

.u-2\/6 {
  width: 33.33333% !important; }

.u-3\/6 {
  width: 50% !important; }

.u-4\/6 {
  width: 66.66667% !important; }

.u-5\/6 {
  width: 83.33333% !important; }

.u-6\/6 {
  width: 100% !important; }

.u-1\/7 {
  width: 14.28571% !important; }

.u-2\/7 {
  width: 28.57143% !important; }

.u-3\/7 {
  width: 42.85714% !important; }

.u-4\/7 {
  width: 57.14286% !important; }

.u-5\/7 {
  width: 71.42857% !important; }

.u-6\/7 {
  width: 85.71429% !important; }

.u-7\/7 {
  width: 100% !important; }

.u-1\/8 {
  width: 12.5% !important; }

.u-2\/8 {
  width: 25% !important; }

.u-3\/8 {
  width: 37.5% !important; }

.u-4\/8 {
  width: 50% !important; }

.u-5\/8 {
  width: 62.5% !important; }

.u-6\/8 {
  width: 75% !important; }

.u-7\/8 {
  width: 87.5% !important; }

.u-8\/8 {
  width: 100% !important; }

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 20em) {
  .u-1\/1\@mobile {
    width: 100% !important; }
  .u-1\/2\@mobile {
    width: 50% !important; }
  .u-2\/2\@mobile {
    width: 100% !important; }
  .u-1\/3\@mobile {
    width: 33.33333% !important; }
  .u-2\/3\@mobile {
    width: 66.66667% !important; }
  .u-3\/3\@mobile {
    width: 100% !important; }
  .u-1\/4\@mobile {
    width: 25% !important; }
  .u-2\/4\@mobile {
    width: 50% !important; }
  .u-3\/4\@mobile {
    width: 75% !important; }
  .u-4\/4\@mobile {
    width: 100% !important; }
  .u-1\/5\@mobile {
    width: 20% !important; }
  .u-2\/5\@mobile {
    width: 40% !important; }
  .u-3\/5\@mobile {
    width: 60% !important; }
  .u-4\/5\@mobile {
    width: 80% !important; }
  .u-5\/5\@mobile {
    width: 100% !important; }
  .u-1\/6\@mobile {
    width: 16.66667% !important; }
  .u-2\/6\@mobile {
    width: 33.33333% !important; }
  .u-3\/6\@mobile {
    width: 50% !important; }
  .u-4\/6\@mobile {
    width: 66.66667% !important; }
  .u-5\/6\@mobile {
    width: 83.33333% !important; }
  .u-6\/6\@mobile {
    width: 100% !important; }
  .u-1\/7\@mobile {
    width: 14.28571% !important; }
  .u-2\/7\@mobile {
    width: 28.57143% !important; }
  .u-3\/7\@mobile {
    width: 42.85714% !important; }
  .u-4\/7\@mobile {
    width: 57.14286% !important; }
  .u-5\/7\@mobile {
    width: 71.42857% !important; }
  .u-6\/7\@mobile {
    width: 85.71429% !important; }
  .u-7\/7\@mobile {
    width: 100% !important; }
  .u-1\/8\@mobile {
    width: 12.5% !important; }
  .u-2\/8\@mobile {
    width: 25% !important; }
  .u-3\/8\@mobile {
    width: 37.5% !important; }
  .u-4\/8\@mobile {
    width: 50% !important; }
  .u-5\/8\@mobile {
    width: 62.5% !important; }
  .u-6\/8\@mobile {
    width: 75% !important; }
  .u-7\/8\@mobile {
    width: 87.5% !important; }
  .u-8\/8\@mobile {
    width: 100% !important; } }

@media (min-width: 46.25em) {
  .u-1\/1\@tablet {
    width: 100% !important; }
  .u-1\/2\@tablet {
    width: 50% !important; }
  .u-2\/2\@tablet {
    width: 100% !important; }
  .u-1\/3\@tablet {
    width: 33.33333% !important; }
  .u-2\/3\@tablet {
    width: 66.66667% !important; }
  .u-3\/3\@tablet {
    width: 100% !important; }
  .u-1\/4\@tablet {
    width: 25% !important; }
  .u-2\/4\@tablet {
    width: 50% !important; }
  .u-3\/4\@tablet {
    width: 75% !important; }
  .u-4\/4\@tablet {
    width: 100% !important; }
  .u-1\/5\@tablet {
    width: 20% !important; }
  .u-2\/5\@tablet {
    width: 40% !important; }
  .u-3\/5\@tablet {
    width: 60% !important; }
  .u-4\/5\@tablet {
    width: 80% !important; }
  .u-5\/5\@tablet {
    width: 100% !important; }
  .u-1\/6\@tablet {
    width: 16.66667% !important; }
  .u-2\/6\@tablet {
    width: 33.33333% !important; }
  .u-3\/6\@tablet {
    width: 50% !important; }
  .u-4\/6\@tablet {
    width: 66.66667% !important; }
  .u-5\/6\@tablet {
    width: 83.33333% !important; }
  .u-6\/6\@tablet {
    width: 100% !important; }
  .u-1\/7\@tablet {
    width: 14.28571% !important; }
  .u-2\/7\@tablet {
    width: 28.57143% !important; }
  .u-3\/7\@tablet {
    width: 42.85714% !important; }
  .u-4\/7\@tablet {
    width: 57.14286% !important; }
  .u-5\/7\@tablet {
    width: 71.42857% !important; }
  .u-6\/7\@tablet {
    width: 85.71429% !important; }
  .u-7\/7\@tablet {
    width: 100% !important; }
  .u-1\/8\@tablet {
    width: 12.5% !important; }
  .u-2\/8\@tablet {
    width: 25% !important; }
  .u-3\/8\@tablet {
    width: 37.5% !important; }
  .u-4\/8\@tablet {
    width: 50% !important; }
  .u-5\/8\@tablet {
    width: 62.5% !important; }
  .u-6\/8\@tablet {
    width: 75% !important; }
  .u-7\/8\@tablet {
    width: 87.5% !important; }
  .u-8\/8\@tablet {
    width: 100% !important; } }

@media (min-width: 61.25em) {
  .u-1\/1\@desktop {
    width: 100% !important; }
  .u-1\/2\@desktop {
    width: 50% !important; }
  .u-2\/2\@desktop {
    width: 100% !important; }
  .u-1\/3\@desktop {
    width: 33.33333% !important; }
  .u-2\/3\@desktop {
    width: 66.66667% !important; }
  .u-3\/3\@desktop {
    width: 100% !important; }
  .u-1\/4\@desktop {
    width: 25% !important; }
  .u-2\/4\@desktop {
    width: 50% !important; }
  .u-3\/4\@desktop {
    width: 75% !important; }
  .u-4\/4\@desktop {
    width: 100% !important; }
  .u-1\/5\@desktop {
    width: 20% !important; }
  .u-2\/5\@desktop {
    width: 40% !important; }
  .u-3\/5\@desktop {
    width: 60% !important; }
  .u-4\/5\@desktop {
    width: 80% !important; }
  .u-5\/5\@desktop {
    width: 100% !important; }
  .u-1\/6\@desktop {
    width: 16.66667% !important; }
  .u-2\/6\@desktop {
    width: 33.33333% !important; }
  .u-3\/6\@desktop {
    width: 50% !important; }
  .u-4\/6\@desktop {
    width: 66.66667% !important; }
  .u-5\/6\@desktop {
    width: 83.33333% !important; }
  .u-6\/6\@desktop {
    width: 100% !important; }
  .u-1\/7\@desktop {
    width: 14.28571% !important; }
  .u-2\/7\@desktop {
    width: 28.57143% !important; }
  .u-3\/7\@desktop {
    width: 42.85714% !important; }
  .u-4\/7\@desktop {
    width: 57.14286% !important; }
  .u-5\/7\@desktop {
    width: 71.42857% !important; }
  .u-6\/7\@desktop {
    width: 85.71429% !important; }
  .u-7\/7\@desktop {
    width: 100% !important; }
  .u-1\/8\@desktop {
    width: 12.5% !important; }
  .u-2\/8\@desktop {
    width: 25% !important; }
  .u-3\/8\@desktop {
    width: 37.5% !important; }
  .u-4\/8\@desktop {
    width: 50% !important; }
  .u-5\/8\@desktop {
    width: 62.5% !important; }
  .u-6\/8\@desktop {
    width: 75% !important; }
  .u-7\/8\@desktop {
    width: 87.5% !important; }
  .u-8\/8\@desktop {
    width: 100% !important; } }

@media (min-width: 81.25em) {
  .u-1\/1\@wide {
    width: 100% !important; }
  .u-1\/2\@wide {
    width: 50% !important; }
  .u-2\/2\@wide {
    width: 100% !important; }
  .u-1\/3\@wide {
    width: 33.33333% !important; }
  .u-2\/3\@wide {
    width: 66.66667% !important; }
  .u-3\/3\@wide {
    width: 100% !important; }
  .u-1\/4\@wide {
    width: 25% !important; }
  .u-2\/4\@wide {
    width: 50% !important; }
  .u-3\/4\@wide {
    width: 75% !important; }
  .u-4\/4\@wide {
    width: 100% !important; }
  .u-1\/5\@wide {
    width: 20% !important; }
  .u-2\/5\@wide {
    width: 40% !important; }
  .u-3\/5\@wide {
    width: 60% !important; }
  .u-4\/5\@wide {
    width: 80% !important; }
  .u-5\/5\@wide {
    width: 100% !important; }
  .u-1\/6\@wide {
    width: 16.66667% !important; }
  .u-2\/6\@wide {
    width: 33.33333% !important; }
  .u-3\/6\@wide {
    width: 50% !important; }
  .u-4\/6\@wide {
    width: 66.66667% !important; }
  .u-5\/6\@wide {
    width: 83.33333% !important; }
  .u-6\/6\@wide {
    width: 100% !important; }
  .u-1\/7\@wide {
    width: 14.28571% !important; }
  .u-2\/7\@wide {
    width: 28.57143% !important; }
  .u-3\/7\@wide {
    width: 42.85714% !important; }
  .u-4\/7\@wide {
    width: 57.14286% !important; }
  .u-5\/7\@wide {
    width: 71.42857% !important; }
  .u-6\/7\@wide {
    width: 85.71429% !important; }
  .u-7\/7\@wide {
    width: 100% !important; }
  .u-1\/8\@wide {
    width: 12.5% !important; }
  .u-2\/8\@wide {
    width: 25% !important; }
  .u-3\/8\@wide {
    width: 37.5% !important; }
  .u-4\/8\@wide {
    width: 50% !important; }
  .u-5\/8\@wide {
    width: 62.5% !important; }
  .u-6\/8\@wide {
    width: 75% !important; }
  .u-7\/8\@wide {
    width: 87.5% !important; }
  .u-8\/8\@wide {
    width: 100% !important; } }

@media (min-width: 50.625em) {
  .u-1\/1\@desktopAd {
    width: 100% !important; }
  .u-1\/2\@desktopAd {
    width: 50% !important; }
  .u-2\/2\@desktopAd {
    width: 100% !important; }
  .u-1\/3\@desktopAd {
    width: 33.33333% !important; }
  .u-2\/3\@desktopAd {
    width: 66.66667% !important; }
  .u-3\/3\@desktopAd {
    width: 100% !important; }
  .u-1\/4\@desktopAd {
    width: 25% !important; }
  .u-2\/4\@desktopAd {
    width: 50% !important; }
  .u-3\/4\@desktopAd {
    width: 75% !important; }
  .u-4\/4\@desktopAd {
    width: 100% !important; }
  .u-1\/5\@desktopAd {
    width: 20% !important; }
  .u-2\/5\@desktopAd {
    width: 40% !important; }
  .u-3\/5\@desktopAd {
    width: 60% !important; }
  .u-4\/5\@desktopAd {
    width: 80% !important; }
  .u-5\/5\@desktopAd {
    width: 100% !important; }
  .u-1\/6\@desktopAd {
    width: 16.66667% !important; }
  .u-2\/6\@desktopAd {
    width: 33.33333% !important; }
  .u-3\/6\@desktopAd {
    width: 50% !important; }
  .u-4\/6\@desktopAd {
    width: 66.66667% !important; }
  .u-5\/6\@desktopAd {
    width: 83.33333% !important; }
  .u-6\/6\@desktopAd {
    width: 100% !important; }
  .u-1\/7\@desktopAd {
    width: 14.28571% !important; }
  .u-2\/7\@desktopAd {
    width: 28.57143% !important; }
  .u-3\/7\@desktopAd {
    width: 42.85714% !important; }
  .u-4\/7\@desktopAd {
    width: 57.14286% !important; }
  .u-5\/7\@desktopAd {
    width: 71.42857% !important; }
  .u-6\/7\@desktopAd {
    width: 85.71429% !important; }
  .u-7\/7\@desktopAd {
    width: 100% !important; }
  .u-1\/8\@desktopAd {
    width: 12.5% !important; }
  .u-2\/8\@desktopAd {
    width: 25% !important; }
  .u-3\/8\@desktopAd {
    width: 37.5% !important; }
  .u-4\/8\@desktopAd {
    width: 50% !important; }
  .u-5\/8\@desktopAd {
    width: 62.5% !important; }
  .u-6\/8\@desktopAd {
    width: 75% !important; }
  .u-7\/8\@desktopAd {
    width: 87.5% !important; }
  .u-8\/8\@desktopAd {
    width: 100% !important; } }

@media (min-width: 30em) {
  .u-1\/1\@mobileLandscape {
    width: 100% !important; }
  .u-1\/2\@mobileLandscape {
    width: 50% !important; }
  .u-2\/2\@mobileLandscape {
    width: 100% !important; }
  .u-1\/3\@mobileLandscape {
    width: 33.33333% !important; }
  .u-2\/3\@mobileLandscape {
    width: 66.66667% !important; }
  .u-3\/3\@mobileLandscape {
    width: 100% !important; }
  .u-1\/4\@mobileLandscape {
    width: 25% !important; }
  .u-2\/4\@mobileLandscape {
    width: 50% !important; }
  .u-3\/4\@mobileLandscape {
    width: 75% !important; }
  .u-4\/4\@mobileLandscape {
    width: 100% !important; }
  .u-1\/5\@mobileLandscape {
    width: 20% !important; }
  .u-2\/5\@mobileLandscape {
    width: 40% !important; }
  .u-3\/5\@mobileLandscape {
    width: 60% !important; }
  .u-4\/5\@mobileLandscape {
    width: 80% !important; }
  .u-5\/5\@mobileLandscape {
    width: 100% !important; }
  .u-1\/6\@mobileLandscape {
    width: 16.66667% !important; }
  .u-2\/6\@mobileLandscape {
    width: 33.33333% !important; }
  .u-3\/6\@mobileLandscape {
    width: 50% !important; }
  .u-4\/6\@mobileLandscape {
    width: 66.66667% !important; }
  .u-5\/6\@mobileLandscape {
    width: 83.33333% !important; }
  .u-6\/6\@mobileLandscape {
    width: 100% !important; }
  .u-1\/7\@mobileLandscape {
    width: 14.28571% !important; }
  .u-2\/7\@mobileLandscape {
    width: 28.57143% !important; }
  .u-3\/7\@mobileLandscape {
    width: 42.85714% !important; }
  .u-4\/7\@mobileLandscape {
    width: 57.14286% !important; }
  .u-5\/7\@mobileLandscape {
    width: 71.42857% !important; }
  .u-6\/7\@mobileLandscape {
    width: 85.71429% !important; }
  .u-7\/7\@mobileLandscape {
    width: 100% !important; }
  .u-1\/8\@mobileLandscape {
    width: 12.5% !important; }
  .u-2\/8\@mobileLandscape {
    width: 25% !important; }
  .u-3\/8\@mobileLandscape {
    width: 37.5% !important; }
  .u-4\/8\@mobileLandscape {
    width: 50% !important; }
  .u-5\/8\@mobileLandscape {
    width: 62.5% !important; }
  .u-6\/8\@mobileLandscape {
    width: 75% !important; }
  .u-7\/8\@mobileLandscape {
    width: 87.5% !important; }
  .u-8\/8\@mobileLandscape {
    width: 100% !important; } }

.u-colour-bg-yellow {
  background-color: #F8E81C !important; }

.u-colour-bg-purple {
  background-color: #787796 !important; }

.u-colour-bg-pale-grey {
  background-color: #f2f5f8 !important; }

.u-colour-bg-white {
  background-color: #ffffff !important; }