/*Animations : */

.final-frame{
    display: none;
    transition: infinite;
}

/* Animation des phrases de texte : */

.text-anim-style{
    position: absolute;
    text-align: center;
    color: #000;
    font-family: 'font1', sans-serif;
    font-size: 300%;
    width: 100%;
}

.position-anim-center{
    top: 40%;
}
.position-anim1{
    right: 5%;
    top: 35%;
}
.position-anim2{
    left: 5%;
    top: 50%;
}

@-webkit-keyframes text-anim1{
    0% { -webkit-transform: scale(4); }
    5% { -webkit-transform: scale(1.2); }
    90% { -webkit-transform: scale(1); opacity: 1; }
    100% { -webkit-transform: scale(0); opacity: 0; }
}
@keyframes text-anim1{
    0% { transform: scale(4); }
    5% { transform: scale(1.2); }
    90% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

@-webkit-keyframes text-anim1b{
    0% { -webkit-transform: scale(0); }
    40% { -webkit-transform: scale(0); }
    45% { -webkit-transform: scale(0.8); }
    90% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(4); }
}
@keyframes text-anim1b{
    0% { transform: scale(0); }
    40% { transform: scale(0); }
    45% { transform: scale(0.8); }
    90% { transform: scale(1); }
    100% { transform: scale(4); }
}

.text-anim1{
    -webkit-animation-name: text-anim1;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: text-anim1;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.text-anim1b{
    -webkit-animation-name: text-anim1b;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: text-anim1b;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@-webkit-keyframes text-anim2{
    0% { -webkit-transform: scale(0.1); }
    5% { -webkit-transform: scale(0.8); }
    85% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(4); }
}
@keyframes text-anim2{
    0% { transform: scale(0.1); }
    5% { transform: scale(0.8); }
    85% { transform: scale(1); }
    100% { transform: scale(4); }
}

.text-anim2{
    -webkit-animation-name: text-anim2;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: text-anim2;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@-webkit-keyframes text-anim3{
    0% { -webkit-transform: scale(4) translate(0,-300%); }
    10% { -webkit-transform: scale(1.4) translate(-20%,-200%); }
    95% { -webkit-transform: scale(1) translate(-20%,-200%); }
    100% { -webkit-transform: scale(1) translate(0,0); }
}
@keyframes text-anim3{
    0% { transform: scale(4) translate(0,-300%); }
    10% { transform: scale(1.4) translate(-20%,-200%); }
    95% { transform: scale(1) translate(-20%,-200%); }
    100% { transform: scale(1) translate(0,0); }
}

.text-anim3{
    -webkit-animation-name: text-anim3;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: text-anim3;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@-webkit-keyframes text-anim4{
    0% { -webkit-transform: scale(4) translate(100%,-300%); opacity: 1; }
    10% { -webkit-transform: scale(1.4) translate(0,-200%); opacity: 1; }
    90% { -webkit-transform: scale(1) translate(-20%,-200%); opacity: 1; }
    100% { -webkit-transform: scale(1) translate(-20%,-200%); opacity: 0; }
}
@keyframes text-anim4{
    0% { transform: scale(4) translate(100%,-300%); opacity: 1; }
    10% { transform: scale(1.4) translate(0,-200%); opacity: 1; }
    90% { transform: scale(1) translate(-20%,-200%); opacity: 1; }
    100% { transform: scale(1) translate(-20%,-200%); opacity: 0; }
}

.text-anim4{
    -webkit-animation-name: text-anim4;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: text-anim4;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

/*********************************/

/* Rotation autour d'un axe : */

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Les composants utilisant l'animation rotation : */

.spin{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 25000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 25000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/*********************************/

/* Déplacement hors de l'écran côté droit vers position
spécifiée (de droite à gauche) : */

@-webkit-keyframes moveLTR1 {
    0% { -webkit-transform: translate(-200%, 0px); }
    95% { -webkit-transform: translate(-200%, 0px); }
    100% { -webkit-transform: translate(0px, 0px); }
}
@keyframes moveLTR1 {
    0% { transform: translate(-200%, 0px); }
    95% { transform: translate(-200%, 0px); }
    100% { transform: translate(0px, 0px); }
}

@-webkit-keyframes moveLTR2 {
    0% { -webkit-transform: translate(-300%, 0px); }
    95% { -webkit-transform: translate(-300%, 0px); }
    100% { -webkit-transform: translate(0px, 0px); }
}
@keyframes moveLTR2 {
    0% { transform: translate(-300%, 0px); }
    95% { transform: translate(-300%, 0px); }
    100% { transform: translate(0px, 0px); }
}

@-webkit-keyframes moveLTR {
    0% { background-position: 0 0; }
    /*50.999% { background-position: 100% 0; }*/
    51% { background-position: -100% 0; }
    100% { background-position: 0 0; }
}

@keyframes moveLTR {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(0px, 0px); }
}

/* Les composants utilisant l'animation de déplacement vers la droite : */

.move-ltr-1 {
    -webkit-animation-name: moveLTR1;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: moveLTR1;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.move-ltr-2 {
    -webkit-animation-name: moveLTR2;
    -webkit-animation-duration: 4.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: moveLTR2;
    animation-duration: 4.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.moveLTR{
    -webkit-animation-name: moveLTR;
    -webkit-animation-duration: 30000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    animation-name: moveLTR;
    animation-duration: 30000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/*********************************/

/* Animation de l'avion : */

@-webkit-keyframes moveTR {
    0% {  -webkit-transform: translate(-700%, 500%); }
    100% {  -webkit-transform: translate(0,0); }
}
@keyframes moveTR {
    0% {  transform: translate(-700%, 500%); }
    100% {  transform: translate(0,0); }
}

/* Les composants utilisant l'animation de déplacement vers la droite : */

.move-tr {
    -webkit-animation-name: moveTR;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: moveTR;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

/*********************************/

/* Animation d'opacité de 0 à 100% : */

@-webkit-keyframes show {
    0% { opacity: 0; }
    85% { opacity: 0 }
    100% { opacity: 1; }
}
@keyframes show {
    0% { opacity: 0; }
    85% { opacity: 0 }
    100% { opacity: 1; }
}

.show{
    -webkit-animation-name: show;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: show;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

/*********************************/

/* Animations des vignettes de #block-photos : */

.item-block-photos:hover .header-img.animate{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.item-block-photos .header-img.animate{
    background-color: #fff;
    background-size: 90%;
    width: 100%;
    height: 100%;
    top: 100%;
    /*left: 50%;*/
    left: 0;
    transition: all .7s;
}