/* Algemeen */

@keyframes fadeInAnimation {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

/* Page transition */

@keyframes pageTransitionOut {

    0% {

        left: -100%;
        opacity: 0;

    }
    1%{

        left: 0;
        opacity: 0;


    }
    100% {

        left: 0;
        opacity: 1;

    }

}

@keyframes pageTransitionIn {

    0% {

        opacity: 1;
        left: 0px;

    }
    99% {
        left: 0px;
        opacity: 0;

    }
    100% {

        left: -100%;

    }

}

/* Landingslider transition */

@keyframes landingTitleOut {

    0% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

@keyframes landingDeviderOut {

    0% {

        width: 100px;

    }

    100% {

        width: 0px;

    }

}

@keyframes landingContentOut {

    0% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

@keyframes landingTitleIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

@keyframes landingDeviderIn {

    0% {

        width: 0px;

    }

    100% {

        width: 100px;

    }

}

@keyframes landingContentIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

/* Home animation */

@keyframes h1IntroAnimation {

  0% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes h3IntroAnimation {

  0% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes pIntroAnimation {

  0% { opacity: 0; }

  100% { opacity: 1; }

}


/* Home - onze producten */
@keyframes productContentWrapperAnimation {

  0% { width: 0px; }

  100% { width: 70%; }

}

@keyframes productContentWrapperAnimationMobile {

  0% { width: 0px; }

  100% { width: 100%; }

}

@keyframes productH1Animation {

  0% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes productContentAnimation {

  0% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes productButtonAnimation {

  0% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes productAnimationIn {

  0% { opacity: 0; transform: translateY(50px);}

  100% { opacity: 1; transform: translateY(0px);}

}

/* About animation */

@keyframes section2rightAnimation {

  0% { width: 0px; }

  100% { width: 40vw; }

}

@keyframes section2rightAnimationRes1045 {

  0% { width: 0px; }

  100% { width: 50vw; }

}

@keyframes section3LeftAnimation {

  0% { width: 0px; }

  100% { width: 40%; }

}

@keyframes section3RightAnimation {

  0% { width: 0px; }

  100% { width: 60%; }

}

@keyframes logoAnimation {

  0% { opacity: 0; transform: translateY(50px);}

  100% { opacity: 1; transform: translateY(0px); }

}