@keyframes fadeleftIn {
   0%{
        opacity: 0;
        transform: translateX(-100px);
    }
 
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeleftOut {
   0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-100px);
    }
}
@keyframes fadeRightIn {
   0%{
        opacity: 0;
        transform: translateX(100px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRightOut {
   0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(100px);
    }
}
@keyframes fadebtmIn {
   0%{
        opacity: 0;
        transform: translateY(-100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadebtmOut {
   0%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(-100px);
    }
}
@keyframes fadebtmsmIn {
   0%{
        opacity: 0;
        transform: translateY(-10px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadebtmsmOut {
   0%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(-10px);
    }
}
@keyframes fadebtmmIn {
   0%{
        opacity: 0;
        transform: translateY(-20px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadebtmmOut {
   0%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(-20px);
    }
}
@keyframes fadetopIn {
   0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadetopOut {
   0%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(100px);
    }
}

@keyframes flipY {
    0% {
        opacity: 0;
      transform: rotateY(-90deg);
    }
    100% {
        opacity: 1;
      transform: rotateY(0deg);
    }
  }
@keyframes reflipY {
    0% {
        opacity: 1;
      transform: rotateY(0deg);
    }
    100% {
        opacity: 0;
      transform: rotateY(90deg);
    }
  }
@keyframes flipX {
    0% {
        opacity: 0;
      transform: rotateX(-90deg);
    }
    100% {
        opacity: 1;
      transform: rotateX(0deg);
    }
  }
@keyframes reflipX {
    0% {
        opacity: 1;
      transform: rotateX(0deg);
    }
    100% {
        opacity: 0;
      transform: rotateX(90deg);
    }
  }
@keyframes width100 {
    0% {
        opacity: 0;
     width:0%;
    }
    100% {
        opacity: 1;
        width:100%;
    }
  }
@keyframes width0 {
    0% {
        opacity: 1;
        width:100%;
    }
    100% {
        opacity: 0;
        width:0%;
    }
  }

  
  @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}  
    

.fadeleft-In {
    animation: fadeleftIn 1s;
    opacity: 1;
}

.fadeleft-Out {
    animation: fadeleftOut 1s ;
    opacity:0;

}
.faderight-In {
    animation: fadeRightIn 1s ;
    opacity: 1;
}

.faderight-Out {
    animation: fadeRightOut 1s ;
    opacity:0;
}
.fadebtm-In {
    animation: fadebtmIn 1s ;
    opacity: 1;
}

.fadebtm-Out {
    animation: fadebtmOut 1s ;
    opacity: 0;
}
.fadebtm-sm-In {
    animation: fadebtmsmIn 1s ;
    opacity: 1;
}

.fadebtm-sm-Out {
    animation: fadebtmsmOut 1s ;
    opacity: 0;
}
.fadebtm-mid-In {
    animation: fadebtmmIn 1s ;
    opacity: 1;
}

.fadebtm-mid-Out {
    animation: fadebtmmOut 1s ;
    opacity: 0;
}
.fadetop-In {
    animation: fadetopIn 1s ;
    opacity: 1;
}

.fadetop-Out {
    animation: fadetopOut 1s ;
    opacity: 0;
}
.flipY {
    animation: flipY 1.5s ;
    opacity: 1;
}
.reflipY {
    animation: reflipY 1.5s ;
    opacity: 0;
}
.flipX {
    animation: flipX 1.5s ;
    opacity: 1;
}
.reflipX {
    animation: reflipX 1.5s ;
    opacity: 0;
}
.width100 {
    animation: width100 .5s ;
    opacity: 1;
}
.width0 {
    animation: width0 .5s ;
    opacity: 0;
}