@-webkit-keyframes fadeInUp {
  0% { opacity: 0;-webkit-transform: translate3d(0, 100%, 0); }
  100% {opacity: 1; -webkit-transform: none; }} 
  @keyframes fadeInUp {
  0% { opacity: 0;transform: translate3d(0, 100%, 0); }
  100% {opacity: 1; transform: none; }} 
  @-webkit-keyframes bounceOut {
  100% {    opacity: 0; }}
@keyframes bounceOut {
  100% {    opacity: 0; }}
   @-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1;-webkit-transform: translate3d(25px, 0, 0);}
  75% { -webkit-transform: translate3d(-10px, 0, 0);}
  90% {  -webkit-transform: translate3d(5px, 0, 0);}
  100% { -webkit-transform: none; }}
 @keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1;transform: translate3d(25px, 0, 0);}
  75% { transform: translate3d(-10px, 0, 0);}
  90% {  transform: translate3d(5px, 0, 0);}
  100% { transform: none; }} 
@-webkit-keyframes rubberBand {
  0% { -webkit-transform: scale3d(1, 1, 1);}
  30% {-webkit-transform: scale3d(1.25, 0.75, 1);}
  40% {-webkit-transform: scale3d(0.75, 1.25, 1); }
  50% {  -webkit-transform: scale3d(1.15, 0.85, 1); }
  65% {-webkit-transform: scale3d(.95, 1.05, 1);}
  75% { -webkit-transform: scale3d(1.05, .95, 1);}
  100% {-webkit-transform: scale3d(1, 1, 1); }}
  @keyframes rubberBand {
  0% { transform: scale3d(1, 1, 1);}
  30% {transform: scale3d(1.25, 0.75, 1);}
  40% {transform: scale3d(0.75, 1.25, 1); }
  50% {  transform: scale3d(1.15, 0.85, 1); }
  65% {transform: scale3d(.95, 1.05, 1);}
  75% { transform: scale3d(1.05, .95, 1);}
  100% {transform: scale3d(1, 1, 1); }}
  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);}
  20% {  -webkit-transform: scale3d(1.1, 1.1, 1.1);}
  40% { -webkit-transform: scale3d(.9, .9, .9); }
  60% {opacity: 1;  -webkit-transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(.97, .97, .97);}
  100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1);  }}  
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0;transform: scale3d(.3, .3, .3);}
  20% {  transform: scale3d(1.1, 1.1, 1.1);}
  40% { transform: scale3d(.9, .9, .9); }
  60% {opacity: 1;  transform: scale3d(1.03, 1.03, 1.03);}
  80% {transform: scale3d(.97, .97, .97);}
  100% { opacity: 1; transform: scale3d(1, 1, 1);  }}
 @-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {  opacity: 0;     -webkit-transform: translate3d(3000px, 0, 0);}
  60% { opacity: 1;   -webkit-transform: translate3d(-25px, 0, 0);}
  75% {    -webkit-transform: translate3d(10px, 0, 0);}
  90% {   -webkit-transform: translate3d(-5px, 0, 0);}
  100% {  -webkit-transform: none;}} 
  @keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {  opacity: 0;     transform: translate3d(3000px, 0, 0);}
  60% { opacity: 1;   transform: translate3d(-25px, 0, 0);}
  75% {    transform: translate3d(10px, 0, 0);}
  90% {   transform: translate3d(-5px, 0, 0);}
  100% {  transform: none;}}
.bg.sp{opacity:0;-webkit-transition:all 1s linear;transition:all 1s linear; }
.bg.sp.active{opacity:1;}
.home *{opacity:0;-webkit-animation:bounceOut  1s 1s ease-in-out both;animation:bounceOut  1s 1s ease-in-out both; }
.bg.active .home *{opacity:1;-webkit-animation:fadeInUp  1s 0.2s ease-in-out both;animation:fadeInUp 1s  0.2s ease-in-out both;}
#logos li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#logos li.active{-webkit-animation:bounceIn  1s .5s ease-in-out both;animation:bounceIn  1s .5s ease-in-out both; }
#doing{-webkit-animation:bounceOut  0.5s 1s ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#doing.active{-webkit-animation:bounceInLeft  1s 1s ease-in-out both;animation:bounceInLeft  1s 1s ease-in-out both; }
#bitch1{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#bitch1.active{-webkit-animation:fadeInUp  1s .5s ease-in-out both;animation:fadeInUp  1s .5s ease-in-out both;}
#bitch2 li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#bitch2 li.active{-webkit-animation:fadeInUp  1s .8s ease-in-out both;animation:fadeInUp  1s .8s ease-in-out both;}
#oil li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#oil li.active{-webkit-animation:flipInY  1s .5s ease-in-out both;animation:flipInY  1s .5s ease-in-out both;}
#skill li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#skill li.active{-webkit-animation:bounceInRight  1s .5s ease-in-out both;animation:bounceInRight  1s .5s ease-in-out both;}
#power{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#power.active{-webkit-animation:bounceIn  1s .5s ease-in-out both;animation:bounceIn  1s .5s ease-in-out both;}
#group{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#group.active{-webkit-animation:bounceInLeft  1s 1s  ease-in-out both;animation:bounceInLeft  1s 1s ease-in-out both; }
#good li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#good li.active{-webkit-animation:bounceInRight  1s .5s ease-in-out both;animation:bounceInRight  1s .5s ease-in-out both;}
#step{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#step.active{-webkit-animation:bounceInLeft  1s .5s ease-in-out both;animation:bounceInLeft  1s .5s ease-in-out both;}
#oa li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#oa li.active{-webkit-animation:bounceIn  1s .5s ease-in-out both;animation:bounceIn   1s .5s ease-in-out both;}
#myoh{filter:alpha(opacity=0);opacity:0;-webkit-transition:all 2s 1s linear;transition:all 2s 1s linear}
#myoh.active{filter:alpha(opacity=100);opacity:1;}
#need{-webkit-animation:bounceOut  0.5s 1s ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#need.active{-webkit-animation:bounceInLeft  1s 1s ease-in-out both;animation:bounceInLeft  1s 1s ease-in-out both; }
#supp li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#supp li.active{-webkit-animation:bounceIn  1s .5s ease-in-out both;animation:bounceIn  1s .5s ease-in-out both; }
#process li{-webkit-animation:bounceOut  0.5s 1s  ease-in-out both;animation:bounceOut  0.5s 1s ease-in-out both; }
#process li.active{-webkit-animation:bounceInRight  0.8s .5s ease-in-out both;animation:bounceInRight  0.8s .5s ease-in-out both;}
#order li{-webkit-animation:bounceOut  1s 1s ease-in-out both;animation:bounceOut  1s 1s ease-in-out both; }
#order li.active{-webkit-animation:fadeInUp  1s 0.5s ease-out both;animation:fadeInUp 1s  0.5s ease-out both;}
#paper{filter:alpha(opacity=0);opacity:0;-webkit-transition:all 2.5s 0.5s linear;transition:all 2.5s 0.5s linear}
#paper.active{filter:alpha(opacity=100);opacity:1;}
#art{-webkit-animation:bounceOut  1s 0s ease-in-out both;animation:bounceOut  1s 0s ease-in-out both; }
#art.active{-webkit-animation:bounceInLeft  1s 0.5s ease-out both;animation:bounceInLeft 1s  0.5s ease-out both;}
#contacts{-webkit-animation:bounceOut  0.5s 0s  ease-in-out both;animation:bounceOut  0.5s 0s ease-in-out both; }
#contacts.active{-webkit-animation:bounceIn  1s .5s ease-in-out both;animation:bounceIn   1s .5s ease-in-out both;}
#about,#about2{-webkit-animation:bounceOut  1s 0s ease-in-out both;animation:bounceOut  1s 0s ease-in-out both; }
#about.active,#about2.active{-webkit-animation:fadeInUp  1s 0.5s ease-out both;animation:fadeInUp 1s  0.5s ease-out both;}
#shop a{-webkit-animation:bounceOut  0.5s 0s  ease-in-out both;animation:bounceOut  0.5s 0s ease-in-out both; }
#shop a.active{-webkit-animation:bounceInRight  0.8s .5s ease-in-out both;animation:bounceInRight  0.8s .5s ease-in-out both;}
#plam a{-webkit-animation:bounceOut  0.5s 0s  ease-in-out both;animation:bounceOut  0.5s 0s ease-in-out both; }
#plam a.active{-webkit-animation:bounceIn  1s .5s ease-in-out both;animation:bounceIn 1s .5s ease-in-out both;}
#list li,#list2 li{-webkit-animation:bounceOut  0.5s 0s  ease-in-out both;animation:bounceOut  0.5s 0s ease-in-out both; }
#list li.active,#list2 li.active{-webkit-animation:bounceInRight  0.8s .5s ease-in-out both;animation:bounceInRight  0.8s .5s ease-in-out both;}