/* 728 X 90 */

body{ background-image: url('728x90.png'); background-repeat: no-repeat; margin: 0;	padding: 0;	background: #333;;  }
#banConteneur{ background: #432CC1; width: 728px; height: 90px; overflow: hidden; position: relative; }
* {  box-sizing: border-box; outline: none; }
.header{  z-index: 2;  width: 185px; height: 90px; position: absolute; top: 0; background: white;   }
.header img{ height: 100% ; }
.blue{     background: #432CC1; }
.job_wrapper{  width: 100%; height: 90px; position: absolute; top: 0; left: 0; display: flex;  flex-direction: column; align-content: center; align-items: center;  justify-content: center;}
.titre_wrapper{ position: absolute; top: 0; left: 0; height: 90px; width:  100%; }
.titre_wrapper img{ opacity: 0; top: 0; left: 0; position:absolute; height: 90px; width:  auto; }
.anim_titre1 .titre1{ animation: animTitre 2s ease-out 0s 1 normal forwards; }
.anim_titre2 .titre2{animation: animTitre 2s ease-out 0s 1 normal forwards; }
.anim_titre3 .titre3{ animation: animTitre 2s ease-out 0s 1 normal forwards; }
.anim_titre4 .titre4{ animation: animTitre 2s ease-out 0s 1 normal forwards; }
.myjob_wrapper{  margin: 5px 0 2px 0; position: relative;height: 33px;  }
.myjob_wrapper img{	opacity: 0;  position: absolute; top:0; left: 50%; transform: translateX(-50%); height: 33px; width: auto;  }
.myjob_wrapper .job1{ animation: myJob 8s ease-out 0s infinite normal forwards;}
.myjob_wrapper .job2{ animation: myJob 8s ease-out 2s infinite normal forwards;}
.myjob_wrapper .job3{  animation: myJob 8s ease-out 4s infinite normal forwards;}
.myjob_wrapper .job4{ animation: myJob 8s ease-out 6s infinite normal forwards;}
.otherjob{ height: 19px; max-width: none; opacity: 0; max-width: none; margin: 3px; }
.otherjob1{ animation: slide_left 2s ease-out 0s 5 normal forwards; }
.otherjob2{ animation: slide_right 2s ease-out .2s 5 normal forwards; }
img.slide{ width: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
.main_wrapper{ height: 90px; left: 185px; width: calc(728px - 185px ); flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; position: absolute; top: 0;  width: calc(728px - 185px ); height: 250px;  transition: background 1s;  }

.slide1{ display: none; background-color: #432CC1; }
.play_slide1 .slide1{ display: block;}
.play_slide1 .slide1 .main_wrapper{ animation: showHideSlide1 8s ease-out 0s 1 normal forwards;  }

.slide2{ display: none;}
.play_slide2 .slide2{ display: block; }
.slide2 .main_wrapper{ }
.play_slide2  .slide2 .main_wrapper{ background-color: #00D9BC; animation: animBgSlide2 2s ease-out 0s 1 normal forwards; }
.play_slide2  .slide2 .slide{ opacity: 0; position:absolute; width: 100%; top: 0; left: 0; }
.play_slide2  .slide2 .slide2a{ animation: animTxt 3.7s ease-out 0s 1 normal forwards; } 
.play_slide2  .slide2 .slide2b{ animation: animTxt 2.7s ease-out .1s 1 normal forwards; } 
.play_slide2  .slide2 .slide2c{ animation: animTxt 2.7s ease-out .2s 1 normal forwards; } 
.play_slide2  .slide2 .slide2d{ animation: animTxt 2.7s ease-out .3s 1 normal forwards; } 
.play_slide2  .slide2 .slide2e{ animation: animTxt 2.7s ease-out .4s 1 normal forwards; } 

.slide3{ display: none;  }
.play_slide3 .slide3{ display: block;  }
.play_slide3  .slide3 .main_wrapper{  background-color: #432CC1; }
.play_slide3  .slide3 .slide{ opacity: 0; position:absolute; width: 100%; top: 0; left: 0; }
.play_slide3  .slide3 .slide3a{ animation: animTxt 3s ease-out 0s 1 normal forwards; } 
.play_slide3  .slide3 .slide3b{ animation: animTxt 3s ease-out .1s 1 normal forwards; } 
.play_slide3  .slide3 .slide3c{ animation: animTxt 3s ease-out .2s 1 normal forwards; } 
.play_slide3  .slide3 .slide3d{ animation: animTxt 3s ease-out .3s 1 normal forwards; } 
.play_slide3  .slide3 .slide3e{ animation: animTxt 3s ease-out .4s 1 normal forwards; } 

.slide4{ display: none; }
.play_slide4 .slide4{ display: block; background-color: #fff; width: 728px; height: 90px;  }
.play_slide4  .slide4 .slide{ 	animation-duration:.3s;  animation-timing-function: cubic-bezier(0.47, 0.03, 0, 0.96)); animation-delay: 0.8s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards;  animation-play-state: running; animation-name: fadeInLogo;	opacity: 0; position:absolute; width: 100%; top: 0; left: 0; } 
.play_slide4  .slide4 .slide4a1{ animation-delay: 0.1s  } 
.play_slide4  .slide4 .slide4a2{ animation-delay: 0.15s  } 
.play_slide4  .slide4 .slide4a3{ animation-delay: 0.2s  } 
.play_slide4  .slide4 .slide4a4{ animation-delay: 0.25s  } 
.play_slide4  .slide4 .slide4a5{ animation-delay: 0.3s  } 
.play_slide4  .slide4 .slide4a6{ animation-delay:  .35s   } 
.play_slide4  .slide4 .slide4a7{ animation-delay:  .4s  } 
.play_slide4  .slide4 .slide4a8{ animation-delay:  .45s } 
.play_slide4  .slide4 .slide4a9{ animation-delay:  .5s  } 
.play_slide4  .slide4 .slide4a10{ animation-delay:  .55s  } 
.play_slide4  .slide4 .slide4a11{ animation-delay:  .6s  } 
.play_slide4  .slide4 .slide4b1{ animation: fadeInBaseline .3s  ease-out .75s 1 normal forwards; } 
.play_slide4  .slide4 .slide4b2{ animation: anim_point 1s ease-out 0.6s 10 normal forwards; } 



@keyframes fadeInLogo {	
	0% { transform: scaleX(0) scaleY(0)  translate3d(-60px,0,0); opacity: 0; }
	100% {transform: scaleX(1)  scaleY(1)  translate3d(0px,0,0); opacity: 1; }
}
@keyframes fadeInBaseline {	
	0% { transform: translateX(-20px); opacity: 0; }
	100% { transform: translateX(0px); opacity: 1; }
}

@keyframes fadeIn {	
	to { opacity: 1; }
}
@keyframes myJob {	
	0% {  opacity: 0; transform: translateX(-45%); }
	10% { opacity: 1; transform: translateX(-50%); }
	23% { opacity: 1;transform: translateX(-50%); }
	25% { opacity: 0;transform: translateX(-50%); }
	100% { opacity: 0;transform: translateX(-50%); }
}
@keyframes slide_left {	
	0% { transform: translateX(40px); opacity: 0; }
	30% { transform: translateX(0px); opacity: 1;  }
	95% { transform: translateX(0px); opacity: 1; }
	100% {transform: translateX(-20px); opacity: 0; }
}

@keyframes slide_right {	
	0% { transform: translateX(-40px); opacity: 0; }
	30% { transform: translateX(0px); opacity: 1;  }
	95% {transform: translateX(0px); opacity: 1; }
	100% {transform: translateX(20px); opacity: 0; }
}

@keyframes showHideSlide1 {	
	0% {  opacity: 0; }
	2% { opacity: 1;  }
	95% { opacity: 1;  }
	100% { opacity: 0;  }
}

@keyframes animTitre {	
	0% { transform: translate3d(0, 5px, 0); opacity: 0; }
	15% { transform: translate3d(0, 5px, 0); opacity: 0; }
	25% { transform: translate3d(0, 0px, 0); opacity: 1; }
	90% { transform: translate3d(0, 0px, 0); opacity: 1; }
	100% { transform: translate3d(0, -10px, 0);  opacity: 0;  }
}


@keyframes animTxt {	
	0% { transform: translate3d(5px, 0 , 0); opacity: 0; }
	10% { transform: translate3d(0, 0px, 0); opacity: 1; }
	80% { transform: translate3d(0, 0 , 0); opacity: 1; }
	100% { transform: translate3d(0, 0 , 0); opacity: 1; }
}


@keyframes animBgSlide2 {	
	0% {  background-color: #432CC1; }
	4% {  background-color: #00D9BC;}
	96% {  background-color: #00D9BC;}
	100% {  background-color: #432CC1;}
}


@keyframes anim_point {	
	0% {  opacity: 0; }
	40% { opacity: 0;  }
	50% { opacity: 1;  }
	80% { opacity: 1;  }
	100% { opacity: 1;  }
}