/*************************************************
BFX - Brutal Effects
**************************************************/

/* Clipbox
**********************************/
.clip-box {
    position: relative;
    display: block;
    -webkit-background-clip: text;
	-moz-background-clip: text;
      background-clip: text;
    -webkit-text-fill-color: transparent;
}

.clip-box:before, .clip-box:after {
    position: absolute;
    content: '';
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.clip-box:before {
    z-index: -2;
    top: 0; right: 0; bottom: 0; left: 0;
}

/* Text Background (black zone) */
.clip-box:after {
    position: absolute;
    z-index: -1;
    top: .125em;
    right: .125em;
    bottom: .125em;
    left: .125em;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-box-cover, .clip-box-cover:before {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
	background-position: 50% 50%;
}

/* BRUTAL TEXT EFFECT
***********************/
.brutal-text {
    letter-spacing: .15em;
    text-shadow:  0.35rem -0.35rem rgba(178, 217, 35, 0.75), -0.35rem -0.35rem rgba(39, 172, 227, 0.75), 0 0.5rem rgba(255, 213, 25, 0.75);
}
.brutal-text-mono {
    letter-spacing: .15em;
    text-shadow:  0.35rem -0.35rem rgba(100, 100, 100, 0.75), -0.35rem -0.35rem rgba(150, 150, 150, 0.75), 0 0.5rem rgba(200, 200, 200, 0.75);
}
.brutal-text-neon {
    letter-spacing: .15em;
    text-shadow:  0.35rem -0.35rem rgba(255, 105, 180, 0.9), -0.25rem -0.25rem rgba(251, 167, 58, 0.9), -0.25rem 0.35rem rgba(72, 222, 252, 0.9);
}

/* STEP TEXT EFFECT
***********************/
.step-text {
  margin: 0 auto;
  padding: 80px 0;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}

.step-line {
  height: 50px;
  overflow: hidden;
  position: relative;
}
.step-line:nth-child(odd) {
  -webkit-transform: skew(60deg, -30deg) scaleY(0.66667);
          transform: skew(60deg, -30deg) scaleY(0.66667);
}
.step-line:nth-child(even) {
  -webkit-transform: skew(0deg, -30deg) scaleY(1.33333);
          transform: skew(0deg, -30deg) scaleY(1.33333);
}
.step-line:nth-child(1) {
  left: 29px;
}
.step-line:nth-child(2) {
  left: 58px;
}
.step-line:nth-child(3) {
  left: 87px;
}
.step-line:nth-child(4) {
  left: 116px;
}
.step-line:nth-child(5) {
  left: 145px;
}
.step-line:nth-child(6) {
  left: 174px;
}
.step-line:nth-child(7) {
  left: 203px;
}

/*
** Fine-grained text styles
*/
.step-text .step-line p {
  height: 50px;
  line-height: 45px;
  padding: 0 10px;
  transition: all .4s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  vertical-align: top;
  white-space: nowrap;
}
.step-text:hover p {
  -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
}


/* GLITCH EFFECT
***********************/
.glitch {
	-webkit-animation: glitch1 2.5s infinite;
	animation: glitch1 2.5s infinite;
}
span.glitch {
	-webkit-animation: glitch1 1.5s infinite;
	animation: glitch1 1.5s infinite;
}
@-webkit-keyframes glitch1 {
  0% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  7% {
    -webkit-transform: skew(-0.5deg, -0.9deg);
            transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  27% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  30% {
    -webkit-transform: skew(0.8deg, -0.1deg);
            transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  52% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  55% {
    -webkit-transform: skew(-1deg, 0.2deg);
            transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  72% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  75% {
    -webkit-transform: skew(0.4deg, 1deg);
            transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes glitch1 {
  0% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  7% {
    -webkit-transform: skew(-0.5deg, -0.9deg);
            transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  27% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  30% {
    -webkit-transform: skew(0.8deg, -0.1deg);
            transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  52% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  55% {
    -webkit-transform: skew(-1deg, 0.2deg);
            transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  72% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  75% {
    -webkit-transform: skew(0.4deg, 1deg);
            transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

/* THROB
**********************/
.throb {
  animation-name: throb; 
  animation-iteration-count: infinite;
  animation-duration: 2s; 
  display: inline-block !important;
}
@keyframes throb
{
  0%
  {
    transform: scale( .75 );
	-webkit-transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
	-webkit-transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
	-webkit-transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
	-webkit-transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
	-webkit-transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
	-webkit-transform: scale( .75 );
  }
}

/* ANIMATED GRADIENT BACKGROUNDS
***********************************/
.anim-bg-brutal {
background: linear-gradient(-11deg, #1C1C1C, #808080, #2e2e2e, #1C1C1C, #1C1C1C, #808080, #2e2e2e, #1C1C1C, #1C1C1C, #808080, #2e2e2e, #1C1C1C, #1C1C1C, #808080, #2e2e2e, #1C1C1C, #1C1C1C, #808080, #2e2e2e, #1C1C1C, #1C1C1C, #808080, #2e2e2e);
	background-size: 400% 400%;
	-webkit-animation: Brutal 18s linear infinite;
	-moz-animation: Brutal 18s linear infinite;
	animation: Brutal 18s linear infinite;
}
@-webkit-keyframes Brutal {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Brutal {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Brutal {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
.anim-bg-plain {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Gradient {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Gradient {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
.anim-bg-vampire { color: #000;
background: linear-gradient(-69deg, #8A0808, #610B0B, #3B0B0B, #610B0B, #8A0808, #610B0B, #3B0B0B);
	background-size: 400% 400%;
	-webkit-animation: Vampire 16s ease infinite;
	-moz-animation: Vampire 16s ease infinite;
	animation: Vampire 16s ease infinite;
}
@-webkit-keyframes Vampire {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Vampire {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Vampire {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
.anim-bg-pastel { color: #000;
background: linear-gradient(217deg, rgba(255,0,0,1), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,1), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,1), rgba(0,0,255,0) 70.71%);
	background-size: 400% 400%;
	-webkit-animation: Pastel 13s ease infinite;
	-moz-animation: Pastel 13s ease infinite;
	animation: Pastel 13s ease infinite;
}
@-webkit-keyframes Pastel {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Pastel {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Pastel {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
.anim-bg-hot { color: #000;
background: linear-gradient(98deg, #ff0000, #ffab40, #ff9800, #F4FA58);
	background-size: 400% 400%;
	-webkit-animation: Hot 12s ease infinite;
	-moz-animation: Hot 12s ease infinite;
	animation: Hot 12s ease infinite;
}
@-webkit-keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
.anim-bg-water { color: #fff;
background: linear-gradient(45deg, #ADD8E6, #81d4fa, #2196f3, #2196f3, #ADD8E6, #81d4fa, #2196f3, #2196f3, #ADD8E6, #81d4fa, #2196f3, #2196f3);
	background-size: 400% 400%;
	-webkit-animation: Water 14s ease-in-out infinite;
	-moz-animation: Water 14s ease-in-out infinite;
	animation: Water 14s ease-in-out infinite;
}
@-webkit-keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
.anim-bg-shine { color: #000;
background: linear-gradient(-45deg, #808080, #808080, #e6e6e6, #808080, #808080, #e6e6e6, #808080, #808080, #e6e6e6);
	background-size: 400% 400%;
	-webkit-animation: Shine 9s ease-in-out infinite;
	-moz-animation: Shine 9s ease-in-out infinite;
	animation: Shine 9s ease-in-out infinite;
}
@-webkit-keyframes Shine {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Shine {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Shine {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}