@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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


                        
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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



@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
			transform: translateX(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateX(0);
			transform: translateX(0);
	}
}

@keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
			transform: translateX(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateX(0);
			transform: translateX(0);
	}
}

.slideInRight {
	display: block;
	-webkit-animation-name: slideInRight;
		animation-name: slideInRight;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
}





@-webkit-keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(0);
			transform: translateX(0);
	}

	100% {
		visibility: hidden;
		-webkit-transform: translateX(100%);
			transform: translateX(100%);
	}
}

@keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(0);
			transform: translateX(0);
	}

	100% {
		visibility: hidden;
		-webkit-transform: translateX(100%);
			transform: translateX(100%);
	}
}

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









    
@-webkit-keyframes slideInUp {
	0% {
		-webkit-transform: translateY(100%);
				transform: translateY(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}

@keyframes slideInUp {
	0% {
		-webkit-transform: translateY(100%);
				transform: translateY(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}

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





@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
            transform: translateY(0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translateY(100%);
            transform: translateY(100%);
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
            transform: translateY(0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translateY(100%);
            transform: translateY(100%);
    }
}

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



@-webkit-keyframes slideInUp {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
      visibility: visible;
    }
  
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @keyframes slideInUp {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
      visibility: visible;
    }
  
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  .slideInUp {
    -webkit-animation-name: slideInUp;
            animation-name: slideInUp;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
  





       
@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
            transform: translateX(0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
            transform: translateX(0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    }
}

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

    
@-webkit-keyframes slideInLeft {
    0% {
    -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    visibility: visible;
    }

    100% {
    -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
            transform: translateX(0);
    }
}

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