.wrap3d {
    margin-top:120px;
    perspective: 800px;
    perspective-origin: 50% 50%;
}

.jf-screen-shift {
    overflow: auto;
    width:600px;
    height: 400px;
    position: relative;
    border:20px solid #c3c3c3;
    border-radius: 25px;
    padding:0;
    overflow: hidden;
    -webkit-box-shadow: 2px 7px 22px 0px rgba(112,112,112,0.4);
    -moz-box-shadow: 2px 7px 22px 0px rgba(112,112,112,0.4);
    box-shadow: 2px 7px 22px 0px rgba(112,112,112,0.4);   
    transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(12deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
    
}

.jf-screen-shift::after {
    content:'';
    background: #c3c3c3;;
}



.jf-screen-shift > img {
    height: auto;
    width: 100%;
    vertical-align: bottom;
    animation: animatedBackground 8s ease-in-out infinite alternate;
    animation-delay: 3s;
}

@keyframes animatedBackground {
    from { top: 0%;   transform: translateY(0%); }
  to { top: 1223px; transform: translateY(-1223px); }
  }