.pageblock-wrapper{
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

.pageblock-wrapper .pageblock{
  width: 50%;
}

.pageblock-wrapper .pageblock:last-child:nth-child(odd){  
  width: 100%
}

.pageblock-wrapper .pageblock *.animate-border-once::before{ 
  animation-play-state: running;
  animation-iteration-count: 1;  
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
}

.pageblock-wrapper .pageblock h2[data-animation-on-show="true"]::before{
  content: ' ';
  position: absolute;
  
  width: 0%;
  height: 3px;
  background: white;
  top: 100%;
  pointer-events: none;  
}

.pageblock-wrapper .pageblock:not(:last-child):nth-child(odd) *[data-animation-on-show="true"]{
  transform: translate(-50%, -50%);
  
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-name: fade-from-left;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier( 0.50, -0.3, 0.50, 1.3 );
}

.pageblock-wrapper .pageblock:not(:last-child):nth-child(odd) *.animate-border-once::before{
  right: 0%;
  animation-name: border-effect-from-left;
}

.pageblock-wrapper .pageblock:nth-child(even) *.animate-border-once::before{
  left: 0%;
  animation-name: border-effect-from-right;
}

.pageblock-wrapper .pageblock:nth-child(even) *[data-animation-on-show="true"]{
  transform: translate(50%, -50%);
  
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-name: fade-from-right;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier( 0.50, -0.3, 0.50, 1.3 );
}


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

.pageblock-wrapper .pageblock:last-child:nth-child(odd) *[data-animation-on-show="true"]{
  transform: translate(-50%, -50%);
  
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-name: fade-from-left;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier( 0.50, -0.3, 0.50, 1.3 );
}

.pageblock-wrapper .pageblock:last-child:nth-child(odd) *.animate-border-once::before{
  right: 0%;
  animation-name: border-effect-from-left;
}



@keyframes fade-from-left {
  0% {
    left: 0;
    opacity: 0;
  }
  100%{
    left: 50%;
    opacity: 1
  }
}

@keyframes border-effect-from-left{
  0%{
    width: 0%;
  }
  50%{
    width: 100%;    
  }
  100%{
    width: 0%;
    right: 100%;
  }
}

@keyframes border-effect-from-right{
  0%{
    width: 0%;
  }
  50%{
    width: 100%;    
  }
  100%{
    width: 0%;
    left: 100%;
  }
}

@keyframes fade-from-right {
  0% {
    right: 0%;
    opacity: 0;
  }
  100%{
    right: 50%;
    opacity: 1
  }
}



/* Mobile (any orientation) ----------- */
@media only screen 
and (max-device-width : 767px) {  
  .pageblock-wrapper .pageblock{
    width: 100%;
    padding-top: 100%;
  }  
  
}