body{	background-image: url('300x600.png'); background-repeat: no-repeat; background: #18171d;; margin: 0;	padding: 0;	 }
.lienPub{	position: absolute;	width: inherit;	height: inherit;	display: block;	text-decoration: none;	color: #fff;}
#banConteneur{ background: #432CC1;	width: 300px; height: 600px; overflow: hidden; position: relative;  }
#zoneclic{ z-index: 2; position: absolute;	width: 300px; height: 600px;  }
img{  }
* {  box-sizing: border-box; outline: none; }

.header{ padding: 0px; z-index: 2;  width: 100%; height: 113px; position: absolute; top: 0; background: white;   }
.header img{ height: 113px ; }
.blue{   background: #432CC1;  }

.main_wrapper{   width: 100%; width: 100%; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; height: calc(600px - 113px); top:113px;  position: absolute; flex-direction: column; display: flex; transition: background 1s;  }

.titre_wrapper{ transform: translateY(-80px);  position: absolute; height: 35px; width: 100%;  top: 50%;  display: flex; justify-content: center; }
.titre_wrapper img{ opacity: 0; position:absolute; height: 30px; 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; }

.job_wrapper{  width: 100%; position: relative;  height: calc(600px - 113px); display: flex; flex-direction: column; align-content: center; justify-content: center; flex-wrap: wrap;   align-items: center;   }

.myjob_wrapper{  margin: 3px; position: relative;height: 36px; margin-top: 50px; margin-bottom: 10px;  }
.myjob_wrapper img{	opacity: 0;  position: absolute; top:0; left: 50%; transform: translateX(-50%); height: 36px;  }
.myjob_wrapper .job1{ animation: myJob 8s ease-out 0s 1 normal forwards;}
.myjob_wrapper .job2{ animation: myJob 8s ease-out 2s 1 normal forwards;}
.myjob_wrapper .job3{ animation: myJob 8s ease-out 4s 1 normal forwards;}
.myjob_wrapper .job4{ animation: myJob 8s ease-out 6s 1 normal forwards;}

.otherjob_wrapper { display: flex; flex-direction: column; align-content: center; justify-content: center; flex-wrap: wrap;   align-items: center; }
.otherjob_wrapper img{ height: 26px; opacity: 0; max-width: none; margin: 7px 0; }
 .otherjob_wrapper img:nth-child(8n+1){ animation: slide_left 2s ease-out 0s 5 normal forwards; }
.otherjob_wrapper img:nth-child(8n+2){ animation: slide_right 2s ease-out .2s 5 normal forwards; }
.otherjob_wrapper img:nth-child(8n+3){ animation: slide_left 2s ease-out .4s 5 normal forwards; }
.otherjob_wrapper img:nth-child(8n+4){ animation: slide_right 2s ease-out .6s 5 normal forwards; }
.otherjob_wrapper img:nth-child(8n+5){ animation: slide_left 2s ease-out .8s 5 normal forwards; } 
.otherjob_wrapper img:nth-child(8n+6){ animation: slide_right 2s ease-out .9s 5 normal forwards; }  
.otherjob_wrapper img:nth-child(8n+7){ animation: slide_left 2s ease-out 1s 5 normal forwards; } 
.otherjob_wrapper img:nth-child(8n+8){ animation: slide_right 2s ease-out 1.1s 5 normal forwards; }  


img.slide{ width: 100%; position: absolute; top: 0; left: 0; opacity: 0; }

.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:0px;  left: 0; }
.play_slide2  .slide2 .slide2a{ animation: animTxt 2.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;  }
.slide3 .main_wrapper{  background-color: #00D9BC; }
.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; } 
.play_slide3  .slide3 .slide3f{ animation: animTxt 3s ease-out .6s 1 normal forwards; } 


.slide4{ display: none;  background-color: #fff; }
.play_slide4 .slide4{ display: block; background-color: #fff; width: 300px; height: 600px;  }
.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 .5s 1 normal forwards; } 
.play_slide4  .slide4 .slide4b2{ animation: anim_point 1s ease-out 0.6s 10 normal forwards; } 



@keyframes fadeInLogo {	
	0% { transform: scaleX(0.6) scaleY(0)  translate3d(40px,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% { transform: translateX(-45%); opacity: 0; }
	10% { opacity: 1; transform: translateX(-50%); }
	23% { opacity: 1; transform: translateX(-50%); }
	25% { opacity: 0; transform: translateX(-55%); }
	100% { opacity: 0; }
}
@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; }
	10% { 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;  }
}