html {
    background-color: white;
}

body {
    padding: 0;
    margin: 0;
    width: 300px;
    height: 250px;
    overflow: hidden;
    background: rgba(126, 181, 221, 1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(126, 181, 221, 1) 0%, rgba(126, 181, 221, 1) 60%, rgba(110, 168, 204, 1) 77%, rgba(39, 104, 139, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(126, 181, 221, 1)), color-stop(60%, rgba(126, 181, 221, 1)), color-stop(77%, rgba(110, 168, 204, 1)), color-stop(100%, rgba(39, 104, 139, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(126, 181, 221, 1) 0%, rgba(126, 181, 221, 1) 60%, rgba(110, 168, 204, 1) 77%, rgba(39, 104, 139, 1) 100%);
    background: -webkit-radial-gradient(center ellipse, rgba(126, 181, 221, 1) 0%, rgba(126, 181, 221, 1) 60%, rgba(110, 168, 204, 1) 77%, rgba(39, 104, 139, 1) 100%);
    background: -moz-radial-gradient(center ellipse, rgba(126, 181, 221, 1) 0%, rgba(126, 181, 221, 1) 60%, rgba(110, 168, 204, 1) 77%, rgba(39, 104, 139, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(126, 181, 221, 1) 0%, rgba(126, 181, 221, 1) 60%, rgba(110, 168, 204, 1) 77%, rgba(39, 104, 139, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7eb5dd', endColorstr='#27688b', GradientType=1);
    cursor: pointer;
}

.container {
    position: absolute;
    border: 1px solid black;
    width: 298px;
    height: 248px;
    overflow: hidden;
}

.txt1 {
    position: absolute;
    top: 61px;
    left: -250px;
    z-index: 2;
    animation: slide 0.5s 0.5s ease forwards, slide 0.5s 5.2s ease reverse forwards;
    -webkit-animation: slide 0.5s 0.5s ease forwards, slideReverse 0.5s 5.2s ease forwards;
    -moz-animation: slide 0.5s 0.5s ease forwards, slide 0.5s 5.2s ease reverse forwards;
    -ms-animation: slide 0.5s 0.5s ease forwards, slideReverse 0.5s 5.2s ease forwards;
}

@-webkit-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-ms-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@-webkit-keyframes unfade {
    to {
        opacity: 0;
    }
    from {
        opacity: 1;
    }
}

@-moz-keyframes unfade {
    to {
        opacity: 0;
    }
    from {
        opacity: 1;
    }
}

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

.logo {
    position: absolute;
    left: 59px;
    top: 16px;
    opacity: 0;
    -webkit-animation: fade 0.5s 10s ease forwards;
    -moz-animation: fade 0.5s 10s ease forwards;
    animation: fade 0.5s 10s ease forwards;
}

.logoFirst {
    opacity: 0;
    -webkit-animation: fade 1s 1.5s ease forwards;
    -moz-animation: fade 1s 1.5s ease forwards;
    animation: fade 1s 1.5s ease forwards;
}

.avion {
    position: absolute;
    top: 210px;
    left: -100px;
    opacity: 1;
    -webkit-animation: avion 1s 1s cubic-bezier(.23, .28, .25, 1) forwards, unfade 1s 4s ease forwards;
    -moz-animation: avion 1s 1s cubic-bezier(.23, .28, .25, 1) forwards, unfade 1s 4s ease forwards;
    animation: avion 1s 1s cubic-bezier(.23, .28, .25, 1) forwards, unfade 1s 4s ease forwards;
}

.slide1 {
    opacity: 1;
    animation: unfade 1s 4s ease forwards;
}

@-webkit-keyframes avion {
    from {
        top: 210px;
        left: 10px;
    }
    to {
        top: 0;
        left: 157px;
    }
}

@-moz-keyframes avion {
    from {
        top: 210px;
        left: 10px;
    }
    to {
        top: 0;
        left: 157px;
    }
}

@keyframes avion {
    from {
        top: 210px;
        left: 10px;
    }
    to {
        top: 0;
        left: 157px;
    }
}

.nb {
    position: absolute;
    top: 26px;
    left: -250px;
    opacity: 1;
    -webkit-animation: slide 0.5s 4.5s ease forwards, slideReverse 0.5s 9.5s ease forwards;
    -moz-animation: slide 0.5s 4.5s ease forwards, slideReverse 0.5s 9.5s ease forwards;
    animation: slide 0.5s 4.5s ease forwards, slideReverse 0.5s 9.5s ease forwards;
}

.txt {
    position: absolute;
    top: 86px;
    left: 300px;
    opacity: 1;
    -webkit-animation: slide2 0.5s 5s ease forwards, slideReverse2 0.5s 9.5s ease forwards;
    -moz-animation: slide2 0.5s 5s ease forwards, slideReverse2 0.5s 9.5s ease forwards;
    animation: slide2 0.5s 5s ease forwards, slideReverse2 0.5s 9.5s ease forwards;
}

.pbtn {
    position: absolute;
    top: 162px;
    left: 53px;
    opacity: 0;
    -webkit-animation: up 0.5s 5.5s ease forwards, upreverse 0.5s 9.5s ease forwards;
    -moz-animation: up 0.5s 5.5s ease forwards, upreverse 0.5s 9.5s ease forwards;
    animation: up 0.5s 5.5s ease forwards, upreverse 0.5s 9.5s ease forwards;
}

@-webkit-keyframes slide {
    from {
        left: -250px;
    }
    to {
        left: 33px;
    }
}

@-webkit-keyframes slideReverse {
    from {
        opacity: 1;
        left: 33px;
    }
    to {
        opacity: 0;
        left: 300px;
    }
}

@-ms-keyframes slideReverse {
    from {
        opacity: 1;
        left: 33px;
    }
    to {
        opacity: 0;
        left: 300px;
    }
}

@keyframes slideReverse {
    from {
        opacity: 1;
        left: 33px;
    }
    to {
        opacity: 0;
        left: 300px;
    }
}

@-webkit-keyframes slideReverse2 {
    from {
        opacity: 1;
        left: 24px;
    }
    to {
        opacity: 0;
        left: -250px;
    }
}

@-moz-keyframes slideReverse2 {
    from {
        opacity: 1;
        left: 24px;
    }
    to {
        opacity: 0;
        left: -250px;
    }
}

@keyframes slideReverse2 {
    from {
        opacity: 1;
        left: 24px;
    }
    to {
        opacity: 0;
        left: -250px;
    }
}

@-ms-keyframes slide {
    from {
        left: -250px;
    }
    to {
        left: 33px;
    }
}

@-moz-keyframes slide {
    from {
        left: -250px;
    }
    to {
        left: 33px;
    }
}

@keyframes slide {
    from {
        left: -250px;
    }
    to {
        left: 33px;
    }
}

@-webkit-keyframes slide2 {
    from {
        left: 300px;
    }
    to {
        left: 24px;
    }
}

@-moz-keyframes slide2 {
    from {
        left: 300px;
    }
    to {
        left: 24px;
    }
}

@keyframes slide2 {
    from {
        left: 300px;
    }
    to {
        left: 24px;
    }
}

@-webkit-keyframes up {
    from {
        opacity: 0;
        top: 220px;
    }
    to {
        opacity: 1;
        top: 162px;
    }
}

@-moz-keyframes up {
    from {
        opacity: 0;
        top: 220px;
    }
    to {
        opacity: 1;
        top: 162px;
    }
}

@keyframes up {
    from {
        opacity: 0;
        top: 220px;
    }
    to {
        opacity: 1;
        top: 162px;
    }
}

@keyframes upreverse {
    to {
        opacity: 0;
        top: 220px;
    }
    from {
        opacity: 1;
        top: 162px;
    }
}

.cartouche {
    position: absolute;
    left: 37px;
    top: 51px;
    width: 214px;
    height: 0px;
    background-color: #fff;
    -webkit-animation: animblox 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
    -moz-animation: animblox 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
    animation: animblox 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
}

@keyframes animblox {
    0% {
        height: 0px;
    }
    100% {
        height: 136px;
    }
}

@-webkit-keyframes animblox {
    0% {
        height: 0px;
    }
    100% {
        height: 136px;
    }
}

@-moz-keyframes animblox {
    0% {
        height: 0px;
    }
    100% {
        height: 136px;
    }
}

@-ms-keyframes animblox {
    0% {
        height: 0px;
    }
    100% {
        height: 136px;
    }
}

@keyframes animblox2 {
    0% {
        height: 0px;
    }
    100% {
        height: auto;
    }
}

@-webkit-keyframes animblox2 {
    0% {
        height: 122px;
        -webkit-transform: scaleY(0);
    }
    100% {
        height: 122px;
        -webkit-transform: scaleY(1);
    }
}

@-moz-keyframes animblox2 {
    0% {
        height: 0px;
    }
    100% {
        height: auto;
    }
}

@-ms-keyframes animblox2 {
    0% {
        height: 0px;
    }
    100% {
        height: auto;
    }
}

@-moz-keyframes animblox21 {
    0% {
        height: 122px;
        transform: scaleY(0);
    }
    100% {
        height: 122px;
        transform: scaleY(1);
    }
}

@-ms-keyframes animblox21 {
    0% {
        height: 122px;
        transform: scaleY(0);
    }
    100% {
        height: 122px;
        transform: scaleY(1);
    }
}

.rect {
    position: absolute;
    left: 6px;
    top: 7px;
    transform-origin: center top;
    height: 0;
    animation: animblox2 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
    -webkit-animation: animblox2 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
    -moz-animation: animblox21 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
    -ms-animation: animblox21 0.3s cubic-bezier(.42, 0, .38, 1.37) 10.5s forwards;
}

.place {
    position: absolute;
    top: 57px;
    left: 45px;
    opacity: 0;
    -webkit-animation: fade 0.5s 11.4s ease forwards;
    -moz-animation: fade 0.5s 11.4s ease forwards;
    -ms-animation: fade 0.5s 11.4s ease forwards;
    animation: fade 0.5s 11.4s ease forwards;
}

@keyframes border {
    0% {
        transform: scaleX(0.0001);
    }
    100% {
        transform: scaleX(1);
    }
}

@-webkit-keyframes border {
    0% {
        -webkit-transform: scaleX(0.0001);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

@-moz-keyframes border {
    0% {
        -moz-transform: scaleX(0.0001);
    }
    100% {
        -moz-transform: scaleX(1);
    }
}

@-ms-keyframes border {
    0% {
        -ms-transform: scaleX(0.0001);
    }
    100% {
        -ms-transform: scaleX(1);
    }
}

.price {
    position: absolute;
    top: 72px;
    left: 46px;
    opacity: 0;
    -webkit-animation: fade 0.5s 11.7s ease forwards;
    -moz-animation: fade 0.5s 11.7s ease forwards;
    -ms-animation: fade 0.5s 11.7s ease forwards;
    animation: fade 0.5s 11.7s ease forwards;
}

.descrip {
    position: absolute;
    top: 104px;
    left: 38px;
    opacity: 0;
    -webkit-animation: fade 0.5s 12s ease forwards;
    -moz-animation: fade 0.5s 12s ease forwards;
    -ms-animation: fade 0.5s 12s ease forwards;
    animation: fade 0.5s 12s ease forwards;
}

.button {
    position: absolute;
    overflow: hidden;
    left: 87px;
    top: 260px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    animation: movebutton 0.3s 12.5s cubic-bezier(.25, .1, .35, 1.31) forwards, scalebutton 0.5s 14.2s cubic-bezier(.25, .1, .35, 1.31) forwards;
    -webkit-animation: movebutton 0.3s 12.5s cubic-bezier(.25, .1, .35, 1.31) forwards, scalebutton 0.5s 14.2s cubic-bezier(.25, .1, .35, 1.31) forwards;
    -moz-animation: movebutton 0.3s 12.5s cubic-bezier(.25, .1, .35, 1.31) forwards, scalebutton 0.5s 14.2s cubic-bezier(.25, .1, .35, 1.31) forwards;
    -ms-animation: movebutton 0.3s 12.5s cubic-bezier(.25, .1, .35, 1.31) forwards, scalebutton 0.5s 14.2s cubic-bezier(.25, .1, .35, 1.31) forwards;
}

.arrow {
    position: absolute;
    top: 11.5px;
    left: 98px;
    animation: movemove 0.35s 15.2s ease alternate infinite;
    -webkit-animation: movemove 0.35s 15.2s ease alternate infinite;
    -moz-animation: movemove 0.35s 15.2s ease alternate infinite;
    -ms-animation: movemove 0.35s 15.2s ease alternate infinite;
}

.tac {
    position: absolute;
    bottom: 2px;
    right: 3px;
    opacity: 0;
    -webkit-animation: fade 0.5s 11s ease forwards;
    -moz-animation: fade 0.5s 11s ease forwards;
    animation: fade 0.5s 11s ease forwards;
}

.bandeau {
    position: absolute;
    top: 17px;
    left: 21px;
    opacity: 0;
    -webkit-animation: fade 0.5s 11.1s ease forwards;
    -moz-animation: fade 0.5s 11.1s ease forwards;
    -ms-animation: fade 0.5s 11.1s ease forwards;
    animation: fade 0.5s 11.1s ease forwards;
}

@keyframes movemove {
    from {
        left: 97px;
    }
    to {
        left: 100px;
    }
}

@-webkit-keyframes movemove {
    from {
        left: 97px;
    }
    to {
        left: 100px;
    }
}

@-moz-keyframes movemove {
    from {
        left: 97px;
    }
    to {
        left: 100px;
    }
}

@keyframes movebutton {
    0% {
        top: 260px;
    }
    100% {
        top: 199px;
    }
}

@-webkit-keyframes movebutton {
    0% {
        top: 260px;
    }
    100% {
        top: 199px;
    }
}

@-moz-keyframes movebutton {
    0% {
        top: 260px;
    }
    100% {
        top: 199px;
    }
}

@keyframes scalebutton {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes scalebutton {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes scalebutton {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(0.9);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes scalebutton {
    0% {
        -ms-transform: scale(1);
    }
    50% {
        -ms-transform: scale(0.9);
    }
    100% {
        -ms-transform: scale(1);
    }
}



.arrowbis {
        position: absolute;
    top: 11.5px;
        left: 120px;
    animation: movemove2 0.35s 15.2s ease alternate infinite;
    -webkit-animation: movemove2 0.35s 15.2s ease alternate infinite;
    -moz-animation: movemove2 0.35s 15.2s ease alternate infinite;
    -ms-animation: movemove2 0.35s 15.2s ease alternate infinite;
}
@-webkit-keyframes movemove2 {
    0% {
        left: 120px;
    }
    100% {
        left: 123px;
    }
}
@-moz-keyframes movemove2 {
    0% {
        left: 120px;
    }
    100% {
        left: 123px;
    }
}
@keyframes movemove2 {
    0% {
        left: 120px;
    }
    100% {
        left: 123px;
    }
}

.arrowbisbis {
        position: absolute;
    top: 11.5px;
        left: 135px;
    animation: movemove3 0.35s 15.2s ease alternate infinite;
    -webkit-animation: movemove3 0.35s 15.2s ease alternate infinite;
    -moz-animation: movemove3 0.35s 15.2s ease alternate infinite;
    -ms-animation: movemove3 0.35s 15.2s ease alternate infinite;
}
@-webkit-keyframes movemove3 {
    0% {
    left: 135px;
}
100% {
    left: 138px;
}
}
@-moz-keyframes movemove3 {
    0% {
    left: 135px;
}
100% {
    left: 138px;
}
}
@keyframes movemove3 {
    0% {
    left: 135px;
}
100% {
    left: 138px;
}
}