/* ==== CONTENT FOLD ==== */

.animate .content-fold-image{
    transition: all 0s ease;
    opacity: 0;
    transform: translateX(1000px);
    -webkit-transform: translateX(1000px);
}

.animate.animate-complete .content-fold-image{
    transition: all 0.5s ease;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.animate .content-fold-content{
    transition: all 0s ease;
    opacity: 0;
    transform: translateX(-1000px);
    -webkit-transform: translateX(-1000px);
}

.animate.animate-complete .content-fold-content{
    transition: all 0.5s ease 0.5s;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}


/* ==== CONTENT FOLD ==== */

.animate.flipped .content-fold-image{
    transition: all 0s ease;
    opacity: 0;
    transform: translateX(-1000px);
    -webkit-transform: translateX(-1000px);
}

.animate.flipped.animate-complete .content-fold-image{
    transition: all 0.5s ease;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.animate.flipped .content-fold-content{
    transition: all 0s ease;
    opacity: 0;
    transform: translateX(1000px);
    -webkit-transform: translateX(1000px);
}

.animate.flipped.animate-complete .content-fold-content{
    transition: all 0.5s ease 0.5s;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

/* ==== CONTENT FOLD ==== */

.animate .icons-item{
    transition: all 0s ease;
    opacity: 0;
    transform: translateY(1000px);
    -webkit-transform: translateY(1000px);
}

.animate.animate-complete .icons-item{
    transition: all 0.5s ease;
    opacity: 1;
    animation: icons-slide-in 2s 1;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation-fill-mode: forwards;
}

.animate .icons-item:nth-of-type(2){
    animation-delay: .15s;
}

.animate .icons-item:nth-of-type(3){
    animation-delay: .3s;
}

@keyframes icons-slide-in {
    0%, 10% { transform: translateY(1000px); }
    90%, 100% { transform: translateY(0px); }
  }

