@charset "UTF-8";
.wizardFadeIn{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeIn;
    animation-name: wizardFadeIn;
}

@keyframes wizardFadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.wizardFadeOut{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeOut;
    animation-name: wizardFadeOut;
}

@keyframes wizardFadeOut{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

/****************************************************WIZARD FADE IN/OUT LEFT*****************************************************/
.wizardFadeInLeft{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeInLeft;
    animation-name: wizardFadeInLeft;
}

@keyframes wizardFadeInLeft{
    from{
        opacity: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
    to{
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.wizardFadeOutLeft{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeOutLeft;
    animation-name: wizardFadeOutLeft;
}

@keyframes wizardFadeOutLeft{
    from{
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    to{
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}


/****************************************************WIZARD FADE IN/OUT RIGHT*****************************************************/
.wizardFadeInRight{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeInRight;
    animation-name: wizardFadeInRight;
}

@keyframes wizardFadeInRight{
    from{
        opacity: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    to{
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.wizardFadeOutRight{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeOutRight;
    animation-name: wizardFadeOutRight;
}

@keyframes wizardFadeOutRight{
    from{
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    to{
        opacity: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
}


.wizardFadeInImg{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeInImg;
    animation-name: wizardFadeInImg;
}

@keyframes wizardFadeInImg{
    from{
        opacity: 0;        
    }
    to{
        opacity: 1;     
    }
}

.wizardFadeOutImg{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: wizardFadeOutImg;
    animation-name: wizardFadeOutImg;
}

@keyframes wizardFadeOutImg{
    from{
        opacity: 1;        
    }
    to{
        opacity: 0;     
    }
}