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

.controls {
    margin: 0 0 60px;
}

.control {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    color: #2b3547;
    transition: .3s;
    font-family: "glacial_indifferencebold";
    border: none;
    background-color: transparent;
    font-weight: 800;
    outline: 0;
    margin: 0 10px;

}
.control:hover{
    color: #8256ff;
}
.control[data-filter]:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 50%;
    background: transparent;
    transition: background-color 150ms, border-color 150ms;
    margin-left: -50%;
}


.mixitup-control-active {
    border: none;
    outline: 0;
    color: #8256ff;
}
.mixitup-control-active[data-filter]:after {
    background:#8256ff ;
}

.control[data-filter=".page"] {
    position: relative;
    transition:all .3s ease-in-out;
}

.control[data-filter=".page"]:before {
    position: absolute;
    top: -90%;
    left: 7%;
    width: 90%;
    height: 90%;
    content: "NEW";
    -webkit-animation: color-change  2s infinite 0s linear;
    -moz-animation: color-change  2s infinite 0s linear;
    -o-animation: color-change  2s infinite 0s linear;
    -ms-animation: color-change  2s infinite 0s linear;
    animation: color-change 2s infinite 0s linear;
    animation-name: color-change;

    font-size: 16px;
    transition:all .3s ease-in-out;
    font-weight: 900;
    text-transform:uppercase;
    background: #4AD7F8;
    line-height: 24px;
    border-radius: 3px;
    border: 1px dotted #4AD7F8;
    letter-spacing: 2px;
    color: #FF1F01;
}

    @-webkit-keyframes color-change {
        100% { color: #FF1F01; }
        50% { color: #8256ff; }
        100% { color: red; }
    }
    @-moz-keyframes color-change {
        100% { color: #FF1F01; }
        50% { color: #8256ff; }
        100% { color: red; }
    }
    @-moz-keyframes color-change {
        100% { color: #FF1F01; }
        50% { color: #8256ff; }
        100% { color: red; }
    }
    @-ms-keyframes color-change {
        10% { color: #FF1F01; }
        50% { color: #8256ff; }
        100% { color: red; }
    }
    @-o-keyframes color-change {
       100% { color: #FF1F01; }
        50% { color: #8256ff; }
        100% { color: red; }
    }
    @keyframes color-change {
        100% { color: #FF1F01; }
        50% { color: #8256ff; }
        100% { color: red; }
    }

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

.control:last-of-type {
    border-radius: 0 3px 3px 0;
}
*/
/*
.control[data-filter]{
    margin-left: .75rem;
}

.control[data-filter=".default"] {
    color: #91e6c7;
}

.control[data-filter=".partical"] {
    color: #5ecdde;
}

.control[data-filter=".page"] {
    color: #d595aa;
}

.control[data-filter=".blog"] {
    color: #91e6c7;
}
*/
/* Container
---------------------------------------------------------------------- */

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

.mix {   
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;    
    display: inline-block;
    margin: 0 0 80px;
}
/*
.mix.default {
    color: #91e6c7;
}

.mix.partical {
    color: #d595aa;
}

.mix.page {
    color: #5ecdde;
}
.mix.blog {
    color: #5ec349;
}

*/

/* Grid Breakpoints
---------------------------------------------------------------------- */


/* 3 Columns */

@media screen and (min-width: 541px) {
    .mix {
        width: 100%;

    }
}

/* 4 Columns */

@media screen and (min-width: 961px) {
    .mix {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}

/* 5 Columns */

@media screen and (min-width: 1281px) {
    .mix {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}