:root {
  --c-primary: #1e87f0;
  --c-primary-light: #E4F0FD;
  --c-primary-dark: #0e73d7;
  --c-secondary: #FF87F8;
  --c-secondary-light: #FADED3;
  --c-secondary-dark: #ff5ef6;
  --c-tertiary: #42BCC0;
  --c-tertiary-light: #D8F1F2;
  --c-tertiary-dark: #369fa3;
  --c-text-default: #545F6B;
  --c-text-primary: #1A2229;
  --c-text-heading: #1A2229; }

@font-face {
  font-family: 'futura-bold';
  src: url(/assets/fonts/futura-bold/futura-bold.woff) format("woff"), url(/assets/fonts/futura-bold/futura-bold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: fallback; }

@font-face {
  font-family: 'futura-book';
  src: url(/assets/fonts/futura-book/futura-book.woff) format("woff"), url(/assets/fonts/futura-book/futura-book.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: fallback; }

/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal; }

ul {
  list-style: none; }

button,
input,
select,
textarea {
  margin: 0; }

html {
  box-sizing: border-box; }

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

img,
embed,
iframe,
object,
video {
  height: auto;
  max-width: 100%; }

audio {
  max-width: 100%; }

iframe {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0;
  text-align: left; }

@viewport {
  width: device-width; }

html {
  box-sizing: border-box; }

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

html {
  cursor: default; }

abbr[title],
dfn[title] {
  cursor: help; }

button,
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label[for],
select {
  cursor: pointer; }

code {
  cursor: text; }

button[disabled],
input[disabled],
select[disabled] {
  cursor: default; }

html {
  color: var(--c-text-default, #545F6B);
  font-family: "Roboto", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  height: 100%;
  line-height: 1.575; }
  html {
    font-size: 16px; }
    @media screen and (min-width: 320px) {
      html {
        font-size: calc(16px + 2 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
      html {
        font-size: 18px; } }

body {
  min-height: 100%;
  overflow-y: scroll; }

::selection {
  color: #ffffff;
  background: var(--c-primary, #1e87f0); }

.hero, .ribbon,
.section {
  padding-bottom: 5rem; }
  @media screen and (min-width: 17em) {
    .hero, .ribbon,
    .section {
      padding-bottom: calc(5rem + 2 * ((100vw - 17em) / 48)); } }
  @media screen and (min-width: 65em) {
    .hero, .ribbon,
    .section {
      padding-bottom: 7rem; } }

.hero, .ribbon,
.section {
  padding-top: 5rem; }
  @media screen and (min-width: 17em) {
    .hero, .ribbon,
    .section {
      padding-top: calc(5rem + 2 * ((100vw - 17em) / 48)); } }
  @media screen and (min-width: 65em) {
    .hero, .ribbon,
    .section {
      padding-top: 7rem; } }

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 66.6667em;
  position: relative;
  width: 93.75%; }
  .container-wide {
    max-width: 100em; }

.footer {
  padding-bottom: 3rem; }
  @media screen and (min-width: 17em) {
    .footer {
      padding-bottom: calc(3rem + 1 * ((100vw - 17em) / 48)); } }
  @media screen and (min-width: 65em) {
    .footer {
      padding-bottom: 4rem; } }

.footer {
  padding-top: 3rem; }
  @media screen and (min-width: 17em) {
    .footer {
      padding-top: calc(3rem + 1 * ((100vw - 17em) / 48)); } }
  @media screen and (min-width: 65em) {
    .footer {
      padding-top: 4rem; } }

.copyright {
  display: flex;
  font-size: 0.778rem;
  font-weight: 500;
  justify-content: space-between;
  padding-top: 3em;
  text-transform: uppercase; }

.header {
  padding: 3em 0; }
  .header > * {
    align-items: center;
    display: flex;
    justify-content: space-between; }

.main-c {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; }

.quicklinks li {
  padding-bottom: 2em;
  color: black;
  display: inline-block; }

.skills {
  border: 1px solid #bdbdbd;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 0.75em;
  display: inline-block; }

.nav {
  visibility: visible;
  z-index: 2; }
  @media screen and (max-width: 64em) {
    .nav {
      align-items: center;
      background-color: rgba(26, 34, 41, 0.97);
      display: flex;
      flex-direction: column;
      flex: none;
      height: 100%;
      justify-content: center;
      left: 0;
      overflow: auto;
      padding-top: 1em;
      position: fixed;
      right: 100%;
      top: 0;
      transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      visibility: hidden;
      width: 100%;
      z-index: 2; } }
  .body-wrap.isVisible .nav,
  [data-offcanvas="visible"] .nav {
    visibility: visible; }

.row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; }
  @media screen and (min-width: 48em) {
    .row {
      flex-direction: row;
      margin-left: -1rem;
      margin-right: -1rem; } }

.col {
  flex-direction: column;
  padding: 1rem 0; }
  @media screen and (min-width: 48em) {
    .col {
      padding: 0 1rem; } }

@media screen and (min-width: 48em) {
  .col--1 {
    width: 8.3333333333%; }
  .col--2 {
    width: 16.6666666667%; }
  .col--3 {
    width: 25%; }
  .col--4 {
    width: 33.3333333333%; }
  .col--5 {
    width: 41.6666666667%; }
  .col--6 {
    width: 50%; }
  .col--7 {
    width: 58.3333333333%; }
  .col--8 {
    width: 66.6666666667%; }
  .col--9 {
    width: 75%; }
  .col--10 {
    width: 83.3333333333%; }
  .col--11 {
    width: 91.6666666667%; }
  .col--12 {
    width: 100%; } }

.hr {
  border-color: transparent;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  .hr:before {
    background: #bbbbbb;
    content: '';
    height: 1px;
    position: absolute;
    top: -1px;
    width: 100%; }

.hr--xs {
  max-width: 10%; }

.hr--sm {
  max-width: 20%; }

.hr--md {
  max-width: 40%; }

.hr--lg {
  max-width: 80%; }

.hr--spaced {
  margin-top: 1em;
  margin-bottom: 1em; }
  @media screen and (min-width: 17em) {
    .hr--spaced {
      margin-top: calc(1em + 1 * ((100vw - 17em) / 48));
      margin-bottom: calc(1em + 1 * ((100vw - 17em) / 48)); } }
  @media screen and (min-width: 65em) {
    .hr--spaced {
      margin-top: 2em;
      margin-bottom: 2em; } }

.site-logo {
  color: #1A2229;
  display: inline-block;
  flex: 1; }
  .site-logo svg {
    width: 10.625em;
    padding: 0.1em;
    fill: #1A2229; }

.btn {
  border-radius: 0;
  border: 0;
  cursor: pointer;
  display: inline-block;
  font-family: "futura-bold", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1rem;
  line-height: 1;
  padding: 1.24em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap; }

.btn-primary {
  color: #ffffff;
  background-color: var(--c-primary, #1e87f0); }
  .btn-primary:focus:not(.u-outline), .btn-primary:hover:not(.u-outline) {
    color: #ffffff;
    background-color: var(--c-secondary, #FF87F8); }

.btn-secondary {
  color: var(--c-primary, #1e87f0);
  background-color: #ffffff;
  box-shadow: inset 0 0 0 2px var(--c-primary, #1e87f0); }
  .btn-secondary:focus:not(.u-outline), .btn-secondary:hover:not(.u-outline) {
    background-color: var(--c-primary-light, #E4F0FD); }

.card {
  margin-bottom: 2rem; }
  @media screen and (min-width: 17em) {
    .card {
      margin-bottom: calc(2rem + 0.5 * ((100vw - 17em) / 48)); } }
  @media screen and (min-width: 65em) {
    .card {
      margin-bottom: 2.5rem; } }

.card h3,
.card img {
  margin-bottom: 1rem; }

.card img {
  width: 100%;
  height: auto; }

.card p {
  font-size: 0.889rem; }

.card--c {
  text-align: center; }

.card--p {
  text-align: center;
  background-color: #ffffff; }
  .card--p .card_action {
    padding-bottom: 2rem; }
  .card--p .card_content {
    padding: 2rem; }

.card--i {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2rem; }

.card_header {
  background: var(--c-primary, #1e87f0);
  color: #ffffff; }

.card_content {
  flex-grow: 1; }
  .card_content p {
    font-size: 1em;
    max-width: 40em; }
  .card_content .price {
    font-family: "futura-bold", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.75rem; }
  .card_content ul {
    font-size: 0.889rem;
    list-style: none;
    text-align: left;
    margin-top: 1rem; }
    .card_content ul li {
      border-bottom: 1px solid #EFF2F7;
      padding: 0.5rem 0; }
      .card_content ul li span {
        color: var(--c-primary, #1e87f0);
        font-weight: 500;
        display: block; }

@media screen and (min-width: 37.5em) {
  .card--2, .card--4 {
    margin-top: 10rem; } }

h1,
h3,
h4,
h5,
h6,
.title {
  font-family: "futura-bold", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #1A2229; }

.title,
h1 {
  font-size: 2.44rem; }

.subtitle,
h2 {
  font-family: "futura-book", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #B4BCC3;
  font-size: 1.678rem;
  font-weight: 500; }

a {
  cursor: pointer; }
  a:focus, a:hover {
    color: var(--c-primary, #1e87f0);
    fill: currentColor; }

.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-left: -0.75em;
  margin-right: -0.75em; }
  .menu--stack {
    flex-direction: column; }
  .menu--center {
    justify-content: center; }
  .menu--right {
    justify-content: flex-end; }
    @media screen and (max-width: 47.9375em) {
      .menu--right {
        flex-direction: column;
        justify-content: center; } }

.menu_item {
  color: #B4BCC3;
  font-family: "Roboto", "Helvetica Neue", Helvetica;
  font-size: 0.778rem;
  font-weight: 500;
  line-height: 1.65;
  margin: 0 1em;
  text-transform: uppercase; }

.menu_link {
  color: var(--c-text-primary, #1A2229);
  fill: currentColor;
  text-decoration: none; }

.hero_content {
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 1; }
  @media screen and (min-width: 64.0625em) {
    .hero_content {
      max-width: 74%; } }

.hero_title {
  line-height: 1.15;
  margin-bottom: 1.8rem; }
  .hero_title {
    font-size: 2.4rem; }
    @media screen and (min-width: 17em) {
      .hero_title {
        font-size: calc(2.4rem + 0.989 * ((100vw - 17em) / 48)); } }
    @media screen and (min-width: 65em) {
      .hero_title {
        font-size: 3.389rem; } }

.hero_desc {
  font-size: 1.222em;
  margin-bottom: 2rem;
  color: var(--main-bg-color, #545F6B); }

.ribbon {
  background-color: var(--c-primary-light, #E4F0FD); }
  .ribbon > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  .ribbon_title {
    margin-bottom: 1.8rem;
    color: var(--c-primary, #1e87f0);
    text-align: center; }
    .ribbon_title {
      font-size: 1.578rem; }
      @media screen and (min-width: 17em) {
        .ribbon_title {
          font-size: calc(1.578rem + 0.2 * ((100vw - 17em) / 48)); } }
      @media screen and (min-width: 65em) {
        .ribbon_title {
          font-size: 1.778rem; } }

.container::after {
  clear: both;
  content: "";
  display: table; }

.btn-group > :first-child {
  margin-right: 1em; }

.btn, a, .menu_link {
  transition-duration: 0.1s;
  transition-property: background-color, background-image, border-color, box-shadow, color, opacity, text-shadow;
  transition-timing-function: ease-out; }

.card_content .price, h1,
h3,
h4,
h5,
h6,
.title {
  text-transform: uppercase; }