/* ---------- CODE CSS DE LA VIDEO ----------*/

.video {
    font-family: "Open sans semi-bold";
    margin: 0 auto;
    padding: 20px;
    position: relative;
    border: 5px solid #198136;
    border-radius: 5%;
    height: 40vw;
    width: 40vw;
    overflow: hidden;
}

.video__pink {
    color:#F0386B;
}

.video__green {
    color: #198136;
}

.video__order1 {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 5vw;
    color: #198136;
    animation: disappear 300ms forwards;
    animation-delay: 2000ms;
}

.video__order1__1__1 {
    margin: 0;
    animation: appear 200ms forwards;
    animation-delay: 200ms;
    opacity: 0;
}

.video__order1__1__2 {
    animation: appear 200ms forwards;
    animation-delay: 400ms;
    opacity: 0;
}

.video__order1__1__3 {
    animation: appear 200ms forwards;
    animation-delay: 600ms;
    opacity: 0;
}

.video__order2 {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 3.6vw;
    color: #198136;
    animation: appearSlideUp 1000ms forwards;
    animation-delay: 5000ms;
}

.video__order2 p {
    animation: appearSlideUp 3000ms forwards;
    animation-delay: 2000ms;
    animation: appear 300ms forwards;
    animation-delay: 2200ms;
    opacity: 0;
}

.video__order3-wrapper {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -120%);
    text-align: center;
    font-size: 3.6vw;
    color: #198136;
    animation: disappear 300ms forwards;
    animation-delay: 8000ms;
}

.video__order3 {
    animation: appear 200ms forwards;
    animation-delay: 5100ms;
    opacity: 0;
}

.video__order4 {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    text-align: center;
    font-size: 3.6vw;
    color: #198136;
    animation: disappear 300ms forwards;
    animation-delay: 8000ms;
}

.video__order4__img {
    height: 100%;
    width: 100%;
    transform: translateY(220%);
    animation: slideFromBottom 600ms forwards;
    animation-delay: 5300ms;
    display: block;
    margin: 0 auto;    
}


.video__order5-6-wrapper {
    margin-top: 5%;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slideLeft 500ms forwards;
    animation-delay: 13000ms;
}

.video__order5 {
    text-align: center;
    font-size: 3vw;
    color: #39485E;
    animation: appear 200ms forwards;
    animation-delay: 8000ms;
    opacity: 0;
}

.video__order5 img {
    transform: translatey(5%);
    width: 40%;
    height: 40%;
    display: inline-block;
}

.video__order6-wrapper {
    text-align: center;
    color: #39485E;
}

.video__order6__1 {
    margin: 0;
    font-size: 3vw;
    animation: appear 200ms forwards;
    animation-delay: 9000ms;
    opacity: 0;
}

.video__order6__2__img {
    width: 100%;
    height: 100%;
    font-size: 3vw;
    animation: appear 200ms forwards;
    animation-delay: 9000ms;
    opacity: 0;
    display: block;
    margin: 0 auto;
}

.video__wrapper-order7 {
    margin: 0;
    padding: 0;
    max-height: 100%;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.5vw;
    color: #39485E;
    animation: disappear 400ms forwards;
    animation-delay: 18000ms;
}

.video__order7 {
    transform: translateX(100%);
    animation: slideFromRight 500ms forwards;
    animation-delay: 13000ms;
}

.video__order7__1__img{
    width: 100%;
    display: block;
    margin: 0 auto;
}

.video__order8 {
    text-align: center;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    animation: appear 400ms forwards;
    animation-delay: 18000ms;
    opacity: 0;
}

.video__order8 img {
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

/* ********** ANIMATIONS ********** */

@keyframes appear{
    0%{
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes disappear{
    0%{
        opacity: 100%;
    }

    100% {
        opacity: 0;
    }
}

@keyframes appearSlideUp {
    100% {
        opacity: 100%;
        transform: translate(-50%, -400%);
    }
}

@keyframes slideFromBottom {
    100% {
        transform: translateY(90%);
    }
}

@keyframes slideLeft {
    100% {
        transform: translate(-150%, -50%);
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}