.controls { height: 20px; text-align: right; margin: 100px 0 0 0 }
.control { display: inline-block; cursor: pointer; background: none; font-size: 14px; height: 14px; line-height: 14px; vertical-align: top; position: relative; margin-top: 3px }
.control p { position: relative; z-index: 10; padding: 0 0px; }
.control hr { background: #fff100; border: 0; height: 2px; width: 100%; position: absolute; z-index: 1; top: 1px; transition: transform 0.5s; transform: scaleX(0); transform-origin: 100% 0; }
.mixitup-control-active hr, .control:hover hr { transform: scaleX(1); transform-origin: 0 0; }
.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=".green"] { color: #91e6c7; }
.control[data-filter=".blue"] { color: #5ecdde; }
.control[data-filter=".pink"] { color: #d595aa; }
.control[data-filter="none"] { color: #2f2f2f; }
.controls i { background: #999; width: 1px; vertical-align: top; height: 12px; display: inline-block; margin: 4px 20px 0 20px }
.casecate { text-align: left; float: left; }
.casecate li { display: inline-block; cursor: pointer; margin: 0 40px 0 0; background: none; font-size: 20px; height: 20px; line-height: 20px; vertical-align: top; position: relative; }
.casecate li p { position: relative; z-index: 10; padding: 0 10px }
.casecate li hr { background: #fff100; border: 0; height: 5px; width: 100%; position: absolute; z-index: 1; top: 2px; transition: transform 0.5s; transform: scaleX(0); transform-origin: 100% 0; }
.casecate li:hover hr, .casecate li.check hr { transform: scaleX(1); transform-origin: 0 0; }
.container { padding: 0 2.65%; margin-top: 35px; padding-bottom: 80px }
.container:after { }
.mix:before { }
.mix { width: 33.3333%; position: relative; display: inline-block; vertical-align: top; overflow: hidden }
 @media only screen and (max-width: 1400px) {
.casecate li { margin: 0 20px 0 0; }
.controls i { margin: 4px 15px 0 15px }
}
 @media only screen and (max-width: 1200px) {
.controls { height: auto; text-align: left; margin: 40px 0 0 0 }
.casecate { float: none; width: 100% }
.casecate li { font-size: 16px; height: 16px; line-height: 16px; }
.casecate li p { padding: 0 5px }
.casecate li hr { height: 3px; top: 1px; }
.container { margin-top: 10px }
.control { margin-left: 5px }
}
 @media only screen and (max-width: 768px) {
.container { padding: 0 2.5%; margin-top: 10px }
.mix { width: 50%; }
}
 @media only screen and (max-width: 640px) {
.mix { width: 100%; }
}