/* font-family: 'Roboto Slab', serif;
font-family: 'Oswald', sans-serif;
font-family: 'ZCOOL KuaiLe', cursive;
font-family: 'Special Elite', cursive;
font-family: 'Comfortaa', cursive;
font-family: 'Kalam', cursive;
font-family: 'Major Mono Display', monospace;
font-family: 'VT323', monospace; */

.glitch {
  color: white;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(4px, 9999px, 62px, 0);
  }
  5% {
    clip: rect(58px, 9999px, 84px, 0);
  }
  10% {
    clip: rect(85px, 9999px, 50px, 0);
  }
  15% {
    clip: rect(89px, 9999px, 16px, 0);
  }
  20% {
    clip: rect(23px, 9999px, 76px, 0);
  }
  25% {
    clip: rect(89px, 9999px, 77px, 0);
  }
  30% {
    clip: rect(96px, 9999px, 57px, 0);
  }
  35% {
    clip: rect(12px, 9999px, 70px, 0);
  }
  40% {
    clip: rect(14px, 9999px, 68px, 0);
  }
  45% {
    clip: rect(53px, 9999px, 95px, 0);
  }
  50% {
    clip: rect(45px, 9999px, 15px, 0);
  }
  55% {
    clip: rect(43px, 9999px, 73px, 0);
  }
  60% {
    clip: rect(43px, 9999px, 96px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 13px, 0);
  }
  70% {
    clip: rect(63px, 9999px, 76px, 0);
  }
  75% {
    clip: rect(67px, 9999px, 17px, 0);
  }
  80% {
    clip: rect(94px, 9999px, 61px, 0);
  }
  85% {
    clip: rect(67px, 9999px, 64px, 0);
  }
  90% {
    clip: rect(59px, 9999px, 78px, 0);
  }
  95% {
    clip: rect(60px, 9999px, 5px, 0);
  }
  100% {
    clip: rect(48px, 9999px, 52px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(16px, 9999px, 58px, 0);
  }
  5% {
    clip: rect(12px, 9999px, 59px, 0);
  }
  10% {
    clip: rect(95px, 9999px, 49px, 0);
  }
  15% {
    clip: rect(92px, 9999px, 91px, 0);
  }
  20% {
    clip: rect(34px, 9999px, 56px, 0);
  }
  25% {
    clip: rect(77px, 9999px, 20px, 0);
  }
  30% {
    clip: rect(89px, 9999px, 47px, 0);
  }
  35% {
    clip: rect(9px, 9999px, 8px, 0);
  }
  40% {
    clip: rect(44px, 9999px, 23px, 0);
  }
  45% {
    clip: rect(75px, 9999px, 39px, 0);
  }
  50% {
    clip: rect(45px, 9999px, 27px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 34px, 0);
  }
  60% {
    clip: rect(62px, 9999px, 62px, 0);
  }
  65% {
    clip: rect(99px, 9999px, 15px, 0);
  }
  70% {
    clip: rect(79px, 9999px, 48px, 0);
  }
  75% {
    clip: rect(72px, 9999px, 68px, 0);
  }
  80% {
    clip: rect(62px, 9999px, 64px, 0);
  }
  85% {
    clip: rect(98px, 9999px, 93px, 0);
  }
  90% {
    clip: rect(95px, 9999px, 18px, 0);
  }
  95% {
    clip: rect(85px, 9999px, 78px, 0);
  }
  100% {
    clip: rect(97px, 9999px, 15px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}


/* Common style */
figure {
  position: relative;
  float: left;
  overflow: hidden;
  height: 32vh;
  /* min-width: 320px; */
  /* max-width: 480px; */
  /* max-height: 360px; */
  /* width: 48%; */
  /* height: auto; */
  /* background: #3085a3; */
  text-align: center;
  margin: 0 0.3vw !important;
}

figure img {
	position: relative;
	display: block;
	/* min-height: 100%; */
	max-width: 100%;
	opacity: 1;
}

figure figcaption {
	padding: 1rem;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}

figure figcaption,
figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

figure h2 span {
	font-weight: 800;
}

figure h2,
figure p {
	margin: 0;
}

figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
	background: black;
  min-height: 45vh;
  cursor: normal;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-goliath img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0.5rem 1rem;
}

figure.effect-goliath p{
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,1vh,0);
}

figure.effect-goliath:hover img, figure.effect-goliath:focus img {
  opacity: 1;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
	/* -webkit-transform: translate3d(0,-80px,0); */
	/* transform: translate3d(0,-80px,0); */
  -webkit-transform: scale3d(1.5,1.5,1.5) translate3d(2vw,0,0);
  transform: scale3d(1.5,1.5,1.5) translate3d(2vw,0,0);
}

figure.effect-goliath:hover h2 {
  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-goliath:hover p {
	opacity: 0.9;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}