/* ===== Primary Styles ========================================================
	Author: Chi-chi Wang
	TITLE COMMENTS
  ==========================================================================  */

/* ===================== */
/*    Gradient STYLES    */
/* ===================== */

/* === Two Stop === */
  .twostop-bw {
    background: -webkit-linear-gradient(#000000, #ffffff);
    background: -moz-linear-gradient(#000000, #ffffff);
    background: linear-gradient(#000000, #ffffff);
  }
/* === Three Stop === */
  .threestop-ryo {
    background: -webkit-linear-gradient(#DE210C, #DE980C, #DED70C);
    background: -moz-linear-gradient(#DE210C, #DE980C, #DED70C);
    background: linear-gradient(#DE210C, #DE980C, #DED70C);
  }
/* === Seven Stop Rainbow === */
  .sevenstop-rainbow {
    background: -webkit-linear-gradient(#FF0000, #FF6600, #FFFF00, #00FF00, #0099FF, #0033FF, #9800FF);
    background: -moz-linear-gradient(#FF0000, #FF6600, #FFFF00, #00FF00, #0099FF, #0033FF, #9800FF);
    background: linear-gradient(#FF0000, #FF6600, #FFFF00, #00FF00, #0099FF, #0033FF, #9800FF);
  }
/* === Two Stop Hard === */
  .twostop-yb-hard {
    background: -webkit-linear-gradient(#FFFF00, #FFFF00 50%, #000000 50%, #000000);
    background: -moz-linear-gradient(#FFFF00, #FFFF00 50%, #000000 50%, #000000);
    background: linear-gradient(#FFFF00, #FFFF00 50%, #000000 50%, #000000);
  }
/* === Three Stop Hard === */
  .threestop-cwc-hard {
    background: -webkit-linear-gradient(#0099FF, #0033FF 16.66667%, #FF6600 16.66667%, #FFFF00 50%, #00FF00 50%, #0099FF);
    background: -moz-linear-gradient(#0099FF, #0033FF 16.66667%, #FF6600 16.66667%, #FFFF00 50%, #00FF00 50%, #0099FF);
    background: linear-gradient(#0099FF, #0033FF 16.66667%, #FF6600 16.66667%, #FFFF00 50%, #00FF00 50%, #0099FF);
  }
/* === Three Stop Left === */
  .threestop-yor-left {
    background: -webkit-linear-gradient(left, #FFFF00, #FF6600, #FF0000);
    background: -moz-linear-gradient(left, #FFFF00, #FF6600, #FF0000);
    background: linear-gradient(left, #FFFF00, #FF6600, #FF0000);
  }
/* === Two Stop Deg === */
  .twostop-bw-deg {
    background: -webkit-linear-gradient(45deg, #000000, #ffffff);
    background: -moz-linear-gradient(45deg, #000000, #ffffff);
    background: linear-gradient(45deg, #000000, #ffffff);
  }
/* === Two Stop NegDeg === */
  .twostop-bw-negdeg {
    background: -webkit-linear-gradient(-45deg, #000000, #ffffff);
    background: -moz-linear-gradient(-45deg, #000000, #ffffff);
    background: linear-gradient(-45deg, #000000, #ffffff);
  }
/* === Two Stop Radial === */
  .twostop-ry-rad {
    background: -webkit-radial-gradient(#DE210C, #DED70C);
    background: -moz-radial-gradient(#DE210C, #DED70C);
    background: radial-gradient(#DE210C, #DED70C);
  }
/* === Three Stop Radial === */
  .threestop-gbp-rad {
    background: -webkit-radial-gradient(#00FF00, #0033FF, #9800FF);
    background: -moz-radial-gradient(#00FF00, #0033FF, #9800FF);
    background: radial-gradient(#00FF00, #0033FF, #9800FF);
  }
/* === Three Stop Radial Hard === */
  .threestop-cwc-radhard {
    background: -webkit-radial-gradient(#0099FF, #0033FF 16.66667%, #FF6600 16.66667%, #FFFF00 50%, #00FF00 50%, #0099FF);
    background: -moz-radial-gradient(#0099FF, #0033FF 16.66667%, #FF6600 16.66667%, #FFFF00 50%, #00FF00 50%, #0099FF);
    background: radial-gradient(#0099FF, #0033FF 16.66667%, #FF6600 16.66667%, #FFFF00 50%, #00FF00 50%, #0099FF);
  }
/* === Four Stop Radial Hard === */
  .fourstop-ybyb-radhard {
    background: -webkit-radial-gradient(20px 20px, circle farthest-corner, #000000, #000000 25%, #FFFF00 25%, #FFFF00 50%, #000000 50%, #000000 75%, #FFFF00 75%, #FFFF00);
    background: -moz-radial-gradient(20px 20px, circle farthest-corner, #000000, #000000 25%, #FFFF00 25%, #FFFF00 50%, #000000 50%, #000000 75%, #FFFF00 75%, #FFFF00);
    background: radial-gradient(20px 20px, circle farthest-corner, #000000, #000000 25%, #FFFF00 25%, #FFFF00 50%, #000000 50%, #000000 75%, #FFFF00 75%, #FFFF00);
  }
/* === Two Stop Radial Elliptical === */
  .twostop-bw-radelip {
    background: -webkit-radial-gradient(20px 20px, farthest-side, #000000 10%, #FFFFFF);
    background: -moz-radial-gradient(20px 20px, farthest-side, #000000 10%, #FFFFFF);
    background: radial-gradient(20px 20px, farthest-side, #000000 10%, #FFFFFF);
  }
/* === Three Stop Repeating Linear === */
  .threestop-bwy-repeat {
    background: -webkit-repeating-linear-gradient(#000000, #000000 10px, #FFFFFF 10px, #FFFFFF 12px, #FFFF00 12px, #FFFF00 22px);
    background: -moz-repeating-linear-gradient(#000000, #000000 10px, #FFFFFF 10px, #FFFFFF 12px, #FFFF00 12px, #FFFF00 22px);
    background: repeating-linear-gradient(#000000, #000000 10px, #FFFFFF 10px, #FFFFFF 12px, #FFFF00 12px, #FFFF00 22px);
  }
/* === Three Stop Repeating Radial === */
  .threestop-bwy-repeatrad {
    background: -webkit-repeating-radial-gradient(25% 15%, farthest-side, #0099FF, #0099FF 3px, #FFFFFF 3px, #FFFFFF 5px, #00FF00 5px, #00FF00 8px);
    background: -moz-repeating-radial-gradient(25% 15%, farthest-side, #0099FF, #0099FF 3px, #FFFFFF 3px, #FFFFFF 5px, #00FF00 5px, #00FF00 8px);
    background: repeating-radial-gradient(25% 15%, farthest-side, #0099FF, #0099FF 3px, #FFFFFF 3px, #FFFFFF 5px, #00FF00 5px, #00FF00 8px);
  }
/* === Animated Repeating Radial Gradient === */
  .anim-cwc-repeatrad {
    background: -webkit-repeating-radial-gradient(#0099FF, #0033FF 8px, #FF6600 8px, #FFFF00 11px);
    background: -moz-repeating-radial-gradient(#0099FF, #0033FF 8px, #FF6600 8px, #FFFF00 11px);
    background: repeating-radial-gradient(#0099FF, #0033FF 8px, #FF6600 8px, #FFFF00 11px);

    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;

    -webkit-animation: 4s gradanim linear infinite alternate;
    -mozanimation: 4s gradanim linear infinite alternate;
    animation: 4s gradanim linear infinite alternate;
  }

  @-webkit-keyframes gradanim {
    0%    { background-size: 20px 20px; }
    50%   { background-size: 56px 56px; }
    100%  { background-size: 11px 11px; }
  }

  @-moz-keyframes gradanim {
    0%    { background-size: 20px 20px; }
    50%   { background-size: 56px 56px; }
    100%  { background-size: 11px 11px; }
  }

  @keyframes gradanim {
    0%    { background-size: 20px 20px; }
    50%   { background-size: 56px 56px; }
    100%  { background-size: 11px 11px; }
  }