body{ margin: 0;	padding: 0;	background: #333; }
.lienPub{	position: absolute;	width: inherit;	height: inherit;	display: block;	text-decoration: none;	color: #fff;}
.banConteneur{ position: absolute; display: block; z-index: 10; background:#FFF; width: 300px; height: 600px; overflow: hidden; border: 1px solid black;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box; }

img{ opacity: 0; position: absolute; width: inherit; height: inherit; }
div{ width: inherit; height: inherit; position: absolute;  overflow: hidden; }

.container img{  width: 300px; height: 600px; opacity:  1; }
.white{ background: #fff }
.black{ background: #333; height:50px; }
.txt1{ opacity: 0 }
.txt2{ opacity: 0 }
.black_container{ position: absolute; height: 50px; top:490px; overflow: hidden;  }
.white_container{ position: absolute; height: 50px; top:490px; overflow: hidden;  }
.white_container2{ position: absolute; height: 50px; top:490px; overflow: hidden; }
.cta_container{ height: 50px; top:490px; overflow: hidden; width: 0; }
.cta{ top: 0; left: 0; opacity: 1; width: 300px; height: 100px; }
.logo{ position: absolute; opacity: 0.7; }

.bg{ opacity: 1; }

.container_color img{ opacity: 0 }

/* container 1 */


.anim .container_1 img{
  	animation: anim_container_1_img 1s ease-in 0.4s 2 normal forwards;
}
@keyframes anim_container_1_img {
	0% {
		opacity: 0.7;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1;
	}
}
/* container 2 */

.anim .container_2{
	width: 100px;
  	animation: anim_container_2 1s ease-in 0.4s 2 normal forwards;
}
@keyframes anim_container_2 {
	0% {
		left:0px;
	}
	50% {
		left:100px;
	}
	100% {
		left: 400px;
	}
}

.anim .container_2 img{
	transform : scale(1);
	position: absolute;
  	animation: anim_container_2_img 1s ease-in 0.4s 2 normal forwards;
}
@keyframes anim_container_2_img {
	0% {
		left:0;
	}
	50% {
		left:-80px;
	}
	100% {
		left: -400px;
	}
}

/* container 3 */

.anim .container_3{
	width: 0;
	left:150px;
  	animation: anim_container_3 1s ease-out 0.8s 2 normal forwards;
}
@keyframes anim_container_3 {
	0% {
		width: 0;
		left:150px;
	}
	100% {
		width: 100%;
		left: 0%;
	}
}

.anim .container_3 img{
	transform : scale(1);
  	animation: anim_container_3_img 1s ease-out 0.8s 2 normal forwards;
}
@keyframes anim_container_3_img {
	0% {
		opacity: 0;
		left:-150px;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
/* white  */

.anim .white{
	width: 0;
	left: 150px;
	height: 0;
	top:490px;
  	animation: anim_white 7s linear 1.1s 1 normal forwards;
}
@keyframes anim_white {
	0% {
		width: 0;
		left: 150px;
		top:490px;
		height: 0;
	}
	3% {
		width: 5px;
		left: 150px;
		top:490px;
		height: 50px;
	}
	6% {
		width: 5px;
		left: 150px;
		top:490px;
		height: 50px;
	}
	9% {
		top:490px;
		width: 300px;
		height: 50px;
		left: 0;
	}
	96% {
		top:490px;
		width: 300px;
		height: 50px;
		left: 0;
	}
	100% {
		width: 0;
		left: 150px;
		top:490px;
		height: 50px;
	}
}
/* white txt */

.anim .white_container{
	width: 0;
	left: 150px;
  	animation: anim_white_container 5.8s ease-out 2s 1 normal forwards;
}
@keyframes anim_white_container {

	0% {
		left: 150px;
		width: 0;
	}
	5% {
		left: 0;
		width: 150px;
	}
	40% {
		left: 0;
		width: 150px;
	}
	45% {
		left: 0;
		width: 0;
	}
	75% {
		left: 0;
		width: 0;
	}
	80% {
		left: 0;
		width: 150px;
	}
	95% {
		left: 0;
		width: 150px;
	}
	100% {
		left: 150px;
		width: 0;
	}
}	

.anim .txt_white{
	opacity: 1;
	height: 50px;
	width: 300px;
	left: -150px;
  	animation: anim_txt_white 5.8s ease-out 2s 1 normal forwards;
}
@keyframes anim_txt_white {
	0% {
		left: -300px;
	}
	5% {
		left: -150px;
	}
	50% {
		left: -150px;
	}
	60% {
		left: -150px;
	}
	100% {
		left: -150px;
	}
}
/* white txt2 */

.anim .white_container2{
	width: 0;
	left: 300px;
  	animation: anim_white_container2 4s ease-out 2s 1 normal forwards;
}
@keyframes anim_white_container2 {
	0% {
		left: 300px;
		width: 0;
	}
	50% {
		left: 300px;
		width: 0;
	}
	60% {
		left: 150px;
		width: 150px;
	}
	95% {
		left: 150px;
		width: 150px;	
	}
	100% {
		left: 150px;
		width: 0;
	}
}
.anim .txt_white2{
	opacity: 1;
	height: 50px;
	width: 300px;
	left: -300px;
  	animation: anim_txt_white2 4s ease-out 2s 1 normal forwards;
}
@keyframes anim_txt_white2 {
	0% {
		left: -150px;
	}
	50% {
		left: -150px;
	}
	60% {
		left: 0;
	}
	95% {
		left: 0;
	}
	100% {
		left:  0;
	}
}

/* black txt */

.anim .black_container{
	width: 0;
	left: 150px;
  	animation: anim_black_container 5.8s ease-out 2s 1 normal forwards;
}
@keyframes anim_black_container {
	0% {
		left: 150px;
		width: 0;
	}
	5% {
		left: 150px;
		width: 150px;
	}
	40% {
		left: 150px;
		width: 150px;
	}
	45% {
		left: 0px;
		width: 150px;
	}
	75% {
		left: 0px;
		width: 150px;
	}
	80% {
		left: 150px;
		width: 150px;
	}
	95% {
		left: 150px;
		width: 150px;
	}
	100% {
		left: 150px;
		width: 0px;
	}
}
.anim .txt_black{
	opacity: 1;
	height: 50px;
	width: 300px;
  	animation: anim_txt_black 5.8s ease-out 2s 1 normal forwards;
}
@keyframes anim_txt_black {
	0% {
		left: -150px;
	}
	5% {
		left: -150px;
	}
	40% {
		left: -150px;
	}
	45% {
		left: 0px;
	}
	75% {
		left: 0px;
	}
	80% {
		left: -150px;
	}
	95% {
		left: -150px;
	}
	100% {
		left: -150px;
	}
}

/* cta  */

.anim .cta_container{
	width: 0;
	left: 150px;
  	animation: anim_cta_container 0.4s ease-out 8s 1 normal forwards;
  	transition-timing-function: cubic-bezier(.01,.73,.23,.97);
}
@keyframes anim_cta_container {
	0% {
		left: 150px;
		width: 0;
	}
	100% {
		left: 0px;
		width: 300px;
	}
}
.anim .cta{
	left: 150px;
  	animation: anim_cta 0.4s ease-out 8s 1 normal forwards;
  	transition-timing-function: cubic-bezier(.01,.73,.23,.97);
}
@keyframes anim_cta {
	0% {
		left: -150px;
	}
	100% {
		left: 0px;
	}
}

.banConteneur:hover{

	cursor: pointer;
}
.banConteneur:hover .cta{
	top: -50px
}
.banConteneur:hover .logo{

	opacity: 0.9;
}
.banConteneur:hover .bg{

	opacity: 0.7;
}