/*============EFFECTS==============*/
.in, .out {
    /*-webkit-animation-duration: 0.3s;*/
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

.out.reverse {
    /*-webkit-animation-duration: 0.3s;*/
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

/*@Slide Effect@*/
.slideup.in {
    /*-webkit-animation-name: slideup;*/
    -webkit-animation-name: slideup;
    animation-name: slideup;
    z-index: 10;
}

.slideup.out {
    /*-webkit-animation-name: dontmove;*/
    -webkit-animation-name: dontmove;
    animation-name: dontmove;
    z-index: 0;
}

.slideup.out.reverse {
    z-index: 10;
    /*-webkit-animation-name: slidedown;*/
    -webkit-animation-name: slidedown;
    animation-name: slidedown;
}

.slideup.in.reverse {
    z-index: 0;
    /*-webkit-animation-name: dontmove;*/
    -webkit-animation-name: dontmove;
    animation-name: dontmove;
}

@keyframes slideup {
    from {
        /*-webkit-transform: translateY(100%); */
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -o-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    to {
        /*-webkit-transform: translateY(0); */
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slidedown {
    from {
        /*-webkit-transform: translateY(0); */
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        /*-webkit-transform: translateY(100%);*/
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -o-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes dontmove {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

/*@PopEffect Effect@*/
.pop {
    /*-webkit-transform-origin: 50% 50%;*/
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /*-webkit-animation-duration: 0.3s;*/
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

.pop.in {
    /*-webkit-animation-name: popin;*/
    -webkit-animation-name: popin;
    animation-name: popin;
    z-index: 10;
}

.pop1 {
    /*-webkit-transform-origin: 50% 50%;*/
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    /*-webkit-animation-duration: 0.3s;*/
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

.pop1.in {
    /*-webkit-animation-name: popin;*/
    -webkit-animation-name: popin;
    animation-name: popin;
    z-index: 10;
}

.pop.out.reverse {
    /*-webkit-animation-name: popout;*/
    -webkit-animation-name: popout;
    animation-name: popout;
    z-index: 10;
}

.pop.in.reverse {
    z-index: 0;
    /*-webkit-animation-name: dontmove;*/
    -webkit-animation-name: dontmove;
    animation-name: dontmove;
}

@keyframes popin {
    from {
        /*-webkit-transform: scale(.2);*/
        -moz-transform: scale(.2);
        -webkit-transform: scale(.2);
        -o-transform: scale(.2);
        -ms-transform: scale(.2);
        transform: scale(.2);
        opacity: 0;
    }
    to {
        /*-webkit-transform: scale(1);*/
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes popout {
    from {
        /*-webkit-transform: scale(1);*/
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    to {
        /*-webkit-transform: scale(.2);*/
        -moz-transform: scale(.2);
        -webkit-transform: scale(.2);
        -o-transform: scale(.2);
        -ms-transform: scale(.2);
        transform: scale(.2);
        opacity: 0;
    }
}