/*************************************************************
                        ZOOM IN
*************************************************************/

.zoom-in {
    -webkit-animation-name: zoomIn;
    -moz-animation-name: zoomIn;
    -o-animation-name: zoomIn;
    -webkit-animation-name: zoomIn;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;

    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    transform: scale(0, 0);

    opacity: 1;
    display: block;
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
}

@-moz-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
}

@-o-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
}

@-ms-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
}

/*************************************************************
                        ZOOM OUT
*************************************************************/

.zoom-out {
    -webkit-animation-name: zoomOut;
    -moz-animation-name: zoomOut;
    -o-animation-name: zoomOut;
    -webkit-animation-name: zoomOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
    display: block;
}

@-webkit-keyframes zoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
}

@-moz-keyframes zoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
}

@-o-keyframes zoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
}

@-ms-keyframes zoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
}

@keyframes zoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
}