/* Css3 Animation By Manu LECHAT */
/* www.e-lechat.com */
/* Bises ✌ peace ! */

body{ margin: 0;	padding: 0;	background: #333; }
img{  width: inherit; height: inherit; opacity: 0; position: absolute; top: 0; left: 0 }
img{ animation-timing-function: cubic-bezier(.1,.99,.67,1); }
div{ width: inherit; height: inherit; position: absolute; overflow: hidden; }
::selection {  background: none; }
.banner_container{  width: 320px; height: 250px; cursor: pointer; overflow: hidden; border: 1px solid black;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; }

  



/* step 1 */

.banner_container .step1_000{
    animation: fadeIn 0.3s  0s 1 normal forwards;
}
.step1_in .step1_001{
    animation: anim_bot .8s  0s 1 normal forwards;
}
.step1_in .step1_002{
    animation: anim_top .8s  0.2s 1 normal forwards;
}
.step1_in .step1_003{
    animation: anim_top .8s  0.4s 1 normal forwards;
}
.step1_in .step1_004{
    animation: anim_top .4s  0.6s 1 normal forwards;
}

/* step 1 Out */

.step1_out .step1_001{
    opacity: 1; 
  	animation: fadeOut .5s 0s 1 normal forwards;
}
.step1_out .step1_002{
    opacity: 1; 
  	animation: fadeOut .5s 0.2s 1 normal forwards;
}
.step1_out .step1_003{
    opacity: 1; 
  	animation: fadeOut .5s 0.4s 1 normal forwards;
}
.step1_out .step1_004{
    opacity: 1; 
  	animation: fadeOut .5s 0.6s 1 normal forwards;
}


/* step 2 */

.step2_in .step2_000{
    animation: fadeIn 0.3s  0s 1 normal forwards;
}
.step2_in .step2_img1{
    animation: zoomOut .8s  .2s 1 normal forwards;
}
.step2_in .step2_img2{
    animation: zoomOut .8s  .4s 1 normal forwards;
}
.step2_in .step2_img3{
    animation: zoomOut .8s  .6s 1 normal forwards;
}
.step2_in .step2_img4{
    animation: zoomOut .8s  .8s 1 normal forwards;
}
.step2_in .step2_img5{
    animation: zoomOut .8s  1s 1 normal forwards;
}
.step2_in .step2_img6{
    animation: zoomOut .8s  1.2s 1 normal forwards;
}
.step2_in .step2_txt1{
    animation: zoomOut .8s  1.4s 1 normal forwards;
}
.step2_in .step2_txt2{
    animation: zoomOut .8s  1.6s 1 normal forwards;
}

/* step 2 Out */

.step2_out .step2_000{
    opacity: 1; 
}
.step2_out .step2_img1{
    opacity: 1; 
    animation: fadeOutTop 0.8s  .2s 1 normal forwards;
}
.step2_out .step2_img2{
    opacity: 1; 
    animation: fadeOutTop 0.8s  .4s 1 normal forwards;
}
.step2_out .step2_img3{
    opacity: 1; 
    animation: fadeOutTop 0.8s  .6s 1 normal forwards;
}
.step2_out .step2_img4{
    opacity: 1; 
    animation: fadeOutTop 0.8s  .8s 1 normal forwards;
}
.step2_out .step2_img5{
    opacity: 1; 
    animation: fadeOutTop 0.8s  1s 1 normal forwards;
}
.step2_out .step2_img6{
    opacity: 1; 
    animation: fadeOutTop 0.8s  1.2s 1 normal forwards;
}
.step2_out .step2_txt1{
    opacity: 1; 
    animation: fadeOut .8s  1.4s 1 normal forwards;
}
.step2_out .step2_txt2{
    opacity: 1; 
    animation: fadeOut .8s  1.8s 1 normal forwards;
}

/* step 3 In */

.step3_in .step3_000{
    opacity: 1;
}
.step3_in .step3_img1{
    transition: all .2s ease-in;
    animation: anim_step3_img1 0.8s 0.2s 1 normal forwards;
    animation-timing-function: cubic-bezier(.1,.99,.67,1);
}
@keyframes anim_step3_img1 {
    0% {
        opacity:  0; 
        transform: translate3d(0px, 20px, 0px) rotate(24deg);
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px) rotate(0deg);
    }
}

.step3_in:hover .step3_img1{
    top: 5px;
}
.step3_in .step3_txt1{
    animation: anim_top .8s  .4s 1 normal forwards;
}
.step3_in .step3_txt2{
    animation: anim_top .8s  .6s 1 normal forwards;
}
.step3_in .step3_fleche{
    animation: anim_step3_fleche .8s .7s 1 normal forwards;
}
.step3_in .step3_cta{
    animation: anim_top .8s  1s 1 normal forwards;
}
.step3_in .step3_cta_fleche{
    animation: anim_step3_fleche .5s  1s 6 normal forwards;
}
@keyframes anim_step3_fleche {
    0% {
        animation-timing-function: cubic-bezier(.1,.99,.67,1);
        opacity:  0; 
        transform: translate3d(-5px, 0px, 0px) ;
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px) ;
    }
}




/* keyframes **************************************************************************/

@keyframes fadeIn{
    from {  opacity:  0; } to { opacity: 1; }
}

@keyframes fadeOut{
    from {  opacity:  1; } to { opacity: 0; }
}

@keyframes fadeOutTop{
    0% {  
        opacity:  1;
        transform: translate3d(0px, 0px, 0px); 
    } 20% { 
        opacity: 1;
        transform: translate3d(0px, 5px, 0px); 
    } 100% { 
        opacity: 0;
        transform: translate3d(0px, -20px, 0px); 
    }
}

@keyframes zoomOut{
    from {  transform: scale(1.1,1.1); opacity:  0; } to {  transform: scale(1,1); opacity: 1; }
}

@keyframes zoomIn{
    from {  transform: scale(0.9,0.9); opacity:  0; } to {  transform: scale(1,1); opacity: 1; }
}

@keyframes anim_top {
    0% {
        animation-timing-function: cubic-bezier(.1,.99,.67,1); 
        opacity:  0; 
        transform: translate3d(0px, 20px, 0px); 
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px); 
    }
}

@keyframes anim_bot {
    0% {
        animation-timing-function: cubic-bezier(.1,.99,.67,1);
        opacity:  0; 
        transform: translate3d(0px, -20px, 0px); 
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px); 
    }
}

@keyframes anim_zoom_in_bounce {

    0% {
      animation-timing-function: cubic-bezier(0,.72,.31,.99);
      opacity: 0.5;
      transform:scale(.8,.8) ;
    }   
    90%
    {
      transform:scale(1.05,1.05);
    }
    100%{
      opacity: 1;
      transform:scale(1,1);
    }
}