.controls {padding: 1rem; margin:0px auto; float:none}
.control {position: relative;display: inline-block;width: 2.7rem;height: 2.7rem;background: #444;cursor: pointer;color: white;transition: background 150ms;}
.controls a {padding:7px 10px !important; border-radius:5px; background:#fff; border:1px solid #cc9800; cursor:pointer; display:inline-block; margin:0px 3px 7px;}
.controls a:hover {padding:7px 10px !important; border-radius:5px; background:#cc9800; color:#fff !important;}
.control:hover {background: #3f3f3f;}
.control[data-filter]:after {content: '';position: absolute;width: 10px;height: 10px;top: calc(50% - 6px);left: calc(50% - 6px);border: 2px solid currentColor;border-radius: 2px;background: currentColor;transition: background-color 150ms, border-color 150ms;}
.control[data-sort]:after {content: '';position: absolute;width: 10px;height: 10px;border-top: 2px solid;border-left: 2px solid;top: calc(50% - 6px);left: calc(50% - 6px);transform: translateY(1px) rotate(45deg);}
.control[data-sort*=":desc"]:after {transform: translateY(-4px) rotate(-135deg);}
.mixitup-control-active, a.active {padding:0px; color:#fff !important}
.mixitup-control-active[data-filter]:after {background: transparent;}
.control:first-of-type {border-radius: 3px 0 0 3px;}
.control:last-of-type {border-radius: 0 3px 3px 0}
.control[data-filter] + .control[data-sort] {margin-left: .75rem;}
.control[data-filter=".green"] {color: #91e6c7;}
.control[data-filter=".blue"] {color: #5ecdde;}
.control[data-filter=".pink"] {color: #d595aa;}
.control[data-filter="none"] {color: #2f2f2f;}
.mix,.gap {display: inline-block;vertical-align: top;}
/*.mix,.gap {width: calc(100%/2 - (((2 - 1) * 1rem) / 2));}
@media screen and (min-width: 541px) {
.mix, .gap {width: calc(100%/3 - (((3 - 1) * 1rem) / 3));}
}
@media screen and (min-width: 961px) {
.mix,.gap {width: calc(100%/4 - (((4 - 1) * 1rem) / 4));}
}
@media screen and (min-width: 1281px) {
.mix,.gap {width: calc(100%/5 - (((5 - 1) * 1rem) / 5));}
}*/