.quiz-form-title {
    opacity:0;
    transform:translateY(-30px);
    -webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;
}

.displayed .quiz-form-title {
    opacity:1;
    transform:translateY(0px);
}

.quiz-form-question-content-inner:nth-child(1) .quiz-form-title {
    opacity:1;
    transform:translateY(0px);
}

.quiz-form-field > div {
    opacity:0;
    -webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;
    transition-delay:500ms;
}

.displayed .quiz-form-field > div {
    opacity:1;
}

.quiz-form-question-content-inner:nth-child(1) .quiz-form-field > div {
    opacity:1;
    transform:translateY(0px);
}

.displayed .quiz-form-field > div:nth-child(1){
    transition-delay:250ms;
}
.displayed .quiz-form-field > div:nth-child(2){
    transition-delay:500ms;
}
.displayed .quiz-form-field > div:nth-child(3){
    transition-delay:750ms;
}
.displayed .quiz-form-field > div:nth-child(4){
    transition-delay:1000ms;
}
.displayed .quiz-form-field > div:nth-child(5){
    transition-delay:1250ms;
}
.displayed .quiz-form-field > div:nth-child(6){
    transition-delay:1500ms;
}
.displayed .quiz-form-field > div:nth-child(7){
    transition-delay:1750ms;
}
.displayed .quiz-form-field > div:nth-child(8){
    transition-delay:2000ms;
}
.displayed .quiz-form-field > div:nth-child(9){
    transition-delay:2500ms;
}
.displayed .quiz-form-field > div:nth-child(10){
    transition-delay:3000ms;
}



/* --------------------------- PAGE ANIMATION ----------------------- */

.quiz-transition {
}

.quiz-transition span {
    position: fixed;
    z-index: 999999;
    right: 0%;
    top: 0%;
    bottom: 0%;
    left: 100%;
    display: block;
}

.quiz-transition span:nth-child(1) {
    background:#39dbb2;
    -webkit-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -moz-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -ms-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -o-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    z-index:999998;
}
.quiz-transition span:nth-child(2) {
    background:#f078f6;
    -webkit-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -moz-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -ms-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -o-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    z-index:999999;
}

.changing-question .quiz-transition span {
    left: 0%;
}

.changed-question .quiz-transition span {
    right: 100%;
    left: 0%;
}

.changed-question  .quiz-transition span:nth-child(1) {
    -webkit-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -moz-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -ms-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -o-transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    transition: all 500ms 100ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
}

.changed-question  .quiz-transition span:nth-child(2) {
    -webkit-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -moz-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -ms-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    -o-transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
    transition: all 500ms cubic-bezier(0.9, 0.23, 0.07, 0.84);
}

.quiz-inner{
    transform:translateX(0%);
}


.changing-question .quiz-inner {
    transform:translateX(-20%);
    animation-name: quiz-inner-slide-out;
    animation-duration: 700ms;
    animation-iteration-count: 1;
    animation-timing-function:cubic-bezier(0.9, 0.23, 0.07, 0.84);
}

@keyframes quiz-inner-slide-out {
    0% {transform:translate(0%)}
    99.98% {transform:translate(-20%)}
    99.99% {opacity:0;}
    100% {transform:translate(20%);opacity:1;}
}

@keyframes quiz-inner-slide-in {
    0% {transform:translate(20%)}
    100% {transform:translate(0%)}
}

.changed-question .quiz-inner{
    animation-name: quiz-inner-slide-in;
    animation-duration: 700ms;
    animation-iteration-count: 1;
    animation-timing-function:cubic-bezier(0.9, 0.23, 0.07, 0.84);
}