.pop {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
}

.pop.in {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
    opacity: 1;
	-webkit-animation-name: popin;
	-moz-animation-name: popin;
}

.pop.out {
	-webkit-animation-name: fadeout;
	-moz-animation-name: fadeout;
	opacity: 0;
}

.pop.in.reverse {
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
}

.pop.out.reverse {
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-webkit-animation-name: popout;
	-moz-animation-name: popout;
}

@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-moz-keyframes popin {
    from {
        -moz-transform: scale(.8);
        opacity: 0;
    }
    to {
        -moz-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
}

@-moz-keyframes popout {
    from {
        -moz-transform: scale(1);
        opacity: 1;
    }
    to {
        -moz-transform: scale(.8);
        opacity: 0;
    }
}

/* for non-3d supporting browsers, remove the fade and just animate size */

.ui-unsupported-csstransform3d .pop.out,
.ui-unsupported-csstransform3d .pop.in.reverse {
	-webkit-animation-duration: 200ms;
	-webkit-animation-name: nofade;
}

.ui-unsupported-csstransform3d .pop.in {
	-webkit-animation-name: popin-basic;
	-webkit-animation-duration: 325ms;
}
.ui-unsupported-csstransform3d .pop.out.reverse {
	-webkit-transform: scale(0);
	-webkit-animation-name: popout-basic;
	-webkit-animation-duration: 325ms;
}

@-webkit-keyframes popin-basic {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes popout-basic {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(0);
    }
}