#fade_body { top: 0px !important; }

/* @group container */
#container  {/* " !important; " is required for the overlay  in this theme (EX4) with the sliude page activated, an alternative is:   ease-in-out !important;  */
  -webkit-animation: slide-content 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
  -moz-animation: slide-content 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both  !important;
  -o-animation: slide-content 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both  !important;
  animation: slide-content 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both  !important;
  
    -webkit-animation-delay: 0.35s;
  animation-delay: 0.35s;
    /*-webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;*/  
    -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;  
}


  
@keyframes slide-content { 
0%{
opacity:0;
 transform:            translateX(-40px);
 -moz-transform:    translateX(-40px); 
 -webkit-transform: translateX(-40px); 
 -o-transform:       translateX(-40px); 
 -ms-transform:     translateX(-40px);  
} 

40%{
opacity:0;
 transform:            translateX(-40px);
 -moz-transform:    translateX(-40px); 
 -webkit-transform: translateX(-40px); 
 -o-transform:        translateX(-40px); 
 -ms-transform:     translateX(-40px);  
} 

95%{
opacity:1;
} 

100%{
opacity:1;
 transform:            translateX(0px);
 -moz-transform:    translateX(0px);
 -webkit-transform: translateX(0px); 
 -o-transform:        translateX(0px); 
 -ms-transform:      translateX(0px);  
 
}
}

/* Safari and Chrome */
@-webkit-keyframes slide-content {
0%{
opacity:0;
 -webkit-transform: translateX(-40px); 
} 
40%{
opacity:0;
 -webkit-transform: translateX(-40px); 
} 
95%{
opacity:1;
} 
100%{
opacity:1;
 -webkit-transform: translateX(0px);  
}
}
/* @end */

/* ----- */

/* @group left colum */
#left, .left_side 	{ 
  -webkit-animation: slide-left_column 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  -moz-animation: slide-left_column 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  -o-animation: slide-left_column 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  animation: slide-left_column 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940)  ;  
   -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  
    /*-webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;*/  
    -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;  
 
}

/* it works backwards - none|forwards|backwards|both|initial|inherit */  
@keyframes slide-left_column { 
0%{opacity:0;} 
40%{opacity:0;} 
95%{opacity:1;} 
100%{opacity:1; }
}
/* Safari and Chrome */
@-webkit-keyframes slide-left_column {
0%{opacity:0;} 
40%{opacity:0;} 
95%{opacity:1;} 
100%{opacity:1;
}
}
/* @end */

/* --- */

/* @group bodyimage */
#bodyimage	{ 
  -webkit-animation: fade_bodyimage 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  -moz-animation: fade_bodyimage 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  -o-animation: fade_bodyimage 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  animation: fade_bodyimage 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)  ;  
   /*-webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;*/  
    /*-webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;*/  
    -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;  
}  
@keyframes fade_bodyimage { 
0%{opacity:0;} 
40%{opacity:0;} 
95%{opacity:1;} 
100%{opacity:1; }
}
/* Safari and Chrome */
@-webkit-keyframes fade_bodyimage {
0%{opacity:0;} 
40%{opacity:0;} 
95%{opacity:1;} 
100%{opacity:1;
}
}
/* @end */