/**
 * Colornip v1.0.0 - Colornip is an pukka-easiest color-switcher on planet.
 * @link https://zafree.github.io/colornip
 * @copyright 2015-2016 Zafree
 * @license MIT
 */

#colors li {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 10px 28px;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, .01)
}

.Switcher {
	position: fixed;
	z-index: 9999;
	top: 15%;
	right: 0;
	width: 208px;
	margin-right: -208px;
	padding: 12px;
	-webkit-transition: none 258ms ease-out;
	transition: none 258ms ease-out;
	-webkit-transition-property: margin-right, -webkit-box-shadow;
	transition-property: margin-right, box-shadow;
	transition-property: margin-right, box-shadow, -webkit-box-shadow;
	border: 2px solid rgba(0, 0, 0, .02);
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0 0 15px transparent;
	box-shadow: 0 0 15px transparent;
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 14px;
	line-height: 1.42857
}

.Switcher--show {
	margin-right: 0;
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
	box-shadow: 0 0 15px rgba(0, 0, 0, .15)
    height: 130px;
	width: 300px;
    border-radius: 10px;
}

.Switcher::before,
.Switcher__control {
	position: absolute;
	left: 0;
	background-color: transparent;
	transform-origin: 0 0;
    animation: playbutton 1s ease-in-out infinite alternate;
}

.Switcher::before {
	z-index: 9998;
	top: 0;
	content: "";
	width: 0px;
	height: 100%;
	margin-left: 0
}

.Switcher__control {
	/*width: 50px;*/
	height: 50px;
	margin-left: -75px;
	padding: 0;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, .02);
	border-right-color: transparent;
	-webkit-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
	outline: none;
	background-image: url(https://d13yacurqjgara.cloudfront.net/users/729829/screenshots/2340395/colorhunt.gif);
	background-repeat: no-repeat;
	background-position: -24px -14px;
	-webkit-background-size: 96px 72px;
	background-size: 96px 72px;
	/*-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .15);
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);*/
	-ms-touch-action: manipulation;
	touch-action: manipulation
}


@keyframes playbutton {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.2);
    }
}