/*Animatie: ball active*/

.col-links .item-ball-holder .ball.active
{
    -webkit-animation: ball-zoom .5s !important;
       -moz-animation: ball-zoom .5s !important;
        -ms-animation: ball-zoom .5s !important;
         -o-animation: ball-zoom .5s !important;
            animation: ball-zoom .5s !important;
}

@-webkit-keyframes ball-zoom {
    0% {
        -webkit-transform: scale(1);
        -webkit-transform: translateY(0px);
    }
    1% {
        -webkit-transform: scale(.98);
    }
    50% {
        -webkit-transform: scale(1.1);
        -webkit-transform: translateY(5px);
    }
    80% {
        -webkit-transform: scale(.98);
    }
    100% {
        -webkit-transform: scale(1);
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes ball-zoom {
    0% {
        -moz-transform: scale(1);
    }
    1% {
        -moz-transform: scale(.98);
    }
    50% {
        -moz-transform: scale(1.1);
    }
    80% {
        -moz-transform: scale(.98);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes ball-zoom {
    0% {
        -ms-transform: scale(1);
    }
    1% {
        -ms-transform: scale(.98);
    }
    50% {
        -ms-transform: scale(1.1);
    }
    80% {
        -ms-transform: scale(.98);
    }
    100% {
        -ms-transform: scale(1);
    }
}

@-o-keyframes ball-zoom {
    0% {
        -o-transform: scale(1);
    }
    1% {
        -o-transform: scale(.98);
    }
    50% {
        -o-transform: scale(1.1);
    }
    80% {
        -o-transform: scale(.98);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes ball-zoom {
    0% {
        transform: scale(1);
    }
    1% {
        transform: scale(.98);
    }
    50% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(.98);
    }
    100% {
        transform: scale(1);
    }
}
/*Animatie: ball is-ok*/

.col-links .item-ball-holder .ball.is-ok,
.col-links .item-ball-holder .ball.no-match
{
    -webkit-animation: ball-zoom-ok .5s;
       -moz-animation: ball-zoom-ok .5s;
        -ms-animation: ball-zoom-ok .5s;
         -o-animation: ball-zoom-ok .5s;
            animation: ball-zoom-ok .5s;
}


@-webkit-keyframes ball-zoom-ok {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(.95);
    }
    80% {
        -webkit-transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes ball-zoom-ok {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(.95);
    }
    80% {
        -moz-transform: scale(1.05);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes ball-zoom-ok {
    0% {
        -ms-transform: scale(1);
    }
    50% {
        -ms-transform: scale(.95);
    }
    80% {
        -ms-transform: scale(1.05);
    }
    100% {
        -ms-transform: scale(1);
    }
}

@-o-keyframes ball-zoom-ok {
    0% {
        -o-transform: scale(1);
    }
    50% {
        -o-transform: scale(.95);
    }
    80% {
        -o-transform: scale(1.05);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes ball-zoom-ok {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.95);
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Animatie: is ok & active */

.col-links .item-ball-holder .ball.is-ok.active,
.col-links .item-ball-holder .ball.no-match.active
{
    -webkit-animation: ball-zoom-a-o .5s !important;
       -moz-animation: ball-zoom-a-o .5s !important;
        -ms-animation: ball-zoom-a-o .5s !important;
         -o-animation: ball-zoom-a-o .5s !important;
            animation: ball-zoom-a-o .5s !important;
}

@-webkit-keyframes ball-zoom-a-o {
    0% {
        -webkit-transform: scale(1);
        -webkit-transform: translateY(0px);
    }
    1% {
        -webkit-transform: scale(.98);
    }
    50% {
        -webkit-transform: scale(1.1);
        -webkit-transform: translateY(5px);
    }
    80% {
        -webkit-transform: scale(.98);
    }
    100% {
        -webkit-transform: scale(1);
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes ball-zoom-a-o {
    0% {
        -moz-transform: scale(1);
    }
    1% {
        -moz-transform: scale(.98);
    }
    50% {
        -moz-transform: scale(1.1);
    }
    80% {
        -moz-transform: scale(.98);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes ball-zoom-a-o {
    0% {
        -ms-transform: scale(1);
    }
    1% {
        -ms-transform: scale(.98);
    }
    50% {
        -ms-transform: scale(1.1);
    }
    80% {
        -ms-transform: scale(.98);
    }
    100% {
        -ms-transform: scale(1);
    }
}

@-o-keyframes ball-zoom-a-o {
    0% {
        -o-transform: scale(1);
    }
    1% {
        -o-transform: scale(.98);
    }
    50% {
        -o-transform: scale(1.1);
    }
    80% {
        -o-transform: scale(.98);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes ball-zoom-a-o {
    0% {
        transform: scale(1);
    }
    1% {
        transform: scale(.98);
    }
    50% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(.98);
    }
    100% {
        transform: scale(1);
    }
}


/*Animatie: active tab*/

.selection-container .selection .selection-item.active
{
    -webkit-animation: active-zoomer 1s infinite;
       -moz-animation: active-zoomer 1s infinite;
        -ms-animation: active-zoomer 1s infinite;
         -o-animation: active-zoomer 1s infinite;
            animation: active-zoomer 1s infinite;
}

.selection-container .selection .selection-item.no-match.active {
    -webkit-animation: none;
       -moz-animation: none;
        -ms-animation: none;
         -o-animation: none;
            animation: none;
}


@-webkit-keyframes active-zoomer {
    0% {}
    50% {
        border-color: #3bacb0;
        background-color: #39b5ba;
    }
    100% {}
}

@-moz-keyframes active-zoomer {
    0% {}
    50% {
        border-color: #3bacb0;
        background-color: #39b5ba;
    }
    100% {}
}

@-ms-keyframes active-zoomer {
    0% {}
    50% {
        border-color: #3bacb0;
        background-color: #39b5ba;
    }
    100% {}
}

@-o-keyframes active-zoomer {
    0% {}
    50% {
        border-color: #3bacb0;
        background-color: #39b5ba;
    }
    100% {}
}

@keyframes active-zoomer {
    0% {}
    50% {
        border-color: #3bacb0;
        background-color: #39b5ba;
    }
    100% {}
}

/* Animatie text in tab */

.selection-container .selection .selection-item.active .place-text {
    -webkit-animation: text-glow 1s infinite;
    -moz-animation: text-glow 1s infinite;
    -ms-animation: text-glow 1s infinite;
    -o-animation: text-glow 1s infinite;
    animation: text-glow 1s infinite;
}

@-webkit-keyframes text-glow {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}


/*Animatie: tab selected*/

.selection-container .selection .selection-item.is-ok
{
    -webkit-animation: zoomer .5s;
       -moz-animation: zoomer .5s;
        -ms-animation: zoomer .5s;
         -o-animation: zoomer .5s;
            animation: zoomer .5s;
}

@-webkit-keyframes zoomer {
    0% {
        -webkit-transform: scale(1);
    }
    1% {
        -webkit-transform: scale(1.02);
    }
    50% {
        -webkit-transform: scale(0.95);
    }
    80% {
        -webkit-transform: scale(1.02);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes zoomer {
    0% {
        -moz-transform: scale(1);
    }
    10% {
        -moz-transform: scale(1.02);
    }
    50% {
        -moz-transform: scale(0.95);
    }
    80% {
        -moz-transform: scale(1.02);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes zoomer {
    0% {
        -ms-transform: scale(1);
    }
    10% {
        -ms-transform: scale(1.02);
    }
    50% {
        -ms-transform: scale(0.95);
    }
    80% {
        -ms-transform: scale(1.02);
    }
    100% {
        -ms-transform: scale(1);
    }
}

@-o-keyframes zoomer {
    0% {
        -o-transform: scale(1);
    }
    10% {
        -o-transform: scale(1.02);
    }
    50% {
        -o-transform: scale(0.95);
    }
    80% {
        -o-transform: scale(1.02);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes zoomer {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.02);
    }
    50% {
        transform: scale(0.95);
    }
    80% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}