/*PALLETTE APPEARANCE*/
#palette_button{
	position: fixed;
	cursor: pointer;
	top: 22%;
	left: 0px;
	width: 64px;
	height:64px;	
	border-left: none;	
	text-align: center;
	z-index: 5000;
    background: rgba(245,248,249,1);
	
}
.palette_button_new{
	position: absolute;
	display: block;
	content:'';
	top:0;
	bottom: 0;
	width: 64px;
	height:64px;
	left:0;
    background: url('../images/panel_new.png')no-repeat ;
   
}
.palette_button_new::after {
    content: "";
    display: block;
    position: absolute;
    width: 28.8px;
    height: 28.8px;
    top: 17.4px;
    left: 18.4px;
    border-radius: 50%;
    transition: all .5s;
}
.palette_button_new:hover::after {
    box-shadow: -3.56px -2.56px 0 0 rgba(254,203,187,.3),-4.304px 0 0 0 rgba(255,170,0,.3),-3.56px 2.56px 0 0 rgba(170,255,0,.3),0 4.304px 0 0 rgba(199,229,200,.3),3.56px 2.56px 0 0 rgba(0,255,170,.3),4.304px 0 0 0 rgba(177,234,241,.3),3.56px -2.56px 0 0 rgba(212,199,234,.2),0 -4.304px 0 0 rgba(212,201,234,.3);
    animation: rotate 1s linear infinite;
}
@keyframes rotate{
	100% {
    transform: rotate(360deg);
}
}
.palette_wrap{
	position: fixed;
	top: 22%;
	left: -300px;
	width: 275px;
	border-left: none;	
	text-align: center;
	z-index: 5000;
	background: rgba(245,248,249,1);
	transition: all .2s ease-out .2s;
	overflow-y: auto;
	bottom: 10%;
}

.palette_switcher{
	padding: 21px 10px;
	background: #282f34;
}
.palette_switcher span{
	display: inline-block;
	vertical-align: middle;
}
.palette_switcher .h3{
	font:18px 'latobold';
	text-align: left;
	margin-bottom: 0px;
	width:80%;
	color:#fff;
}
.palette .h4{
	text-align: left;
	font-size: 17px;
	color:#3a3a3a;
	margin-bottom: 10px;
}
.palette_switcher .arrow{
	width:20px;
	height:20px;
	position: relative;
	background: url('../images/sprite.svg') no-repeat -180px -300px ;
	overflow: hidden;
}
.palette_wrap label.checkbox:before{
   border: 1px solid #e4e4e4;
}
.palette_color,.palette_back,.palette_panel,.palette-blocks{
	padding: 15px;
}
.palette_color ul li,.palette_back ul li{
	display: inline-block;
	width:33px;
	height:33px;
	cursor: pointer;
	margin-right: 3px;
}
.palette_panel .h4{
	 position:relative;
	 top:-4px;
}
.palette_back ul li{
	background: #fff;
	}
.palette_line{
	margin: 0 15px;
	border-bottom:1px solid #ebeff2;
}
.palette_color_blue{
	border: 1px solid transparent;
	background: linear-gradient(bottom right,#00bbff 50%,#00d5ff 50%);
	background: -webkit-linear-gradient(bottom right,#00bbff 50%,#00d5ff 50%);
	background: -o-linear-gradient(bottom right,#00bbff 50%,#00d5ff 50%);
	background: -moz-linear-gradient(bottom right,#00bbff 50%,#00d5ff 50%);
}
.palette_color_purple{
	border: 1px solid transparent;
	background: linear-gradient(bottom right,#c1327c 50%,#e363a5 50%);
	background: -webkit-linear-gradient(bottom right,#c1327c 50%,#e363a5 50%);
	background: -o-linear-gradient(bottom right,#c1327c 50%,#e363a5 50%);
	background: -moz-linear-gradient(bottom right,#c1327c 50%,#e363a5 50%);
}
.palette_color_green{
	border: 1px solid transparent;
	background: linear-gradient(bottom right,#3cb878 50%,#70e0a6 50%);
	background: -webkit-linear-gradient(bottom right,#3cb878 50%,#70e0a6 50%);
	background: -o-linear-gradient(bottom right,#3cb878 50%,#70e0a6 50%);
	background: -moz-linear-gradient(bottom right,#3cb878 50%,#70e0a6 50%);
}
.palette_color_yellow{
	border: 1px solid transparent;
	background: linear-gradient(bottom right,#e6b60c 50%,#f4d052 50%);
	background: -webkit-linear-gradient(bottom right,#e6b60c 50%,#f4d052 50%);
	background: -o-linear-gradient(bottom right,#e6b60c 50%,#f4d052 50%);
	background: -moz-linear-gradient(bottom right,#e6b60c 50%,#f4d052 50%);
}
.palette_color_orange{
	border: 1px solid transparent;
	background: linear-gradient(bottom right,#ff7700 50%,#fe8f2f  50%);
	background: -webkit-linear-gradient(bottom right,#ff7700 50%,#fe8f2f  50%);
	background: -o-linear-gradient(bottom right,#ff7700 50%,#fe8f2f  50%);
	background: -moz-linear-gradient(bottom right,#ff7700 50%,#fe8f2f 50%);
}
.palette_color_grey{
	border: 1px solid transparent;
	background: linear-gradient(bottom right,#464646 50%,#898989 50%);
	background: -webkit-linear-gradient(bottom right,#464646 50%,#898989 50%);
	background: -o-linear-gradient(bottom right,#464646 50%,#898989 50%);
	background: -moz-linear-gradient(bottom right,#464646 50%,#898989 50%);
}
.palette_back ul li{
	position:relative;
	border:1px solid #e4e4e4;
}
/*.palette_back ul li:before{
	position: absolute;
	display: block;
	content:'';
	background: #fff;
	width:33px;
	height:33px;
	left:0;
	top:0;
	z-index: -1;
}*/
.palette_back>ul li.active{
	filter: none!important;
	opacity:1!important;
}



.palette_panel_switcher{
	display: inline-block;
	width:50px;
	height: 25px;
	border: 1px solid #90a4ae;
	margin-left:10px;
	border-radius: 25px;
	position: relative;
	top: 5px;
	background: #90a4ae;
	transition: all .1s ease-out .1s;
	cursor: pointer;
}
.palette_panel_switcher:after{
	display:block;
	position: absolute;
	content: '';
	width:17px;
	height:17px;
	border-radius: 10px;
	background:#fff;
	border: 1px solid #fff;
	top:3px;
	left:3px;
	transition: transform .3s;
	-webkit-transition: -webkit-transform .3s;
}

.palette_color ul li.active{
	border: 1px solid #3a3a3a;
}
/*END PALLETTE APPEARANCE*/