@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue.woff2') format('opentype');
  font-style: normal;
  font-weight: normal;
}

:root {
  /* ----------------------------------------------------------------------------------------
  // Typography
  // ---------------------------------------------------------------------------------------- */
  --baseFontSize: 18px;
  --scaleRatio: 1.5; /* Other possibilities: 1.067, 1.125, 1.2, 1.333, 1.414, 1.618 */
  --leading: calc(var(--scaleRatio) * var(--baseFontSize));
  --defaultFonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --headingFonts: 'Bebas Neue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* ----------------------------------------------------------------------------------------
  // Layout
  // ---------------------------------------------------------------------------------------- */
  --sectionGap: calc(4 * var(--leading));
  --gutter: 24px; /* set to 'px' for maximum compatibility */
  /* ----------------------------------------------------------------------------------------
  // Colors
  // ---------------------------------------------------------------------------------------- */
  --mainColor: transparent; /* Ideally takes up 60% of design */
  --subColor: #ffc821; /* Ideally takes up 30% of design */
  --accentColor: #C9165A; /* Ideally takes up 10% of your design; often the default color for buttons & links */
  --textColor: black;
  --backgroundColor: #F4F2F0;
}

section > h1,
section > p,
li {
  background-color: white;
}

h1, h2 {
  font-family: var(--headingFonts);
  font-weight: normal;
}

h2 {
  background-color: var(--textColor);
  color: var(--backgroundColor);
}

h3 {
  text-transform: capitalize;
}

h1 + * {
  margin-top: calc(.5 * var(--leading));
}

.extra {
  padding: var(--leading) var(--gutter);
  outline: 1px solid var(--textColor);
}

.extra p {
  background: transparent;
}

table td:nth-of-type(1) {
  font-weight: bold;
}

table td:nth-of-type(2),
table td:nth-of-type(3) {
  text-align: center;
  vertical-align: top;
}

/* ----------------------------------------------------------------------------------------
// HERO
// ----------------------------------------------------------------------------------------*/
#hero figure {
  position: relative;
}

#hero figure + * {
  margin-top: var(--leading);
}

#hero figure #mobile1,
#hero figure #tablet1,
#hero figure #tablet2 {
  position: absolute;
}

#hero figure #mobile1 {
  right: var(--gutter);
  bottom: 0;
  z-index: 3;
}

#hero figure #tablet1 {
  left: var(--gutter);
  bottom: 0;
  z-index: 2;
}

#hero figure #tablet2 {
  right: calc(2*var(--gutter));
  bottom: calc(.5*var(--leading));
  z-index: 1;
}

/* ----------------------------------------------------------------------------------------
// DEMOS
// ----------------------------------------------------------------------------------------*/
.demo {
  position: relative;
  height: calc(10*var(--leading));
  // overflow: hidden;
}

.demo.double {
  height: calc(20*var(--leading));
}

/* ----------------------------------------------------------------------------------------
// 1 PAGE AT A TIME
// ----------------------------------------------------------------------------------------*/
#onePage {
  position: relative;
}

#onePage img[src*="rivacyPolicy"] {
  position: absolute;
  right: calc(1.5*var(--gutter));
  bottom: 0;
}

/* ----------------------------------------------------------------------------------------
// SPLIT SCREEN
// ----------------------------------------------------------------------------------------*/
#splitScreen {
  overflow: hidden;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#splitScreen > * {
  width: 50%;
  margin-top: 0;
}

/* ----------------------------------------------------------------------------------------
// REBOOT DEMO
// ----------------------------------------------------------------------------------------*/
#rebootCreativity {
  position: relative;
}

#rebootCreativity .bubble {
  position: absolute;
  top: 36px;
  left: calc(.5*var(--gutter));
  z-index: 3;
}

#rebootCreativity .photo {
  float: right;
  position: relative;
  z-index: 2;
}

#rebootCreativity .spiked {
  position: absolute;
  bottom: calc(-1.5*var(--leading));
  right: var(--gutter);
  z-index: 4;
}

#rebootCreativity .tag {
  position: absolute;
  top: calc(3*var(--leading));
  left: var(--gutter);
  z-index: 0;
}

/* ----------------------------------------------------------------------------------------
// WALKING TALK (MY LFB PAGES)
// ----------------------------------------------------------------------------------------*/

#walkingTalk + * {
  margin-top: var(--leading);
}

#walkingTalk > img {
  margin-top: 0;
  width: calc((100% - (2.5*var(--gutter)))/3);
  margin-left: var(--gutter);
}

#walkingTalk > img:first-of-type {
  margin-left: 0;
}

/* ----------------------------------------------------------------------------------------
// MY INSPOS
// ----------------------------------------------------------------------------------------*/
#myInspos #wares {
  position: absolute;
  left: var(--gutter);
  bottom: calc(2*var(--leading));
}

#myInspos #donutsPamphlet {
  position: absolute;
  right: 0;
  top: 0;
}

#myInspos #flowersGrid {
  position: absolute;
  left: calc(4*var(--gutter));
  top: calc(2*var(--leading));
}

#myInspos #architecture {
  position: absolute;
  right: 0;
  bottom: calc(3.5*var(--leading));
}