@-webkit-keyframes iframeSlide {
    0% {left:0px;}
    100% {left:-100vw;}
}

@-moz-keyframes iframeSlide {
    0% {left:0px;}
    100% {left:-100vw;}
}

@keyframes iframeSlide {
    0% {left:0px;}
    100% {left:-100vw;}
}

.slideOutFrame {
    -webkit-animation-name: iframeSlide;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: iframeSlide;
    -moz-animation-delay: 0.2s;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: forwards;

    animation-name: iframeSlide;
    animation-delay: 0.2s;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.slideInFrame {
    -webkit-animation-name: iframeSlide;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: reverse;

    -moz-animation-name: iframeSlide;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: forwards;
    -moz-animation-direction: reverse;

    animation-name: iframeSlide;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-direction: reverse;
}

@keyframes bgFadeIn {
    0% { visibility: visible; background-color: rgba(0,0,0, 0);}
    100% { visibility: visible; background-color: rgba(0,0,0, .7); } 
}

@keyframes bgFadeOut {
    0% { visibility: visible; background-color: rgba(0,0,0, .7); }
    20% { visibility: visible; background-color: rgba(0,0,0, 0); }
    100% { visibility: hidden;} /* visibility car display ne fonctionne pas avec les animations*/
}
@-webkit-keyframes bgFadeIn {
    0% { visibility: visible; visibility: visible; background-color: rgba(0,0,0, 0);}
    100% { visibility: visible; background-color: rgba(0,0,0, .7); } 
}

@-webkit-keyframes bgFadeOut {
    0% { visibility: visible; background-color: rgba(0,0,0, .7); }
    20% { visibility: visible;  background-color: rgba(0,0,0, 0); }
    100% { visibility: hidden;} /* visibility car display ne fonctionne pas avec les animations*/
}

.fadeInFrameBg {
    -webkit-animation-name: bgFadeIn;
    -webkit-animation-delay: 0.6s;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-fill-mode: forwards;

    animation-name: bgFadeIn;
    animation-delay: 0.6s;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.fadeOutFrameBg {
    -webkit-animation-name: bgFadeOut;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-fill-mode: forwards;

    animation-name: bgFadeOut;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}