.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-menu {
    0% {
         /*right:-444px;*/
		  -webkit-transform: translate3d(300px, 0, 0);
    	  transform: translate3d(300px, 0, 0);
	}
	70%{
		/*right:0px;*/
		-webkit-transform: translate3d(0px, 0, 0);
    	  transform: translate3d(0px, 0, 0);
	}
	100% {
        /*right:-50px;*/
		-webkit-transform: translate3d(20px, 0, 0);
    	transform: translate3d(20px, 0, 0);
    }
}

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


@-webkit-keyframes right-animate-menu {
    0% {
        /*right:-50px;*/
		-webkit-transform: translate3d(20px, 0, 0);
    	  transform: translate3d(20px, 0, 0);
	}
	30%{
	  	/*right:0px;*/
		-webkit-transform: translate3d(0px, 0, 0);
    	  transform: translate3d(0px, 0, 0);
	}
	100% {
        /*right:-444px;*/
		-webkit-transform: translate3d(300px, 0, 0);
    	  transform: translate3d(300px, 0, 0);
    }
}
 
@keyframes right-animate-menu {
    0% {
        /*right:-50px;*/
		-webkit-transform: translate3d(20px, 0, 0);
    	  transform: translate3d(20px, 0, 0);
	}
	30%{
	  	/*right:0px;*/
		-webkit-transform: translate3d(0, 0, 0);
    	  transform: translate3d(0, 0, 0);
	}
	100% {
        /*right:-444px;*/
		-webkit-transform: translate3d(320px, 0, 0);
    	  transform: translate3d(320px, 0, 0);
    }
}



.menu-right-closed nav.top-menu > ul	{-webkit-animation: right-animate-menu 0.3s forwards ease-in;
						 		 		 animation: right-animate-menu 0.3s forwards ease-in}


.menu-right-open nav.top-menu > ul {-webkit-animation: left-animate-menu 0.3s forwards ease-out;
							 animation: left-animate-menu 0.3s 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 fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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