.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animated-2s {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes left-animate {
    0% {
         /*right:-444px;*/
		  -webkit-transform: translate3d(390px, 0, 0);
    	  transform: translate3d(390px, 0, 0);
	}
	100% {
        /*right:-50px;*/
		-webkit-transform: translate3d(0, 0, 0);
    	transform: translate3d(0, 0, 0);
    }
}

@keyframes left-animate {
    0% {
         /*right:-444px;*/
		  -webkit-transform: translate3d(390px, 0, 0);
    	  transform: translate3d(390px, 0, 0);
	}
	100% {
        /*right:-50px;*/
		-webkit-transform: translate3d(0, 0, 0);
    	transform: translate3d(0, 0, 0);
    }
}


@-webkit-keyframes right-animate {
    0% {
        /*right:-50px;*/
		-webkit-transform: translate3d(0, 0, 0);
    	  transform: translate3d(0, 0, 0);
	}
	100% {
        /*right:-444px;*/
		-webkit-transform: translate3d(390px, 0, 0);
    	  transform: translate3d(390px, 0, 0);
    }
}
 
@keyframes right-animate {
    0% {
        /*right:-50px;*/
		-webkit-transform: translate3d(0, 0, 0);
    	  transform: translate3d(0, 0, 0);
	}
	100% {
        /*right:-444px;*/
		-webkit-transform: translate3d(390px, 0, 0);
    	  transform: translate3d(390px, 0, 0);
    }
}


.menu-right-closed .right-menu {-webkit-animation: right-animate 0.4s forwards ease-in;
						 	    animation: right-animate 0.4s forwards ease-in}


.menu-right-open .right-menu {-webkit-animation: left-animate .4s forwards ease-out;
							  animation: left-animate .4s forwards ease-out}


@-webkit-keyframes slide-form-right {
	0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

}

@keyframes slide-form-right {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  100% {
    opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slide-form-right {
  -webkit-animation-name: slide-form-right;
  animation-name: slide-form-right;
}


@-webkit-keyframes slide-form-left {
	0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

}

@keyframes slide-form-left {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slide-form-left {
  -webkit-animation-name: slide-form-left;
  animation-name: slide-form-left;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation-name: fade-in;
  animation-name: fade-in;
}

/*

@-webkit-keyframes scale{
  -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

@keyframes scale {
  -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.scale {
  -webkit-animation-name: scale;
  animation-name: scale;
}
*/