/* ======================================================================== */
/* Web Fonts
 ========================================================================== */
@font-face {
  font-family: "PPNeueMontreal";
  src:
    url("https://assets.codepen.io/53257/PPNeueMontreal-Book.woff2") format("woff2"),
    url("https://assets.codepen.io/53257/PPNeueMontreal-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PPNeueMontreal";
  src:
    url("https://assets.codepen.io/53257/PPNeueMontreal-Medium.woff2") format("woff2"),
    url("https://assets.codepen.io/53257/PPNeueMontreal-Medium.woff") format("woff");
  font-weight: 530;
  font-style: normal;
}

/* Global Variables
 ========================================================================== */

/* Resets
 ========================================================================== */
body {
  margin: 0; padding: 0;
}

figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Global Variables
 ========================================================================== */
:root {
  --c-white: #fff;
  --c-black: #000;
  --c-gray150: #D7D5D5;
  --c-gray300: #959493;
  --c-gray450: #403F3F;
  --c-gray900: #4B4949;
  --c-blue300: #6D90F8;
  --c-blue350: #5981F7;
  --c-blue400: #4B76F7;
  --c-blue450: #3C6BF6;
  --c-blue550: #2458F5;
  --c-blue700: #0B43EA;
  --c-highlight200: #F185FF;

  /* Spacing and size Helpers */


  /* Font Size Helpers */
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Font weights */
  --fw-book: 400;
  --fw-med: 530;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.8;

  --logo-h: 23px;
  --logo-arrow-width: calc(var(--logo-size) * .6);
  --page-h-space: .5rem;
}

/* Color Helpers */
.c_gray300 { color: var(--c-gray300); }
.c_gray450 { color: var(--c-gray450); }
.c_gray900 { color: var(--c-gray900); }

.c_blue300 { color: var(--c-blue300); }
.c_blue350 { color: var(--c-blue350); }
.c_blue400 { color: var(--c-blue400); }
.c_blue450 { color: var(--c-blue450); }
.c_blue550 { color: var(--c-blue550); }
.c_blue700 { color: var(--c-blue700); }

/* fontsize helpers */


.content_headline1 {
  font-size: var(--fs-40);
  font-weight: 530;
  margin: 0;
  margin-bottom: 2rem;
  line-height: 1;
}

.content_headline3 {
  font-size: var(--fs-24);
  font-weight: 530;
  margin: 0;
  line-height: 1;
}

.content_copy {
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--c-gray450);
}

.type_suphead {
  font-size: var(--fs-20);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: var(--fw-med);
}

.type_hero {
  font-size: var(--fs-96);
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
}

.type_copylg {
  font-size: var(--fs-24);
  font-weight: var(--fw-book);
  line-height: var(--lh-normal);
  margin: var(--s-8) 0 !important;
}

.inverse .content_copy  {
  color: var(--c-gray150);
}

.inverse [class^="content_headline"]  {
  color: var(--c-white);
}