@charset "utf-8";
.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:32.45%;margin:0.7% 0.35% 0 0.2%; 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:99%;margin:1% 0.5% 10px 0.5%;}
}