@charset "utf-8";
/* CSS Document */
.blocAffichageGBM {
	background-color:#000;
    height:400px;
    width:100%;
	margin-bottom:20px;
    perspective:800px;
    overflow:hidden;
}
.blocAffichageGBM::before,
.blocAffichageGBM::after{
    content:"";
    display:table;
    clear:both;
}

.diapoGBM {
    height:100%;
    width:100%;
    float:left;
    margin-right:-100%;
    overflow:hidden;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.diapoGBM img {
    display:block;
}
.transitionGBM00 .diapoSortanteGBM {
    z-index: 500;
    opacity:0;
    transition-property: opacity;
    transition-duration: 1s ;
}
.transitionGBM00 .diapoEntranteGBM {
    z-index: 1000;
    opacity:1;
    transition-property: opacity;
    transition-duration: 1s ;
    transition-delay: 1s;
}

.transitionGBM01 .diapoEntranteGBM {
    transform: translate(0,0);
	transition-property: all;
	transition-duration: 1s ;
	transition-delay: 1s;
}
.transitionGBM01 .diapoSortanteGBM {
    transform: translate(-120%,0);
	transition-property: all;
	transition-duration: 1s;
}

@keyframes animSortante02 {
	from {
		opacity:1;
		transform: scale(1) rotate(0);
	}
	to {
		opacity:0;
		transform: scale(10) rotate(1500deg);
	}
} 
.transitionGBM02 .diapoSortanteGBM {
	opacity:0;
	z-index:1000;
	animation-name:animSortante02;
	animation-duration:6s;
}
@keyframes animEntrante02 {
	from {
		opacity: 0;
		transform: scale(0) rotate(-1500deg);
	}
	to {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
} 
.transitionGBM02 .diapoEntranteGBM {
	opacity: 1;
	z-index: 500;
	animation-name: animEntrante02;
	animation-duration: 6s;
}

.transitionGBM03 .diapoEntranteGBM {
    animation-name:flip-3d-entrant;
    animation-fill-mode: both;
    animation-duration: 4s;
    backface-visibility: hidden;
}
.transitionGBM03 .diapoSortanteGBM {
    animation-name:flip-3d-sortant;
    animation-fill-mode: both;
    animation-duration: 4s;
    backface-visibility: hidden;
}
.blocAffichageGBM.transitionGBM03 {
    overflow: visible;
}
@keyframes flip-3d-entrant {
    0% {
        background-color: #fff;
        transform:rotateX(180deg);
        opacity:0;
    }
    100% {
        background-color: #eee;
        transform:rotateX(0deg);
        opacity:1;
    }
}
@keyframes flip-3d-sortant {
    0% {
        background-color: #eee;
        transform:rotateX(0deg);
        opacity:1;
    }
    100% {
        background-color: #000;
        transform:rotateX(-180deg);
        opacity:0;
    }
}