/* transX in borders */
 @keyframes transX {
  0% {
    left: 0%;
    opacity: 1;
    visibility: visible;
  }

  30% {
    left: calc(100% - 40px);
    opacity: 1;
    visibility: visible;
  }
	 
	 31%{
		 left: calc(100% - 40px);
		 opacity: 0;
		 visibility: hidden;
	 }
	 
	40%{
		 left: calc(100% - 40px);
    	opacity: 1;
    	visibility: visible;
	 }

  60% {
    left: 0%;
    opacity: 1;
    visibility: hidden;
  }

  100% {
    left: 0%;
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes transX {
0% {
    left: 50%;
    opacity: 1;
    visibility: visible;
  }

  30% {
    left:calc(100% - 40px);
    opacity: 1;
    visibility: visible;
  }
	
	 31%{
		 left: calc(100% - 40px);
		 opacity: 0;
		 visibility: hidden;
	 }
	 
	 40%{
		 left: calc(100% - 40px);
    	opacity: 1;
    	visibility: visible;
	 }

  60% {
    left: 50%;
    opacity: 1;
    visibility: hidden;
  }

  100% {
    left: 50%;
    opacity: 0;
    visibility: hidden;
  }
} 
/* transX in borders */

/* transY in borders */
 @keyframes transY {
  0% {
    top: 0;
    opacity: 1;
    visibility: visible;
  }

  30% {
    top: 90%;
    opacity: 1;
    visibility: visible;
  }

  60% {
    top: 0;
    opacity: 1;
    visibility: hidden;
  }

  100% {
    top: 0;
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes transY {
  0% {
    top: 0;
    opacity: 1;
    visibility: visible;
  }

  30% {
    top: 90%;
    opacity: 1;
    visibility: visible;
  }

  60% {
    top: 0;
    opacity: 1;
    visibility: hidden;
  }

  100% {
    top: 0;
    opacity: 0;
    visibility: hidden;
  }
}

/* transY in borders */


/* removeTitle for title slide in homepage */
@keyframes removeTitle {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateY(-380%);
    opacity: 1;
  }
}

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

  100% {
    transform: translateY(-380%);
    opacity: 1;
  }
}

/* removeTitle for title slide in homepage */


/* removeTitle for title slide in singleCase page */
@keyframes removeTitleSingleCase {
  0% {
    opacity: 1;
  }

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

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

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

/* removeTitle for title slide in singleCase page */