/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
.overlay {
    visibility: hidden;
}

.sl-marker .marker {
    left: 47px; 
    top: 97px;
    position        : fixed;
    bottom          : 0;
}

.sl-marker {
    left: 47px; 
    top: 97px;
    display:block;
    position:absolute;
    overflow:hidden;
    background-color: #ff0000;
    position        : fixed;
    bottom          : 0;
}

.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: pointer;
}
.farbtastic, .farbtastic .wheel {
  width: 155px;
  height: 155px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(../img/section2-wheel.png) no-repeat;
  width: 155px;
  height: 155px;
  background-size:155px;
}

.farbtastic .marker {
  width: 18px;
  height: 18px;
  margin: -11px 40px -2px -9px;
  overflow: hidden; 
  background: url(../img/marker.png) no-repeat;
}

/* ---------- ANIMATIONS ---------- */
	#hd .colorrun{
		-webkit-animation: colorrun 5s infinite;
		-o-animation: colorrun 5s infinite;
		animation: colorrun 5s infinite;
	}
	@keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
			filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
			filter: hue-rotate(359deg);
		}
	}
	@-webkit-keyframes colorrun {
		from {-webkit-filter: hue-rotate(0deg);}
		to {-webkit-filter: hue-rotate(359deg);}
	}

	@-webkit-keyframes static {
	  0%	{opacity: 1}
	  50%	{opacity: 1}
	}
	@keyframes static {
	  0%	{opacity: 1}
	  50%	{opacity: 1}
	}
	@-webkit-keyframes breathing {
	  0%	{opacity: 1}
	  50%	{opacity: 0}
	}
	@keyframes breathing {
	  0%	{opacity: 1}
	  50%	{opacity: 0}
	}
	@-webkit-keyframes music {
	  0%	{opacity: 1}
	  10%	{opacity: .3}
	  40%	{opacity: 1}
	  60%	{opacity: .3}
	  70%	{opacity: 1}
	  95%	{opacity: .3}
	  100%	{opacity: 1}
	}
	@keyframes music {
	  0%	{opacity: 1}
	  10%	{opacity: .3}
	  40%	{opacity: 1}
	  60%	{opacity: .3}
	  70%	{opacity: 1}
	  95%	{opacity: .3}
	  100%	{opacity: 1}
	}
	@-webkit-keyframes cycle {
	  0%	{background-color: red;}
	  2%	{background-color: red;}
	  10.3%	{background-color: orange;}
	  18.6%	{background-color: yellow;}
	  26.9%	{background-color: #b0ff00;}
	  35.2%	{background-color: #00db4a;}
	  43.5%	{background-color: #00ffd9;}
	  51.8%	{background-color: #00deff;}
	  60.1%	{background-color: #0093ff;}
	  68.4%	{background-color: #0023ff;}
	  76.7%	{background-color: #8e00ff;}
	  85%	{background-color: #e100ff;}
	  93.3%	{background-color: #ff008b;}
	  100%	{background-color: red;}
	}
	@keyframes cycle {
	  0%	{background-color: red;}
	  2%	{background-color: red;}
	  10.3%	{background-color: orange;}
	  18.6%	{background-color: yellow;}
	  26.9%	{background-color: #b0ff00;}
	  35.2%	{background-color: #00db4a;}
	  43.5%	{background-color: #00ffd9;}
	  51.8%	{background-color: #00deff;}
	  60.1%	{background-color: #0093ff;}
	  68.4%	{background-color: #0023ff;}
	  76.7%	{background-color: #8e00ff;}
	  85%	{background-color: #e100ff;}
	  93.3%	{background-color: #ff008b;}
	  100%	{background-color: red;}
	}

	@-webkit-keyframes showroutine{
		0%	{opacity: 0;}
		10%	{opacity: 1;}
		11%	{opacity: 1;}
		20%	{opacity: 0;}
		100%{opacity: 0;}
	}
	@keyframes showroutine{
		0%	{opacity: 0;}
		10%	{opacity: 1;}
		11%	{opacity: 1;}
		20%	{opacity: 0;}
		100%{opacity: 0;}
	}