@font-face {
    font-family: proxyma;
    src: url(Proxima-Nova-Alt-Extrabold.otf)/*, url(FuturaLT-CondensedBold.ttf)*/;
}

#clickArea {display:block;width:300px;height:250px;text-decoration:none;}
#banner {width:300px;height:250px;overflow:hidden;position:relative;background-color:transparent;opacity:0;}

#txt1, #txt2, #txt3, #txt4 {font-family:'proxyma', sans-serif;}
#txt1 {position:absolute;z-index:6;top:40px;left:0;width:300px;height:210px;font-size:25px;line-height:30px;color:#fff;text-align:center;opacity:0;}
#txt2 {position:absolute;z-index:6;top:30px;left:0;width:300px;height:70px;font-size:25px;line-height:28px;color:#fff;text-align:center;opacity:0;}
#txt3 {position:absolute;z-index:6;top:30px;left:0;width:300px;height:70px;font-size:25px;line-height:32px;color:#fff;text-align:center;}
#txt4 {position:absolute;z-index:6;top:194px;left:0;width:300px;height:70px;font-size:14px;line-height:18px;color:#fff;text-align:center;}
#btn {position:absolute;z-index:6;top:153px;left:76px;width:145px;height:35px;background:url('btn.png') no-repeat;}
#logo {position:absolute;z-index:7;top:40px;left:35px;width:234px;height:196px;background:url('logo.png') no-repeat;opacity:0;}
#visuel {position:absolute;z-index:0;width:300px;height:250px;background:url('visuel.jpg') no-repeat;}
#fond_bleu {position:absolute;z-index:5;top:0;left:0;width:300px;height:300px;background:url('fond_bleu.png') no-repeat;}
#fond_blanc {position:absolute;z-index:6;top:-250px;left:0;width:300px;height:250px;background-color:#fff;}
#contour {position:absolute;z-index:8;top:0px;left:0px;width:298px;height:248px;border:solid 1px #505050;}

/******************************************** ANIMATIONS ***********************************************/
#fond_bleu {-webkit-animation-name:fond_bleu-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes fond_bleu-slide {
	0% { opacity:1; }
	12% { opacity:1; top:0px;}
	14% { opacity:1; top:-200px; }
	23% { opacity:1; top:-200px; }
	25% { opacity:1; top:0px; }
	/************* 2 ************/
	69% { opacity:1; top:0px;}
	71% { opacity:1; top:-200px; }
	80% { opacity:1; top:-200px; }
	82% { opacity:1; top:0px; }
	100% { opacity:1; top:0px; }
}

#txt1 {-webkit-animation-name:txt1-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes txt1-slide {
	0% { opacity:0; }
	1% { opacity:0; }
	3% { opacity:1; }
	11% { opacity:1; }
	13% { opacity:0; }
	/************* 2 ************/
	58% { opacity:0; }
	60% { opacity:1; }
	68% { opacity:1; }
	70% { opacity:0; }
	100% { opacity:0; }
}

#txt2 {-webkit-animation-name:txt2-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes txt2-slide {
	0% { opacity:0; }
	14% { opacity:0; }
	16% { opacity:1; }
	22% { opacity:1; }
	24% { opacity:0; }
	/************* 2 ************/
	71% { opacity:0; }
	73% { opacity:1; }
	79% { opacity:1; }
	81% { opacity:0; }
	100% { opacity:0; }
}

#txt3 {-webkit-animation-name:txt3-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes txt3-slide {
	0% { opacity:0; }
	25% { opacity:0; }
	27% { opacity:1; }
	50% { opacity:1; }
	51% { opacity:0; }
	/************* 2 ************/
	82% { opacity:0; }
	84% { opacity:1; }
	100% { opacity:1; }
}

#txt4 {-webkit-animation-name:txt4-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes txt4-slide {
	0% { opacity:0; }
	25% { opacity:0; }
	27% { opacity:1; }
	50% { opacity:1; }
	51% { opacity:0; }
	/************* 2 ************/
	82% { opacity:0; }
	84% { opacity:1; }
	100% { opacity:1; }
}

#btn {-webkit-animation-name:btn-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes btn-slide {
	0% { opacity:0; }
	25% { opacity:0; }
	27% { opacity:1; }
	50% { opacity:1; }
	51% { opacity:0; }
	/************* 2 ************/
	82% { opacity:0; }
	84% { opacity:1; }
	100% { opacity:1; }
}

#logo {-webkit-animation-name:logo-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes logo-slide {
	0% { opacity:0; }
	41% { opacity:0; }
	43% { opacity:1; }
	53% { opacity:1; }
	55% { opacity:0; }
	100% { opacity:0; }
}

#fond_blanc {-webkit-animation-name:fond_blanc-slide;-webkit-animation-duration:25s;-webkit-animation-iteration-count:1;}
@-webkit-keyframes fond_blanc-slide {
	0% { opacity:1; top:-250px; }
	39% { opacity:1; top:-250px; }
	41% { opacity:1; top:0px; }
	55% { opacity:1; top:0px; }
	57% { opacity:1; top:-250px; }
	100% { opacity:1; top:-250px; }
}