body {
    position: relative;
}

.color-palate {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    height: 328px;
    position: fixed;
    right: 0px;
    text-align: center;
    top: 30%;
    transition: all 0.5s ease 0s;
    width: 285px;
    z-index: 9999;
}

.color-palate-head {
    background: #abcb96 none repeat scroll 0 0;
    padding: 14px 0;
}

.color-palate-head h6,
.secondary-head h6 {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    margin: 0px;
    margin-top: 4px;
}

.palate {
    background: red none repeat scroll 0 0;
    display: block;
    float: left;
    height: 43px;
    margin: 0 7.5px;
    width: 43px;
    cursor: pointer;
    position: relative;
}

.colors-list .active::after{
    background: url(../img/tick.png) !important;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 8px;
    left: 7px;
    width: 30px;
    height: 30px;
}

.secondary-colors-list .actives::after{
    background: url(../img/tick.png) !important;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 8px;
    left: 7px;
    width: 30px;
    height: 30px;
}

.various-color {
    overflow: hidden;
    padding: 22px 0;
}

.colors-list {
    margin: 0 25px;
}

.secondary-head {
    background: #222222 none repeat scroll 0 0;
    padding: 14px 0;
}

.secondary-color {
    padding: 23px 0;
}

.secondary-colors-list {
    margin: 0 80px;
}

.palate-foo {
    color: #666666;
    font-size: 12px;
    font-weight: 300;
    line-height: 22px;
    padding: 0 30px;
}

.palate.default-color {
    background: #abcb96 none repeat scroll 0 0;
}

.palate.yellow-color {
    background: #abcb96 none repeat scroll 0 0;
}

.palate.green-color {
    background: #2dcc70 none repeat scroll 0 0;
}

.palate.red-color {
    background: #abcb96 none repeat scroll 0 0;
}

.palate.blue-color {
    background: #19b5ff none repeat scroll 0 0;
}

.palate.black-color {
    background: #222222 none repeat scroll 0 0;
}

.palate.deepblue-color {
    background: #21313f none repeat scroll 0 0;
}

.color-trigger {
    background: #EEC623 none repeat scroll 0 0;
    cursor: pointer;
    height: 46px;
    left: -46px;
    position: absolute;
    top: 0;
    width: 46px;
    padding-top: 4px;
}

.color-trigger i {
    color: #ffffff;
    font-size: 14px;
    line-height: 42px;
}

.color-palate.visible-palate {
    right: -285px;
}


/* Background Color*/

body.allred .head-bottom-area,
body.allred .contact-btn,
body.allred .footer-newsletter > input[type="submit"],
body.allred .mainmenu-area ul.nav.navbar-nav li ul li::after,
body.allred .Modern-Slider .PrevArrow:hover,
body.allred .Modern-Slider .NextArrow:hover,
body.allred .navbar-collapse,
body.allred .cta-area,
body.allred .button.button-ctai,
body.allred .color-palate-head,
body.allred .sin-whatWork::after,
body.allred .contact-form input[type="submit"],
body.allred input#submit-comment,
body.allred ul.degins li::after,
body.allred.mean-container .mean-bar,
body.allred.mean-container .mean-nav ul li,
body.allred .Modern-Slider .PrevArrow:hover,
body.allred .Modern-Slider .NextArrow:hover,
body.allred .sin-pricing-table.active,
body.allred a.pricing-btn,
body.allred .work-positions span.numbering {
    background-color: #abcb96;
}


/* Jotil Colors*/

body.allred .mainmenu-area ul.nav.navbar-nav > li > a:hover,
body.allred .mainmenu-area ul.nav.navbar-nav li.active,
body.allred .button-hover::after,
body.allred .about-gallery-posts .owl-dot.active,
body.allred .color-trigger,
body.allred .sin-pricing-table.active .pricing-status {
    background-color: #30ced8;
}

body.allred .page-links:after {
    background: #30ced8 none repeat scroll 0 0;
}

/* Color*/

body.allred .info-icon,
body.allred a.link-out,
body.allred .facts-headding h2 > strong,
body.allred .social-links ul li a:hover,
body.allred .mainmenu-area ul.nav.navbar-nav li ul li a:hover,
body.allred a.replay-btn:hover,
body.allred a.author,
body.allred .slider-text h1 span,
body.allred .widget ul li a:hover,
body.allred .slider-text h3 span, 
body.allred .sidebar .sin-testimonial .quote-icon,
body.allred ul.page-offers li span,
body.allred .copyright span a span,
body.allred .contact-form p span,
body.allred .widget-testimonial a {
    color: #abcb96;
}
body.allred .slider-text h2 span{
color: #30ced8;
}
body.allred .contact-form label span, 
body.allred .contact-form p span{
color: #ff3b56
}
body.allred a.contact-btn,  body.allred a:hover.contact-btn{
    color: #fff;
}

/*
-----------------------
+ Secondary Color
-----------------------
*/

body.secondary-two #footer-area,
body.secondary-two .overlay::after,
body.secondary-two .mainmenu-area ul.nav.navbar-nav li ul li a,
body.secondary-two .button.quote-btn,
body.secondary-two .button.button-cta,
body.secondary-two .sidebar .widget,
body.secondary-two .sin-pricing-table.active .pricing-btn,
body.secondary-two .sin-pricing-table {
    background-color: #21313f;
}

body.secondary-two .mainmenu-area ul.nav.navbar-nav li ul li,
body.secondary-two .bb-top{
    border-color: #ececec;
}

body.secondary-two .sidebar ul.widget_links::after,
body.secondary-two .work-thumb .work-hover,
body.secondary-two .sin-news .news-hover,
body.secondary-two .work-thumb:hover .work-hover,
body.secondary-two .news-thumb:hover .news-hover {
    background: rgba(33, 49, 63, 0.9);
}

body.secondary-two .pricing-status {
    background: #1B2329;
}