button {
  cursor:pointer;  width:300px; height:600px; z-index: 10; background-color: none; background: url("../images/cta.png") no-repeat; opacity: 0;
}
* {
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
}
.label {
    display: none;
    color: #0D2A4D;
    position: absolute;
    margin-left: 10px;
    top: 35px;
}
body {
    margin: 0px;
}
#ad {
    display: block;
    border: rgb(145, 153, 153) 1px solid;
    overflow: hidden;
    width: 298px;
    height: 598px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#banner {
    position: absolute;
    display: block;
    width: 298px;
    height: 598px;
    background-color: #FFF;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    overflow: hidden;
}
.hidden{
    display: none;
}

video {
    height: 100%;
    width: 100%;
}
.ios-center-video-controls video::-webkit-media-controls {
    min-width: 0;
}
.sdk .sdk-video-player {
    height: 100%;
    width: 100%;
    position: relative;
    background: url("../images/poster.jpg");
    background-size: cover;
}
.sdk .sdk-video-player-button {
    cursor: pointer;
    position: absolute;
    width: 55px;
    height: 55px;
    background: url("../images/play.png") no-repeat scroll 0px 0px;
    background-size: cover;
}



body{ margin: 0;    padding: 0; background: #333; }
.banner{ width: 300px; height: 600px;position: absolute; overflow: hidden; border: 1px solid black;  }
.video-container { height: 120px;  position: absolute; top:100px; background: url("../images/poster.jpg") top left no-repeat; width: 300px; }

.cars_container{ position: absolute; height: 300px; top: 300px; background: #eee; }
img{ position: absolute; opacity: 0 } 
.cars_container img{ opacity: 1 }
.cars_container div{ position: absolute; width: auto; height: auto } 

.cars_container{ transform: translate3d(350px, 0px, 0px); }
.anim .cars_container {
    animation: anim_cars_container 6s linear .3s 1 normal forwards;
}
@keyframes anim_cars_container {
    0% {
        transform: translate3d(300px, 0px, 0px);
    }
    100% {
        transform: translate3d(-1250px, 40px, 0px);
        display: none;
    }
}


.car1{  width: 503px; height:241px; }
.car1 .roue_container{  position: absolute;  transform: scaleX(.8); width:80px; height:80px; }
.car1 .roue_container1{ top:155px; left: 148px }
.car1 .roue_container2{ top:135px; left: 425px; transform: scaleX(.77); }

.car2{  width: 160px; height:77px; top: 128px; left: 550px; }



.car3{  width: 160px; height:77px;  top: 120px; left: 750px; }


.car4{  width: 160px; height:77px; transform: translate3d( 1200px, 100px, 0px);  }
.anim .car4{
    animation: anim_car4 3s ease-in-out 4s 1 normal forwards;
}
@keyframes anim_car4 {
    0% {
        transform: translate3d( 1200px, 100px, 0px);
    } 
    100% {
        transform: translate3d( 800px, 120px, 0px);
    }
}

.car2 .roue_container{  position: absolute;  transform: scaleY(1.3); width:80px; height:80px; }
.car2 .roue_container1{ top:60px; left: 50px }
.car2 .roue_container2{ top:55px; left: 138px }

.car3 .roue_container{  position: absolute;  transform: scaleY(1.2); width:80px; height:80px; }
.car3 .roue_container1{ top:60px; left: 50px }
.car3 .roue_container2{ top:55px; left: 138px }

.car4 .roue_container{  position: absolute; transform: scaleY(1.2); width:80px; height:80px; }
.car4 .roue_container1{ top:60px; left: 50px }
.car4 .roue_container2{ top:55px; left: 138px }



.anim .roue{
    animation: anim_roue 1.4s linear infinite;
}
@keyframes anim_roue {
    0% {
        transform: rotate(0deg);
    } 
    100% {
        transform: rotate(-360deg);
    }
}




/* logo */

.anim .logo{
    animation: fadeIn 1s  ease-out 0s 1 normal forwards;
}

.anim .logo_c4{
    animation: fadeIn 1.8s  ease-out 3.5s 1 normal forwards;
}

/* packShot */

.anim .packShot{
    animation: fadeIn 1.2s  ease-out 4s 1 normal forwards;
}
.anim .txt_1{
    animation: anim_txt_offres_top 1s  ease-out 5s 1 normal forwards;
}
.anim .txt_2{
    animation: anim_txt_offres_top 1s  ease-out 5.2s 1 normal forwards;
}
.anim .txt_3{
    animation: anim_txt_offres_top 1s  ease-out 5.4s 1 normal forwards;
}
.anim .txt_4{
    animation: anim_txt_offres_bottom 1s  ease-out 6.6s 1 normal forwards;
}
.anim .txt_4b{
    animation: anim_txt_offres_bottom 1s  ease-out 6.5s 1 normal forwards;
}
.anim .txt_5{
    animation: anim_txt_offres_bottom 1s  ease-out 7s 1 normal forwards;
}
.anim .txt_6{
    animation: fadeIn 1s  ease-out 7s 1 normal forwards;
}
.anim .txt_7{
    animation: anim_txt_offres_top 1s  ease-out 8.2s 1 normal forwards;
}
.anim .txt_8{
    animation: anim_txt_offres_top 1s  ease-out 8.4s 1 normal forwards;
}
.anim .txt_9{
    animation: fadeIn 0.8s  ease-out 9s 1 normal forwards;
}
.anim .cta{
    animation: fadeIn 0.8s  ease-out 9s 1 normal forwards;
}

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


@keyframes anim_txt_offres {
    0% {
        animation-timing-function: cubic-bezier(.1,.99,.67,1);
        opacity:  0; 
        transform: translate3d(0px, 12px, 0px); 
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px); 
    }
}
@keyframes anim_txt_offres_top {
    0% {
        animation-timing-function: cubic-bezier(.1,.99,.67,1);
        opacity:  0; 
        transform: translate3d(0px, 10px, 0px); 
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px); 
    }
}
@keyframes anim_txt_offres_bottom {
    0% {
        animation-timing-function: cubic-bezier(.1,.99,.67,1);
        opacity:  0; 
        transform: translate3d(0px, -10px, 0px); 
    } 
    100% {  
        opacity: 1; 
        transform: translate3d(0px, 0px, 0px); 
    }
}