:root{
    --color-yellow: #f4d642;
    --color-grey-blue : #80a0b9;
    --color-primary: #4e07e7;
    --color-secondary: #4f05f2;
}



/* FONTS */
/* p, a, span {font-size: 1rem} */

/* WIDTHS */
.w0{ visibility: hidden!important;width:0!important;display:none; }
.w1 {width: 1%!important;}
.w5 {width: 5%!important;}
.w10{ width: 10%!important; }
.w15{ width: 15%!important; }
.w20{ width: 20%!important; }
.w25{ width: 25%!important; }
.w30{ width: 30%!important; }
.w35{ width: 35%!important; }
.w40{ width: 40%!important; }
.w45{ width: 45%!important; }
.w49{ width: 49%!important; }
.w50{ width: 50%!important; }
.w55{ width: 55%!important; }
.w60{ width: 60%!important; }
.w65{ width: 65%!important; }
.w70{ width: 70%!important; }
.w75{ width: 75%!important; }
.w80{ width: 80%!important; }
.w85{ width: 85%!important; }
.w90{ width: 90%!important; }
.w95{ width: 95%!important; }
.w99{ width: 99%!important; }
.w100{ width: 100%!important; }

/* HEIGHTS */
.h0 { height:0!important;}
.h10 { height: 10%!important;}
.h20 { height: 20%!important;}
.h30 { height: 30%!important;}
.h40 { height: 40%!important;}
.h50 { height: 50%!important;}
.h60 { height: 60%!important;}
.h70 { height: 70%!important;}
.h80 { height: 80%!important;}
.h90 { height: 90%!important;}
.h100 { height: 100%!important;}

/* VISIBILITY*/
.hide { display: none !important; }

/* FORMS */
form {
    padding: 20px; 
}

input[type="text"], 
input[type="password"], 
input[type="email"] 
{
    font-weight: bold;
    padding: 20px;
    border: .2rem solid #dce0e3;
    border-radius: 1rem;
}


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

.controls {
    padding: 1rem;
}


.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); */
}

.mixitup-control-active {
    background: #393939;
}

.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;
}

/* Container
---------------------------------------------------------------------- */

.container-mix {
}

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

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

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

.mix {
    margin-bottom: 1rem;
    position: relative;
    
}

.mix,
.gap {
    width: calc(100%/4 - (((2 - 1) * 1rem) / 4));
} */