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

html {
  height: 100%;
  width: 100%;
  &.r {
    font-size: 20px !important;
    @media screen and (max-width: $huge_breakpoint) {
      font-size: 18px !important;
    }
    @media screen and (max-width: 1440px) {
      font-size: 16px !important;
    }
  }
}

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  &.unload {
    > * {
      will-change: opacity;
      transition: opacity 0.3s $easeOutQuart !important;
      opacity: 0 !important;
    }
    &:before {
      position: fixed;
      top: 50%;
    }
  }
}

#canvas {
  width: 100%;
  height: 100%;
  padding-top: em(50px);
  position: relative;
  .search_results & {
    display: none;
  }
}

.scroll {
  will-change: transform;
}

@mixin reveal_transition() {
  transition: opacity $reveal_duration $reveal_timing_function,
  transform $reveal_duration $reveal_timing_function !important;
}

.reveal_animation {
  @include reveal_transition();
  @for $i from 0 through 30 {
    &.data_delay_#{$i} {
      transition-delay: $i * 0.1s !important;
    }
  }
  &.reveal {
    transform: translateX(100px);
    opacity: 0 !important;
  }
}

.cms-toolbar-expanded {
  *.reveal {
    transform: none;
    opacity: 1 !important;
  }
}