body {
    font-family: Arial, sans-serif;
    margin: 0px;
}

#ad {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 300px;
    height: 600px;
    background: #2454a2;
    -moz-user-select:    -moz-none;
    -khtml-user-select:       none;
    -webkit-user-select:      none;
    -ms-user-select:          none;
    user-select:              none;
}

.full {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.smooth {
    -webkit-transition:  all .3s ease-in-out;
    transition:          all .3s ease-in-out;
}

#wrap{
  position: absolute;
  overflow: hidden;
  height: 600px;
  width: 300px;
  background-image: url(fond.png);
}

.bdn{
  background-image: url(bdn_base.png);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .3s ease-in-out;
  transition:         all .3s ease-in-out;      
  opacity: 1;
}

.bdn_travaux{
  background-image: url(bdn_travaux.png);
}

.bdn.blur{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

/*/ ANIM /*/

.bdn.animate{
  -webkit-animation: bdnAnn 3s cubic-bezier(0.000, 0.245, 0.080, 1.000) both; 
          animation: bdnAnn 3s cubic-bezier(0.000, 0.245, 0.080, 1.000) both; 
  
} 
 
  @-webkit-keyframes bdnAnn {
    0%{
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    13%{
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    30% {
      -webkit-transform: scale(.1);
              transform: scale(.1);
      opacity: 0;
    }
    45% {
      -webkit-transform: scale(.1);
              transform: scale(.1);
      opacity: 0;
    }
    65% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    92% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
	  100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0;
    }
  }

  @keyframes bdnAnn {
    0%{
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    13%{
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    30% {
      -webkit-transform: scale(.1);
              transform: scale(.1);
      opacity: 0;
    }
    45% {
      -webkit-transform: scale(.1);
              transform: scale(.1);
      opacity: 0;
    }
    65% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    92% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0;
    }
  }

/*/END TRAVAUX/*/

.txt_1 {
	background-image: url(txt_1.png);
	opacity:0;
	left:-100%;
}
.txt_2 {
	background-image: url(txt_2.png);
	opacity:0;
	left:-100%;
}
.txt_3 {
	background-image: url(txt_3.png);
	opacity:0;
	left:-100%;
}
.txt_4 {
	background-image: url(txt_4.png);
	opacity:0;
	left:-100%;
}
.txt_5 {
	background-image: url(txt_5.png);
	opacity:0;
	left:-100%;
}

.txt_1.animate, .txt_2.animate, .txt_3.animate, .txt_4.animate, .txt_5.animate {
	opacity: 1;
	left:0%;
	-webkit-transition:  all 1s ease-in-out;
	transition:          all 1s ease-in-out;
}

.txt_1.animate_2, .txt_2.animate_2, .txt_3.animate_2, .txt_4.animate_2, .txt_5.animate_2 {
	opacity: 0;
	-webkit-transition:  all 1s ease-in-out;
	transition:          all 1s ease-in-out;
}

.offre_1 {
    background-image: url(offre_1.png);
    opacity:0;
}
.offre_2 {
    background-image: url(offre_2.png);
    opacity:0;
}
.offre_3_bg {
    background-color: #ffae00;
    background: rgb(255,197,81);
    background: -moz-linear-gradient(left,  rgba(255,197,81,1) 0%, rgba(255,174,0,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,197,81,1) 0%,rgba(255,174,0,1) 100%);
    background: linear-gradient(to right,  rgba(255,197,81,1) 0%,rgba(255,174,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc551', endColorstr='#ffae00',GradientType=1 );

    opacity: 0;
}
.offre_3_mask {
    background-image: url(masque.png);
    opacity:0;
}
.shine_large {
    background-image: url(shine_large.png);
    left: -100%;
}

    .shine_large.animate {
        -webkit-transform: translateX(200%);
            -ms-transform: translateX(200%);
                transform: translateX(200%);
        -webkit-transition:  all 2s ease-in-out;
        transition:          all 2s ease-in-out;
    }

.offre_3 {
    background-image: url(offre_3.png);
    opacity:0;
}
.offre_4 {
    background-image: url(offre_4.png);
    opacity:0;
}
.cta {
    background-image: url(cta.png);
    opacity:0;
}
.logo {
    background-image: url(logo.png);
    opacity:0;
}
.offre_1.animate, .offre_2.animate, .offre_3_bg.animate, .offre_3_mask.animate, .offre_3.animate, .offre_4.animate, .logo.animate, .cta.animate {
    opacity: 1;
    -webkit-transition:  all 1s ease-in-out;
    transition:          all 1s ease-in-out;
}

.offre_1.animate_2, .offre_2.animate_2, .offre_3_bg.animate_2, .offre_3_mask.animate_2, .offre_3.animate_2, .offre_4.animate_2, .logo.animate_2, .cta.animate_2 {
    opacity: 0;
    -webkit-transition:  all 1s ease-in-out;
    transition:          all 1s ease-in-out;
}
.footer {
	background-image: url(footer.png);
	opacity:0;
	top:100%;
}
.footer.animate {
	opacity: 1;
	top:0%;
	-webkit-transition:  all 1s ease-in-out;
	transition:          all 1s ease-in-out;
}



.clickthrough {
    border: 1px solid #464646;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing:      border-box;
    -ms-box-sizing:     border-box;
    box-sizing:         border-box;
    cursor: pointer;
}

.ml {
    position: absolute;
	background-color:#ffffff;
    overflow: auto;
    opacity:0;
    border: 1px solid #464646;
    box-sizing:         border-box;
  font-size:10px;
	display:none;
  text-align: justify;
}

.ml.animate {
    -webkit-transition:  all 0.3s ease-in-out;
    transition:          all 0.3s ease-in-out;
    opacity:1;
	display:block;
	padding:14px;
}

.ouvrir {
    position: absolute;
    bottom:0px;
    right:0px;
    display: block;
    width: 72px;
    height: 23px;
    overflow: hidden;
    display:none;
    cursor: pointer;
}
.ouvrir.animate {
    display:block;
}

.fermer {
    position: absolute;
    top:2px;
    right:4px;
    display: block;
    width: 25px;
    height: 20px;
    overflow: hidden;
    display:none;
    cursor: pointer;
	font-size:10px;
}
.shine {
    position: absolute;
    top: 351px;
    left: 49px;
    display: block;
    width: 202px;
    height: 49px;
    overflow:hidden;
    background-image: url("shine.png");
    background-repeat:no-repeat;
    background-position: -180px 0;
    border-radius: 10px;
}


.shine.animate {
    background-position: 180px 0;
    -webkit-transition:  all 1.4s ease-in-out;
    -moz-transition:     all 1.4s ease-in-out;
    -ms-transition:      all 1.4s ease-in-out;
    -o-transition:       all 1.4s ease-in-out;
    transition:          all 1.4s ease-in-out;
}



/*
  *************************
  SNOW
  *************************
*/


.snow_x.animate {
    -webkit-animation:  snow_x 9s ease-in-out;
    animation:          snow_x 9s ease-in-out;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
} 

    @-webkit-keyframes snow_x {
        0%   {
            -webkit-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                    transform: translateX(-50px);
        }
        33% {
            -webkit-transform: translateX(50px);
                -ms-transform: translateX(50px);
                    transform: translateX(50px);
        }
        66% {
            -webkit-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                    transform: translateX(-50px);
        }
        100% {
            -webkit-transform: translateX(50px);
                -ms-transform: translateX(50px);
                    transform: translateX(50px);
        }
    }

    @keyframes snow_x {
        0%   {
            -webkit-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                    transform: translateX(-50px);
        }
        33% {
            -webkit-transform: translateX(50px);
                -ms-transform: translateX(50px);
                    transform: translateX(50px);
        }
        66% {
            -webkit-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                    transform: translateX(-50px);
        }
        100% {
            -webkit-transform: translateX(50px);
                -ms-transform: translateX(50px);
                    transform: translateX(50px);
        }
    }

.snow_y, .snow_y_2 {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}

.snow_y.animate {
    -webkit-animation:  snow_y 9s linear;
    animation:          snow_y 9s linear;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
} 

.snow_y_2.animate {
    -webkit-animation:  snow_y 9s linear;
    animation:          snow_y 9s linear;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
} 

    @-webkit-keyframes snow_y {
        0%   {
            -webkit-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
        100% {
            -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                    transform: translateY(0);
        }
    }

    @keyframes snow_y {
        0%   {
            -webkit-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
        100% {
            -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                    transform: translateY(0);
        }
    }

.snow {
    background-image: url(neige.png);
    background-repeat: repeat; 
    width: 200%;
    height: 200%;
    left: -50%;
}

    .snow.animate {
        -webkit-transition:  all 2s ease-in-out;
        transition:          all 2s ease-in-out;
        opacity: 0;
    }

.snow_2 {
    background-image: url(neige.png);
    background-repeat: repeat-x; 
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
    width: 200%;
    left: -50%;
}

    .snow_2.animate {
        -webkit-transition:  all 2s ease-in-out;
        transition:          all 2s ease-in-out;
        opacity: 0;
    }

strong {
    font-weight: bold;
    font-size: 14px;
}