/* Created on : 4 mars 2015, 10:39:43 
   Author  : Houx */

/* Conteneur */
#galeryBiE img{ width: auto; }
.defile { margin: 0; padding: 0; }
.defile140 > div{ height: 140px; } .defile160 > div{ height: 160px; } .defile180 > div{ height: 180px; }
.defile200 > div{ height: 200px; } .defile2x > div, .defile2x #galeryBiE{ width: 200%; } .defile300 > div{ height: 300px; } .defile3x > div, .defile3x #galeryBiE{ width: 300%; }
.defile400 > div{ height: 400px; } .defile4x > div, .defile4x #galeryBiE{ width: 400%; } .defile500 > div{ height: 500px; } .defile5x > div, .defile5x #galeryBiE{ width: 500%; }
.defile600 > div{ height: 600px; } .defile6x > div, .defile6x #galeryBiE{ width: 600%; }

.defile ol, .defile ul { margin: 0; padding: 0; height: 100%; padding-top: 5px; padding-bottom: 5px; }
.defileadapth li, .defileadapth img, .defileadapth #galeryBiE img, .defileadapth video, .defileadapth #galeryBiE video { height: 100%; width: auto;}

.defile li { display: inline-block; height: 100%; min-width: 100px; margin: 0 10px 0 10px; }

.defile3x > div { -webkit-animation-name: AutoSlideMoveX3; animation-name: AutoSlideMoveX3; }
.defile3x > div:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }


/* Sous-Conteneur extensible*/
#coconDefile, #coconDefileFixe{ margin: 0; padding: 0; height: 100%; }

.nb3{ /*100% multiplié par Nombre de Slide */ /* Choisir type SLIDE */
    width: 300%; -webkit-animation-name: AutoSlideMoveV3; animation-name: AutoSlideMoveV3;
}
.nb4{ width: 400%; -webkit-animation-name: AutoSlideMoveV4; animation-name: AutoSlideMoveV4; }
.nb5{ width: 500%; -webkit-animation-name: AutoSlideMoveV5; animation-name: AutoSlideMoveV5; }
.nb6{ width: 600%; -webkit-animation-name: AutoSlideMoveV6; animation-name: AutoSlideMoveV6; }

#coconDefileFixe{ width: 100%; -webkit-animation-name: AutoSlideFixe; animation-name: AutoSlideFixe; }

/* Liste média */
.defile .nb3 li { width: 33%; /* 100% divisé par Nombre de Slide */ }
.defile .nb4 li { width: 25%; }
.defile .nb5 li { width: 20%; }
.defile .nb6 li { width: 17%; }

#coconDefileFixe li { position: relative; display: block; width: 100%; left:0; float: none; }
#coconDefileFixe li:first-child { top: 0; }
#coconDefileFixe li:nth-child(2){ top: -100%; }
#coconDefileFixe li:nth-child(3){ top: -200%; }
#coconDefileFixe li:nth-child(4){ top: -300%; }
#coconDefileFixe li:nth-child(5){ top: -400%; }
#coconDefileFixe li:nth-child(6){ top: -500%; }

/* Conteneur média */
.defile li div{ width: 100%; height: 100%; margin: 0; padding: 0; }
/* Média image */
.defile li div img{ display: block; margin: auto; }

@media (max-width: 1200px) { .defile li div img{  max-width: 100%; } }
 
.defile .nb3 li:first-child{ -webkit-animation-name: DefileLi31; animation-name: DefileLi31; }
.defile .nb3 li:nth-child(2){ -webkit-animation-name: DefileLi32; animation-name: DefileLi32; }
.defile .nb3 li:nth-child(3){ -webkit-animation-name: DefileLi33; animation-name: DefileLi33; }

.defile .nb5 li:first-child{ -webkit-animation-name: DefileLi51; animation-name: DefileLi51; }
.defile .nb5 li:nth-child(2){ -webkit-animation-name: DefileLi52; animation-name: DefileLi52; }
.defile .nb5 li:nth-child(3){ -webkit-animation-name: DefileLi53; animation-name: DefileLi53; }
.defile .nb5 li:nth-child(4){ -webkit-animation-name: DefileLi54; animation-name: DefileLi54; }
.defile .nb5 li:nth-child(5){ -webkit-animation-name: DefileLi55; animation-name: DefileLi55; }

/* Fonctions */
@-webkit-keyframes AutoSlideFixe {
}
@keyframes AutoSlideFixe {
}

@-webkit-keyframes AutoSlideMoveX3 {
 0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -199%; }
 60% { margin-left: -199%; } 100% { margin-left: 0px; }
}
@keyframes AutoSlideMoveX3 {
 0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -199%; }
 60% { margin-left: -199%; } 100% { margin-left: 0px; }
}

@media (max-width: 1200px)
{
    .defile2x > div, .defile2x #galeryBiE{ width: 300%; }
    .defile3x > div, .defile3x #galeryBiE{ width: 400%; }
    .defile4x > div, .defile4x #galeryBiE{ width: 500%; }
    .defile5x > div, .defile5x #galeryBiE{ width: 600%; }
    .defile6x > div, .defile6x #galeryBiE{ width: 700%; }
    @-webkit-keyframes AutoSlideMoveX3 {
    0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -299%; }
    60% { margin-left: -299%; } 100% { margin-left: 0px; }
    }
    @keyframes AutoSlideMoveX3 {
    0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -299%; }
    60% { margin-left: -299%; } 100% { margin-left: 0px; }
    }
}
@media (max-width: 850px)
{
    .defile2x > div, .defile2x #galeryBiE{ width: 600%; }
    .defile3x > div, .defile3x #galeryBiE{ width: 700%; }
    .defile4x > div, .defile4x #galeryBiE{ width: 800%; }
    .defile5x > div, .defile5x #galeryBiE{ width: 900%; }
    .defile6x > div, .defile6x #galeryBiE{ width: 1000%; }
    @-webkit-keyframes AutoSlideMoveX3 {
    0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -599%; }
    60% { margin-left: -599%; } 100% { margin-left: 0px; }
    }
    @keyframes AutoSlideMoveX3 {
    0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -599%; }
    60% { margin-left: -599%; } 100% { margin-left: 0px; }
    }
}
@media (max-width: 600px)
{
    .defile140 > div{ height: 280px; } 
    .defile160 > div{ height: 320px; } 
    .defile180 > div{ height: 360px; }
    .defileadapth li { height: 45%; width: auto;}

    @-webkit-keyframes AutoSlideMoveX3 {
    0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -585%; }
    60% { margin-left: -585%; } 100% { margin-left: 0px; }
    }
    @keyframes AutoSlideMoveX3 {
    0% { margin-left: 0px; } 5% { margin-left: 0px; } 50% { margin-left: -585%; }
    60% { margin-left: -585%; } 100% { margin-left: 0px; }
    }
}

@-webkit-keyframes AutoSlideMoveV3 {
 0% { margin-left: 0px; } 28% { margin-left: 0px; } 30% { margin-left: -99%; }
 58% { margin-left: -99%; } 60% { margin-left: -198%; } 88% { margin-left: -198%; }
 100% { margin-left: 0px; }
}
@keyframes AutoSlideMoveV3 {
 0% { margin-left: 0px; } 28% { margin-left: 0px; } 30% { margin-left: -99%; }
 58% { margin-left: -99%; } 60% { margin-left: -198%; } 88% { margin-left: -198%; }
 100% { margin-left: 0px; }
}

@-webkit-keyframes AutoSlideMoveV5 {
    0% {  margin-left: 0px; }    15% {  margin-left: 0px; }
    20% {  margin-left: -100%; }    35% {  margin-left: -100%; }
    40% {  margin-left: -200%; }    55% {  margin-left: -200%; }
    60% {  margin-left: -300%; }    75% {  margin-left: -300%; }
    80% {  margin-left: -400%; }    95% {  margin-left: -400%; }
    100% {  margin-left: 0px; }
}
@keyframes AutoSlideMoveV5 {
    0% {  margin-left: 0px; }    15% {  margin-left: 0px; }
    20% {  margin-left: -100%; }    35% {  margin-left: -100%; }
    40% {  margin-left: -200%; }    55% {  margin-left: -200%; }
    60% {  margin-left: -300%; }    75% {  margin-left: -300%; }
    80% {  margin-left: -400%; }    95% {  margin-left: -400%; }
    100% {  margin-left: 0px; }
}

@-webkit-keyframes DefileLi31 {
 0% {  opacity: 1; } 25% {  opacity: 1; } 30% {  opacity: 0; } 85% {  opacity: 0; }
 100% {  opacity: 1; }
}
@keyframes DefileLi31 {
 0% {  opacity: 1; } 25% {  opacity: 1; } 30% {  opacity: 0; } 85% {  opacity: 0; }
 100% {  opacity: 1; }
}

@-webkit-keyframes DefileLi32 {
 0% {  opacity: 0; } 25% {  opacity: 0; } 30% {  opacity: 1; } 55% {  opacity: 1; }
 60% {  opacity: 0; } 85% {  opacity: 0; } 95% {  opacity: 1; } 100% {  opacity: 0; }
}
@keyframes DefileLi32 {
 0% {  opacity: 0; } 25% {  opacity: 0; } 30% {  opacity: 1; } 55% {  opacity: 1; }
 60% {  opacity: 0; } 85% {  opacity: 0; } 95% {  opacity: 1; } 100% {  opacity: 0; }
}

@-webkit-keyframes DefileLi33 {
 0% {  opacity: 0; } 55% {  opacity: 0; } 60% {  opacity: 1; }
 85% {  opacity: 1; } 100% {  opacity: 0; }
}
@keyframes DefileLi33 {
 0% {  opacity: 0; } 55% {  opacity: 0; } 60% {  opacity: 1; }
 85% {  opacity: 1; } 100% {  opacity: 0; }
}

@-webkit-keyframes DefileLi51 {
 0% {  opacity: 1; } 15% {  opacity: 1; } 20% {  opacity: 0; }
 98% {  opacity: 0; } 100% {  opacity: 1; }
}
@keyframes DefileLi51 {
 0% {  opacity: 1; } 15% {  opacity: 1; } 20% {  opacity: 0; }
 98% {  opacity: 0; } 100% {  opacity: 1; }
}

@-webkit-keyframes DefileLi52 {
 0% {  opacity: 0; } 15% {  opacity: 0; } 20% {  opacity: 1; }
 35% {  opacity: 1; } 40% {  opacity: 0; } 100% {  opacity: 0; }
}
@keyframes DefileLi52 {
 0% {  opacity: 0; } 15% {  opacity: 0; } 20% {  opacity: 1; }
 35% {  opacity: 1; } 40% {  opacity: 0; } 100% {  opacity: 0; }
}

@-webkit-keyframes DefileLi53 {
 0% {  opacity: 0; } 35% {  opacity: 0; } 40% {  opacity: 1; }
 55% {  opacity: 1; } 60% {  opacity: 0; } 100% {  opacity: 0; }
}
@keyframes DefileLi53 {
 0% {  opacity: 0; } 35% {  opacity: 0; } 40% {  opacity: 1; }
 55% {  opacity: 1; } 60% {  opacity: 0; } 100% {  opacity: 0; }
}

@-webkit-keyframes DefileLi54 {
 0% {  opacity: 0; } 55% {  opacity: 0; } 60% {  opacity: 1; } 
 75% {  opacity: 1; } 80% {  opacity: 0; } 100% {  opacity: 0; }
}
@keyframes DefileLi54 {
 0% {  opacity: 0; } 55% {  opacity: 0; } 60% {  opacity: 1; } 
 75% {  opacity: 1; } 80% {  opacity: 0; } 100% {  opacity: 0; }
}

@-webkit-keyframes DefileLi55 {
 0% {  opacity: 0; } 75% {  opacity: 0; } 80% {  opacity: 1; } 
 95% {  opacity: 1; } 100% {  opacity: 0; }
}
@keyframes DefileLi55 {
 0% {  opacity: 0; } 75% {  opacity: 0; } 80% {  opacity: 1; } 
 95% {  opacity: 1; } 100% {  opacity: 0; }
}