.screen-transition{

 -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   }

.screen-transition [data-toolbar] {
 will-change:transform;
  transition:transform ease .2s;
-webkit-transition:transform ease .2s;
-moz-transition:transform ease .2s;
-o-transition:transform ease .2s;

}

.screen-transition {
 will-change:opacity;

  transition:opacity ease .3s;
-webkit-transition:opacity ease .3s;
-moz-transition:opacity ease .3s;
-o-transition:opacity ease .3s;
transition-delay:.1s;
-webkit-transition-delay:.1s;
-moz-transition-delay:.1s;
-o-transition-delay:.1s;
}
.screen-transition  [data-panel]
 {
 will-change:transform;
-webkit-transition:transform ease-in .3s;
-moz-transition:transform ease-in .3s;
-o-transition:transform ease-in .3s;
 transition:transform ease-in .3s;
-webkit-transition-delay:.1s;
-moz-transition-delay:.1s;
-o-transition-delay:.1s;
transition-delay:.1s;
}


 
.screen-transition  [data-panel]

 {


-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
transform-origin:top center;
}



.screen-hide {
 position:absolute;
 top:0;
 z-index:-1;
 left:0;
 width:100%;
 opacity:0;
 
}


 .screen-hide > [data-toolbar] {
 -webkit-transform:translateY(-50px);
 -moz-transform:translateY(-50px);
 -o-transform:translateY(-50px);
  
 transform:translateY(-50px);
 }

.screen-hide > [data-panel] {
 -webkit-transform:scale3d(0.5,0.5,1);
 -moz-transform:scale3d(0.5,0.5,1);
 -o-transform:scale3d(0.5,0.5,1);
  transform:scale3d(0.5,0.5,1) ;
  
}



.screen-visible {
 opacity:1;
}



 .screen-visible > [data-toolbar] {
  transition-delay:.3s;
-webkit-transition-delay:.3s;
-moz-transition-delay:.3s;
-o-transition-delay:.3s;
-webkit-transform:translateY(0px);
 -moz-transform:translateY(0px);
 -o-transform:translateY(0px);
 transform:translateY(0px);
 }

.screen-visible > [data-panel] {
 -webkit-transition:transform ease-out .3s;
-moz-transition:transform ease-out .3s;
-o-transition:transform ease-out .3s;
 transition:transform ease-out .3s;
 -webkit-transform:scale3d(1,1,1);
 -moz-transform:scale3d(1,1,1);
 -o-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
}


.screen-visible-horizontal {
  -webkit-transition:transform ease-out .3s;
-moz-transition:transform ease-out .3s;
-o-transition:transform ease-out .3s;
 transition:transform ease-out .3s;
 -webkit-transform:translateX(0);
 -moz-transform:translateX(0);
 -o-transform:translateX(0);
  transform:translateX(0);
}

.screen-hide-left {
 
  -webkit-transition:transform ease-out .3s;
-moz-transition:transform ease-out .3s;
-o-transition:transform ease-out .3s;
 transition:transform ease-out .3s;
 -webkit-transform:translateX(-100%);
 -moz-transform:translateX(-100%);
 -o-transform:translateX(-100%);
  transform:translateX(-100%);
}


.screen-hide-right {
 
  -webkit-transition:transform ease-out .3s;
-moz-transition:transform ease-out .3s;
-o-transition:transform ease-out .3s;
 transition:transform ease-out .3s;
 -webkit-transform:translateX(100%);
 -moz-transform:translateX(100%);
 -o-transform:translateX(100%);
  transform:translateX(100%);
}


.screen-visible-horizontal {
 opacity:1;
}