#sub_folditem1 >  div > div > .right-fold , #sub_folditem1 > div > div > .fold_one , #sub_folditem1 > div > div > .left-fold{
    background-color: green;
}

#sub_folditem2 > div > .right-fold , #sub_folditem2 > div > .fold_one , #sub_folditem2 > div > .left-fold{
    background-color:gold;
}


#sub_folditem3 > div > .right-fold , #sub_folditem3 > div > .fold_one , #sub_folditem3 > div > .left-fold{
    background-color:indianred;
}
.left-fold{
  
    animation-name: fload_left_animation;
    animation-duration: 0.5s;
    animation-timing-function:ease-out; 
    animation-fill-mode: forwards;
    clip-path: polygon(0% 0%, 0 0, 100% 16%, 100% 86%, 0% 100%);
    width: 100px;
} 

@keyframes fload_left_animation{
 from{
    clip-path: polygon(0% 0%, 0 0, 100% 16%, 100% 86%, 0% 100%);
 }
 to{
    width: 100%;
    clip-path: polygon(0% 0%, 0 0, 100% 0, 100% 100%, 0% 100%);
 }
}

.right-fold{
    
    animation-name: fload_right_animation;
    animation-duration: 0.5s;   
    animation-timing-function:ease-out; 
    animation-fill-mode: forwards;
    clip-path: polygon(45% 9%, 100% 0%, 100% 100%, 0 86%, 0 16%);
    width: 0px;
    
}

@keyframes fload_right_animation{
 from{
     width: 0px;
     clip-path: polygon(45% 9%, 100% 0%, 100% 100%, 0 86%, 0 16%);
 }
 to{
    width: 100%;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */

    /* clip-path: polygon(49% 4%, 100% 0, 100% 100%, 0 90%, 0 8%); */
    /* clip-path: polygon(41% 1%, 100% 0, 100% 100%, 0 95%, 0 3%); */

    clip-path: polygon(73% 0, 100% 0, 100% 100%, 0 100%, 0 0);
 }


}


.fold_one{
   
    animation-name: fold_one_animation;
    animation-duration: 0.5s; 
    animation-delay: 0.5s;  
    animation-fill-mode: forwards;
    width: 0px; 
    animation-timing-function:ease-out; 
    opacity: 0;
}

@keyframes fold_one_animation{
 0%{
     width: 0px;
     opacity: 0;
    
 }

 100%{
    width: 100%;
    opacity: 1;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */

    /* clip-path: polygon(49% 4%, 100% 0, 100% 100%, 0 90%, 0 8%); */
    /* clip-path: polygon(41% 1%, 100% 0, 100% 100%, 0 95%, 0 3%); */

 }


}

.fold-content{
     top: 30%;
     position: relative;  
}


@media (max-width: 768px) {
    .fold-content{
      top: 10%;
    }


    
}