/***************GRILLES*******************/

#grilleHp{
    margin: 11px;
	width: 553px;
	height: 380px;
}

#grilleHp .animat1 a{
    position:relative;
    display:block;
}
#grilleHp .animat1 a:hover{
    position: relative;
    z-index: 99;
}
#grilleHp .animat1:hover{
    z-index: 100;
}
#grilleHp .animat1 {
    float:left;
    border:0 none;
    box-shadow: none;
    position:relative;
    z-index:98;
}

#grilleHp .animat1 img{
    margin-bottom:17px;
    border:0 none;
    z-index:98;
}


/******grille8*******/

.grille8 .animat1 {
    width: 253px;
	height:176px;
	margin: 0px 17px 18px 5px;
}

/******Bloc*******/

/*******animations********/

#grilleHp  .animat1{
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
}

#grilleHp .animat1 {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes flipInX1 {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);

    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);

    }
}
@keyframes flipInX1 {
    0% {
        transform: perspective(400px) rotateX(90deg);

    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
    }
}


@-ms-keyframes flipInX1 {
    0% {
        transform: perspective(400px) rotateX(90deg);

    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
    }
}
#grilleHp .animat1 {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX1;
    backface-visibility: visible !important;
    animation-name: flipInX1;
}

#grilleHp .animat1 a{

    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    display:block;
    z-index: 1;
}
#grilleHp .animat1 a:hover{
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    z-index: 99;
}
#grilleHp .animat1 img:hover{
    z-index:99;
}