animations_mediaQueris.scss

@keyframes wrong {
    0% {
        border: 1px solid red;
        transform: rotate(-1deg);
    }

    25% {
        border: 1px solid red;
        transform: rotate(1deg);
    }

    50% {
        border: 1px solid red;
        transform: rotate(-1deg);
    }

    100% {
        border: 1px solid red;
        transform: rotate(1deg);
    }
}

@keyframes confirm-submit-msj {
    0% {
        transform: translateY(20em);
    }

    50% {
        transform: translateY(-5em);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes appear-cards {
    0% {
        transform: translateX(-20em);
    }

    50% {
        transform: rotateY(100deg) translateX(10em);
    }

    100% {
        transform: rotateY(0deg)translateX(0);
    }
}

@keyframes appear-form {
    0% {
        transform: scale(0);
    }

    100% {
        transform: 1;
    }
}

@keyframes check_icon {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(.4);
    }

    50% {
        transform: scale(.5);
    }

    75% {
        transform: scale(.7);
    }

    100% {
        transform: scale(1);
    }
}

/* Media Queris */

@media (min-width: 1500px) {
    #cards {
        box-shadow: none !important;
        transform: scale(1.2);
        transition: all 1s;
    }

    .form-section {
        transform: scale(1.6) !important;
        transition: all 1s;
    }

    .confirm-submit-msj {
        transform: translateX(1em) scale(1.5);
        transition: all 1s;
    }
}

@media (min-width: 1100px) {
    .form-section {
        transform: scale(1.2);
        transition: all 1s;
    }

    .date-div {
        flex-grow: 2;
        transition: all 1s;
    }

    .form-input-month {
        margin-right: 2em;
    }

    .cvc-div {
        flex-grow: .3;
        transition: all 1s;
    }

    .attribution {
        font-size: .9em !important;
        transition: all 1s;
    }
}

@media (max-width: 950px) {
    #cards {
        width: 40% !important;
        transition: all 700ms;
    }

    .front-card {
        transform: translateX(4.5em);
        transition: all 1s;
    }

    .back-card {
        transform: translateX(-1.5em);
        transition: all 1s;
    }

    #form {
        width: 60% !important;
        transition: all 600ms;
    }

    .form-section {
        transform: translateX(4em);
        transition: all 1s;
    }

    .confirm-submit-msj {
        transform: translateX(4em);
        z-index: 1000;
        transition: all 1s;
    }
}

@media (max-width: 650px) {

    .front-card {
        transform: translateX(4.3em) scale(.6) translateY(4em);
        transition: all 1s;
    }

    .back-card {
        transform: translateX(-1.7em) scale(.6) translateY(-4em);
        transition: all 1s;
    }

    .form-section {
        transform: translateX(1em);
        transition: all 1s;
    }

    .confirm-submit-msj {
        transform: translateX(1em) scale(.8);
        transition: all 1s;
    }
}

@media (max-width: 450px) {
    .main-section {
        flex-direction: column;
    }

    #cards {
        width: 100% !important;
        height: 40vh;
        box-shadow: none !important;
        transition: all 700ms;
    }

    .back-card {
        transform: translateX(-7.5em) scale(.8) translateY(10em);
        transition: all 1s;
        order: -1;
    }

    .front-card {
        transform: translateX(-5.5em) scale(.8) translateY(1em);
        transition: all 1s;
        z-index: 2;
    }

    #form {
        width: 100% !important;
        height: 60vh;
        transition: all 600ms;
    }
}

@media (max-width: 370px) {

    .back-card {
        transform: translateX(-5.2em) scale(.7) translateY(11em);
    }

    .front-card {
        transform: translateX(-1em) scale(.7) translateY(1em);
    }
}