/* Keyframes */
@keyframes goRight {
    from {
      left: 0;
      right: 100%;
    }
    40% {
      left: 0;
      right: 0;
    }
    60% {
      left: 0;
      right: 0;
    }
    to {
      left: 100%;
      right: 0;
    }
  }
  @keyframes goLeft {
    from {
      left: 100%;
      right: 0;
    }
    40% {
      left: 0;
      right: 0;
    }
    60% {
      left: 0;
      right: 0;
    }
    to {
      left: 0;
      right: 100%;
    }
  }
  @keyframes goTop {
    from {
      top: 100%;
      bottom: 0;
    }
    40% {
      top: 0;
      bottom: 0;
    }
    60% {
      top: 0;
      bottom: 0;
    }
    to {
      top: 0;
      bottom: 100%;
    }
  }
  @keyframes goBottom {
    from {
      top: 0;
      bottom: 100%;
    }
    40% {
      top: 0;
      bottom: 0;
    }
    60% {
      top: 0;
      bottom: 0;
    }
    to {
      top: 100%;
      bottom: 0;
    }
  }
  @keyframes backRight {
    from {
      left: 0;
      right: 100%;
    }
    40% {
      left: 0;
      right: 0;
    }
    60% {
      left: 0;
      right: 0;
    }
    to {
      left: 0;
      right: 100%;
    }
  }
  @keyframes backLeft {
    from {
      left: 100%;
      right: 0;
    }
    40% {
      left: 0;
      right: 0;
    }
    60% {
      left: 0;
      right: 0;
    }
    to {
      left: 100%;
      right: 0;
    }
  }
  @keyframes backTop {
    from {
      top: 100%;
      bottom: 0;
    }
    40% {
      top: 0;
      bottom: 0;
    }
    60% {
      top: 0;
      bottom: 0;
    }
    to {
      top: 100%;
      bottom: 0;
    }
  }
  @keyframes backBottom {
    from {
      top: 0;
      bottom: 100%;
    }
    40% {
      top: 0;
      bottom: 0;
    }
    60% {
      top: 0;
      bottom: 0;
    }
    to {
      top: 0;
      bottom: 100%;
    }
  }
  /* Masks sizes */
  .revealedBox-in.goRight > span,
  .revealedBox-in.goLeft > span,
  .revealedBox-in.backRight > span,
  .revealedBox-in.backLeft > span {
    height: 100%;
    top: 0;
  }
  
  .revealedBox-in.goRight.childrenSpan-2 > span,
  .revealedBox-in.goLeft.childrenSpan-2 > span,
  .revealedBox-in.backRight.childrenSpan-2 > span,
  .revealedBox-in.backLeft.childrenSpan-2 > span {
    height: 50%;
  }
  .revealedBox-in.goRight.childrenSpan-2 > span:nth-child(2),
  .revealedBox-in.goLeft.childrenSpan-2 > span:nth-child(2),
  .revealedBox-in.backRight.childrenSpan-2 > span:nth-child(2),
  .revealedBox-in.backLeft.childrenSpan-2 > span:nth-child(2) {
    top: 50%;
  }
  
  .revealedBox-in.goRight.childrenSpan-3 > span,
  .revealedBox-in.goLeft.childrenSpan-3 > span,
  .revealedBox-in.backRight.childrenSpan-3 > span,
  .revealedBox-in.backLeft.childrenSpan-3 > span {
    height: 33.33333%;
  }
  .revealedBox-in.goRight.childrenSpan-3 > span:nth-child(2),
  .revealedBox-in.goLeft.childrenSpan-3 > span:nth-child(2),
  .revealedBox-in.backRight.childrenSpan-3 > span:nth-child(2),
  .revealedBox-in.backLeft.childrenSpan-3 > span:nth-child(2) {
    top: 33.33333%;
  }
  .revealedBox-in.goRight.childrenSpan-3 > span:nth-child(3),
  .revealedBox-in.goLeft.childrenSpan-3 > span:nth-child(3),
  .revealedBox-in.backRight.childrenSpan-3 > span:nth-child(3),
  .revealedBox-in.backLeft.childrenSpan-3 > span:nth-child(3) {
    top: 66.66666%;
  }
  
  .revealedBox-in.goRight.childrenSpan-4 > span,
  .revealedBox-in.goLeft.childrenSpan-4 > span,
  .revealedBox-in.backRight.childrenSpan-4 > span,
  .revealedBox-in.backLeft.childrenSpan-4 > span {
    height: 25%;
  }
  .revealedBox-in.goRight.childrenSpan-4 > span:nth-child(2),
  .revealedBox-in.goLeft.childrenSpan-4 > span:nth-child(2),
  .revealedBox-in.backRight.childrenSpan-4 > span:nth-child(2),
  .revealedBox-in.backLeft.childrenSpan-4 > span:nth-child(2) {
    top: 25%;
  }
  .revealedBox-in.goRight.childrenSpan-4 > span:nth-child(3),
  .revealedBox-in.goLeft.childrenSpan-4 > span:nth-child(3),
  .revealedBox-in.backRight.childrenSpan-4 > span:nth-child(3),
  .revealedBox-in.backLeft.childrenSpan-4 > span:nth-child(3) {
    top: 50%;
  }
  .revealedBox-in.goRight.childrenSpan-4 > span:nth-child(4),
  .revealedBox-in.goLeft.childrenSpan-4 > span:nth-child(4),
  .revealedBox-in.backRight.childrenSpan-4 > span:nth-child(4),
  .revealedBox-in.backLeft.childrenSpan-4 > span:nth-child(4) {
    top: 75%;
  }
  
  .revealedBox-in.goRight.childrenSpan-5 > span,
  .revealedBox-in.goLeft.childrenSpan-5 > span,
  .revealedBox-in.backRight.childrenSpan-5 > span,
  .revealedBox-in.backLeft.childrenSpan-5 > span {
    height: 20%;
  }
  .revealedBox-in.goRight.childrenSpan-5 > span:nth-child(2),
  .revealedBox-in.goLeft.childrenSpan-5 > span:nth-child(2),
  .revealedBox-in.backRight.childrenSpan-5 > span:nth-child(2),
  .revealedBox-in.backLeft.childrenSpan-5 > span:nth-child(2) {
    top: 20%;
  }
  .revealedBox-in.goRight.childrenSpan-5 > span:nth-child(3),
  .revealedBox-in.goLeft.childrenSpan-5 > span:nth-child(3),
  .revealedBox-in.backRight.childrenSpan-5 > span:nth-child(3),
  .revealedBox-in.backLeft.childrenSpan-5 > span:nth-child(3) {
    top: 40%;
  }
  .revealedBox-in.goRight.childrenSpan-5 > span:nth-child(4),
  .revealedBox-in.goLeft.childrenSpan-5 > span:nth-child(4),
  .revealedBox-in.backRight.childrenSpan-5 > span:nth-child(4),
  .revealedBox-in.backLeft.childrenSpan-5 > span:nth-child(4) {
    top: 60%;
  }
  .revealedBox-in.goRight.childrenSpan-5 > span:nth-child(5),
  .revealedBox-in.goLeft.childrenSpan-5 > span:nth-child(5),
  .revealedBox-in.backRight.childrenSpan-5 > span:nth-child(5),
  .revealedBox-in.backLeft.childrenSpan-5 > span:nth-child(5) {
    top: 80%;
  }
  
  .revealedBox-in.goTop > span,
  .revealedBox-in.goBottom > span,
  .revealedBox-in.backTop > span,
  .revealedBox-in.backBottom > span {
    width: 100%;
  }
  
  .revealedBox-in.goTop.childrenSpan-2 > span,
  .revealedBox-in.goBottom.childrenSpan-2 > span,
  .revealedBox-in.backTop.childrenSpan-2 > span,
  .revealedBox-in.backBottom.childrenSpan-2 > span {
    width: 50%;
  }
  .revealedBox-in.goTop.childrenSpan-2 > span:nth-child(2),
  .revealedBox-in.goBottom.childrenSpan-2 > span:nth-child(2),
  .revealedBox-in.backTop.childrenSpan-2 > span:nth-child(2),
  .revealedBox-in.backBottom.childrenSpan-2 > span:nth-child(2) {
    left: 50%;
  }
  
  .revealedBox-in.goTop.childrenSpan-3 > span,
  .revealedBox-in.goBottom.childrenSpan-3 > span,
  .revealedBox-in.backTop.childrenSpan-3 > span,
  .revealedBox-in.backBottom.childrenSpan-3 > span {
    width: 33.33333%;
  }
  .revealedBox-in.goTop.childrenSpan-3 > span:nth-child(2),
  .revealedBox-in.goBottom.childrenSpan-3 > span:nth-child(2),
  .revealedBox-in.backTop.childrenSpan-3 > span:nth-child(2),
  .revealedBox-in.backBottom.childrenSpan-3 > span:nth-child(2) {
    left: 33.33333%;
  }
  .revealedBox-in.goTop.childrenSpan-3 > span:nth-child(3),
  .revealedBox-in.goBottom.childrenSpan-3 > span:nth-child(3),
  .revealedBox-in.backTop.childrenSpan-3 > span:nth-child(3),
  .revealedBox-in.backBottom.childrenSpan-3 > span:nth-child(3) {
    left: 66.66666%;
  }
  
  .revealedBox-in.goTop.childrenSpan-4 > span,
  .revealedBox-in.goBottom.childrenSpan-4 > span,
  .revealedBox-in.backTop.childrenSpan-4 > span,
  .revealedBox-in.backBottom.childrenSpan-4 > span {
    width: 25%;
  }
  .revealedBox-in.goTop.childrenSpan-4 > span:nth-child(2),
  .revealedBox-in.goBottom.childrenSpan-4 > span:nth-child(2),
  .revealedBox-in.backTop.childrenSpan-4 > span:nth-child(2),
  .revealedBox-in.backBottom.childrenSpan-4 > span:nth-child(2) {
    left: 25%;
  }
  .revealedBox-in.goTop.childrenSpan-4 > span:nth-child(3),
  .revealedBox-in.goBottom.childrenSpan-4 > span:nth-child(3),
  .revealedBox-in.backTop.childrenSpan-4 > span:nth-child(3),
  .revealedBox-in.backBottom.childrenSpan-4 > span:nth-child(3) {
    left: 50%;
  }
  .revealedBox-in.goTop.childrenSpan-4 > span:nth-child(4),
  .revealedBox-in.goBottom.childrenSpan-4 > span:nth-child(4),
  .revealedBox-in.backTop.childrenSpan-4 > span:nth-child(4),
  .revealedBox-in.backBottom.childrenSpan-4 > span:nth-child(4) {
    left: 75%;
  }
  
  .revealedBox-in.goTop.childrenSpan-5 > span,
  .revealedBox-in.goBottom.childrenSpan-5 > span,
  .revealedBox-in.backTop.childrenSpan-5 > span,
  .revealedBox-in.backBottom.childrenSpan-5 > span {
    width: 20%;
  }
  .revealedBox-in.goTop.childrenSpan-5 > span:nth-child(2),
  .revealedBox-in.goBottom.childrenSpan-5 > span:nth-child(2),
  .revealedBox-in.backTop.childrenSpan-5 > span:nth-child(2),
  .revealedBox-in.backBottom.childrenSpan-5 > span:nth-child(2) {
    left: 20%;
  }
  .revealedBox-in.goTop.childrenSpan-5 > span:nth-child(3),
  .revealedBox-in.goBottom.childrenSpan-5 > span:nth-child(3),
  .revealedBox-in.backTop.childrenSpan-5 > span:nth-child(3),
  .revealedBox-in.backBottom.childrenSpan-5 > span:nth-child(3) {
    left: 40%;
  }
  .revealedBox-in.goTop.childrenSpan-5 > span:nth-child(4),
  .revealedBox-in.goBottom.childrenSpan-5 > span:nth-child(4),
  .revealedBox-in.backTop.childrenSpan-5 > span:nth-child(4),
  .revealedBox-in.backBottom.childrenSpan-5 > span:nth-child(4) {
    left: 60%;
  }
  .revealedBox-in.goTop.childrenSpan-5 > span:nth-child(5),
  .revealedBox-in.goBottom.childrenSpan-5 > span:nth-child(5),
  .revealedBox-in.backTop.childrenSpan-5 > span:nth-child(5),
  .revealedBox-in.backBottom.childrenSpan-5 > span:nth-child(5) {
    left: 80%;
  }
  
  /* Reveal the content */
  .revealedBox .contentBox {
    opacity: 0;
  }
  .revealedBox > span {
    position: absolute;
    display: block;
    background: #EEECE9;
  }
  
  .revealedBox-in > .contentBox {
    opacity: 1;
    transition-delay: 1.05s;
  }
  
  /* Assign animations */
  .revealedBox-in.goRight > span {
    animation: goRight 1.4s;
  }
  
  .revealedBox-in.goLeft > span {
    animation: goLeft 1.4s;
  }
  
  .revealedBox-in.backRight > span {
    animation: backRight 1.4s;
  }
  
  .revealedBox-in.backLeft > span {
    animation: backLeft 1.4s;
  }
  
  .revealedBox-in.goTop > span {
    animation: goTop 1.4s;
  }
  
  .revealedBox-in.goBottom > span {
    animation: goBottom 1.4s;
  }
  
  .revealedBox-in.backTop > span {
    animation: backTop 1.4s;
  }
  
  .revealedBox-in.backBottom > span {
    animation: backBottom 1.4s;
  }
  
  /* Add delay */
  .revealedBox-in > span {
    animation-delay: 0.1s;
  }
  
  .revealedBox-in > span:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .revealedBox-in > span:nth-child(3) {
    animation-delay: 0.3s;
  }
  
  .revealedBox-in > span:nth-child(4) {
    animation-delay: 0.4s;
  }
  
  .revealedBox-in > span:nth-child(5) {
    animation-delay: 0.5s;
  }