:root {
  /* initial values  */
  --text-wght: 400;
  --text-wdth: 100;
  --text-opsz: 16;
  --text-GRAD: 88;
  /* 88-150 (88) */
  --color-background: #f6f2e6;
  --color-background-light: #e0f1f9;
  --color-text: #18244a;
  --color-text-light: #7a94a0;
  --color-text-softlight: #f4e9e9;
  --color-device-frame: #38879e; }

b,
strong {
  --text-wght: 150; }

.clear {
  clear: both; }

html {
  box-sizing: border-box; }

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

/* elements */
html {
  font-size: 100%; }

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: "Amstelvar VF";
  font-weight: normal;
  font-optical-sizing: auto;
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, p {
  font-family: "Amstelvar VF";
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 400;
  font-variation-settings: "opsz" var(--text-opsz), "GRAD" var(--text-GRAD);
  margin: 0;
  padding: 0;
  transition: all 1s ease-in-out; }

h1 {
  --text-opsz: 16;
  font-size: 4.25vw;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem; }

h2 {
  --text-opsz: 40;
  color: #173841;
  font-size: 3vw;
  font-weight: 600; }

h3 {
  --text-opsz: 40;
  color: #194b59;
  font-size: 2.5vw;
  font-weight: 600; }

h4 {
  --text-opsz: 40;
  color: #194b59;
  font-size: 2.25vw;
  font-weight: 600; }

h5 {
  font-family: "Amstelvar VF";
  font-size: 2vw;
  font-weight: 250;
  line-height: 1;
  margin: 0 0 0 -0.5rem;
  padding: 0;
  transition: all 1s ease-in-out; }

p {
  --text-opsz: 16;
  font-size: 1.65vw;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.4;
  max-width: 44em;
  transition: all 1s ease-in-out; }

figure {
  margin: 0;
  padding: 0;
  position: relative; }
  figure img {
    height: auto;
    max-width: 100%;
    width: 100%; }

/* layout */
.stage {
  background-color: var(--color-background);
  color: var(--color-text);
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  padding: 1rem;
  position: relative;
  z-index: 10;
  transition: all 1s ease-in-out; }

/*.background {
  $url : url(../images/variable_collies.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (background-blend-mode: difference) {
		background-image: $url, $url;
		background-blend-mode: difference;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px);
		filter: brightness(2) invert(1) grayscale(1);
		box-shadow: inset 0 0 0 1px black;
	}

  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
*/
.background {
  background-image: url(../images/variable_collies.jpg);
  background-size: cover;
  background-position: center;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  transition: all 2s ease-in-out; }

.background2 {
  background-image: url(../images/variable_collies_duotone.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  transition: all 2s ease-in-out; }

.frame-controls {
  position: absolute;
  bottom: 1rem;
  opacity: 1;
  right: 1.15rem;
  text-align: right;
  width: 15rem;
  z-index: 20; }
  .frame-controls button {
    background-color: #3e4f6b;
    border-radius: 0.2em;
    border: none;
    color: #ffffff;
    font-family: "Roboto VF";
    font-size: 1rem;
    padding: 0.5em 0.75em;
    cursor: hand; }
    .frame-controls button:hover {
      background-color: #6e7f9b; }

.resource-link {
  background-color: rgba(33, 33, 33, 0.9);
  border-radius: 0 0.25em 0 0;
  bottom: 0;
  color: #ffffff;
  font-family: "Roboto VF";
  font-size: 2vw;
  font-weight: 450;
  left: 0;
  padding: 0.25em 2em;
  position: absolute;
  z-index: 99; }

.device-frame {
  background-color: rgba(253, 252, 249, 0.8);
  border: solid 1px var(--color-text);
  border-radius: 2em;
  width: 99vw;
  height: 96vh;
  overflow: hidden;
  padding: 5% 10%;
  z-index: 1;
  transition: all 3s ease-in-out; }
  .device-frame.wide {
    padding: 5% 8%; }
  .device-frame:tall {
    padding: 8% 5%; }

.slide {
  height: 100vh;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  transition: all 1s ease-in-out;
  width: 100vw; }

.title-slide {
  padding: 0 0 0 48vw;
  position: relative;
  z-index: 1; }
  .title-slide h1 {
    margin-bottom: 0; }
  .title-slide h2 {
    margin-top: -0.75rem;
    font-stretch: 80%;
    font-weight: 450; }

.slide-1 {
  left: 100vw;
  display: none;
  opacity: 0; }
  .slide-1 .device-frame {
    position: absolute;
    top: 5vh;
    left: 8vw;
    height: 87.5vh;
    width: 84vw; }

.slide-2 {
  left: 100vw;
  display: none;
  opacity: 0; }
  .slide-2 .quote {
    margin-top: 25vh;
    margin-left: 5vw;
    opacity: 0;
    transition: all 1s ease-in-out;
    width: 55vw; }
    .slide-2 .quote h2 {
      font-family: "Amstelvar Italic VF";
      font-size: 4.15vw;
      font-style: italic;
      font-variation-settings: "opsz" 72; }
    .slide-2 .quote h3 {
      --text-opsz: 24;
      font-size: 3.25vw;
      font-stretch: 75%;
      font-weight: 375;
      margin-top: .5rem; }
  .slide-2 .vf-explained {
    opacity: 0;
    position: absolute;
    top: 15vh;
    left: 65vw;
    z-index: 10;
    transition: all 1s ease-in-out; }
  .slide-2 .font {
    --text-opsz: 32;
    background: url(../images/font_outline.svg) no-repeat;
    background-size: contain;
    background-position: top left;
    font-family: "Amstelvar VF";
    font-size: 4vw;
    font-weight: 100;
    font-variation-settings: "opsz" var(--text-opsz);
    width: 1.75em;
    text-align: center;
    line-height: 2.25;
    transition: all 2s ease-in-out; }
  .slide-2 .font1 {
    font-stretch: 65%;
    font-weight: 125;
    position: absolute;
    top: 0;
    left: 0; }
  .slide-2 .font2 {
    font-stretch: 75%;
    font-weight: 200;
    position: absolute;
    top: 0;
    left: 10vw; }
  .slide-2 .font3 {
    font-stretch: 90%;
    font-weight: 300;
    position: absolute;
    top: 0;
    left: 20vw; }
  .slide-2 .font4 {
    font-stretch: 100%;
    font-weight: 400;
    position: absolute;
    top: 21vh;
    left: 0; }
  .slide-2 .font5 {
    font-stretch: 110%;
    font-weight: 500;
    position: absolute;
    top: 21vh;
    left: 10vw; }
  .slide-2 .font6 {
    font-stretch: 120%;
    font-weight: 600;
    position: absolute;
    top: 21vh;
    left: 20vw; }
  .slide-2 .font7 {
    font-stretch: 130%;
    font-weight: 700;
    position: absolute;
    top: 42vh;
    left: 0; }
  .slide-2 .font8 {
    font-stretch: 140%;
    font-weight: 800;
    position: absolute;
    top: 42vh;
    left: 10vw; }
  .slide-2 .font9 {
    font-stretch: 150%;
    font-weight: 900;
    position: absolute;
    top: 42vh;
    left: 20vw; }

.slide-3 {
  left: 100vw;
  display: none;
  opacity: 0; }
  .slide-3 .device-frame {
    position: absolute;
    top: 5vh;
    left: 8vw;
    height: 87.5vh;
    width: 84vw; }
  .slide-3 h1 {
    --text-opsz: 16; }
  .slide-3 p {
    transition: all 2s ease-in-out; }
    .slide-3 p .first-letter {
      --text-opsz: 16;
      float: left;
      font-size: 1em;
      line-height: 1.4;
      margin-top: 0;
      margin-right: .1em;
      transition: all 2s ease-in-out; }
    .slide-3 p .first-line {
      --text-opsz: 16;
      font-weight: 400;
      font-stretch: 100%;
      transition: all 2s ease-in-out; }

.slide-4 {
  --ros-italic-ital: 0;
  --ros-italic-slnt: 0;
  left: 100vw;
  display: none;
  opacity: 0; }
  .slide-4 h1 {
    color: #f4e9e9;
    font-family: "Roslindale Italic VF";
    font-size: 4.25vw;
    font-weight: normal;
    font-variation-settings: "ital" var(--ros-italic-ital), "slnt" var(--ros-italic-slnt);
    margin: 10vh 7.5vw;
    opacity: 0;
    transition: all 3s ease-in-out; }

.slide-5 {
  left: 100vw;
  display: none;
  opacity: 0; }
  .slide-5 .device-frame {
    background-color: #1e1e20;
    border: solid 1px #18244a;
    border-radius: 2em;
    display: none;
    width: 98vw;
    height: 96vh;
    padding: 0;
    position: absolute;
    overflow: hidden;
    top: 2vh;
    left: 1vw;
    opacity: 1;
    transition: all 1s ease-in-out; }
    .slide-5 .device-frame iframe {
      border: none; }
    .slide-5 .device-frame .bello-write {
      padding: 0;
      margin: 0; }
      .slide-5 .device-frame .bello-write video {
        margin: 0;
        padding: 0; }

.slide-6 {
  left: 100vw;
  display: none;
  opacity: 0; }
  .slide-6 .device-frame {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    padding: 0; }

.slide-7 {
  left: 100vw;
  display: none;
  opacity: 0;
  background-image: url(../images/tillie_and_tristan.jpg);
  background-size: cover;
  background-position: center;
  transition: all 2s ease-in-out;
  padding: 1vh 0 0 60vw; }
  .slide-7 h1 {
    --text-opsz: 72; }
  .slide-7 h2 {
    --text-opsz: 36; }
  .slide-7 h3 {
    --text-opsz: 16;
    color: #333;
    font-size: 2.25vw;
    font-stretch: 85%; }
    .slide-7 h3 + h3 {
      font-size: 1.75vw;
      font-stretch: 75%; }

/* components */
/* frames */
.frame1 .byline {
  animation: fade-in 2s 1;
  will-change: transform; }

.frame1 .colophon {
  animation: fade-in 2.5s 1;
  will-change: transform; }

.frame1 .slide-1 {
  display: block;
  left: 0; }

.frame2 .background {
  opacity: 0; }

.frame2 .title-slide {
  opacity: 0; }

.frame2 .slide-1 {
  opacity: 1; }

.frame3 .title-slide {
  display: none;
  left: 100vw; }

.frame3 .slide-1 .device-frame {
  left: 35vw;
  padding: 5% 3%;
  width: 30vw; }

.frame4 .slide-1 h1 {
  font-size: 2.25vw; }

.frame4 .slide-1 p {
  font-size: 1.15vw;
  line-height: 1.25; }

.frame4 .slide-2 {
  display: block;
  left: 0; }

.frame5 .slide-1 {
  opacity: 0; }

.frame5 .slide-2 {
  opacity: 1; }
  .frame5 .slide-2 .quote {
    opacity: 1; }
  .frame5 .slide-2 .vf-explained {
    opacity: 1;
    transition-delay: 2s; }

.frame6 .slide-1 {
  display: none;
  left: 100vw; }

.frame6 .slide-3 {
  display: block;
  left: 0vw; }

.frame6 .font {
  top: 0;
  left: 0;
  font-size: 20vw;
  line-height: 1.5;
  padding-bottom: 0.25em;
  width: 27vw; }
  .frame6 .font1 {
    opacity: 1; }
  .frame6 .font2 {
    opacity: .45; }
  .frame6 .font3 {
    opacity: .4; }
  .frame6 .font4 {
    opacity: .35; }
  .frame6 .font5 {
    opacity: .3; }
  .frame6 .font6 {
    opacity: .25; }
  .frame6 .font7 {
    opacity: .2; }
  .frame6 .font8 {
    opacity: .15; }
  .frame6 .font9 {
    opacity: .1; }

.frame7 .slide-2 {
  opacity: 0; }

.frame7 .slide-3 {
  opacity: 1; }

.frame8 .slide-2 {
  display: none;
  left: 100vw; }

.frame8 .slide-3 h1 {
  --text-opsz: 96;
  font-size: 4.75vw; }

.frame9 .slide-3 h1 {
  --text-opsz: 120;
  font-size: 6.5vw;
  font-stretch: 67%;
  font-weight: 425; }

.frame10 .slide-3 p {
  --text-opsz: 20; }
  .frame10 .slide-3 p .first-letter {
    --text-opsz: 48;
    font-size: 2.85em;
    font-stretch: 120%;
    font-weight: 650;
    margin-top: 0.025em;
    line-height: 0.95; }

.frame11 .slide-3 p .first-line {
  font-stretch: 85%;
  font-weight: 625; }

.frame12 .slide-3 .device-frame {
  background-color: #18244a;
  color: #f4e9e9; }

.frame12 .slide-3 h1 {
  color: #f4e9e9; }

.frame12 .slide-3 p {
  color: #f4e9e9; }

.frame13 .slide-3 h1 {
  --text-opsz: 100;
  --text-GRAD: 95; }

.frame13 .slide-3 p {
  --text-GRAD: 110; }

.frame14 .slide-3 .device-frame {
  background-color: rgba(253, 252, 249, 0.8);
  color: var(--color-text); }

.frame14 .slide-3 h1 {
  --text-opsz: 120;
  --text-GRAD: 88;
  color: var(--color-text); }

.frame14 .slide-3 p {
  --text-GRAD: 88;
  color: var(--color-text); }

.frame15 .slide-3 h1 {
  --text-opsz: 100;
  --text-GRAD: 95; }

.frame15 .slide-3 p {
  --text-GRAD: 110; }

.frame16 .slide-3 h1 {
  word-spacing: 0.5em; }

.frame16 .slide-3 p {
  line-height: 1.65;
  max-width: none;
  word-spacing: 0.25em; }
  .frame16 .slide-3 p .first-letter {
    font-size: 3.35em; }
  .frame16 .slide-3 p .first-line {
    font-stretch: 77.5%;
    font-weight: 550; }

.frame17 .slide-3 .device-frame {
  left: 35vw;
  padding: 5% 3%;
  width: 30vw; }

.frame17 .slide-3 h1 {
  --text-opsz: 48;
  --text-GRAD: 88;
  font-size: 2.75vw;
  word-spacing: normal; }

.frame17 .slide-3 p {
  --text-opsz: 16;
  --text-GRAD: 88;
  font-size: 1.125vw;
  font-stretch: 90%;
  line-height: 1.25;
  max-width: 44em;
  word-spacing: normal; }
  .frame17 .slide-3 p .first-letter {
    font-size: 2.55em; }
  .frame17 .slide-3 p .first-line {
    font-stretch: inherit;
    font-weight: inherit; }

.frame17 .slide-4 {
  display: block;
  left: 0; }

.frame18 {
  background-color: #18244a; }
  .frame18 .slide-3 {
    opacity: 0; }
  .frame18 .slide-4 {
    opacity: 1; }
    .frame18 .slide-4 h1 {
      opacity: 1;
      transition-delay: 1.5s; }

.frame19 .slide-3 {
  display: none;
  left: 100vw; }

.frame19 .slide-4 {
  --ros-italic-ital: 1;
  --ros-italic-slnt: 0; }
  .frame19 .slide-4 h1 {
    transition-duration: 5s; }

.frame20 .slide-4 {
  --ros-italic-ital: 1;
  --ros-italic-slnt: -8; }
  .frame20 .slide-4 h1 {
    transition-duration: 3s; }

.frame20 .slide-5 {
  display: block;
  left: 0; }
  .frame20 .slide-5 .device-frame {
    display: block; }

.frame21 .background2 {
  opacity: 0; }

.frame21 .slide-4 {
  opacity: 0; }

.frame21 .slide-5 {
  opacity: 1; }

.frame21 .slide-6 {
  display: block;
  left: 0; }

.frame22 .slide-5 {
  opacity: 0; }

.frame22 .slide-6 {
  opacity: 1;
  z-index: 99; }

.frame22 .slide-7 {
  display: block;
  left: 0; }

.frame23 .slide-5 {
  display: none;
  left: 100vw; }

.frame23 .slide-6 {
  opacity: 0;
  z-index: 1; }

.frame23 .slide-7 {
  opacity: 1; }

@keyframes fade-up-in {
  from {
    font-weight: var(--font-weight-start);
    letter-spacing: var(--letterspacing);
    top: calc( var(--y-position) + var(--top-offset));
    opacity: 0; }
  to {
    font-weight: var(--font-weight-final);
    letter-spacing: 0;
    top: calc( var(--y-position) + 0vh);
    opacity: 1; } }

@keyframes fade-down-out {
  from {
    font-weight: var(--font-weight-start);
    letter-spacing: 0;
    top: 0;
    opacity: 1; }
  to {
    font-weight: var(--font-weight-final);
    letter-spacing: var(--letterspacing);
    top: var(--top-offset);
    opacity: 0; } }

@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes pulse {
  0% {
    font-weight: 100; }
  50% {
    font-weight: 900; }
  100% {
    font-weight: 100; } }

@keyframes pulse {
  0% {
    font-weight: 100; }
  50% {
    font-weight: 900; }
  100% {
    font-weight: 100; } }