#page {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
#page::before,
#page::after {
  content: '';
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #ffffff;
  z-index: 1;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  transition: transform 0.4s 0.4s;
}
#page::before {
     top: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#page::after {
  bottom: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
#page.page-is-changing::after,
#page.page-is-changing::before {
   -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;
  
}
.page-is-changing .cd-cover-layer {
  opacity: 1;
   -khtml-opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -o-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
    z-index: 9999999
}


.cd-loading-bar {
  /* this is the loding bar - visible while switching from one page to the following one */
  position: fixed;
  z-index: 350;
  left: 50%;
  top: 50%;
  height: 3px;
  width: 100%;
  background: var(--loading_bar_color);
  visibility: hidden;
  transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
  -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
  -o-transition: visibility 0s 0.4s, -o-transform 0.4s 0s ease-in;
  -o-transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
  -moz-transition: visibility 0s 0.4s, transform 0.4s 0s ease-in, -moz-transform 0.4s 0s ease-in;
  transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
  transition: visibility 0s 0.4s, transform 0.4s 0s ease-in, -webkit-transform 0.4s 0s ease-in, -moz-transform 0.4s 0s ease-in, -o-transform 0.4s 0s ease-in;
  transition: visibility 0s 0.4s, transform 0.4s 0s ease-in, -webkit-transform 0.4s 0s ease-in;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
       backface-visibility: hidden;
  -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
       transform: translateZ(0);
  -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
       transform: translateX(-50%) translateY(-50%);
}


.cd-loading-bar {
  /* this is the loading bar - visible while switching from one page to the following one */
  position: fixed;
  height: 2px;
  width: 100%;
}
.cd-loading-bar::before {
  /* this is the progress bar inside the loading bar */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--loading_bar_color);
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
       backface-visibility: hidden;
  -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
       transform: translateZ(0);
  -webkit-transform: scaleX(0);
      -moz-transform: scaleX(0);
        -o-transform: scaleX(0);
       transform: scaleX(0);
  -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
        -o-transform-origin: left center;
       transform-origin: left center;
}
.page-is-changing .cd-loading-bar {
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
      -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
        -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
       transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
  -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
  -o-transition: visibility 0s 0.3s, -o-transform 0.4s 0.4s;
  -o-transition: visibility 0s 0.3s, transform 0.4s 0.4s;
  -moz-transition: visibility 0s 0.3s, transform 0.4s 0.4s, -moz-transform 0.4s 0.4s;
  transition: visibility 0s 0.3s, transform 0.4s 0.4s;
  transition: visibility 0s 0.3s, transform 0.4s 0.4s, -webkit-transform 0.4s 0.4s, -moz-transform 0.4s 0.4s, -o-transform 0.4s 0.4s;
  transition: visibility 0s 0.3s, transform 0.4s 0.4s, -webkit-transform 0.4s 0.4s;
    z-index: 99999999;
}
.page-is-changing .cd-loading-bar::before {
  -webkit-transform: scaleX(1);
      -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
       transform: scaleX(1);
  transition: -webkit-transform 0.8s 0.8s ease-in;
  -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
  -o-transition: -o-transform 0.8s 0.8s ease-in;
  -o-transition: transform 0.8s 0.8s ease-in;
  -moz-transition: transform 0.8s 0.8s ease-in, -moz-transform 0.8s 0.8s ease-in;
  transition: transform 0.8s 0.8s ease-in;
  transition: transform 0.8s 0.8s ease-in, -webkit-transform 0.8s 0.8s ease-in, -moz-transform 0.8s 0.8s ease-in, -o-transform 0.8s 0.8s ease-in;
  transition: transform 0.8s 0.8s ease-in, -webkit-transform 0.8s 0.8s ease-in;
}
@media only screen and (min-width: 768px) {
  .cd-loading-bar {
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
  }
}
.cd-cover-layer {
  /* layer that covers the content when the animation is triggered */
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
	width: 100%;
    height: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
       transform: translateX(-50%) translateY(-50%);
 
  opacity: 0;
 -khtml-opacity: 0;
  visibility: hidden;
  background: var(--bck_ajax_transition) 50% 50% repeat;
  -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  -o-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
}