.appearance-palette, .ap-btn{
	position: fixed;
	left: -250px;
	top: 20%;
	background: rgba(255,255,255,.7);
	z-index: 101;
	transition: all .5s ease-out .5s;
	width: 240px;
}
.appearance-palette.ap-open, .ap-btn.ap-btn-open{
	left: 0;
}
.ap-color-list>li>span{
	width: 32px;
	height: 32px;
}
.ap-color-list>li>span:before{
	width: 32px;
	height: 32px;
	top: 0;
	left: 0;
	z-index: 100;
	border: 1px solid #d8dcdf;
}
.ap-color-list>li>span.active:before,
.ap-color-list>li>span:hover:before{
	border-color: #a9b2bb;
}
.ap-color-list>li>span:after{
	width: 0;
	height: 0;
	border-bottom: 32px solid rgba(255,255,255,.8);
	border-left: 32px solid transparent;
	top: 0;
	left: 0;
}
.ap-btn{
	width: 70px;
	height: 70px;
}
.ap-btn-tip{
	display: none;
	position: absolute;
	top: 10px;
	left: 90px;
	background: rgba(255,255,255,.95);
	padding: 5px 10px 7px;
	font: 14px/16px 'open_sansregular';
	width: 180px;
	opacity: 0;
	color: #555;
	transition: all .8s ease-out .8s;
}
.ap-btn-tip:before, .ap-btn-tip:after{
	position: absolute;
	top: 50%;
	margin-top: -5px;
	left: -11px;
	border-right: 10px solid rgba(55,55,55,.5);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.ap-btn-tip:after{
	left: -10px;
	border-right: 10px solid rgb(255,255,255);
}
.ap-btn-pict{
	width: 70px;
	height: 70px;
	background: url('../images/appearance_btn.svg') no-repeat 0 0;
	position: absolute;
	top: 0;
	left: 0;
}
.ap-btn-pict:before{
	left: 7px;
	top: 7px;
	width: 56px;
	height: 56px;
	background: url('../images/appearance_btn_ellipse.svg') no-repeat 0 0;
}
.ap-btn-pict:hover+.ap-btn-tip{
	display: block;
	opacity: 1;
}
.ap-btn-pict:hover:before{
	-webkit-animation-name: rt;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rt;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: rt;
	-ms-animation-duration: 3s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

	animation-name: rt;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-ms-keyframes rt {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes rt {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rt {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes rt {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}