/*
 * .-----------------------------------------------------.
 * |                  LOCKABLE SECTION                   |
 * '-----------------------------------------------------'
 */

/* When this section reaches the top of the viewport, .section-lock-stick  */
/* becomes fixed positioned until this element goes out of viewport. */
.section-lock {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Stickiness length is .section-lock height - viewport height. */
html.js .section-lock {
  height: 300vh;
}

.section-lock-stick {
  width: 100%;
  height: 100vh;
  position: absolute;
}

.section-lock-centerer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}