/* --------
|
| Sass entry point
|
-------- */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

@font-face {
  font-family: 'circularstd-book';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/CircularStd-Book.otf");
}

@font-face {
  font-family: 'circularstd-bold';
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/CircularStd-Bold.otf");
}

/* --------
|
| Variables
|
-------- */
/*
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}
*/
/* --------
|
| Basic layout
|
-------- */
html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 960px) {
  html {
    font-size: 56.25%;
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: 50%;
  }
}

@media screen and (max-width: 360px) {
  html {
    font-size: 43.75%;
  }
}

body {
  background: #fff;
  color: #1B1F21;
  font-family: Helvetica, Arial, sans-serif;
}

.container {
  margin: 0 auto;
  max-width: 1176px;
  padding: 0 2.4rem;
  position: relative;
}

main section {
  padding: 7.2rem 0;
}

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

section h2 {
  background: #015F7A;
  color: #fff;
  display: inline-block;
  font-family: "circularstd-bold", Helvetica, Arial, sans-serif;
  font-size: 2.4em;
  font-weight: bold;
  margin: 0 0 2em;
  padding: 0.5em 0.75em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}

section h2:before {
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
  background: inherit;
  content: '';
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  transform: skewX(12deg);
  transform-origin: 0% 100%;
  z-index: -1;
}

section h2:after {
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
  background: inherit;
  content: '';
  height: 100%;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  transform: skewX(12deg);
  transform-origin: 100% 0%;
  z-index: -1;
}

p, input {
  font-size: 1.8em;
  font-weight: 300;
  line-height: 1.4;
}

a, a:visited {
  color: #03AEDB;
  text-decoration: underline;
}

a:hover, a:active, a:focus {
  text-decoration: none;
}

.skew:after {
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
  background: inherit;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: visible;
  height: 50%;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: 100%;
  z-index: 0;
}

.grid-4, .grid-3, .grid-2 {
  text-align: center;
}

.grid-4 .grid-item, .grid-3 .grid-item, .grid-2 .grid-item {
  display: block;
  margin-bottom: 4%;
}

.grid-4 .grid-item:last-of-type {
  margin-right: 0;
}

@media screen and (min-width: 480px) {
  .grid-4 .grid-item {
    float: left;
    margin-bottom: 2%;
    margin-right: 2%;
    width: 49%;
  }
}

@media screen and (min-width: 767px) {
  .grid-4 .grid-item {
    width: 23.5%;
  }
}

.grid-3 .grid-item:last-of-type {
  margin-right: 0;
}

@media screen and (min-width: 480px) {
  .grid-3 .grid-item {
    float: left;
    margin-bottom: 2%;
    margin-right: 2%;
    width: 49%;
  }
}

@media screen and (min-width: 767px) {
  .grid-3 .grid-item {
    width: 32%;
  }
}

.grid-2 .grid-item:last-of-type {
  margin-right: 0;
}

@media screen and (min-width: 480px) {
  .grid-2 .grid-item {
    float: left;
    margin-bottom: 2%;
  }
}

@media screen and (min-width: 767px) {
  .grid-2 .grid-item {
    margin-right: 2%;
    width: 49%;
  }
}

@media screen and (min-width: 480px) {
  .grid-4 .grid-item:nth-of-type(2n) {
    margin-right: 0;
  }
  .grid-3 .grid-item:nth-of-type(2n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 767px) {
  .grid-4 .grid-item:nth-of-type(2n) {
    margin-right: 2%;
  }
  .grid-4 .grid-item:nth-of-type(4n) {
    margin-right: 0;
  }
  .grid-3 .grid-item:nth-of-type(2n) {
    margin-right: 2%;
  }
}

/* --------
|
| Component/section styles
|
-------- */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.button, .button:visited {
  background: #fff;
  border: 1px solid #BABABA;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(80, 80, 80, 0.5);
  color: #015F7A;
  display: inline-block;
  font-size: 1.6em;
  font-weight: bold;
  padding: 0.75em 1em;
  text-decoration: none;
  transition: background-color 0.33s;
}

.button:hover, .button:active, .button:focus {
  background: #f6f6f6;
}

/*-------
 Header
--------*/
.site-header {
  background: #015F7A;
  color: #fff;
  height: 4.8em;
  padding: 1.8em 0;
  position: fixed;
  transition: box-shadow 0.25s ease-in-out;
  width: 100%;
  z-index: 2;
}

.site-header.shadow {
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
}

.site-header .logo {
  height: 4.8em;
}

/*-------
 Navigation
--------*/
.scc-navigation {
  position: absolute;
  top: 0;
  right: 2.7em;
}

.scc-navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.scc-navigation li {
  color: #fff;
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.3em;
  letter-spacing: 1px;
  line-height: 4.8rem;
  margin-right: 0.5em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media screen and (max-width: 480px) {
  .scc-navigation li {
    margin-right: 2em;
  }
}

.scc-navigation li:last-of-type {
  margin-right: 0;
}

.scc-navigation a:link, .scc-navigation a:visited {
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
}

.scc-navigation a:hover, .scc-navigation a:focus, .scc-navigation a:active {
  text-decoration: underline;
}

/*-------
 Homepage introduction
--------*/
.homepage-introduction {
  background: #015F7A;
  color: #fff;
  padding: 0;
  position: relative;
  text-align: center;
  top: 8.4rem;
}

.homepage-introduction .container {
  max-width: 960px;
  position: relative;
  z-index: 1;
}

.homepage-introduction h1 {
  font-size: 4.8em;
  font-family: "circularstd-book", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.125;
  max-width: 57.6rem;
  margin: 0 auto;
  padding: 3.6rem 0 0;
}

.homepage-introduction h1 strong {
  font-family: "circularstd-bold", Helvetica, Arial, sans-serif;
}

.homepage-introduction p {
  font-size: 2.4em;
  font-weight: lighter;
  line-height: 1.33;
  margin: 1em auto;
  max-width: 57.6rem;
  padding-bottom: 4.8rem;
}

.homepage-introduction .introduction-illustration {
  display: none;
  float: left;
  width: 25%;
}

@media screen and (min-width: 620px) {
  .homepage-introduction h1 {
    padding-top: 6.4rem;
  }
}

@media screen and (min-width: 720px) {
  .homepage-introduction {
    text-align: left;
  }
  .homepage-introduction h1 {
    margin: 0;
  }
  .homepage-introduction p {
    margin: 1em 0;
    padding-bottom: 3.6rem;
  }
  .homepage-introduction .the-pitch {
    float: left;
    width: 65%;
  }
  .homepage-introduction .introduction-illustration {
    display: block;
  }
}

/*-------
 Products (and persons)
--------*/
.our-products {
  background: #EAEAE4;
  padding-top: 18rem;
}

.product, .person {
  background: #fff;
  border-radius: 6px;
  padding: 3.6rem 0;
  text-align: center;
}

.product h3, .product p,
.person h3, .person p {
  padding: 0 2.4rem;
}

.product h3 {
  background: url("../img/logo-pdftables.svg") no-repeat center center;
  background-size: contain;
  margin: 0 2.4rem;
  padding: 0;
  height: 3.6rem;
  text-indent: -999em;
}

.product h3 a {
  display: block;
  height: 100%;
}

.quickcode h3 {
  background-image: url("../img/logo-quickcode.svg");
}

.databaker h3 {
  background-image: url("../img/logo-databaker.svg");
}

.tablebuilder h3 {
  background-image: url("../img/logo-cantabular.svg");
}

.product p.lead {
  font-weight: bold;
}

/*-------
 Homepage products
--------*/
.product--homepage {
  background: none;
  border-radius: 0;
  margin: 0 auto 8rem;
  max-width: 920px;
  padding: 0;
  position: relative;
  text-align: left;
}

.product--homepage h3 {
  background-position: left center;
  margin-left: 0;
  margin-right: 0;
}

.product--homepage p.lead {
  font-size: 2.4em;
  font-weight: 300;
  padding-right: 0;
  padding-left: 0;
}

.product--homepage .product__image {
  border: 1px solid #D6D6CC;
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  float: left;
  margin: 0 0 3rem 2%;
  width: 54%;
}

.product--homepage .product__introduction {
  float: left;
  padding-top: 3em;
  width: 44%;
}

.product--homepage .case-study-link {
  font-size: 1.8em;
  margin-left: 1rem;
}

.product__features {
  border-top: 1px solid #D6D6CC;
  border-bottom: 1px solid #D6D6CC;
  clear: both;
  column-count: 2;
  column-gap: 2rem;
  margin: 0 0 2.4rem;
  padding: 2.4rem 0 1.2rem;
}

.product__features li {
  break-inside: avoid;
  display: block;
  font-size: 2em;
  font-weight: 300;
  line-height: 1.4;
  margin: 0 0 1rem;
  max-width: 320px;
  padding-left: 1.6em;
  position: relative;
}

.product__features li::before {
  background: url("../img/icon-blue-check.svg") no-repeat 0 20%;
  background-size: contain;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1.6em;
}

.product__archive {
  background: #E3E3DB;
  border-radius: 6px;
  display: block;
  padding: 2rem;
  text-align: center;
}

@media screen and (max-width: 680px) {
  .product--homepage h3 {
    background-position: center center;
  }
  .product--homepage .product__introduction, .product--homepage .product__image {
    display: block;
    float: none;
    margin: 0 auto 4rem;
    max-width: 100%;
    text-align: center;
    width: auto;
  }
  .product--homepage .product__introduction {
    padding-top: 0;
  }
}

/*-------
 Clients
--------*/
.clients {
  background: #fff;
  padding-bottom: 2.4em;
  position: relative;
}

.clients .container {
  z-index: 1;
}

.clients ul {
  margin: 0;
  padding: 0;
}

.clients li {
  border: 1px solid #E0E0E0;
  box-sizing: border-box;
  display: block;
  font-size: 1.6em;
  margin-bottom: 2.4rem;
  position: relative;
  text-align: center;
  text-indent: -999em;
}

.clients li .logo {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: block;
  margin: 2.4rem auto;
  max-width: 20em;
  min-height: 10em;
}

@media screen and (min-width: 480px) {
  .clients li .logo {
    margin: 2.4rem;
  }
}

@media screen and (min-width: 620px) {
  .clients li .logo {
    margin: 2.4rem auto;
  }
}

@media screen and (min-width: 767px) {
  .clients li .logo {
    margin: 2.4rem;
  }
}

.client-lexis-nexis .logo {
  background-image: url(../img/client-lexis-nexis.png);
}

.client-horizon-2020 .logo {
  background-image: url(../img/client-horizon-2020.png);
}

.client-gds .logo {
  background-image: url(../img/client-gds.png);
}

.client-milner-group .logo {
  background-image: url(../img/client-milner-group.png);
}

.client-ocha .logo {
  background-image: url(../img/client-ocha.png);
}

.client-ons .logo {
  background-image: url(../img/client-ons.png);
}

.client-autotrader .logo {
  background-image: url(../img/client-autotrader.png);
}

.client-guardian .logo {
  background-image: url(../img/client-guardian.png);
}

.client-dclg .logo {
  background-image: url(../img/client-dclg.png);
}

.client-channel-4 .logo {
  background-image: url(../img/client-channel-4.png);
}

.client-world-bank .logo {
  background-image: url(../img/client-world-bank.png);
}

.client-fundomate .logo {
  background-image: url(../img/client-fundomate.png);
}

.client-enterbridge .logo {
  background-image: url(../img/client-enterbridge.png);
}

.client-roostify .logo {
  background-image: url(../img/client-roostify.png);
}

/*-------
 About Us
--------*/
.about-us {
  background: #25464F;
  color: #fff;
  padding-top: 12rem;
}

.about-us .lead {
  font-size: 2.4em;
  margin-top: 0;
}

@media screen and (min-width: 620px) {
  .about-us .introduction {
    float: left;
    margin-right: 3%;
    width: 30%;
  }
  .about-us .content {
    float: left;
    width: 67%;
  }
  .about-us .content p {
    margin-top: 0;
  }
}

@media screen and (min-width: 767px) {
  .about-us .content {
    column-gap: 2.4rem;
    columns: 2;
  }
}

/*-------
 Team
--------*/
.team {
  background: #EAEAE4;
}

.person {
  padding-top: 2.4rem;
}

.person h3 {
  font-family: "circularstd-bold", Helvetica, Arial, sans-serif;
  font-size: 2.0em;
  font-weight: bold;
  margin: 0 0 0.25em;
}

.person p {
  display: table;
  margin: 0.5em 0;
  padding: 0;
  width: 100%;
}

.person .role {
  display: table-cell;
  height: 3em;
  padding: 0 2.4rem;
  vertical-align: middle;
}

.person .person-photo {
  background: #D2D9DB;
  border-radius: 6px;
  display: block;
  overflow: hidden;
  margin: 0 2.4rem 2.4rem;
}

.person .person-photo img {
  cursor: pointer;
  display: block;
  width: 100%;
}

.person a {
  display: inline-block;
  font-size: 1.8em;
  margin: 0;
}

.person a.close {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.bio {
  display: none;
}

.fullscreen-container {
  background: rgba(1, 95, 122, 0.95);
  opacity: 0;
  padding: 2em;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  transition: opacity 0.25s;
  z-index: 2;
}

.fullscreen-container.show {
  opacity: 1;
}

.fullscreen-container .person {
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
  max-width: 500px;
  padding: 8em 6em;
  position: relative;
  vertical-align: middle;
}

.fullscreen-container .person h3 {
  font-size: 2.4em;
  margin: 0;
}

.fullscreen-container .person h3 + p {
  display: block;
  font-size: 2.4em;
  margin: 0 0 1em;
  text-align: center;
}

.fullscreen-container .person .role {
  display: block;
  height: auto;
}

.fullscreen-container a.read-more {
  display: none;
}

.fullscreen-container a.close {
  background: url("../img/icon-close.svg") no-repeat center center;
  background-size: contain;
  display: block;
  height: 1.2em;
  width: 1.2em;
  position: absolute;
  top: 2em;
  right: 2em;
  text-indent: -999em;
}

.fullscreen-container .bio {
  display: block;
}

.fullscreen-container .person-photo {
  margin: 0 auto 4em;
  height: 240px;
  width: 240px;
}

/*-------
 Contact us
--------*/
.contact-us {
  background: #25464F;
  color: #fff;
  text-align: center;
}

.contact-us .lead {
  font-family: "circularstd-book", Helvetica, Arial, sans-serif;
  font-size: 2.4em;
  margin: 0 0 4.8rem;
}

.contact-us .lead a {
  color: #FFF566;
}

.contact-us .addresses {
  display: flex;
}

@media screen and (min-width: 767px) {
  .contact-us .addresses {
    margin: 0 auto;
    width: 50%;
  }
}

.contact-us .address {
  background: #233A43;
  border-radius: 6px;
  display: block;
  flex: 1;
  margin-right: 2%;
  padding: 2.4rem;
  text-align: left;
}

.contact-us .address p {
  margin: 0;
}

.contact-us .address:last-of-type {
  margin-right: 0;
}

.contact-us .address h3 {
  font-size: 1.8em;
  margin-top: 0;
}

/*-------
 Footer
--------*/
.site-footer {
  padding: 4.8rem 0;
  text-align: center;
}

.site-footer .logo {
  display: block;
  margin-bottom: 4.8em;
  text-align: center;
}

.site-footer p {
  color: #69777A;
  font-size: 1.3em;
  margin: 3.6rem 0 1.8rem;
}

.site-footer .pipe {
  color: #E0E0E0;
  margin: 0 0.5em;
}

.social-navigation ul {
  padding: 0;
}

.social-navigation li.social {
  display: inline-block;
  margin-right: 1em;
  text-indent: -999em;
}

.social-navigation li.social a {
  background-color: #fff;
  background-repeat: no-repeat;
  display: block;
  height: 31px;
  padding: 0;
  width: 31px;
}

.social-navigation li.social:last-of-type {
  margin-right: 0;
}

.social-navigation .icon-github a {
  background-image: url("../img/icon-github.svg");
}

.social-navigation .icon-twitter a {
  background-image: url("../img/icon-twitter.svg");
}

.social-navigation .icon-linkedin a {
  background-image: url("../img/icon-linkedin.svg");
}

@media screen and (min-width: 360px) {
  .site-footer {
    text-align: left;
  }
  .site-footer .logo {
    display: inline-block;
    width: auto;
  }
  .social-navigation {
    position: absolute;
    top: 0;
    right: 2.4rem;
  }
}