/* =========================
   RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   BASE
========================= */
html,
body {
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: Lato, Arial, sans-serif;
}

img {
  max-width: 100%;
}

strong {
  font-weight: 700;
  color: #000;
}

/* =========================
   UTILITIES
========================= */
.no-margin { margin: 0; }
.margin-bottom { margin-bottom: 2em; }
.small { font-size: 14px; }
.strikethrough { text-decoration: line-through; }
.text-center { text-align: center; }
.block { display: block; }

.text-normal { font-weight: 400; }
.text-body { font-family: Lato, Arial, sans-serif; }
.text-large { font-size: 2.5em; }

.emphasis { font-weight: 700; }
.inverse { color: #fff; }
.subtle { opacity: 0.7; }

@media (min-width: 639px) {
  .text-large { font-size: 3.5em; }
}

@media (min-width: 1023px) {
  .show-medium-down { display: none; }
}

/* =========================
   BROWSERSYNC
========================= */
#__bs_notify__ {
  top: 93% !important;
  right: 0 !important;
  bottom: 0;
  border-radius: 15px 0 0 0 !important;
}

/* =========================
   HEADINGS
========================= */
h1 { font-size: 2.5em; color: #fff; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: 1em; }
h6 { font-size: 0.75em; }

@media (min-width: 639px) {
  h1 { font-size: 4em; }
  h2 { font-size: 2.25em; }
  h3 { font-size: 1.75em; }
  h4 { font-size: 1.25em; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", Georgia, serif;
  margin-bottom: 0.25em;
  line-height: 1.375;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
}

/* =========================
   TEXT
========================= */
a {
  color: #8f11d2;
}

p {
  margin-bottom: 16px;
  line-height: 1.5;
}

ul {
  margin: 1em 0 0 1em;
  font-size: 1.125em;
}

ul li {
  margin-bottom: 0.5em;
}

@media (min-width: 639px) {
  ul { font-size: 1.25em; }
}

@media (min-width: 1279px) {
  ul {
    width: 75%;
    margin: 1.5em auto;
    padding-left: 1em;
  }
}

/* =========================
   INGRESS
========================= */
.ingress {
  font-size: 1.25em;
  margin: 1em auto 0;
  line-height: 1.375;
}

.ingress--slim-top { margin-top: 0.5em; }
.ingress--lonely { margin-top: 0; }
.ingress--space-bottom { margin-bottom: 1.5em; }

@media (min-width: 639px) {
  .ingress {
    margin-top: 1.5em;
    font-size: 1.5em;
  }
}

@media (min-width: 1279px) {
  .ingress--tight { width: 75%; }
}

/* =========================
   LAYOUT
========================= */
.layout { padding-bottom: 32px; }
.layout--both { padding-top: 32px; }
.layout--small { padding: 1em 0; }
.layout--tiny { padding-top: 0.75em; padding-bottom: 1em; }
.layout--before-footer { padding-bottom: 4em; }
.layout--image { position: relative; padding: 3em 0 0; }
.layout--large { padding: 20vh 0; }
.layout--full { padding: 4em 0; }
.layout--flex { display: flex; }
.layout--relative { position: relative; }

.layout--primary { background-color: #8f11d2; }
.layout--secondary { background-color: #f9ca48; }
.layout--subtle { background-color: #fffcf5; }
.layout--primary-dark { background-color: #4c0074; }
.layout--primary-darker { background-color: #3c005c; }
.layout--primary-darkest { background-color: #32004c; }

@media (min-width: 639px) {
  .layout { padding-bottom: 48px; }
  .layout--both { padding-top: 48px; }
  .layout--small { padding: 2em 0; }
  .layout--tiny { padding-top: 0.5em; padding-bottom: 0.25em; }
  .layout--before-footer { padding-bottom: 8em; }
  .layout--image { padding: 5em 0; }
  .layout--full { height: 80vh; }
}

@media (min-width: 1023px) {
  .layout { padding-bottom: 64px; }
  .layout--both { padding-top: 64px; }
  .layout--image { padding: 7em 0; }
}

/* =========================
   ARTICLE
========================= */
.article p { font-size: 1.25em; }

.article p:first-of-type {
  font-size: 1.375em;
  color: #000;
}

@media (min-width: 639px) {
  .article p:first-of-type { font-size: 1.625em; }
}

.article a {
  text-decoration: none;
}

.article a:hover {
  text-decoration: underline;
}

.article img {
  margin: 0.5em 0;
}

@media (min-width: 639px) {
  .article img {
    margin: 2em 0;
    width: calc(100% + 200px);
    max-width: none;
    transform: translateX(-100px);
  }
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  font-family: Lato, Arial, sans-serif;
  margin: 1.5em 0 0.5em;
}

.article h2 { font-size: 1.5em; }

@media (min-width: 639px) {
  .article h2 { font-size: 1.75em; }
}

.article ul {
  font-size: 1.25em;
  margin: 0 1em 1em;
  line-height: 1.5;
  color: #000;
}

/* =========================
   BUTTONS
========================= */
button {
  font-size: 1rem;
}

.button {
  display: inline-block;
  padding: 0.75em 1em;
  font-size: 1.125em;
  font-weight: 700;
  font-family: inherit;
  border: 0;
  border-radius: 9px;
  background-color: #8f11d2;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
}

.button:hover,
.button:focus {
  background-color: #a928ee;
  border-color: #560a7e;
  outline: 0;
  cursor: pointer;
}

.button:active:not(.button--disabled) {
  transform: scale(0.95);
}

.button--cta {
  margin: 1em 0;
  background-color: #fff;
  color: #8f11d2;
}

.button--cta:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #f9ca48;
  box-shadow: inset 0 0 0 2px #f9ca48;
}

@media (min-width: 639px) {
  .button--cta { margin: 2em 0; }
}

/* =========================
   GRID
========================= */
.row {
  max-width: 1279px;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 639px) {
  .row {
    display: flex;
    flex-direction: row;
    padding: 0 16px;
  }
}

@media (min-width: 1023px) {
  .row { padding: 0 32px; }
}

.row--center { justify-content: center; }
.row--middle { align-items: center; }
.row--no-stack { flex-direction: row; }
.row--narrow { max-width: 1023px; }
.row--no-col-bottom-margin .col { margin-bottom: 0; }

/* =========================
   COLUMNS
========================= */
.col {
  flex: 0 1 100%;
  margin: 8px 0;
  padding: 0 16px;
}

@media (min-width: 639px) {
  .col { margin: 16px 0; }
}

.col--1-2 { flex: 0 1 50%; }
.col--1-3 { flex: 0 1 33.3333%; }
.col--2-3 { flex: 0 1 66.6667%; }
.col--1-4 { flex: 0 1 25%; }
.col--5-12 { flex: 0 1 41.6667%; }
.col--7-12 { flex: 0 1 58.3333%; }

.col--right { margin-left: auto; }
.col--auto { flex: 0 1 auto; }
.col--no-margin { margin: 0; }

/* =========================
   HEADER
========================= */
.header {
  background-color: #8f11d2;
  background-image: url("../img/header-landscape.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 600px;
  padding-top: 20vh;
}

@media (min-width: 639px) {
  .header { padding-top: 30vh; }
}

.header__title { line-height: 1.125; }

.header__info {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

.header__link {
  color: #fff;
  text-decoration: none;
}

.header__link:hover {
  text-decoration: underline;
}

.header__description {
  font-size: 1.25em;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

@media (min-width: 639px) {
  .header__description { font-size: 1.5em; }
}