/*
html,
body {
    height: 100%;
}
*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* Controls
---------------------------------------------------------------------- */

.controls {
    padding: 1rem;
    background: ;

}

.control {
    position: ;
    display: ;
    width: auto;
    height: 2.7rem;
    background: ;
    cursor: pointer;
    font-size: 15px;
    color: ;
    transition: background 150ms;
    margin-bottom: 5px;
}

.control:hover {
    background: ;
}

.control[data-filter]:after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    border: 0px solid;
    border-radius: 0px;
    background: ;
    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);
}



.control:first-of-type {
    border-radius: 0px 0 0 0px;
}

.control:last-of-type {
    border-radius: 0 0px 0px 0;
}

.control[data-filter] + .control[data-sort] {
    margin-left: .75rem;
}

.control[data-filter=".green"] {
    color: ;
}

.control[data-filter=".blue"] {
    color: ;
}

.control[data-filter=".pink"] {
    color: ;
}

.control[data-filter="none"] {
    color: ;
}

.control[data-filter="pvc"] {
    color: ;
}

.control[data-filter="bambu"] {
    color: ;
}

.control[data-filter="b50x50"] {
    color: ;
}

.control[data-filter="b62x80"] {
    color: ;
}

.control[data-filter="b50x50"] {
    color: ;
}

.control[data-filter="architecture"] {
    color: ;
}

.control[data-filter="artisan"] {
    color: ;
}

.control[data-filter="modern-foundation"] {
    color: ;
}

.control[data-filter="simply-stripes-3"] {
    color: ;
}

.control[data-filter="piedra"] {
    color: ;
}

.control[data-filter="madera"] {
    color: ;
}

.control[data-filter="naturaleza"] {
    color: ;
}

.control[data-filter="flores"] {
    color: ;
}

.control[data-filter="ilustraciones"] {
    color: ;
}

.control[data-filter="tropical"] {
    color: ;
}

.control[data-filter="contemporaneo"] {
    color: ;
}

.control[data-filter="geometrico"] {
    color: ;
}

.control[data-filter="originales"] {
    color: ;
}

.control[data-filter="en-rollo"] {
    color: ;
}

.control[data-filter="kids"] {
    color: ;
}

.control[data-filter="clasic-silks-2"] {
    color: ;
}

.control[data-filter="noveltiles"] {
    color: ;
}

.control[data-filter="instawalls"] {
    color: ;
}

.control[data-filter="textil"] {
    color: ;
}

.control[data-filter="rayas"] {
    color: ;
}

.control[data-filter="ladrillos"] {
    color: ;
}

.control[data-filter="circulo-acero"] {
    color: ;
}

.control[data-filter="marmol1"] {
    color: ;
}

.control[data-filter="loza"] {
    color: ;
}

.control[data-filter="linea"] {
    color: ;
}

.control[data-filter="loza-decorado"] {
    color: ;
}

.control[data-filter="crackelado"] {
    color: ;
}

.control[data-filter="adoquin"] {
    color: ;
}

.control[data-filter="papel"] {
    color: ;
}

.control[data-filter="enredadera"] {
    color: ;
}

.control[data-filter="ladrillo-ext"] {
    color: ;
}

.control[data-filter="pared"] {
    color: ;
}

.control[data-filter="relieve"] {
    color: ;
}

.control[data-filter="papel2"] {
    color: ;
}

.control[data-filter="tronco"] {
    color: ;
}

.control[data-filter="tab-corcho"] {
    color: ;
}

.control[data-filter="madera"] {
    color: ;
}

.control[data-filter="tabique"] {
    color: ;
}

.control[data-filter="puntos"] {
    color: ;
}

.control[data-filter="corchos"] {
    color: ;
}

.control[data-filter="jaspe"] {
    color: ;
}

.control[data-filter="mosaico"] {
    color: ;
}

.control[data-filter="zebra"] {
    color: ;
}

.control[data-filter="granito"] {
    color: ;
}
.control[data-filter="tapiz"] {
    color: ;
}
.control[data-filter="mural"] {
    color: ;
}
.control[data-filter="animales"] {
    color: ;
}
.control[data-filter="blanco-negro"] {
    color: ;
}
.control[data-filter="nubes"] {
    color: ;
}
.control[data-filter="abstracto"] {
    color: ;
}
.control[data-filter="playa"] {
    color: ;
}
.control[data-filter="ciudad"] {
    color: ;
}
.control[data-filter="puentes"] {
    color: ;
}
.control[data-filter="pasillos"] {
    color: ;
} 
.control[data-filter="fauna"] {
    color: ;
}
.control[data-filter="flora"] {
    color: ;
}
.control[data-filter="peces"] {
    color: ;
}
.control[data-filter="bosque"] {
    color: ;
}
.control[data-filter="selva"] {
    color: ;
}
.control[data-filter="infantil"] {
    color: ;
}
.control[data-filter="caballos"] {
    color: ;
}
.control[data-filter="arte"] {
    color: ;
}
.control[data-filter="muelle"] {
    color: ;
}
.control[data-filter="desierto"] {
    color: ;
}
.control[data-filter="textil"] {
    color: ;
}
.control[data-filter="hojas"] {
    color: ;
}
.control[data-filter="boho"] {
    color: ;
}
.control[data-filter="irregular"] {
    color: ;
}
/* Container  
---------------------------------------------------------------------- */

.container-mix {
    padding: 1rem;
    text-align: justify;
    font-size: 0.1px;
    width: 100%;
}

.container-mix:after {
    content: '';
    display: inline-block;
    width: 100%;
}


/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    background: #fff;
    width: 23%;
    /* border-top: .5rem solid; */
    border-radius: 0px;
    margin-bottom: 1rem;
    position: relative;
}

.mix:before {
    content: '';
    display: inline-block;
    padding-top: ;
}

.mix.green {
    color: transparent;
}

.mix.pink {
    color: transparent;
}

.mix.blue {
    color: transparent;
}

.mix.pvc {
    color: transparent;
}

.mix.bambu {
    color: transparent;
}

.mix.architecture {
    color: transparent;
}

.mix.artisan {
    color: transparent;
}

.mix.modern-foundation {
    color: transparent;
}

.mix.simply-stripes-3 {
    color: transparent;
}

.mix.piedra {
    color: transparent;
}

.mix.madera {
    color: transparent;
}

.mix.naturaleza {
    color: transparent;
}

.mix.flores {
    color: transparent;
}

.mix.ilustraciones {
    color: transparent;
}

.mix.tropical {
    color: transparent;
}

.mix.contemporaneo {
    color: transparent;
}

.mix.geometrico {
    color: transparent;
}

.mix.originales {
    color: transparent;
}

.mix.en-rollo {
    color: transparent;
}

.mix.kids {
    color: transparent;
}

.mix.clasic-silks-2 {
    color: transparent;
}

.mix.noveltiles {
    color: transparent;
}

.mix.instawalls {
    color: transparent;
}

.mix.textil {
    color: transparent;
}

.mix.rayas {
    color: transparent;
}

.mix.ladrillos {
    color: transparent;
}

.mix.circulo-acero {
    color: transparent;
}

.mix.marmol1 {
    color: transparent;
}

.mix.loza {
    color: transparent;
}

.mix.linea {
    color: transparent;
}

.mix.loza-decorado {
    color: transparent;
}

.mix.crackelado {
    color: transparent;
}

.mix.adoquin {
    color: transparent;
}

.mix.papel {
    color: transparent;
}

.mix.enredadera {
    color: transparent;
}

.mix.ladrillo-ext {
    color: transparent;
}

.mix.pared {
    color: transparent;
}

.mix.relieve {
    color: transparent;
}

.mix.papel2 {
    color: transparent;
}

.mix.tronco {
    color: transparent;
}

.mix.tab-corcho {
    color: transparent;
}

.mix.madera {
    color: transparent;
}

.mix.tabique {
    color: transparent;
}

.mix.puntos {
    color: transparent;
}

.mix.corchos {
    color: transparent;
}

.mix.jaspe {
    color: transparent;
}

.mix.mosaico {
    color: transparent;
}

.mix.zebra {
    color: transparent;
}

.mix.granito {
    color: transparent;
}
.mix.tapiz {
    color: transparent;
}
.mix.mural {
    color: transparent;
}
.mix.animales {
    color: transparent;
}
.mix.blanco-negro {
    color: transparent;
}
.mix.nubes {
    color: transparent;
}
.mix.abstracto {
    color: transparent;
}

.mix.playa {
    color: transparent;
}
.mix.ciudad {
    color: transparent;
}
.mix.puentes {
    color: transparent;
}
.mix.fauna {
    color: transparent;
}
.mix.flora {
    color: transparent;
}
.mix.peces {
    color: transparent;
}
.mix.bosque {
    color: transparent;
}
.mix.selva {
    color: transparent;
}
.mix.infantil {
    color: transparent;
}
.mix.pasillos  {
    color: transparent;
}
.mix.caballos {
    color: transparent;
}
.mix.arte {
    color: transparent;
}
.mix.muelle {
    color: transparent;
}
.mix.textil {
    color: transparent;
}
.mix.geo {
    color: transparent;
}
.mix.hojas {
    color: transparent;
}
.mix.boho {
    color: transparent;
}
.mix.irregular {
    color: transparent;
}
/* Grid Breakpoints
---------------------------------------------------------------------- */

/*


.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));
    }
}
 */
@media only screen and (max-width: 1999px) {
    .mix,
    .gap {
    width: calc(100%/5 - (((4 - 9) * 1rem) / 4));
    }
}

@media only screen and (max-width: 991px) {
    .mix,
    .gap {
    width: calc(100%/4 - (((4 - 9) * 1rem) / 3));
    }
}

@media only screen and (max-width: 767px) {
    .mix,
    .gap {
    width: calc(100%/3 - (((3 - 9) * 1rem) / 2));
    }
}

@media only screen and (max-width: 555px) {
    .mix,
    .gap {
    width: calc(90%/1 - (((5 - 5) * 1rem) / 1));
    }
}