@font-face {
    font-family:'ebrima';
    src:url("../fonts/ebrima.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
} 
*{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
}

.container{
	display: block;
	width: 160px;
	height: 600;
	background: url('../img/bg.jpg');
}

.logo{
    width: 160px;
    display: block;
    height: 55px;
    background: url('../img/logo.png') no-repeat 7px 10px;
    -webkit-animation-name: logo; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: logo;
    animation-duration: 1.5s;
}

@-webkit-keyframes logo {
    from {background-position: -150px 10px}
    to {background-position: 7px 10px;}
}

/* Standard syntax */
@keyframes logo {
    from {background-position: -150px 10px}
    to {background-position: 7px 10px;}
}

.text-description{
	color: white;
	font-size: 15px;
	font-family: 'ebrima';
	font-weight: bold;
	text-align: center;
	padding-top:11px;
}
.info-pull{
	display: block;
	margin-top: 17px;
	width:154px ;
	height:113px ;
	background: url('../img/la-bulle.png') no-repeat;
}
.reda{
	display: block;
    width: 148px;
    height: 323px;
    background: url('../img/reda.png') no-repeat;
    background-position: 8px -14px;
    -webkit-animation-name: reda; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
    animation-name: reda;
    animation-duration: 1.5s;
}

@-webkit-keyframes reda {
    from {background-position: 8px 325px;}
    to {background-position: 8px -14px;}
}

/* Standard syntax */
@keyframes reda {
    from {background-position: 8px 325px;}
    to {background-position: 8px -14px;}
}