@charset "UTF-8";
/*------------------------------------*\
    STYLE.SCSS
\*------------------------------------*/
/**
 * Here we start to pull everything together into one big stylesheet.
 *
 * SETUP............Settings, tools, mixins, etc.
 * GENERIC..........normalize.css, reset, shared styles, etc.
 * BASE.............Basic HTML elements.
 * OBJECTS..........Objects, abstractions, design patterns.
 * GUI..............Components and modules.
 * TRUMPS...........Helpers, overrides, ‘trump-cards’.
 */
/*------------------------------------*\
    #SETUP
\*------------------------------------*/
/**
 * Settings, variables and tools.
 */
/*------------------------------------*\
    #SETTINGS
\*------------------------------------*/
/**
 * Pull in all the settings we require for this project.
 */
/*------------------------------------*\
    #GENERIC
\*------------------------------------*/
/**
 * These are far reaching styles that affect and underpin every element on the
 * page, e.g. `* {}`.
 */
/*------------------------------------*\
    #GENERIC
\*------------------------------------*/
/**
 * Pull in all our generic styles, e.g. resets.
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit; }

* {
  margin: 0; }

img {
  max-width: 100%; }

/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * These are base HTML elements, things with no classes on them, e.g. `h1 {}`,
 * `blockquote {}`.
 */
/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * Pull in all the base files we want.
 */
html {
  color: #191923;
  background-color: #e4eaf5; }

body {
  margin-top: 0px;
  padding-top: 0rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-image: -webkit-gradient(linear, left top, right top, from(#5751cd), to(#5751cd));
  background-image: -webkit-linear-gradient(left, #5751cd, #5751cd);
  background-image: -o-linear-gradient(left, #5751cd, #5751cd);
  background-image: linear-gradient(90deg, #5751cd, #5751cd);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 6px; }

.page-home {
  background-color: #e4eaf5;
  background-image: -webkit-gradient(linear, left top, right top, from(#5751cd), to(#5751cd));
  background-image: -webkit-linear-gradient(left, #5751cd, #5751cd);
  background-image: -o-linear-gradient(left, #5751cd, #5751cd);
  background-image: linear-gradient(90deg, #5751cd, #5751cd); }

.page-work {
  background-color: #edf8fa;
  background-image: -webkit-gradient(linear, left top, right top, from(#37a9ba), to(#37a9ba));
  background-image: -webkit-linear-gradient(left, #37a9ba, #37a9ba);
  background-image: -o-linear-gradient(left, #37a9ba, #37a9ba);
  background-image: linear-gradient(90deg, #37a9ba, #37a9ba); }

main {
  margin-top: 0; }

.skills {
  grid-column: 1 / -1;
  padding: 2rem 2rem; }
  @media (min-width: 680px) {
    .skills {
      overflow-y: visible; } }
  @media (min-width: 800px) {
    .skills {
      padding: 0rem 6rem; } }
  .skills h2 {
    text-align: center; }
    .skills h2 span {
      border-bottom: 6px solid #5751cd;
      padding-bottom: 4px; }

footer {
  display: none;
  margin-top: 0;
  padding: 4rem .5rem .5rem .5rem; }
  footer a {
    border-bottom: 0; }
  footer img {
    width: 100px; }

body {
  font-family: "Alegreya", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  font-size: 1.5em; }

* + * {
  margin-top: 1em; }

.highlighted {
  max-width: 40rem;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.6;
  color: #342e9e; }
  .highlighted a {
    text-decoration: none;
    border-bottom: 4px solid rgba(52, 46, 158, 0.2); }
    .highlighted a:hover, .highlighted a:focus {
      border-bottom-color: #342e9e; }

.tagline {
  max-width: 20em;
  font-weight: 600;
  font-size: 2.4em;
  line-height: 1.5;
  margin-top: 0;
  color: #342e9e; }

h1 {
  display: inline-block;
  color: #5751cd;
  font-weight: 600;
  font-size: 2.4em;
  line-height: 1.5;
  margin-bottom: 0;
  color: #17253f; }
  @media (min-width: 680px) {
    h1 {
      margin-bottom: 0; } }
  h1 span {
    display: block;
    font-size: .4em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #191923;
    background-clip: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #191923; }

h2, .h2 {
  color: #17253f;
  font-weight: 600;
  font-size: .9em;
  line-height: 1.1;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: .03em; }
  h2 + p, .h2 + p {
    margin-top: .4em; }

h3, .h3 {
  color: #5751cd;
  color: #213a41;
  font-weight: 800;
  margin-bottom: 1.25em; }

h4, .h4 {
  font-weight: 800;
  font-size: 1.25em;
  margin-bottom: 2rem; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid currentColor; }
  a:hover, a:focus {
    outline: none;
    -webkit-box-shadow: 0 3px 0 0px currentColor;
    box-shadow: 0 3px 0 0px currentColor; }
  a.cta {
    display: inline-block;
    margin: 1.2em 0;
    padding: .5em 1em;
    border-radius: 2em;
    border: 3px solid currentColor; }
    a.cta:hover, a.cta:focus {
      -webkit-box-shadow: 0 0 0 4px currentColor;
      box-shadow: 0 0 0 4px currentColor; }

table tr:nth-child(2n) {
  background-color: rgba(0, 0, 0, 0.1); }

ul, .list-primary {
  padding-left: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
  list-style-type: none; }
  ul li, .list-primary li {
    font-weight: 500;
    min-height: 2.5rem;
    padding-bottom: .5rem;
    padding-left: 2.6rem;
    background-image: url(./../images/icons/checkmark-purple.svg);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: left 2px; }
    ul li::before, .list-primary li::before {
      content: "\200B";
      /* Make VoiceOver + list-style-type: none; play nice */
      position: absolute; }
    ul li h3, .list-primary li h3 {
      display: inline-block;
      margin-bottom: 0; }
      ul li h3 + p, .list-primary li h3 + p {
        margin-top: .5em; }

.list-secondary li {
  padding-left: 1.9rem;
  background-image: url(./../images/icons/checkmark-purple.svg);
  background-size: 1rem 1rem;
  background-position: left .25rem; }

.list-links li {
  padding-left: 1.9rem;
  background-image: url(./../images/icons/icon-link.png);
  background-size: 1rem 1rem;
  background-position: left .25rem; }

.list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px; }
  .list-grid li {
    padding: 0;
    margin: 0;
    background-image: none; }

.icon-date {
  background-image: url("/images/icon-calendar.png");
  background-size: 1.2rem 1.2rem;
  background-position: left 50%;
  background-repeat: no-repeat;
  padding-left: 1.8rem; }

.icon-location {
  background-image: url("/images/icon-pin.png");
  background-size: .95rem 1.4rem;
  background-position: left 50%;
  background-repeat: no-repeat;
  padding-left: 1.8rem; }

.icon-language {
  background-image: url("/images/icon-flag.png");
  background-size: 1rem 1.4rem;
  background-position: left 50%;
  background-repeat: no-repeat;
  padding-left: 1.8rem; }

.icon-info {
  background-image: url("/images/icon-info.png");
  background-size: 1.2rem 1.2rem;
  background-position: left 50%;
  background-repeat: no-repeat;
  padding-left: 1.8rem; }

.icon-link {
  background-image: url("/images/icon-link.png");
  background-size: 1.2rem 1.2rem;
  background-position: left 50%;
  background-repeat: no-repeat;
  padding-left: 1.8rem; }

.icon-envelope {
  background-image: url("/images/icon-envelope.png");
  background-size: 1.2rem .8rem;
  background-position: left 50%;
  background-repeat: no-repeat;
  padding-left: 1.8rem; }

.visuallyhidden {
  position: absolute;
  left: -9999em; }

.show-js {
  display: none; }

form {
  margin-bottom: 4rem; }

[type="text"], [type="email"], [type="tel"] {
  display: block;
  font: inherit;
  font-size: 1em;
  padding: .4rem;
  margin-top: 0.2rem;
  min-width: 10rem;
  max-width: 20rem;
  width: 100%;
  margin-bottom: 1.6rem;
  border-radius: 3px;
  border: 1px solid #e34dbd;
  border: 1px solid #e34dbd;
  border: 1px solid rgba(23, 37, 63, 0.5);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
  [type="text"]:focus, [type="email"]:focus, [type="tel"]:focus {
    border: 1px solid #5751cd;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    outline-offset: 2px; }

textarea {
  display: block;
  font: inherit;
  font-size: 1em;
  padding: .4rem;
  margin-top: 0.2rem;
  min-width: 10rem;
  min-height: 6rem;
  max-width: 30rem;
  width: 100%;
  margin-bottom: 1.6rem;
  border-radius: 3px;
  border: 1px solid rgba(25, 25, 35, 0.95);
  border: 1px solid rgba(23, 37, 63, 0.5);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
  textarea:focus {
    border: 1px solid #5751cd;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    outline-offset: 2px; }

.input-radio {
  display: block;
  margin-bottom: 2.4rem; }

[type="radio"] {
  border-color: black; }

[type="radio"]:not(:first-child) {
  margin-left: 1rem; }

[type="submit"] {
  margin-top: .8rem;
  margin-left: .4rem;
  border-radius: 2px; }

label, .input-description {
  font-weight: 500;
  font-size: .9em;
  margin-bottom: .4rem;
  color: #15123f; }

.indicates-required {
  font-size: .8rem;
  margin-bottom: 1.4rem; }

fieldset {
  padding: 2em 0em 0;
  margin-bottom: 1em;
  border: none; }

button[type="submit"] {
  margin: 0;
  padding: .5rem .75rem;
  background-color: #17253f;
  color: white;
  border: none;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  text-shadow: 0 2px rgba(0, 0, 0, 0.2); }

/*------------------------------------*\
    #OBJECTS
\*------------------------------------*/
/**
 * These are the objects, abstractions and design patterns.
 */
/*------------------------------------*\
    #OBJECTS
\*------------------------------------*/
/**
 * Pull in all our objects and abstractions.
 */
[role="navigation"] {
  border-bottom: 1px solid rgba(23, 37, 63, 0.2);
  padding: 10px 2rem; }
  @media (min-width: 800px) {
    [role="navigation"] {
      padding: 10px 6rem; } }
  [role="navigation"] ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0; }
  [role="navigation"] li {
    background: none;
    margin: 0;
    padding: 0;
    margin-right: 40px; }
  [role="navigation"] a {
    padding: 2px 0;
    color: #17253f;
    font-weight: 500;
    font-size: .8em;
    line-height: 1.1;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .03em; }
  [role="navigation"] [aria-current] {
    -webkit-box-shadow: 0 3px 0 0px currentColor;
    box-shadow: 0 3px 0 0px currentColor; }

.about {
  margin: 0rem 0 0;
  padding: 0rem 0 0;
  border-bottom: 1px solid rgba(23, 37, 63, 0.2); }
  .about a {
    color: #3b35b6; }

.bio {
  padding: 6rem 2rem 4rem 2rem;
  margin-bottom: 24vh;
  display: grid;
  gap: 40px; }
  @media (min-width: 600px) {
    .bio {
      grid-template-columns: 4fr 8fr; } }
  @media (min-width: 800px) {
    .bio {
      padding: 12rem 6rem 6rem 6rem;
      grid-template-columns: 4fr 12fr; } }
  @media (min-width: 1000px) {
    .bio {
      grid-template-columns: 3fr 12fr; } }
  .bio .photo {
    margin-bottom: 0px; }
    @media (max-width: 600px) {
      .bio .photo {
        display: none; } }
    .bio .photo img {
      border-radius: 16px; }
      @media (min-width: 800px) {
        .bio .photo img {
          -o-object-fit: cover;
          object-fit: cover; } }
  .bio .info {
    margin: 0;
    grid-column: 2; }

.availability {
  left: 0rem;
  top: 0rem;
  right: 0rem;
  z-index: 2;
  padding: 1rem 1rem;
  margin-top: 8rem;
  font-size: 1.1em;
  font-weight: 400;
  background-color: #3932ae;
  background-color: #2e2a7a;
  border-radius: 4px;
  color: white;
  text-align: center; }
  .availability a {
    margin-left: 20px;
    color: white; }

.projects {
  padding-bottom: 90px;
  padding-top: 120px;
  margin-top: 0;
  display: grid;
  grid-template-columns: 15px repeat(20, 1fr) 15px;
  -ms-flex-line-pack: start;
  align-content: start;
  background-color: #edf8fa;
  background-size: 100% 240px;
  color: #17253f; }
  @media only screen and (min-width: 46em) {
    .projects {
      grid-template-columns: 45px repeat(20, 1fr) 45px;
      grid-gap: 0 0px; } }
  .projects h1 {
    grid-column: 1 / -1;
    padding: 0 60px 4rem 60px; }
    @media (min-width: 680px) {
      .projects h1 {
        overflow-y: visible; } }
    @media (min-width: 800px) {
      .projects h1 {
        padding: 0 6rem 6rem 6rem; } }
  .projects h2 {
    margin: 0;
    padding-top: 6px;
    padding: 6px 15px 0 0;
    grid-column: 2 / span 4;
    border-top: 1px solid rgba(25, 76, 84, 0.5);
    font-size: .8em;
    font-weight: 600;
    color: #194c54;
    text-transform: uppercase;
    letter-spacing: .01em; }
    @media only screen and (max-width: 46em) {
      .projects h2 {
        grid-column: 2 / -2;
        padding-bottom: 10px; } }
  .projects .cases {
    padding-top: 0px;
    margin-top: 0;
    grid-column: 1 / -1;
    list-style: none;
    padding-left: 6rem; }
    @media only screen and (max-width: 46em) {
      .projects .cases {
        grid-column: 2 / -2; } }
  .projects .case {
    border-top: 1px solid currentColor;
    background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: -webkit-linear-gradient(currentColor, currentColor);
    background-image: -o-linear-gradient(currentColor, currentColor);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 10em 5px;
    background-position: left top;
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 0;
    padding-top: 30px;
    margin-bottom: 240px; }
    .projects .case:not(:first-of-type) {
      margin-top: 90px; }
    .projects .case .client {
      max-width: none;
      display: inline-block;
      font-size: .7em;
      text-transform: uppercase;
      letter-spacing: .01em;
      font-weight: 600;
      border-radius: 3px;
      margin-bottom: .5rem;
      padding: 0em 0 0 .5em;
      background-color: rgba(6, 19, 21, 0.1);
      background-color: rgba(23, 37, 63, 0.2);
      color: #061315; }
      .projects .case .client span {
        display: inline-block;
        padding: 0 .4rem;
        margin-left: .4rem;
        border-radius: 0 3px 3px 0;
        border-left: 1px solid rgba(255, 255, 255, 0.8);
        background-color: rgba(6, 19, 21, 0.8);
        background-color: rgba(23, 37, 63, 0.9);
        color: rgba(255, 255, 255, 0.8); }
  .projects h3 {
    display: block;
    font-size: 1.8em;
    line-height: 1.2;
    font-weight: 700;
    color: currentColor;
    padding-right: 30px;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 2rem;
    background-image: none;
    /*		@supports (-webkit-background-clip: text) {
			background-image: linear-gradient(90deg, darken($color-green, 16%) .25, $color-pink-light .5);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}


		@supports (background-clip: text) {
			background-image: linear-gradient(90deg, darken($color-green, 16%) .25, $color-pink-light .5);
			background-clip: text;
			color: transparent; 
		}*/ }
    @media only screen and (min-width: 46em) {
      .projects h3 {
        font-size: 3em; } }
    @media only screen and (min-width: 60em) {
      .projects h3 {
        max-width: 55rem; } }
  .projects p {
    max-width: 55ch;
    font-size: 1em;
    font-weight: 500;
    color: currentColor; }
  .projects img {
    border-radius: 4px;
    height: auto;
    max-width: 460px;
    width: 100%; }
  .projects .images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px; }
    @media only screen and (min-width: 46em) {
      .projects .images {
        padding-right: 30px; } }
    .projects .images > * {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
      flex: 1 1 200px; }
  .projects .boxed {
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2); }

.quotes {
  padding-bottom: 90px;
  padding-top: 60px;
  margin-top: 0;
  display: grid;
  grid-template-columns: 15px repeat(20, 1fr) 15px;
  -ms-flex-line-pack: start;
  align-content: start;
  background: #edf8fa;
  color: #194c54;
  background-size: 100% 240px; }
  @media only screen and (min-width: 46em) {
    .quotes {
      grid-template-columns: 45px repeat(20, 1fr) 45px;
      grid-gap: 0 0px; } }
  .quotes h2 {
    margin: 0;
    padding-top: 6px;
    padding: 6px 15px 0 0;
    grid-column: 3 / span 4;
    border-top: 1px solid rgba(25, 76, 84, 0.5);
    font-size: .8em;
    font-weight: 600;
    color: #194c54;
    text-transform: uppercase;
    letter-spacing: .01em; }
    @media only screen and (max-width: 46em) {
      .quotes h2 {
        grid-column: 2 / -2;
        padding-bottom: 10px; } }
  .quotes a {
    border-color: #194c54; }
  .quotes > div {
    padding-top: 0px;
    margin-top: 0;
    grid-column: 7 / -1;
    list-style: none;
    padding-left: 0;
    border-top: 1px solid rgba(25, 76, 84, 0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#194c54), to(#194c54));
    background-image: -webkit-linear-gradient(#194c54, #194c54);
    background-image: -o-linear-gradient(#194c54, #194c54);
    background-image: linear-gradient(#194c54, #194c54);
    background-size: 10em 5px;
    background-position: left top;
    background-repeat: no-repeat; }
    @media only screen and (max-width: 46em) {
      .quotes > div {
        grid-column: 2 / -2; } }
  .quotes blockquote {
    padding: 4rem 1rem 4rem 0;
    margin: 0; }
    .quotes blockquote div {
      max-width: 60rem; }
    .quotes blockquote p {
      font-size: 1.4em;
      font-weight: 500;
      margin-bottom: 1.8rem;
      padding-left: 1.2rem;
      border-left: 4px solid rgba(25, 76, 84, 0.4); }
    .quotes blockquote span {
      font-size: 1rem; }
    .quotes blockquote a {
      font-weight: 500;
      border: none;
      text-decoration: underline; }
  .quotes .case {
    border-top: 1px solid rgba(25, 76, 84, 0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#194c54), to(#194c54));
    background-image: -webkit-linear-gradient(#194c54, #194c54);
    background-image: -o-linear-gradient(#194c54, #194c54);
    background-image: linear-gradient(#194c54, #194c54);
    background-size: 10em 5px;
    background-position: left top;
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 0;
    padding-top: 30px; }
    .quotes .case:not(:first-of-type) {
      margin-top: 90px; }
    .quotes .case .client {
      display: inline-block;
      font-size: .7em;
      text-transform: uppercase;
      letter-spacing: .01em;
      font-weight: 600;
      border-radius: 3px;
      margin-bottom: .5rem;
      padding: .2em .5em;
      background-color: rgba(6, 19, 21, 0.1);
      color: #061315; }
  .quotes h3 {
    font-size: 1.8em;
    line-height: 1.2;
    font-weight: 900;
    color: #194c54;
    padding-right: 30px;
    padding-left: 0;
    margin-top: 0;
    background-image: none;
    /*		@supports (-webkit-background-clip: text) {
			background-image: linear-gradient(90deg, darken($color-green, 16%) .25, $color-pink-light .5);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}


		@supports (background-clip: text) {
			background-image: linear-gradient(90deg, darken($color-green, 16%) .25, $color-pink-light .5);
			background-clip: text;
			color: transparent; 
		}*/ }
    @media only screen and (min-width: 46em) {
      .quotes h3 {
        font-size: 2.2em; } }
    @media only screen and (min-width: 60em) {
      .quotes h3 {
        max-width: 75%; } }
  .quotes p {
    max-width: 55ch; }
  .quotes img {
    border-radius: 4px;
    height: auto;
    max-width: 460px;
    width: 100%; }
  .quotes .images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px; }
    @media only screen and (min-width: 46em) {
      .quotes .images {
        padding-right: 30px; } }
    .quotes .images > * {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
      flex: 1 1 200px; }
  .quotes .boxed {
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2); }

.contact {
  padding-bottom: 90px;
  padding-top: 120px;
  margin-top: 0;
  display: grid;
  grid-template-columns: 15px repeat(20, 1fr) 15px;
  -ms-flex-line-pack: start;
  align-content: start;
  background-color: #fdf4fb;
  background-color: #e4eaf5; }
  @media only screen and (min-width: 46em) {
    .contact {
      grid-template-columns: 45px repeat(20, 1fr) 45px;
      grid-gap: 0 0px; } }
  .contact .intro {
    padding: 6px 30px 0 6rem;
    grid-column: 1 / span 6;
    border-top: 1px solid rgba(23, 37, 63, 0.5);
    font-size: .9em;
    margin: 0; }
    @media only screen and (max-width: 46em) {
      .contact .intro {
        grid-column: 2 / -2;
        padding-bottom: 45px; } }
  .contact h1 {
    grid-column: 1 / -1;
    padding: 0 0 4rem 6rem; }
    @media (min-width: 680px) {
      .contact h1 {
        overflow-y: visible; } }
    @media (min-width: 800px) {
      .contact h1 {
        padding: 0 0 6rem 6rem; } }
  .contact .full-width {
    grid-column: 1 / -1;
    padding: 0 0 4rem 6rem; }
    @media (min-width: 800px) {
      .contact .full-width {
        padding: 0 0 6rem 6rem; } }
  .contact h2 {
    margin: 0;
    margin-bottom: .4rem;
    padding-top: 6px;
    font-size: 1.1em;
    font-weight: 600;
    color: #17253f;
    text-transform: uppercase;
    letter-spacing: .01em; }
  .contact a {
    border-color: #17253f; }
  .contact .form {
    margin-top: 0;
    padding-top: 10px;
    grid-column: 7 / -1;
    border-top: 1px solid rgba(23, 37, 63, 0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#17253f), to(#17253f));
    background-image: -webkit-linear-gradient(#17253f, #17253f);
    background-image: -o-linear-gradient(#17253f, #17253f);
    background-image: linear-gradient(#17253f, #17253f);
    background-size: 10em 5px;
    background-position: left top;
    background-repeat: no-repeat; }
    @media only screen and (max-width: 46em) {
      .contact .form {
        grid-column: 2 / -2; } }
  .contact .case {
    border-top: 1px solid rgba(25, 76, 84, 0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#194c54), to(#194c54));
    background-image: -webkit-linear-gradient(#194c54, #194c54);
    background-image: -o-linear-gradient(#194c54, #194c54);
    background-image: linear-gradient(#194c54, #194c54);
    background-size: 10em 5px;
    background-position: left top;
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 0;
    padding-top: 30px; }
    .contact .case:not(:first-of-type) {
      margin-top: 90px; }
    .contact .case .client {
      display: inline-block;
      font-size: .7em;
      text-transform: uppercase;
      letter-spacing: .01em;
      font-weight: 600;
      border-radius: 3px;
      margin-bottom: .5rem;
      padding: .2em .5em;
      background-color: rgba(6, 19, 21, 0.1);
      color: #061315; }
  .contact h3 {
    font-size: 1.8em;
    line-height: 1.2;
    font-weight: 900;
    color: #194c54;
    padding-right: 30px;
    padding-left: 0;
    margin-top: 0;
    background-image: none; }
    @media only screen and (min-width: 46em) {
      .contact h3 {
        font-size: 2.2em; } }
    @media only screen and (min-width: 60em) {
      .contact h3 {
        max-width: 75%; } }
  .contact p {
    max-width: 55ch; }

.profile-card {
  padding: 0em;
  overflow: hidden;
  margin-top: 30px;
  background-color: rgba(37, 112, 123, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0px 2px rgba(0, 0, 0, 0.4);
  color: #12373c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .profile-card .photo {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 90px;
    flex: 0 1 90px; }
  .profile-card img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-right: 1px solid rgba(255, 255, 255, 0.15); }
  .profile-card .profile-info {
    margin-top: 0;
    padding: 12px 10px; }
    .profile-card .profile-info h3 {
      margin-bottom: 0px;
      margin-top: 0;
      font-size: 1em;
      font-weight: 600;
      max-width: none; }
    .profile-card .profile-info p {
      margin-top: 0; }
    .profile-card .profile-info a {
      font-size: .9em;
      text-decoration: none;
      border: none; }

.logos {
  display: block;
  background-color: #191923;
  color: white;
  margin: 0 0 0;
  padding: 60px 30px; }
  .logos h2 {
    margin-top: 0;
    color: #fcfcff;
    font-size: 1em;
    font-weight: 600;
    padding-top: .4rem;
    font-weight: 500;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcff), to(#fcfcff));
    background-image: -webkit-linear-gradient(#fcfcff, #fcfcff);
    background-image: -o-linear-gradient(#fcfcff, #fcfcff);
    background-image: linear-gradient(#fcfcff, #fcfcff);
    background-size: 1.8em 3px;
    background-position: left top;
    background-repeat: no-repeat; }
  .logos ul {
    padding: 0.4rem 0 0 0;
    margin: 0;
    list-style: none;
    display: block;
    text-align: center;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr); }
    @media only screen and (min-width: 32em) {
      .logos ul {
        grid-template-columns: repeat(4, 1fr); } }
    @media only screen and (min-width: 46em) {
      .logos ul {
        grid-template-columns: repeat(6, 1fr); } }
    @media only screen and (min-width: 80em) {
      .logos ul {
        grid-gap: 15px;
        grid-template-columns: repeat(12, 1fr); } }
  .logos li {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
    padding: 1rem;
    margin: 1%;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: none; }
    @media only screen and (min-width: 46em) {
      .logos li {
        -ms-flex-preferred-size: 12%;
        flex-basis: 12%; } }
  .logos .you {
    border: 1px dashed white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 2px; }
  .logos .logo {
    margin: auto;
    width: 100%; }

.cards {
  display: grid;
  padding: 0;
  margin-top: 4em;
  margin-bottom: 4em;
  grid-gap: 20px; }
  @media (min-width: 720px) {
    .cards {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) {
    .cards {
      grid-gap: 40px; } }
  .cards li {
    margin: 0;
    padding: 3rem 3rem 6rem 3rem;
    background: none;
    background-color: white;
    background-color: #2e2a7a;
    color: rgba(255, 255, 255, 0.9);
    color: white;
    border-radius: 8px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 3em 3em;
    background-position: right 2em bottom 2em; }
    @media (min-width: 720px) and (max-width: 900px) {
      .cards li {
        background-size: 0 0; } }
    @media (min-width: 1200px) {
      .cards li {
        background-size: 6em 6em; } }
  .cards li:nth-child(1) {
    background-color: #332f89;
    background-image: url(./../images/icons/accessibility.svg); }
  .cards li:nth-child(2) {
    background-color: #2a4e7a;
    background-image: url(./../images/icons/content.svg); }
  .cards li:nth-child(3) {
    background-color: #22635c;
    background-image: url(./../images/icons/html.svg); }
  .cards h3 {
    max-width: 22rem;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.1;
    color: #e1eaf5;
    margin-bottom: 1rem; }
  .cards p {
    max-width: 22rem;
    font-size: 1em; }

ul .card--unstyled {
  background-color: transparent;
  color: black;
  color: #17253f;
  background-image: url(./../images/fr-logo-gradient.svg);
  background-position: right 2em bottom 0em; }
  ul .card--unstyled h3 {
    color: black;
    color: #17253f;
    max-width: 22rem; }