.tuner {
    position: fixed;
    z-index: 1000;
    top: 112px;
    left: 0;
    width: 119px;
    margin-left: -159px;
    padding: 0 20px 20px;
    background: #213540;
    -o-transition: margin 0.3s;
    -ms-transition: margin 0.3s;
    -moz-transition: margin 0.3s;
    -webkit-transition: margin 0.3s;
}

    .tuner i {
        position: absolute;
        top: 0;
        left: 100%;
        width: 44px;
        height: 44px;
        background: #213540;
        font-size: 22px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }

    .tuner label {
        font-size: 12px;
        line-height: 44px;
        text-transform: uppercase;
        color: #fff;
    }

    .tuner .colors {
        margin: -5px;
    }

        .tuner .colors li {
            position: relative;
            float: left;
            width: 33px;
            height: 33px;
            margin: 5px;
            cursor: pointer;
        }

            .tuner .colors li span {
                position: relative;
                display: block;
                width: 25px;
                height: 25px;
                margin: 1px;
                border: 3px solid transparent;
                cursor: pointer;
            }

        .tuner .colors .active span {
            border-color: #213540;
            box-shadow: 0 0 0 1px #fff;
        }

            .tuner .colors .active span:after,
            .tuner .colors .active span:before {
                content: '';
                position: absolute;
                top: 5px;
                left: 12px;
                width: 1px;
                height: 15px;
                background: #fff;
            }

            .tuner .colors .active span:before {
                top: 12px;
                left: 5px;
                width: 15px;
                height: 1px;
            }

    .tuner .color-blue {
        background: #0a4d6a;
    }

    .tuner .color-green {
        background: #00b85d;
    }

    .tuner .color-pink {
        background: #e5669c;
    }

    .tuner .color-cyan {
        background: #00aba5;
    }

    .tuner .color-orange {
        background: #f5961d;
    }

    .tuner .color-purple {
        background: #8560a8;
    }

    .tuner .layouts li {
        margin-top: 10px;
        background: #000;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }

        .tuner .layouts li:first-child {
            margin-top: 0;
        }

    .tuner .layouts .active {
        background: #fff;
        color: #213540;
        cursor: default;
    }

.tuner-visible {
    margin-left: 0;
}

@media screen and (max-width: 767px) { /* phone */
    .tuner {
        top: 56px;
    }
}