.sidebar-types{
    display: flex;
}

.sidebar-types > .item{
    flex: 0 0 33.3333%;
    height: auto;
    padding: 5px;
}
.sidebar-types > .item > div{
    border:solid 1px #f3f4f5;
    cursor: pointer;
    transition: all 0.3s;
    padding-bottom: 100%;
}
.sidebar-types > .item > div:hover{
    box-shadow: 0px 0px 6px rgba(0,0,0,0.16);
}

.sidebar-types > .item > div:active,
.sidebar-types > .item > div:focus,
.sidebar-types > .item > div.active
{
    border:solid 1px #b3cfda;
    box-shadow: 0px 0px 6px rgba(0, 133, 186, 0.16);
}

.sidebar-types > .item > div.sidebar-left{
    background: url("../images/left.png") no-repeat;
    background-position: 50% 50%;
    background-size: 90%;
}
.sidebar-types > .item > div.sidebar-center{
    background: url("../images/center.png") no-repeat;
    background-position: 50% 50%;
    background-size: 90%;
}
.sidebar-types > .item > div.sidebar-right{
    background: url("../images/right.png") no-repeat;
    background-position: 50% 50%;
    background-size: 90%;
}