.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
}

/* Transition Layer */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
          transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.visible .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-98%);
          transform: translateY(-50%) translateX(-98%);
  -moz-transform: translateY(-50%) translateX(-98%);
}
.cd-transition-layer.opening .bg-layer, .cd-transition-layer.closing .bg-layer {
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}

/* -------------------------------- 



/* -------------------------------- 

Clones Effect

-------------------------------- */

.clones-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../img/clones.png);
}
.clones-transition .cd-transition-layer.opening .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24) forwards;
          animation: cd-sequence 0.8s steps(24) forwards;
}
.clones-transition .cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24) forwards reverse;
          animation: cd-sequence 0.8s steps(24) forwards reverse;
}
@media only screen and (min-width: 768px) {
  .clones-transition h1, .clones-transition h2 {
    font-weight: 300;
  }
  .clones-transition h1 {
    font-size: 7.2rem;
  }
  .clones-transition h2 {
    font-size: 5.6rem;
  }
}


/* -------------------------------- 

Animations

-------------------------------- */
@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@-webkit-keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}
@keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
            .clones-transition .cd-transition-layer .bg-layer {
            /* sprite composed of 25 frames */

            background-image: url(../img/clones.png);
          }
  }
}