@font-face {
  font-family: 'Druk XXCond Web';
  src: url("/fonts/DrukXXCond-Super-Web.woff2") format("woff2"), url("/fonts/DrukXXCond-Super-Web.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
}

* {
  box-sizing: border-box;
}

.mobile {
  display: block;
}

@media screen and (min-width: 769px) {
  .mobile {
    display: none;
  }
}

.desktop {
  display: none;
}

@media screen and (min-width: 769px) {
  .desktop {
    display: block;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.load {
  opacity: 0;
  transition: all .25s ease-in;
}

.load.inview {
  opacity: 1;
}

.viewport {
  opacity: 0;
}

.viewport.inview {
  opacity: 1;
}

#age {
  width: 100vw;
  min-height: 100vh;
  background: #333;
  position: fixed;
  display: block;
  z-index: 9999;
  opacity: 1;
  transition: all .25s ease-in;
}

#age:after {
  content: '';
  position: fixed;
  width: 300%;
  height: 300%;
  display: block;
  top: -100%;
  left: -100%;
  background: url("/img/noise.png") repeat;
  animation: grain 15s steps(5) infinite;
  z-index: -1;
  opacity: .8;
}

#age .bg {
  width: 100vw;
  min-height: 100vh;
  position: absolute;
  top: 0;
  display: block;
  background-image: url("/img/advisory-dark.svg");
  background-size: cover;
  background-position: center;
  animation: flash .25s 6 linear;
  opacity: 1;
}

#age .age--wrap {
  min-height: 100vh;
  padding: 30vh 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  opacity: 0;
  transition: all .25s ease-in;
}

#age .age--wrap.inview {
  opacity: 1;
}

#age .age--wrap p.lead {
  font-size: 2rem;
}

#age .age--wrap-btns {
  position: relative;
}

#age .age--wrap-btns a {
  color: #fff;
  text-align: left;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  text-decoration: none;
  display: inline-block;
  padding: 15px 0;
  margin-right: 30px;
  position: relative;
  font-family: 'Space Mono', monospace;
}

#age .age--wrap-btns a:hover, #age .age--wrap-btns a:focus, #age .age--wrap-btns a:active, #age .age--wrap-btns a.active {
  transform: rotate(180deg);
  font-weight: 700;
  outline: 0;
}

#age .age--wrap #label {
  max-width: 240px;
  position: fixed;
  top: 10vh;
  right: 10vw;
  transform: rotate(2deg);
}

#age.hide {
  opacity: 0;
  pointer-events: none;
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
}

body {
  background-color: #000 !important;
  font-family: 'Space Mono', monospace;
  margin: 0;
  min-width: 325px;
  overflow-x: hidden;
}

body:after {
  content: '';
  position: fixed;
  width: 300%;
  height: 300%;
  display: block;
  top: -100%;
  left: -100%;
  background: url("/img/noise.png") repeat;
  animation: grain 15s steps(5) infinite;
  z-index: -1;
  opacity: .8;
}

body .bg {
  opacity: 0;
  background-image: url("/img/bg.jpg");
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  z-index: -1;
  transition: opacity 2s ease-in;
}

body .bg.inview {
  opacity: 1;
}

.viewport {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#main {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve-3d;
}

a:hover {
  text-decoration: none;
}

#yes {
  cursor: pointer;
}

.main {
  min-height: 100vh;
}

.main section {
  min-height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
}

.main section:focus {
  outline: 0;
}

.main section .container {
  width: calc(100vw - 120px);
  max-width: 1800px;
  margin: auto;
  min-height: 100vh;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 769px) {
  .main section .container {
    width: calc(100vw - 150px);
  }
}

h1, h2, h3 {
  font-family: 'Druk XXCond Web';
  font-weight: bold;
}

p, h1.p, h4, h5 {
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: .75rem;
  line-height: 1.5;
}

@media screen and (min-width: 769px) {
  p, h1.p, h4, h5 {
    font-size: .9rem;
  }
}

@media screen and (min-width: 1500px) {
  p, h1.p, h4, h5 {
    font-size: 1rem;
  }
}

.flex {
  display: -ms-flexbox;
  display: flex;
}

.flex.center {
  -ms-flex-align: center;
      align-items: center;
}

header {
  position: absolute;
  z-index: 999;
  width: 100vw;
  height: 60px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

header #logo {
  width: 45px;
  height: 45px;
  display: block;
  fill: #fff;
  position: fixed;
  right: -10px;
  top: 10vh;
  transform: rotate(-15deg);
  background: url("/img/logo-icon.svg");
  background-size: cover;
}

header #logo:hover, header #logo:focus {
  background: url("/img/logo-icon-glitch.svg");
  background-size: cover;
  outline: 0;
}

@media screen and (min-width: 769px) {
  header #logo {
    width: 60px;
    height: 60px;
  }
}

header .hamburger {
  position: fixed;
  top: 30px;
  left: 15px;
  z-index: 99999;
}

header .hamburger span {
  width: 15px;
  height: 3px;
  display: block;
  background: #fff;
  margin: 8px 0;
  opacity: 1;
  transition: all .25s ease-in;
}

header .hamburger span.inview:nth-child(2) {
  margin-left: 7px;
}

header .hamburger.open span:nth-child(1) {
  transform: rotate(-30deg);
}

header .hamburger.open span:nth-child(2) {
  transform: rotate(8deg);
}

header .hamburger.open span:nth-child(3) {
  transform: rotate(-12deg);
}

header .nav--wrap {
  overflow: hidden;
  opacity: 0;
  position: fixed;
  transition: all .25s ease-in;
}

header .nav--wrap.open {
  opacity: 1;
}

@media screen and (min-width: 769px) {
  header .nav--wrap {
    opacity: 1;
    overflow: visible;
    position: fixed;
  }
}

header .nav {
  margin-top: 90px;
  margin-left: 30px;
}

@media screen and (max-width: 769px) {
  header .nav li {
    width: 100%;
  }
}

header .nav li a {
  color: #fff;
  text-align: left;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  text-decoration: none;
  display: inline-block;
  padding: 15px 0;
  margin-right: 30px;
  position: relative;
  font-family: 'Space Mono', monospace;
}

@media screen and (max-width: 769px) {
  header .nav li a {
    color: #000;
  }
  header .nav li a span {
    background: #fff;
    padding: 0 3px;
  }
  header .nav li a:hover, header .nav li a:focus, header .nav li a:active {
    font-weight: 700;
    outline: 0;
  }
}

@media screen and (min-width: 769px) {
  header .nav {
    margin: 60px 0 0 75px;
    display: -ms-flexbox;
    display: flex;
  }
  header .nav li a:hover, header .nav li a:focus, header .nav li a:active, header .nav li a.active {
    transform: rotate(180deg);
    font-weight: 700;
    outline: 0;
  }
}

#get-merch .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 10vh 0;
}

#get-merch input {
  font-family: 'Space Mono', monospace !important;
  padding: 5px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  font-size: 12px;
  text-transform: uppercase;
  margin-right: 10px;
  border-radius: 0;
  padding: 10px;
  margin-bottom: 5px;
  width: 100%;
  margin-bottom: 10px;
}

#get-merch input.half {
  width: 50%;
}

#get-merch input:focus {
  outline: 0;
}

#get-merch h5 {
  font-family: 'Space Mono', monospace !important;
  color: #fff;
  padding-top: 15px;
  font-size: 1rem;
}

#get-merch h1.p {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 2.25rem;
  line-height: 1.1;
}

#get-merch .col-md-6 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

#get-merch select {
  padding: 10px;
}

#get-merch .stripe-button-el, #get-merch .stripe-button-el span {
  background: #fff !important;
  color: #000 !important;
  text-transform: uppercase;
  border: 2px solid #fff;
  font-family: 'Space Mono', monospace !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  padding: 5px 10px !important;
  height: auto !important;
  min-height: auto !important;
}

#get-merch .stripe-button-el {
  display: block !important;
  margin-top: 15px !important;
}

#get-merch .stripe-button-el:focus {
  outline: 0;
}

#get-merch .stripe-button-el span:hover {
  transform: rotate(180deg);
}

@media screen and (max-width: 769px) {
  #get-merch .content {
    margin: auto;
  }
}

footer {
  position: fixed;
  width: 100vw;
  display: block;
  bottom: 0;
}

footer .beer-locator {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  text-transform: uppercase;
  position: fixed;
  left: 75px;
  bottom: 30px;
  color: #fff;
  letter-spacing: .05rem;
}

footer .beer-locator:hover, footer .beer-locator:active, footer .beer-locator:focus, footer .beer-locator.active {
  transform: rotate(180deg);
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  outline: 0;
}

footer .social-links-wrap {
  transform: rotate(90deg);
  right: -50px;
  position: fixed;
  bottom: 145px;
}

footer .social-links-wrap .social-links a {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  text-transform: uppercase;
  color: #fff;
  display: inline;
  margin-left: 15px;
  letter-spacing: .1rem;
}

footer .social-links-wrap .social-links a:hover {
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}

#landing {
  background: none;
}

#landing .type-gallery {
  width: 100%;
  position: relative;
  height: 100vh;
}

#landing .type-gallery img {
  width: 100%;
  position: absolute;
  max-width: 450px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.beer {
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -ms-flex-align: end;
      align-items: flex-end;
  position: relative;
}

.beer .beer-feature__wrap {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
}

@media screen and (max-width: 769px) {
  .beer .beer-feature__wrap .container {
    width: 100vw;
    overflow: hidden;
  }
  .beer .beer-feature__wrap .container .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
  }
}

.beer .beer-feature__wrap .beer-feature {
  position: relative;
  height: 60vh;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-pack: center;
      justify-content: center;
}

.beer .beer-feature__wrap .beer-feature .ie-img {
  display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .beer .beer-feature__wrap .beer-feature .ie-img {
    width: 40%;
    max-width: 300px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(5deg);
  }
}

@media screen and (min-width: 769px) {
  .beer .beer-feature__wrap .beer-feature {
    height: 100vh;
    -ms-flex-align: center;
        align-items: center;
  }
}

.beer .beer-feature__wrap .beer-feature h2.headline {
  font-size: 80vw;
  line-height: 1;
  color: #fff;
  font-family: 'Druk XXCond Web';
  text-transform: uppercase;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 450px) {
  .beer .beer-feature__wrap .beer-feature h2.headline {
    font-size: 60vw;
    margin-left: 0;
  }
}

@media screen and (min-width: 769px) {
  .beer .beer-feature__wrap .beer-feature h2.headline {
    font-size: 50vw;
  }
}

@media screen and (min-width: 1080px) {
  .beer .beer-feature__wrap .beer-feature h2.headline {
    font-size: 40vw;
  }
}

@media screen and (min-width: 2000px) {
  .beer .beer-feature__wrap .beer-feature h2.headline {
    font-size: 30vw;
  }
}

.beer .beer-feature__wrap .beer-feature .can canvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  top: 0;
  width: 50vw;
  height: 80vh;
  transform: rotate(-12deg);
}

.beer .beer-feature__wrap .beer-feature .can canvas:focus {
  outline: 0;
}

@media screen and (max-width: 769px) {
  .beer .beer-feature__wrap .beer-feature .can canvas {
    margin-top: 5vh;
    pointer-events: none;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .beer .beer-feature__wrap .beer-feature .can canvas {
    pointer-events: none;
  }
}

.beer .beer-content__wrap {
  width: 100vw;
  height: 35vh;
  position: relative;
  z-index: 9999;
}

@media screen and (max-width: 768px) {
  .beer .beer-content__wrap {
    padding-bottom: 60px;
  }
}

@media screen and (min-width: 1200px) {
  .beer .beer-content__wrap {
    height: 40vh;
  }
}

@media screen and (min-width: 1500px) {
  .beer .beer-content__wrap {
    height: 35vh;
  }
}

.beer .beer-content__wrap .container {
  min-height: auto;
}

@media screen and (min-width: 769px) {
  .beer .beer-content__wrap .container > .row {
    -ms-flex-align: end;
        align-items: flex-end;
  }
}

.beer .beer-content__wrap .beer-content {
  color: #fff;
  height: 100%;
}

.beer .beer-content__wrap .beer-content span {
  font-size: .75rem;
  line-height: 1;
  font-family: 'Space Mono', monospace;
  padding-right: 15px;
  margin-top: 15px;
}

.beer .beer-content__wrap .beer-content span.title {
  display: block;
}

@media screen and (min-width: 769px) {
  .beer .beer-content__wrap .beer-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

@media screen and (min-width: 1080px) {
  .beer .beer-content__wrap .beer-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: end;
        align-content: flex-end;
  }
  .beer .beer-content__wrap .beer-content span {
    padding-right: 30px;
  }
}

.beer .beer-content__wrap .label p {
  color: #fff;
  margin-bottom: 0;
  font-size: .75rem;
  margin-top: 15px;
}

@media screen and (min-width: 769px) {
  .beer .beer-content__wrap .label {
    background-size: cover;
    background: url("/img/label-yellow.png");
    padding: 30px;
  }
  .beer .beer-content__wrap .label p {
    color: #000;
    margin-bottom: 0;
    margin-top: 0;
    font-size: .65rem;
  }
  .beer .beer-content__wrap .label.raspberry-red {
    background: url("/img/label-red.png");
  }
}

@media screen and (min-width: 1750px) {
  .beer .beer-content__wrap .label p {
    font-size: .9rem;
  }
}

#our-story .our-story--content {
  height: 100vh;
}

#our-story .our-story--content p.story {
  font-size: 1rem;
}

@media screen and (min-width: 769px) {
  #our-story .our-story--content p.story {
    font-size: 2vw;
  }
}

#beer-locator h2 {
  font-size: 10rem;
  text-transform: uppercase;
  padding: 0;
  line-height: .75;
  color: #fff;
  margin-top: 20vh;
  margin-bottom: 30px;
}

@media screen and (min-width: 769px) {
  #beer-locator h2 {
    margin-top: calc(40vh - 75px);
  }
}

#beer-locator #map {
  width: 100%;
  height: 30vh;
  display: block;
  background: #333;
  margin-top: 30px;
}

@media screen and (min-width: 769px) {
  #beer-locator #map {
    margin-top: calc(40vh - 75px);
    height: 60vh;
  }
}

#beer-locator .contact {
  height: 75px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
}

#beer-locator .contact a {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .05rem;
  margin-right: 30px;
  color: #fff;
  text-decoration: none;
}

#beer-locator .contact a:hover {
  font-weight: 700;
  text-decoration: none;
}

#beer-locator ul.locations {
  display: none;
}

.glitch {
  position: relative;
  color: white;
  display: inline-block;
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 0.5px;
  text-shadow: -0.5px 0 red;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 1s infinite linear alternate-reverse;
}

.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -0.5px;
  text-shadow: -0.5px 0 yellow, 0.5px 0.5px red;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

.beer-feature:hover .flash {
  position: relative;
  color: white;
  display: inline-block;
}

.beer-feature:hover .flash:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 0.5px;
  text-shadow: -0.5px 0 red;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 1s infinite linear alternate-reverse;
}

.beer-feature:hover .flash:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -0.5px;
  text-shadow: -0.5px 0 yellow, 0.5px 0.5px red;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

.story:hover .flash {
  position: relative;
  color: white;
  display: inline-block;
}

.story:hover .flash:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 0.5px;
  text-shadow: -0.5px 0 red;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 1s infinite linear alternate-reverse;
}

.story:hover .flash:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -0.5px;
  text-shadow: -0.5px 0 yellow, 0.5px 0.5px red;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

/* Creates an animation with 20 steaps. For each step, it calculates
a percentage for the specific step. It then generates a random clip
box to be used for the random glitch effect. Also adds a very subtle
skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
  0% {
    clip: rect(49px, 9999px, 18px, 0);
    transform: skew(0.09deg);
  }
  5% {
    clip: rect(52px, 9999px, 25px, 0);
    transform: skew(0.4deg);
  }
  10% {
    clip: rect(42px, 9999px, 90px, 0);
    transform: skew(0.57deg);
  }
  15% {
    clip: rect(19px, 9999px, 93px, 0);
    transform: skew(0.79deg);
  }
  20% {
    clip: rect(73px, 9999px, 58px, 0);
    transform: skew(0.43deg);
  }
  25% {
    clip: rect(22px, 9999px, 27px, 0);
    transform: skew(0.6deg);
  }
  30% {
    clip: rect(79px, 9999px, 79px, 0);
    transform: skew(0.23deg);
  }
  35% {
    clip: rect(46px, 9999px, 39px, 0);
    transform: skew(0.42deg);
  }
  40% {
    clip: rect(81px, 9999px, 91px, 0);
    transform: skew(0.58deg);
  }
  45% {
    clip: rect(97px, 9999px, 100px, 0);
    transform: skew(0.23deg);
  }
  50% {
    clip: rect(32px, 9999px, 96px, 0);
    transform: skew(0.61deg);
  }
  55% {
    clip: rect(44px, 9999px, 64px, 0);
    transform: skew(0.32deg);
  }
  60% {
    clip: rect(10px, 9999px, 94px, 0);
    transform: skew(0.91deg);
  }
  65% {
    clip: rect(97px, 9999px, 91px, 0);
    transform: skew(0.85deg);
  }
  70% {
    clip: rect(73px, 9999px, 87px, 0);
    transform: skew(0.1deg);
  }
  75% {
    clip: rect(7px, 9999px, 91px, 0);
    transform: skew(0.64deg);
  }
  80% {
    clip: rect(81px, 9999px, 14px, 0);
    transform: skew(1deg);
  }
  85% {
    clip: rect(46px, 9999px, 6px, 0);
    transform: skew(0.82deg);
  }
  90% {
    clip: rect(75px, 9999px, 59px, 0);
    transform: skew(0.77deg);
  }
  95% {
    clip: rect(37px, 9999px, 71px, 0);
    transform: skew(0.09deg);
  }
  100% {
    clip: rect(95px, 9999px, 28px, 0);
    transform: skew(0.47deg);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(99px, 9999px, 39px, 0);
    transform: skew(0.14deg);
  }
  5% {
    clip: rect(37px, 9999px, 100px, 0);
    transform: skew(0.7deg);
  }
  10% {
    clip: rect(64px, 9999px, 54px, 0);
    transform: skew(0.82deg);
  }
  15% {
    clip: rect(61px, 9999px, 100px, 0);
    transform: skew(0.55deg);
  }
  20% {
    clip: rect(64px, 9999px, 93px, 0);
    transform: skew(0.01deg);
  }
  25% {
    clip: rect(29px, 9999px, 33px, 0);
    transform: skew(0.36deg);
  }
  30% {
    clip: rect(49px, 9999px, 43px, 0);
    transform: skew(0.71deg);
  }
  35% {
    clip: rect(8px, 9999px, 16px, 0);
    transform: skew(0.44deg);
  }
  40% {
    clip: rect(24px, 9999px, 30px, 0);
    transform: skew(0.84deg);
  }
  45% {
    clip: rect(38px, 9999px, 11px, 0);
    transform: skew(0.93deg);
  }
  50% {
    clip: rect(52px, 9999px, 23px, 0);
    transform: skew(0.14deg);
  }
  55% {
    clip: rect(29px, 9999px, 84px, 0);
    transform: skew(0.76deg);
  }
  60% {
    clip: rect(91px, 9999px, 37px, 0);
    transform: skew(0.38deg);
  }
  65% {
    clip: rect(53px, 9999px, 24px, 0);
    transform: skew(0.55deg);
  }
  70% {
    clip: rect(41px, 9999px, 16px, 0);
    transform: skew(0.39deg);
  }
  75% {
    clip: rect(87px, 9999px, 12px, 0);
    transform: skew(0.6deg);
  }
  80% {
    clip: rect(42px, 9999px, 25px, 0);
    transform: skew(0.59deg);
  }
  85% {
    clip: rect(10px, 9999px, 1px, 0);
    transform: skew(0.24deg);
  }
  90% {
    clip: rect(92px, 9999px, 92px, 0);
    transform: skew(0.62deg);
  }
  95% {
    clip: rect(33px, 9999px, 24px, 0);
    transform: skew(0.32deg);
  }
  100% {
    clip: rect(37px, 9999px, 36px, 0);
    transform: skew(0.31deg);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(1deg);
  }
  10% {
    transform: skew(-2deg);
  }
  20% {
    transform: skew(-1deg);
  }
  30% {
    transform: skew(-1deg);
  }
  40% {
    transform: skew(-2deg);
  }
  50% {
    transform: skew(3deg);
  }
  60% {
    transform: skew(-3deg);
  }
  70% {
    transform: skew(1deg);
  }
  80% {
    transform: skew(-3deg);
  }
  90% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(-2deg);
  }
}

@keyframes grain {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJ3d3cvY3NzL21haW4uY3NzIiwic291cmNlUm9vdCI6IiJ9*/