.color-palate{
    background:#fff none repeat scroll 0 0;
    -webkit-box-shadow:0 0 20px 1px rgba(0,0,0,.1);
    -ms-box-shadow:0 0 20px 1px rgba(0,0,0,.1);
    -o-box-shadow:0 0 20px 1px rgba(0,0,0,.1);
    -moz-box-shadow:0 0 20px 1px rgba(0,0,0,.1);
    box-shadow:0 0 20px 1px rgba(0,0,0,.1);
    position:fixed;
    left:-285px;
    text-align:center;
    top:10%;
    transition:all 0.5s ease 0s;
    width:285px;
    z-index:999;
    padding-bottom:10px
}
.color-palate h5{
    color:#111;
    margin-bottom:10px
}
.color-palate-head{
    background:#00aeef none repeat scroll 0 0;
    padding:14px 0;
    margin-bottom:15px
}
.color-palate-head h6,.secondary-head h6{
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin:0;
    margin-top:4px;
    text-transform:uppercase
}
.palate{
    background:#ee3a10 none repeat scroll 0 0;
    display:block;
    float:left;
    height:45px;
    margin:0 2.5% 12px;
    width:20%;
    cursor:pointer;
    position:relative
}
.colors-list .active::after{
    background:url(../images/icons/tick.png) center center no-repeat!important;
    background-repeat:no-repeat;
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.various-color{
    overflow:hidden;
    padding:20px 0 15px
}
.colors-list{
    margin:0 20px
}
.secondary-head{
    background:#222 none repeat scroll 0 0;
    padding:14px 0
}
.secondary-color{
    padding:23px 0
}
.secondary-colors-list{
    margin:0 80px
}
.palate-foo{
    color:#777;
    font-size:13px;
    font-weight:400;
    padding:0 30px;
    line-height:1.8em
}
.palate-foo span{
    display:block;
    padding-top:20px;
    margin-top:5px;
    border-top:1px dotted #b2b2b2
}
.palate.default-color{
    background:#f05523 none repeat scroll 0 0
}
.palate.green-color{
    background:#2ECC40 none repeat scroll 0 0
}
.palate.olive-color{
    background:#3D9970 none repeat scroll 0 0
}
.palate.brown-color{
    background:#ab8b40 none repeat scroll 0 0
}
.palate.purple-color{
    background:#bb54e1 none repeat scroll 0 0
}
.palate.teal-color{
    background:#14c599 none repeat scroll 0 0
}
.palate.orange-color{
    background:#ff7e00 none repeat scroll 0 0
}
.palate.red-color{
    background:#f7c61d none repeat scroll 0 0
}
.color-trigger{
    background:#00aeef none repeat scroll 0 0;
    cursor:pointer;
    height:50px;
    right:-46px;
    position:absolute;
    top:0;
    width:46px;
    padding-top:6px
}
.color-trigger:before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%
}
.color-trigger i{
    color:#fff;
    font-size:18px;
    line-height:40px
}
.color-palate.visible-palate{
    left:0
}
.color-trigger i{
    -webkit-animation:rotation 2s infinite linear
}
.color-palate h6{
    font-weight:500
}
.color-palate .rtl-version{
    padding-bottom:0
}
.color-palate .box-version{
    padding-top:10px;
    padding-bottom:0
}
.color-palate .option-box{
    padding-top:0
}
.color-palate .option-box>li{
    position:relative;
    color:#fff;
    width:40%;
    margin:0 3px;
    cursor:pointer;
    margin-bottom:9px;
    padding:6px 12px;
    border-radius:0;
    display:inline-block;
    background-color:#00aeef;
    text-transform:capitalize
}
@-webkit-keyframes rotation{
    from{
        -webkit-transform:rotate(0deg)
    }
    to{
        -webkit-transform:rotate(359deg)
    }
}