@charset "UTF-8";
/* ==========================================================================
   # THE REST
   ========================================================================== */
/* put global CSS variables here */
:root {
  /* l-colour or brand-colour */
  /* .<l-colour> { color: var(--<l-colour>); }
  .bg-<l-colour> { background-color: var(--<l-colour>); }
  .b-<l-colour> { border-color: var(--<l-colour>); }
  .hover-<l-colour>:hover { color: var(--<l-colour>); }
  .hover-bg-<l-colour>:hover { background-color: var(--<l-colour>); }
  .hover-b-<l-colour>:hover { border-color: var(--<l-colour>); } */
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
*
* Testing
*
**/
@media (max-width: 600px) {
  .include-media-test {
    background-color: #def;
  }
  .include-media-test:before {
    content: "<=phone";
  }
}
@media (min-width: 601px) {
  .include-media-test {
    background-color: #abc;
  }
  .include-media-test:before {
    content: ">phone";
  }
}
@media (min-width: 815px) and (max-width: 1799px) {
  .include-media-test {
    background-color: #fed;
  }
  .include-media-test:before {
    content: ">=815px, <desktop";
  }
}
@media (min-width: 1800px) {
  .include-media-test {
    background-color: #fab;
  }
  .include-media-test:before {
    content: ">=desktop";
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .include-media-test:after {
    content: "Retina" !important;
  }
}

/* ==========================================================================
   #TEXT
   ========================================================================== */
/* Text selection
* If selection makes the font hard to see, make font white
* If the background/section is the same color as the seelction, change the selection text color
* see _4-objects.sections.scss
* These properties can be changed with ::selection -
* color
* background-color
* cursor
* caret-color
* outline and its longhands
* text-decoration and its associated properties
* text-emphasis-color
* text-shadow
*/
::selection {
  background-color: #fee000;
  text-shadow: none;
}

::-moz-selection {
  background-color: #fee000;
  text-shadow: none;
}

.selection--primary::selection {
  background-color: #fee000;
  text-shadow: none;
}

.selection--secondary::selection {
  background-color: #231f20;
  text-shadow: none;
}

.selection--tertiary::selection {
  background-color: #4444ff;
  text-shadow: none;
}

.text--primary::selection {
  background-color: #fee000;
}

.text--primary::-moz-selection {
  background-color: #fee000;
}

.text--secondary::selection {
  background-color: #231f20;
}

.text--secondary::-moz-selection {
  background-color: #231f20;
}

.text--tertiary::selection {
  background-color: #4444ff;
}

.text--tertiary::-moz-selection {
  background-color: #4444ff;
}

/* Font color should be set this way
* Do I need to change selection text?
*/
.text--primary,
.text--secondary,
.text--tertary {
  margin-top: 0;
  margin-bottom: 0;
}

.text--primary {
  color: black;
}

.text--secondary {
  color: white;
}

.text--tertiary {
  color: #fee000;
}

.text-descr {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  word-wrap: normal;
}

.section h2.projects--title,
h2.projects--title {
  text-align: left;
  margin-top: 2px;
  margin-bottom: 30px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.sheet.project h2 {
  text-align: left;
  margin-top: 70px;
  margin-bottom: 10px;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 600;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.body-text {
  font-family: "Segoe WPC", "Segoe UI", SFUIText-Light, HelveticaNeue-Light, sans-serif, "Droid Sans Fallback";
  font-size: 18px;
  color: #000000;
  font-weight: 400;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0.2px;
  line-height: 1.4;
  margin: 10px 0;
}

.text-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 550px) {
  .text-container {
    word-break: break-all;
  }
}
/* ==========================================================================
   #FIELDS
   ========================================================================== */
/**
 * This makes input boxes look nicer instead of the default boring design
 * For styling, use a style variant
 * input HTML should include placeholder, required and tabindex attributes
 */
/*
 * https://codepen.io/zellwk/pen/NeRaPw
* input box empty, uses ::placeholder-shown
 */
label,
input {
  /* display: block; */
  margin: 0 auto;
}

label {
  font-size: 24px;
  /* font-weight: 600; */
}

input {
  /* width: 100%; */
  font-size: 20px;
  width: 60px;
  border-style: solid;
  border-width: 1px;
}

.fld-label {
  padding: 0 0 0 5px;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}

.modal .modal__remember input,
.modal .modal__remember--new input {
  font-size: 16px;
}

.fld-chk {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #dddddd;
  border-radius: 5px;
  text-align: center;
  margin-left: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: #d3d6db;
  outline: none;
  cursor: pointer;
  /* box-shadow: 4px 6px 5px -3px #e5e5e5; */
  transition: all ease-in-out 0.4s, box-shadow ease-in-out 0.15s;
}

.fld-chk:hover {
  color: #aeb1b5;
  color: #ffffff;
  border: 1px solid #fee000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04), 2px 2px 2px rgba(0, 0, 0, 0.04), 4px 4px 4px rgba(0, 0, 0, 0.04);
  /* transition: all ease-in-out .35s, box-shadow ease-in-out .15s; */
}

.fld-chk:checked:hover {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04), 2px 2px 2px rgba(0, 0, 0, 0.04), 4px 4px 4px rgba(0, 0, 0, 0.04);
}

.fld-chk::after {
  content: "✔";
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  line-height: 1;
  padding-top: 2px;
  box-sizing: content-box;
}

.fld-chk,
.fld-chk::after {
  font-size: 16px;
}

.fld-chk:checked {
  background-color: #3cb371;
  /* box-shadow: none; */
  color: transparent;
  border: none;
}

.fld-chk:checked::after {
  opacity: 1;
}

.fld-chk:active {
  transform: scale(0);
}

.fld-chk:disabled:after {
  transform: scale(1);
  border-color: #aaa;
}

.fld-chk:checked:disabled:after {
  transform: scale(1);
}

.fld-chk-lbl {
  /* flex: 1; */
  display: inline-block;
  height: 100px;
  /* block width - tickbox width */
  font-size: 18px;
  line-height: 1.25;
  overflow: hidden;
  word-wrap: break-word;
  text-align: left;
}

/* ==========================================================================
   #INPUT
   ========================================================================== */
/**
 * This makes input boxes look nicer instead of the default boring design
 * For styling, use a style variant
 * input HTML should include placeholder, required and tabindex attributes
 */
/*
 * https://codepen.io/zellwk/pen/NeRaPw
* input box empty, uses ::placeholder-shown
 */
label,
input {
  /* display: block; */
  margin: 0 auto;
}

label {
  font-size: 24px;
  /* font-weight: 600; */
}

input {
  /* width: 100%; */
  font-size: 20px;
  width: 60px;
  border-style: solid;
  border-width: 1px;
}

/* Style variants
   ========================================================================== */
.e-input--primary {
  height: 2rem;
  padding: 0.25em 0.5em;
  font-size: 22px;
  font-family: "Source Sans Pro", sans-serif;
  border: 2px solid #fee000;
  border-radius: 6px;
}
.e-input--primary:hover, .e-input--primary:focus, .e-input--primary:active {
  background-color: #f4f4f4;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.e-input--primary:focus, .e-input--primary:active {
  color: white;
  outline: none;
  background-color: #231f20;
  transition: background-color 0.2s linear, color 0.2s linear;
  box-shadow: 0 0 0 0.125rem white, 0 0 0 0.325rem #fee000;
}
.e-input--primary:placeholder-shown {
  background-color: #fee000;
}

.e-input--secondary {
  height: 2rem;
  padding: 0.25em 0.5em;
  font-size: 22px;
  font-family: "Source Sans Pro", sans-serif;
  border: 2px solid #fee000;
  border-radius: 12px;
}
.e-input--secondary:hover, .e-input--secondary:focus, .e-input--secondary:active {
  background-color: #f4f4f4;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.e-input--secondary:focus, .e-input--secondary:active {
  color: white;
  outline: none;
  background-color: #231f20;
  transition: background-color 0.2s linear, color 0.2s linear;
  box-shadow: 0 0 0 0.125rem white, 0 0 0 0.325rem #fee000;
}
.e-input--secondary:placeholder-shown {
  background-color: #fee000;
}

/* Size variants
   ========================================================================== */
.c-input--small {
  padding: 6px 12px;
}

.c-input--large {
  padding: 24px 48px;
}

/**
 * Positive buttons skin. Extends `.btn`.
 */
.e-input--positive {
  background-color: green;
  color: white;
}

/**
 * Negative buttons skin. Extends `.btn`.
 */
.e-input--negative {
  background-color: red;
  color: white;
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */
}

/**
  * If a `width` and/or `height` attribute has been explicitly defined, let’s
  * not make the image fluid.
  */
img[width],
img[height] {
  max-width: none;
}

video {
  max-width: 100%;
  vertical-align: middle;
}

/* ==========================================================================
   #BASE-FRAMEWORK
   ========================================================================== */
/**
 * CSS framework code that's handy
 *
 */
.o-flex {
  display: flex;
}

.o-flex--1 {
  flex: 1;
}

.o-flex--2 {
  flex: 2;
}

.o-flex--3 {
  flex: 3;
}

.o-flex--4 {
  flex: 4;
}

.o-flex.centre {
  justify-content: center;
}

.o-flex.right {
  justify-content: flex-end;
}

.o-flex.left {
  justify-content: flex-start;
}

.o-flex-row {
  flex-direction: row !important;
}

.o-flex-column {
  flex-direction: column !important;
}

.o-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.o-flex-column-reverse {
  flex-direction: column-reverse !important;
}

.o-flex-wrap {
  flex-wrap: wrap !important;
}

.o-flex-nowrap {
  flex-wrap: nowrap !important;
}

.o-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.b-black {
  border: 1px solid #000000;
}

/* ==========================================================================
   #FLEX FRAMEWORK
   ========================================================================== */
/* Row - flro
* x 	ce, le, ri, be, ar, st, ev
* y 	ce, to, bo, st, ba

* Column - flco
* x 	ce, le, ri, st, ba
* y 	ce, to, bo, st, be, ar, ev

* ce - center, st-stretch, ba-baseline
* be-flex-between, ar-flex-around, ev - flex-evenly
* x - le- left, ri- right
* y - to- top, bo-bottom

* wrap, nowrap, wrap-reverse

*/
.flro {
  display: flex;
  flex-direction: row;
}

.flco {
  display: flex;
  flex-direction: column;
}

.flrr {
  display: flex;
  flex-direction: row-reverse;
}

.flcr {
  display: flex;
  flex-direction: column-reverse;
}

.flro.xce,
.flrr.xce,
.flco.yce,
.flcr.yce {
  justify-content: center;
}

.flro.xle,
.flrr.xle,
.flco.yto,
.flcr.yto {
  justify-content: flex-start;
}

.flro.xri,
.flrr.xri,
.flco.ybo,
.flcr.ybo {
  justify-content: flex-end;
}

.flro.xbe,
.flrr.xbe,
.flco.ybe,
.flcr.ybe {
  justify-content: space-between;
}

.flro.xar,
.flrr.xar,
.flco.yar,
.flcr.yar {
  justify-content: space-around;
}

.flro.xev,
.flrr.xev,
.flco.yev,
.flcr.yev {
  justify-content: space-evenly;
}

.flro.xst,
.flrr.xst,
.flco.yst,
.flcr.yst {
  justify-content: stretch;
}

.flro.yce,
.flrr.yce,
.flco.xce,
.flcr.xce {
  align-items: center;
}

.flro.yto,
.flrr.yto,
.flco.xle,
.flcr.xle {
  align-items: flex-start;
}

.flro.ybo,
.flrr.ybo,
.flco.xri,
.flcr.xri {
  align-items: flex-end;
}

.flro.yst,
.flrr.yst,
.flco.xst,
.flcr.xst {
  align-items: stretch;
}

.flro.yba,
.flrr.yba,
.flco.xba,
.flcr.xba {
  align-items: baseline;
}

.flro.xyce,
.flrr.xyce,
.flco.xyce,
.flcr.xyce {
  justify-content: center;
  align-items: center;
}

.flro.wrap,
.flrr.wrap,
.flco.wrap,
.flcr.wrap {
  flex-wrap: wrap !important;
}

.flro.nowrap,
.flrr.nowrap,
.flco.nowrap,
.flcr.nowrap {
  flex-wrap: nowrap !important;
}

.flro.wrap-reverse,
.flrr.wrap-reverse,
.flco.wrap-reverse,
.flcr.wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex--1 {
  flex: 1;
}

.flex--2 {
  flex: 2;
}

.flex--3 {
  flex: 3;
}

.flex--4 {
  flex: 4;
}

.layout-abs-tl {
  position: absolute;
  top: 0;
  left: 0;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
.wrapper {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1250px;
}

#projects .wrapper {
  max-width: 675px;
}

.centre-text-wrapper {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
}

/* ==========================================================================
   #CONTAINER
   ========================================================================== */
.o-container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .o-container {
    max-width: 95%;
  }
}
@media (min-width: 768px) {
  .o-container {
    max-width: 740px;
  }
}
@media (min-width: 992px) {
  .o-container {
    max-width: 960px;
  }
}
@media (min-width: 1250px) {
  .o-container {
    max-width: 1250px;
  }
}
/* ==========================================================================
   #CONTAINER-FLUID
   ========================================================================== */
.o-container-fluid {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
}
@media (max-width: 599px) {
  .o-container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .o-container-fluid {
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .o-container-fluid {
    padding-right: 30px;
    padding-left: 30px;
  }
}
@media (min-width: 1200px) and (max-width: 1799px) {
  .o-container-fluid {
    padding-right: 40px;
    padding-left: 40px;
  }
}
@media (min-width: 1800px) {
  .o-container-fluid {
    padding-right: 50px;
    padding-left: 50px;
  }
}

/* ==========================================================================
   #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--flush {
  margin-left: 0;
}
.o-layout--flush > .o-layout__item {
  padding-left: 0;
}

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

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

/**
 * Stretch all grid items of each row to have an equal-height.
 * Please be aware that this modifier class doesn’t take any effect in IE9 and
 * below and other older browsers due to the lack of `display: flex` support.
 */
.o-layout--stretch {
  display: flex;
  flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
  display: flex;
}
.o-layout--stretch.o-layout--center {
  justify-content: center;
}
.o-layout--stretch.o-layout--right {
  justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
  justify-content: flex-start;
}

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

/**
 * Fill up the layout system from the left-hand side. This will likely only be
 * needed when using in conjunction with `.o-layout--reverse`.
 */
.o-layout--left {
  text-align: left;
}
.o-layout--left > .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;
}

/* Auto-widths modifier
   ========================================================================== */
/**
 * Cause layout items to take up a non-explicit amount of width.
 */
.o-layout--auto > .o-layout__item {
  width: auto;
}

/*
 * My code
   ========================================================================== *
*/
.o-center-x {
  margin: 0 auto;
  text-align: center;
}

.o-center-y {
  margin-top: auto;
  margin-bottom: auto;
}

.o-flex.x--center {
  justify-content: center;
}
.o-flex.x--left {
  justify-content: flex-start;
}
.o-flex.x--right {
  justify-content: flex-end;
}
.o-flex.x--between {
  justify-content: space-between;
}
.o-flex.x--around {
  justify-content: space-around;
}
.o-flex.x--evenly {
  justify-content: space-evenly;
}
.o-flex.y--center {
  align-items: center;
}
.o-flex.y--top {
  align-items: flex-start;
}
.o-flex.y--bottom {
  align-items: flex-end;
}
.o-flex.y--stretch {
  align-items: stretch;
}
.o-flex.y--baseline {
  align-items: baseline;
}
.o-flex.xy--center {
  justify-content: center;
  align-items: center;
}

.o-layout-x-half {
  width: 50%;
}

.o-layout-x-full {
  width: 100%;
}

.o-layout-xv-half {
  width: 50vh;
}

.o-layout-xv-full {
  width: 100vh;
}

.o-layout-yv-half {
  height: 50vh;
}

.o-layout-yv-full {
  height: 100vh;
}

.o-layout-abs-tl {
  position: absolute;
  top: 0;
  left: 0;
}

.o-layout-abs-cc {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.o-layout-abs-tr {
  position: absolute;
  top: 0;
  right: 0;
}

.o-layout-abs-bl {
  position: absolute;
  bottom: 0;
  left: 0;
}

.o-layout-abs-br {
  position: absolute;
  bottom: 0;
  right: 0;
}

.outer-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  z-index: 0;
}

/* ==========================================================================
   #SECTION
   ========================================================================== */
/**
 * section and text work together -
 * section--primary and text--primary colors go together
 * Do I need to change selection text color?
 */
.section--primary {
  background-color: white;
  padding-top: 24px;
  padding-bottom: 24px;
}

.section--secondary {
  background-color: #fee000;
  padding-top: 24px;
  padding-bottom: 24px;
}

.section {
  /* height: 800px; */
  padding-top: 50px;
  overflow: hidden;
}

.title-container {
  width: 100%;
  height: 175px;
}

.section h1,
.section h2 {
  /* font-size: 50px; */
  text-align: center;
}

.section-id {
  padding-top: 50px;
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets and any
 * indentation.
 *
 * Note: Declaring the item class might not be necessary everywhere,
 * but is for example in <dl> lists for the <dd> children.
 */
.o-list-bare {
  list-style: none;
  margin-left: 0;
}

.o-list-bare__item {
  margin-left: 0;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-list-inline {
  margin-left: 0;
  list-style: none;
}

.o-list-inline__item {
  display: inline-block;
}

.a-toc {
  display: block;
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 600;
}

.toc-h2 {
  font-size: 19px;
  margin-left: 0px;
}

.toc-h3 {
  font-size: 16px;
  margin-left: 10px;
}

.toc-h4 {
  font-size: 16px;
  margin-left: 20px;
}

.toc-h5 {
  font-size: 15px;
  margin-left: 30px;
}

.toc-h6 {
  font-size: 15px;
  margin-left: 40px;
}

/* ==========================================================================
   #SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-x {}
 *   .u-padding-y-small {}
 */
.u-padding {
  padding: 24px !important;
}

.u-padding-tiny {
  padding: 6px !important;
}

.u-padding-small {
  padding: 12px !important;
}

.u-padding-large {
  padding: 48px !important;
}

.u-padding-huge {
  padding: 96px !important;
}

.u-padding-none {
  padding: 0 !important;
}

.u-padding-top {
  padding-top: 24px !important;
}

.u-padding-top-tiny {
  padding-top: 6px !important;
}

.u-padding-top-small {
  padding-top: 12px !important;
}

.u-padding-top-large {
  padding-top: 48px !important;
}

.u-padding-top-huge {
  padding-top: 96px !important;
}

.u-padding-top-none {
  padding-top: 0 !important;
}

.u-padding-right {
  padding-right: 24px !important;
}

.u-padding-right-tiny {
  padding-right: 6px !important;
}

.u-padding-right-small {
  padding-right: 12px !important;
}

.u-padding-right-large {
  padding-right: 48px !important;
}

.u-padding-right-huge {
  padding-right: 96px !important;
}

.u-padding-right-none {
  padding-right: 0 !important;
}

.u-padding-bottom {
  padding-bottom: 24px !important;
}

.u-padding-bottom-tiny {
  padding-bottom: 6px !important;
}

.u-padding-bottom-small {
  padding-bottom: 12px !important;
}

.u-padding-bottom-large {
  padding-bottom: 48px !important;
}

.u-padding-bottom-huge {
  padding-bottom: 96px !important;
}

.u-padding-bottom-none {
  padding-bottom: 0 !important;
}

.u-padding-left {
  padding-left: 24px !important;
}

.u-padding-left-tiny {
  padding-left: 6px !important;
}

.u-padding-left-small {
  padding-left: 12px !important;
}

.u-padding-left-large {
  padding-left: 48px !important;
}

.u-padding-left-huge {
  padding-left: 96px !important;
}

.u-padding-left-none {
  padding-left: 0 !important;
}

.u-padding-x {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.u-padding-x-tiny {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.u-padding-x-small {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.u-padding-x-large {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.u-padding-x-huge {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.u-padding-x-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.u-padding-y {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.u-padding-y-tiny {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.u-padding-y-small {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.u-padding-y-large {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.u-padding-y-huge {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.u-padding-y-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-margin {
  margin: 24px !important;
}

.u-margin-tiny {
  margin: 6px !important;
}

.u-margin-small {
  margin: 12px !important;
}

.u-margin-large {
  margin: 48px !important;
}

.u-margin-huge {
  margin: 96px !important;
}

.u-margin-none {
  margin: 0 !important;
}

.u-margin-top {
  margin-top: 24px !important;
}

.u-margin-top-tiny {
  margin-top: 6px !important;
}

.u-margin-top-small {
  margin-top: 12px !important;
}

.u-margin-top-large {
  margin-top: 48px !important;
}

.u-margin-top-huge {
  margin-top: 96px !important;
}

.u-margin-top-none {
  margin-top: 0 !important;
}

.u-margin-right {
  margin-right: 24px !important;
}

.u-margin-right-tiny {
  margin-right: 6px !important;
}

.u-margin-right-small {
  margin-right: 12px !important;
}

.u-margin-right-large {
  margin-right: 48px !important;
}

.u-margin-right-huge {
  margin-right: 96px !important;
}

.u-margin-right-none {
  margin-right: 0 !important;
}

.u-margin-bottom {
  margin-bottom: 24px !important;
}

.u-margin-bottom-tiny {
  margin-bottom: 6px !important;
}

.u-margin-bottom-small {
  margin-bottom: 12px !important;
}

.u-margin-bottom-large {
  margin-bottom: 48px !important;
}

.u-margin-bottom-huge {
  margin-bottom: 96px !important;
}

.u-margin-bottom-none {
  margin-bottom: 0 !important;
}

.u-margin-left {
  margin-left: 24px !important;
}

.u-margin-left-tiny {
  margin-left: 6px !important;
}

.u-margin-left-small {
  margin-left: 12px !important;
}

.u-margin-left-large {
  margin-left: 48px !important;
}

.u-margin-left-huge {
  margin-left: 96px !important;
}

.u-margin-left-none {
  margin-left: 0 !important;
}

.u-margin-x {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.u-margin-x-tiny {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.u-margin-x-small {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.u-margin-x-large {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.u-margin-x-huge {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.u-margin-x-none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.u-margin-y {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.u-margin-y-tiny {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.u-margin-y-small {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.u-margin-y-large {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.u-margin-y-huge {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.u-margin-y-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
* Full page height. I like to do this for footers
* vh is now very well supported (2021) except for Opera Mini and IE
* I have javascript modules that can do this if I need to.
* ph = page height, mph = min page height
*/
section.ph,
footer.ph {
  height: 100vh !important;
}

section.mph,
footer.mph {
  min-height: 100vh !important;
}

/* ==========================================================================
   #PAGE FOOT
   ========================================================================== */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Light.woff2") format("woff2"), url("../fonts/Raleway-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
.page-foot {
  padding-top: 25px;
  padding-bottom: 8px;
  background-color: #fee000;
}

.footer__copywrite {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 200;
  color: #000000 !important;
}

.footer-top-bottom {
  padding-top: 50px;
  padding-bottom: 50px;
}

svg {
  fill: none;
}

.footer-email {
  margin: 0px auto 5px;
  padding: 0 5px 15px;
  user-select: text;
  overflow: hidden;
  word-wrap: break-word;
}

.footer-email p {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  margin-bottom: 4px;
  font-size: 1.5rem;
  line-height: 1.25;
  color: #000000;
}

.page-foot h1 {
  font-size: 40px;
  font-weight: 600;
}

.page-foot .nav-list-sub-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.page-foot__logo {
  width: 250px;
  height: 45px;
  margin: 50px auto;
  background-repeat: no-repeat;
}

@media screen and (max-width: 440px) {
  .page-foot .wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-foot h2 {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 375px) {
  .page-foot .nav-list-sub-icon {
    height: 150px;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 325px) {
  .page-foot__logo {
    width: 200px;
  }
}
/* ==========================================================================
   #CARD
   ========================================================================== */
/**
* Basic card shape
*/
.c-card {
  display: inline-block;
}

.c-card--primary {
  background-color: #36426c;
  border-radius: 20px;
}

.c-card--secondary {
  background-color: #88d5f4;
  border: 1px solid #fee000;
  border-radius: 20px;
}

/* ==========================================================================
   #IMAGE-TEXT & TEXT-IMAGE
   ========================================================================== */
.imgtxt {
  display: flex !important;
  margin-top: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  flex-wrap: wrap !important;
}

.imgtxt__image {
  text-align: center;
  padding: 1rem;
  align-self: center;
}

.imgtxt__image img {
  width: 100%;
}

.imgtxt__text {
  padding: 2rem;
  align-self: center;
}

@media screen and (min-width: 900px) {
  .imgtxt__image {
    flex: 1;
  }

  .imgtxt__text {
    flex: 1;
  }
}
@media screen and (max-width: 899px) {
  .imgtxt__image {
    width: 100%;
  }

  .imgtxt__text {
    width: 100%;
  }
}
.txtimg {
  display: flex !important;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap !important;
}

.txtimg__text {
  padding: 2rem;
  align-self: center;
}

.txtimg__image {
  padding: 1rem;
  text-align: left;
  align-self: center;
}

.txtimg__image img {
  width: 100%;
}

@media screen and (min-width: 900px) {
  .txtimg__image {
    flex: 1;
  }

  .txtimg__text {
    flex: 1;
  }
}
@media screen and (max-width: 899px) {
  .txtimg__image {
    width: 100%;
  }

  .txtimg__text {
    width: 100%;
  }
}
/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/**
 * This is an example component. Extend inuitcss by building your own components
 * that make up your UI. Component classes are prefixed with a `c-`.
 */
/**
 *  Example
 *  <button class="c-btn c-btn--primary btn-stopwatch">Start</button>
 */
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 */
.c-btn {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  margin: 0;
  cursor: pointer;
  padding: 12px 24px;
  transition: all 300ms ease-in-out;
  border-radius: 3px;
}

/* Style variants
   ========================================================================== */
.c-btn--primary {
  background-color: #fee000;
}
.c-btn--primary:hover, .c-btn--primary:focus, .c-btn--primary:active {
  color: white;
  text-decoration: none;
  background-color: #eacc00;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.c-btn--primary:focus, .c-btn--primary:active {
  outline: none;
  box-shadow: 0 0 0 0.175rem white, 0 0 0 0.35rem #fee000;
}

.c-btn--secondary {
  background-color: #231f20;
  background-color: #e0e0e0;
  color: black;
}
.c-btn--secondary:hover, .c-btn--secondary:focus, .c-btn--secondary:active {
  text-decoration: none;
  background-color: #aaa;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.c-btn--secondary:focus, .c-btn--secondary:active {
  outline: none;
  box-shadow: 0 0 0 0.125rem #fee000, 0 0 0 0.325rem white;
}

.c-btn--tertiary {
  background-color: #fff;
  color: #4a8ec2;
}
.c-btn--tertiary, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus {
  text-decoration: none;
  color: #4a8ec2;
}
.c-btn--tertiary:hover, .c-btn--tertiary:focus {
  color: #3774a2;
}

/* Size variants
   ========================================================================== */
.c-btn--small {
  padding: 6px 12px;
}

.c-btn--large {
  padding: 24px 48px;
}

/* Ghost buttons
   ========================================================================== */
/**
 * Ghost buttons have see-through backgrounds and are bordered.
 */
.c-btn--ghost {
  border: 2px solid currentColor;
  padding: 10px 22px;
}
.c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus {
  background: none;
}
.c-btn--ghost.c-btn--small {
  padding: 4px 10px;
}
.c-btn--ghost.c-btn--large {
  padding: 22px 46px;
}
.c-btn--ghost.c-btn--primary {
  color: #4a8ec2;
}
.c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus {
  color: #3774a2;
}
.c-btn--ghost.c-btn--secondary {
  color: #2f4054;
}
.c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus {
  color: #1d2733;
}
.c-btn--ghost.c-btn--tertiary {
  color: #fff;
}
.c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus {
  color: #fff;
}

/**
 * Positive buttons skin. Extends `.btn`.
 */
.btn--positive {
  background-color: #3f990f;
  color: white;
}

/**
 * Negative buttons skin. Extends `.btn`.
 */
.btn--negative {
  background-color: #9f102e;
  color: white;
}

.btn--primary,
.btn--secondary {
  height: 30px;
  line-height: 1;
  padding: initial;
  border-radius: 20px;
  font-size: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.btn--primary {
  border: 1px solid #231f20;
  color: white;
}

.btn--secondary {
  border: 1px solid black;
}

#projects a {
  width: 220px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}

.btn--git {
  background-color: #000000;
  color: #ffffff;
}

.btn--git:hover {
  background-color: #224466;
}

.btn--examples {
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
}

.btn--examples:hover {
  background-color: #dddddd;
}

.btn--project {
  min-width: 220px;
  background-color: #fee000;
  outline-offset: -7px;
  outline: 1px solid #000000;
  color: #000000;
}

a.btn--project:hover {
  outline: inherit;
  outline: 1px solid #000000;
  background-color: #fcc000;
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* Not sure how to use these classes */
.c-p {
  color: #fee000;
}

.bg-p {
  background-color: #fee000;
}

.b-p {
  border-color: #fee000;
}

.hover-c-p:hover {
  color: #fee000;
}

.hover-bg-p:hover {
  background-color: #fee000;
}

.hover-b-p:hover {
  border-color: #fee000;
}

.c-s {
  color: #231f20;
}

.bg-s {
  background-color: #231f20;
}

.b-s {
  border-color: #231f20;
}

.hover-c-s:hover {
  color: #231f20;
}

.hover-bg-s:hover {
  background-color: #231f20;
}

.hover-b-s:hover {
  border-color: #231f20;
}

.c-t {
  color: #4444ff;
}

.bg-t {
  background-color: #4444ff;
}

.b-t {
  border-color: #4444ff;
}

.hover-c-t:hover {
  color: #4444ff;
}

.hover-bg-t:hover {
  background-color: #4444ff;
}

.hover-b-t:hover {
  border-color: #4444ff;
}

.c-white {
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.b-white {
  border: #ffffff;
}

.hover-c-white:hover {
  color: #ffffff;
}

.hover-bg-white:hover {
  background-color: #ffffff;
}

.c-black {
  color: #000000;
}

.bg-black {
  background-color: #000000;
}

.b-black {
  border: #000000;
}

.hover-c-black:hover {
  color: #000000;
}

.hover-bg-black:hover {
  background-color: #000000;
}

.bg-positive {
  background-color: #3f990f;
}

.hover-bg-positive:hover {
  background-color: lime;
}

/* ========================================================================
//   # STOOGE
//   ======================================================================== */
/* Grab the classes you need from:
https://github.com/chrisjwaddell/Stooge-CSS/blob/main/dist/stooge.css */
.dib {
  display: inline-block;
}

.db {
  display: block;
}

.dn {
  display: none;
}

.po-re {
  position: relative;
}

.po-ab {
  position: absolute;
}

/* ^^SPACING */
/* ------------------------------------------------------------------------------- */
/* ^width  */
.wi-au {
  width: auto;
}

.wi-ih {
  width: inherit;
}

.wi-0 {
  width: 0rem;
}

.wi-025 {
  width: 0.25rem;
}

.wi-05 {
  width: 0.5rem;
}

.wi-075 {
  width: 0.75rem;
}

.wi-1 {
  width: 1rem;
}

.wi-125 {
  width: 1.25rem;
}

.wi-15 {
  width: 1.5rem;
}

.wi-175 {
  width: 1.75rem;
}

.wi-2 {
  width: 2rem;
}

.wi-225 {
  width: 2.25rem;
}

.wi-25 {
  width: 2.5rem;
}

.wi-3 {
  width: 3rem;
}

.wi-35 {
  width: 3.5rem;
}

.wi-4 {
  width: 4rem;
}

.wi-45 {
  width: 4.5rem;
}

.wi-5 {
  width: 5rem;
}

.wi-55 {
  width: 5.5rem;
}

.wi-6 {
  width: 6rem;
}

.wi-65 {
  width: 6.5rem;
}

.wi-8 {
  width: 8rem;
}

.wi-10 {
  width: 10rem;
}

.wi-12 {
  width: 12rem;
}

.wi-14 {
  width: 14rem;
}

.wi-16 {
  width: 16rem;
}

.wi-20a {
  width: 20rem;
}

.wi-24a {
  width: 24rem;
}

.wi-25a {
  width: 25rem;
}

.wi-30a {
  width: 30rem;
}

.wi-32a {
  width: 32rem;
}

.wi-35a {
  width: 35rem;
}

.wi-40a {
  width: 40rem;
}

.wi-45a {
  width: 45rem;
}

.wi-48a {
  width: 48rem;
}

.wi-50a {
  width: 50rem;
}

.wi-55a {
  width: 55rem;
}

.wi-60a {
  width: 60rem;
}

.wi-64a {
  width: 64rem;
}

.wi-70a {
  width: 70rem;
}

.wi-72a {
  width: 72rem;
}

.wi-75a {
  width: 75rem;
}

.wi-80a {
  width: 80rem;
}

.wi-85a {
  width: 85rem;
}

.wi-88a {
  width: 88rem;
}

.wi-96a {
  width: 96rem;
}

.wi-60-p {
  width: 60%;
}

.mt-075 {
  margin-top: 0.75rem;
}

.ml-au {
  margin-left: auto;
}

.mr-au {
  margin-right: auto;
}

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

.ta-l {
  text-align: left;
}

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

.underline,
.td-un {
  text-decoration: underline !important;
}

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

.mt-05 {
  margin-top: 0.5rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 3rem;
}

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

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mx-au {
  margin-left: auto;
  margin-right: auto;
}

/* ^padding */
.pa-0 {
  padding: 0;
}

.pa-025 {
  padding: 0.25rem;
}

.pa-05 {
  padding: 0.5rem;
}

.pa-075 {
  padding: 0.75rem;
}

.pa-1 {
  padding: 1rem;
}

.pa-125 {
  padding: 1.25rem;
}

.pa-15 {
  padding: 1.5rem;
}

.pa-175 {
  padding: 1.75rem;
}

.pa-2 {
  padding: 2rem;
}

.pa-225 {
  padding: 2.25rem;
}

.pa-25 {
  padding: 2.5rem;
}

.pa-3 {
  padding: 3rem;
}

.pa-35 {
  padding: 3.5rem;
}

.pa-4 {
  padding: 4rem;
}

.pa-45 {
  padding: 4.5rem;
}

.pa-5 {
  padding: 5rem;
}

.pa-55 {
  padding: 5.5rem;
}

.pa-6 {
  padding: 6rem;
}

.pa-65 {
  padding: 6.5rem;
}

.pa-8 {
  padding: 8rem;
}

.pa-10 {
  padding: 10rem;
}

.pa-12 {
  padding: 12rem;
}

.pa-14 {
  padding: 14rem;
}

.pa-16 {
  padding: 16rem;
}

.pa-au {
  padding: auto;
}

.pl-2 {
  padding-left: 2rem;
}

.pt-0 {
  padding-top: 0;
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Light.woff2") format("woff2"), url("../fonts/Raleway-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
h1 {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.1666666667;
}

h2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
}

h3 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
}

h5 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}

h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2 {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  line-height: 1.3;
  color: #231f20;
}

/**
 * Headings.
 *
 * Redefine our heading styles against utility classes. This gives us a double
 * stranded heading hierarchy whereby we can style one heading as another, e.g.:
 *
     <h4 class="u-h1">I am an H4 that is the same size as an H1</h4>
 *
 */
.u-h1 {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.1666666667;
}

.u-h2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
}

.u-h3 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

.u-h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
}

.u-h5 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}

.u-h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

/**
 * Adjustments.
 *
 * ‘Can you just make that text a little bigger?’
 *
 * Sure! Use these utilities to adjust the size of a span of text by a little
 * bit more, or a little bit less, e.g.:
 *
     <p class="u-text++">A little bit bigger.</p>
 *
 */
.u-text- + {
  font-size: larger !important;
}

.u-text-- {
  font-size: smaller !important;
}

/**
 * Alignments.
 */
.u-text-right {
  text-align: right !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-justify {
  text-align: justify !important;
}

/**
 * Truncation.
 *
 * Cause long spans of text to truncate after running out of horizontal space.
 */