/* Transitions (add/remove class "tx" for enable/disable transition) */ 

.ti_show,
.to_hide        { opacity:0.0; }

.ti_zoom_in     { -webkit-transform:scale(0.0, 0.0); -ms-transform:scale(0.0, 0.0); transform:scale(0.0, 0.0); opacity:0.0; }
.to_zoom_out    { -webkit-transform:scale(1.0, 1.0); -ms-transform:scale(1.0, 1.0); transform:scale(1.0, 1.0); opacity:1.0; }

/* Transitions IN */ 

.tx.ti_show        {
 -webkit-transition:          opacity 300ms ease-in;
    -moz-transition:          opacity 300ms ease-in;
     -ms-transition:          opacity 300ms ease-in;
         transition:          opacity 300ms ease-in; 
                              opacity:1.0;
}

.tx.ti_zoom_in,
.tx.ti_zoom_out    {
 -webkit-transition:opacity 300ms ease-in,-webkit-transform 300ms ease-in;
    -moz-transition:opacity 300ms ease-in,   -moz-transform 300ms ease-in;
     -ms-transition:opacity 300ms ease-in,    -ms-transform 300ms ease-in;
         transition:opacity 300ms ease-in,        transform 300ms ease-in; 
         opacity:1.0;
 -webkit-transform:scale(1.0, 1.0);
    -moz-transform:scale(1.0, 1.0);
     -ms-transform:scale(1.0, 1.0);
         transform:scale(1.0, 1.0);
}

/* Transitions OUT */ 

.tx.to_hide        {
 -webkit-transition:opacity 300ms ease-in;
    -moz-transition:opacity 300ms ease-in;
         transition:opacity 300ms ease-in; 
            opacity:0.0;
}

.tx.to_zoom_in,
.tx.to_zoom_out    {
 -webkit-transition:opacity 300ms ease-in,-webkit-transform 300ms ease-in;
    -moz-transition:opacity 300ms ease-in,   -moz-transform 300ms ease-in;
     -ms-transition:opacity 300ms ease-in,    -ms-transform 300ms ease-in;
         transition:opacity 300ms ease-in,        transform 300ms ease-in; 
         opacity:0.0;
 -webkit-transform:scale(2.0, 2.0);
    -moz-transform:scale(2.0, 2.0);
     -ms-transform:scale(2.0, 2.0);
         transform:scale(2.0, 2.0);
}