/*Animation*/
#technologies{
/*
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;
*/
}

#centre .wrapperanim{
    width: 510px;
    height: 510px;
    border-radius: 255px;
    margin: auto;
    overflow: hidden;
    position: relative;
    z-index:10;
}

.megadivanim{
    width: 9280px;
    height: 515px;
    text-align: left;
    background: #e06746;
    position: absolute;
/*    opacity: 0.3;*/
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    z-index: 1;
}

.animationslide{
    -webkit-animation: animDefilement 50.4s 1 linear;
    -moz-animation: animDefilement 50.4s 1 linear;
    -o-animation: animDefilement 50.4s 1 linear;
    animation: animDefilement 50.4s 1 linear;
    opacity: 1;
}

.megadivanim svg{
    display: inline-block;
    width: 515px;
    height: 515px;
}

.cercleanim{
    position: absolute;
    top: 4%;
    left: 4%;
    width: 470px;
    height: 470px;
    opacity: 0.6;
    border-radius: 250px;
    background: #fff;
    z-index: 2;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.cercleanim:hover{
    opacity: 0.7;
}

.startanim{
    position: absolute;
/*    top: 215px;
    left: 400px;*/
    height: 80px;
    width: 80px;
    top: 44%;
    left: 40%;
    background: #ffa14d;
    -webkit-animation: animstart 1s infinite linear;
    -moz-animation: animstart 1s infinite linear;
    -o-animation: animstart 1s infinite linear;
    animation: animstart 1s infinite linear;
    cursor: pointer;
    border-radius: 40px;
    z-index: 2;
}

.triangleanim{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 40px;
    border-color: transparent transparent transparent #fff;
    left: 25px;
    position: absolute;
    top: 15px;
}

.divstartanim{
    visibility: visible;
    cursor: pointer;
}

.simplifica {
    font-family: "Arial";font-size: 110%;
}
.megadivanim {
    text-align: left;
}

#centre  .animbehind{
    visibility: hidden;
}
/*animation*/
.animationslide .slide1{
    -webkit-animation:slide18 2s infinite linear;
    -moz-animation:slide18 2s infinite linear;
    -ms-animation:slide18 2s infinite linear;
    -o-animation:slide18 2s infinite linear;
    animation: slide18 2s infinite linear;
}

.animationslide .slide18{
    -webkit-animation:slide18 1s infinite linear;
    -moz-animation:slide18 1s infinite linear;
    -ms-animation:slide18 1s infinite linear;
    -o-animation:slide18 1s infinite linear;
    animation: slide18 1s infinite linear;
}

.wrapperliencontact{
    display: inline-block;
    height: 0px;
    position: relative;
    width: 0px;
}

.liencontact{
    cursor: pointer;
    height: 80px;
    left: 219px;
    position: absolute;
    top: -122px;
    width: 65px;
}

.slide4 circle{
    opacity: 0;
}

.animationslide .whitecircle1{
    background: #fff;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    position: absolute;
    left: 158px;
    top: 242px;
    opacity: 0;
    -webkit-animation: billesblanches 0.5s 1 13s linear;
    -moz-animation: billesblanches 0.5s 1 13s linear;
    -ms-animation: billesblanches 0.5s 1 13s linear;
    -o-animation: billesblanches 0.5s 1 13s linear;
    animation: billesblanches 0.5s 1 13s linear;
}

.animationslide .whitecircle2{
    background: #fff;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    position: absolute;
    left: 158px;
    top: 242px;
    opacity: 0;
    -webkit-animation: billesblanches 0.5s 1 13.5s linear;
    -moz-animation: billesblanches 0.5s 1 13.5s linear;
    -ms-animation: billesblanches 0.5s 1 13.5s linear;
    -o-animation: billesblanches 0.5s 1 13.5s linear;
    animation: billesblanches 0.5s 1 13.5s linear;
}

.animationslide .whitecircle3{
    background: #fff;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    position: absolute;
    left: 158px;
    top: 242px;
    opacity: 0;
    -webkit-animation: billesblanches 0.5s 1 14s linear;
    -moz-animation: billesblanches 0.5s 1 14s linear;
    -ms-animation: billesblanches 0.5s 1 14s linear;
    -o-animation: billesblanches 0.5s 1 14s linear;
    animation: billesblanches 0.5s 1 14s linear;
}

.animationslide .bluecircle1{
    background: #1b9eda;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    position: absolute;
    left: 356px;
    top: 242px;
    opacity: 0;
    -webkit-animation: billesbleues 0.5s 1 16.25s linear;
    -moz-animation: billesbleues 0.5s 1 16.25s linear;
    -ms-animation: billesbleues 0.5s 1 16.25s linear;
    -o-animation: billesbleues 0.5s 1 16.25s linear;
    animation: billesbleues 0.5s 1 16.25s linear;
}

.animationslide .bluecircle2{
    background: #1b9eda;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    position: absolute;
    left: 356px;
    top: 242px;
    opacity: 0;
    -webkit-animation: billesbleues 0.5s 1 16.75s linear;
    -moz-animation: billesbleues 0.5s 1 16.75s linear;
    -ms-animation: billesbleues 0.5s 1 16.75s linear;
    -o-animation: billesbleues 0.5s 1 16.75s linear;
    animation: billesbleues 0.5s 1 16.75s linear;
}

.animationslide .bluecircle3{
    background: #1b9eda;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    position: absolute;
    left: 356px;
    top: 242px;
    opacity: 0;
    -webkit-animation: billesbleues 0.5s 1 17.25s linear;
    -moz-animation: billesbleues 0.5s 1 17.25s linear;
    -ms-animation: billesbleues 0.5s 1 17.25s linear;
    -o-animation: billesbleues 0.5s 1 17.25s linear;
    animation: billesbleues 0.5s 1 17.25s linear;
}

.animationslide .logindiv{
    position: absolute;
    color: #fff;
    font-size: 14px;
    left: 209px;
    top: 158px;
    overflow: hidden;
    width: 0px;
    -webkit-animation: apparitionlettres 10s 1 5s linear;
    -moz-animation: apparitionlettres 10s 1 6s linear;
    -ms-animation: apparitionlettres 10s 1 6s linear;
    -o-animation: apparitionlettres 10s 1 6s linear;
    animation: apparitionlettres 10s 1 5s linear;
}

.animationslide .mdpdiv{
    position: absolute;
    color: #fff;
    font-size: 14px;
    left: 205.5px;
    top: 188.5px;
    width: 0px;
    height: 14px;
    overflow: hidden;
    -webkit-animation: apparitionmdp 10s 1 8s linear;
    -moz-animation: apparitionmdp 10s 1 8s linear;
    -ms-animation: apparitionmdp 10s 1 8s linear;
    -o-animation: apparitionmdp 10s 1 8s linear;
    animation: apparitionmdp 10s 1 7s linear;
}

.pucemdp{
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 5px;
    margin-right: 1px;
}

.wrapperlogindiv, .wrappermdpdiv, .wrapperlignesdoc{
    display: inline-block;
    position: absolute;
}

.wrapperdoc{
    position: absolute;
    height: 0px;
    width: 0px;
    display: inline-block;
}

.animationslide .docslide3{
    background: #fff;
    height: 66px;
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform: scale(0,0);
    -ms-transform: scale(0,0);
    left: 238px;
    position: absolute;
    top: 91px;
    width: 44px;
    overflow: hidden;
    -webkit-animation: animdoc 7s 1 14s linear;
    -moz-animation: animdoc 7s 1 14s linear;
    -o-animation: animdoc 7s 1 14s linear;
    animation: animdoc 7s 1 14s linear;
}

.lignebleue{
    width: 35px;
    height: 6px;
    background: #1b9eda;
    margin: auto;
    margin-top: 4px;
}

.ligneorange{
    width: 35px;
    height: 6px;
    background: #de6646;
    margin: auto;
    margin-top: 4px;
}

.animationslide #orange1{
    -webkit-animation: animline 10s 1 16.75s linear;
    -moz-animation: animline 10s 1 16.75s linear;
    -ms-animation: animline 10s 1 16.75s linear;
    -o-animation: animline 10s 1 16.75s linear;
    animation: animline 10s 1 16.75s linear;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.animationslide #orange2{
    -webkit-animation: animline 10s 1 17.25s linear;
    -moz-animation: animline 10s 1 17.25s linear;
    -ms-animation: animline 10s 1 17.25s linear;
    -o-animation: animline 10s 1 17.25s linear;
    animation: animline 10s 1 17.25s linear;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.animationslide #orange3{
    -webkit-animation: animline 10s 1 17.75s linear;
    -moz-animation: animline 10s 1 17.75s linear;
    -ms-animation: animline 10s 1 17.75s linear;
    -o-animation: animline 10s 1 17.75s linear;
    animation: animline 10s 1 17.75s linear;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.animationslide .lignev{
    height: 80px;
    width: 3px;
    background: #fff;
    position: absolute;
    -webkit-animation: animlignev 10s 1 20.5s linear;
    -moz-animation: animlignev 10s 1 20.5s linear;
    -ms-animation: animlignev 10s 1 20.5s linear;
    -o-animation: animlignev 10s 1 20.5s linear;
    animation: animlignev 10s 1 20.5s linear;
    top: 164px;
    left: 363px;
}

.animationslide .ligneh{
    height: 3px;
    width: 50px;
    background: #fff;
    position: absolute;
    top: 163px;
    left: 315px;
    -webkit-animation: animligneh 10s 1 21s linear;
    -moz-animation: animligneh 10s 1 21s linear;
    -o-animation: animligneh 10s 1 21s linear;
    -ms-animation: animligneh 10s 1 21s linear;
    animation: animligneh 10s 1 21s linear;
}

.animationslide .animCyb{
    -webkit-animation: animcyb 20s 1 22s linear;
    -moz-animation: animcyb 20s 1 22s linear;
    -o-animation: animcyb 20s 1 22s linear;
    -ms-animation: animcyb 20s 1 22s linear;
    animation: animcyb 20s 1 22s linear;
}

.animationslide .docpart{
    -webkit-animation: animfeuille 20s 1 22s linear;
    -moz-animation: animfeuille 20s 1 22s linear;
    -o-animation: animfeuille 20s 1 22s linear;
    -ms-animation: animfeuille 20s 1 22s linear;
    animation: animfeuille 20s 1 22s linear;
}

.decalcyb{
    transform: translate(0px,0px);
}

/************Animation pour le defilement des slides (minifiee)*************/

@-webkit-keyframes animDefilement{0%,9.51%{left:0}24.4%,9.91%{left:-523px}24.77%,39.23%{left:-1037px}39.63%,54.09%{left:-1555px}54.49%,63%{left:-2065px}63.1%,64.94%{left:-2575px}65.04%,66.78%{left:-3090px}66.88%,68.02%{left:-3605px}68.12%,68.69%{left:-4120px}68.74%,69.31%{left:-4635px}69.36%,69.58%{left:-5150px}69.61%,69.83%{left:-5665px}69.86%,70.09%{left:-6180px}70.11%,70.34%{left:-6695px}70.36%,70.58%{left:-7210px}100%,70.61%{left:-7725px}}@-moz-keyframes animDefilement{0%,9.51%{left:0}24.4%,9.91%{left:-523px}24.77%,39.23%{left:-1037px}39.63%,54.09%{left:-1555px}54.49%,63%{left:-2065px}63.1%,64.94%{left:-2575px}65.04%,66.78%{left:-3090px}66.88%,68.02%{left:-3605px}68.12%,68.69%{left:-4120px}68.74%,69.31%{left:-4635px}69.36%,69.58%{left:-5150px}69.61%,69.83%{left:-5665px}69.86%,70.09%{left:-6180px}70.11%,70.34%{left:-6695px}70.36%,70.58%{left:-7210px}100%,70.61%{left:-7725px}}@-o-keyframes animDefilement{0%,9.51%{left:0}24.4%,9.91%{left:-523px}24.77%,39.23%{left:-1037px}39.63%,54.09%{left:-1555px}54.49%,63%{left:-2065px}63.1%,64.94%{left:-2575px}65.04%,66.78%{left:-3090px}66.88%,68.02%{left:-3605px}68.12%,68.69%{left:-4120px}68.74%,69.31%{left:-4635px}69.36%,69.58%{left:-5150px}69.61%,69.83%{left:-5665px}69.86%,70.09%{left:-6180px}70.11%,70.34%{left:-6695px}70.36%,70.58%{left:-7210px}100%,70.61%{left:-7725px}}@keyframes animDefilement{0%,9.51%{left:0}24.4%,9.91%{left:-523px}24.77%,39.23%{left:-1037px}39.63%,54.09%{left:-1555px}54.49%,63%{left:-2065px}63.1%,64.94%{left:-2575px}65.04%,66.78%{left:-3090px}66.88%,68.02%{left:-3605px}68.12%,68.69%{left:-4120px}68.74%,69.31%{left:-4635px}69.36%,69.58%{left:-5150px}69.61%,69.83%{left:-5665px}69.86%,70.09%{left:-6180px}70.11%,70.34%{left:-6695px}70.36%,70.58%{left:-7210px}100%,70.61%{left:-7725px}}

/************Animation du bouton start*************/

@-webkit-keyframes animstart{from{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}50%{-webkit-transform:translate(20px,0);-moz-transform:translate(20px,0);-o-transform:translate(20px,0);-ms-transform:translate(20px,0);transform:translate(20px,0)}to{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}}@-o-keyframes animstart{from{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}50%{-webkit-transform:translate(20px,0);-moz-transform:translate(20px,0);-o-transform:translate(20px,0);-ms-transform:translate(20px,0);transform:translate(20px,0)}to{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}}@-moz-keyframes animstart{from{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}50%{-webkit-transform:translate(20px,0);-moz-transform:translate(20px,0);-o-transform:translate(20px,0);-ms-transform:translate(20px,0);transform:translate(20px,0)}to{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}}@keyframes animstart{from{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}50%{-webkit-transform:translate(20px,0);-moz-transform:translate(20px,0);-o-transform:translate(20px,0);-ms-transform:translate(20px,0);transform:translate(20px,0)}to{-webkit-transform:translate(0);-moz-transform:translate(0);-o-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}}

/************Animation pour faire monter et descendre une div*************/

@-webkit-keyframes slide18{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}25%{-webkit-transform:translate(0px,-10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,-10px);transform:translate(0px,-10px)}75%{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,10px);-ms-transform:translate(0px,10px);-o-transform:translate(0px,10px);transform:translate(0px,10px)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}}@-moz-keyframes slide18{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}25%{-webkit-transform:translate(0px,-10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,-10px);transform:translate(0px,-10px)}75%{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,10px);-ms-transform:translate(0px,10px);-o-transform:translate(0px,10px);transform:translate(0px,10px)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}}@-o-keyframes slide18{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}25%{-webkit-transform:translate(0px,-10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,-10px);transform:translate(0px,-10px)}75%{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,10px);-ms-transform:translate(0px,10px);-o-transform:translate(0px,10px);transform:translate(0px,10px)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes slide18{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}25%{-webkit-transform:translate(0px,-10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,-10px);transform:translate(0px,-10px)}75%{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,10px);-ms-transform:translate(0px,10px);-o-transform:translate(0px,10px);transform:translate(0px,10px)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}}

/************Animation pour les billes blanches*************/

@-webkit-keyframes billesblanches{0%{opacity:1;-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}50%{-webkit-transform:translate(0px,-80px);-moz-transform:translate(0px,-80px);-ms-transform:translate(0px,-80px);-o-transform:translate(0px,-80px);transform:translate(0px,-80px)}100%{opacity:1;-webkit-transform:translate(50px,-80px);-moz-transform:translate(50px,-80px);-ms-transform:translate(50px,-80px);-o-transform:translate(50px,-80px);transform:translate(50px,-80px)}}@-moz-keyframes billesblanches{0%{opacity:1;-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}50%{-webkit-transform:translate(0px,-80px);-moz-transform:translate(0px,-80px);-ms-transform:translate(0px,-80px);-o-transform:translate(0px,-80px);transform:translate(0px,-80px)}100%{opacity:1;-webkit-transform:translate(50px,-80px);-moz-transform:translate(50px,-80px);-ms-transform:translate(50px,-80px);-o-transform:translate(50px,-80px);transform:translate(50px,-80px)}}@-o-keyframes billesblanches{0%{opacity:1;-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}50%{-webkit-transform:translate(0px,-80px);-moz-transform:translate(0px,-80px);-ms-transform:translate(0px,-80px);-o-transform:translate(0px,-80px);transform:translate(0px,-80px)}100%{opacity:1;-webkit-transform:translate(50px,-80px);-moz-transform:translate(50px,-80px);-ms-transform:translate(50px,-80px);-o-transform:translate(50px,-80px);transform:translate(50px,-80px)}}@keyframes billesblanches{0%{opacity:1;-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}50%{-webkit-transform:translate(0px,-80px);-moz-transform:translate(0px,-80px);-ms-transform:translate(0px,-80px);-o-transform:translate(0px,-80px);transform:translate(0px,-80px)}100%{opacity:1;-webkit-transform:translate(50px,-80px);-moz-transform:translate(50px,-80px);-ms-transform:translate(50px,-80px);-o-transform:translate(50px,-80px);transform:translate(50px,-80px)}}

/************Animation pour les billes bleues*************/

@-webkit-keyframes billesbleues{0%{opacity:1;-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);-ms-transform:translate(1px,0);-o-transform:translate(1px,0);transform:translate(1px,0)}50%{-webkit-transform:translate(1px,-80px);-moz-transform:translate(1px,-80px);-ms-transform:translate(1px,-80px);-o-transform:translate(1px,-80px);transform:translate(1px,-80px)}100%{opacity:1;-webkit-transform:translate(-50px,-80px);-moz-transform:translate(-50px,-80px);-ms-transform:translate(-50px,-80px);-o-transform:translate(-50px,-80px);transform:translate(-50px,-80px)}}@-moz-keyframes billesbleues{0%{opacity:1;-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);-ms-transform:translate(1px,0);-o-transform:translate(1px,0);transform:translate(1px,0)}50%{-webkit-transform:translate(1px,-80px);-moz-transform:translate(1px,-80px);-ms-transform:translate(1px,-80px);-o-transform:translate(1px,-80px);transform:translate(1px,-80px)}100%{opacity:1;-webkit-transform:translate(-50px,-80px);-moz-transform:translate(-50px,-80px);-ms-transform:translate(-50px,-80px);-o-transform:translate(-50px,-80px);transform:translate(-50px,-80px)}}@-o-keyframes billesbleues{0%{opacity:1;-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);-ms-transform:translate(1px,0);-o-transform:translate(1px,0);transform:translate(1px,0)}50%{-webkit-transform:translate(1px,-80px);-moz-transform:translate(1px,-80px);-ms-transform:translate(1px,-80px);-o-transform:translate(1px,-80px);transform:translate(1px,-80px)}100%{opacity:1;-webkit-transform:translate(-50px,-80px);-moz-transform:translate(-50px,-80px);-ms-transform:translate(-50px,-80px);-o-transform:translate(-50px,-80px);transform:translate(-50px,-80px)}}@keyframes billesbleues{0%{opacity:1;-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);-ms-transform:translate(1px,0);-o-transform:translate(1px,0);transform:translate(1px,0)}50%{-webkit-transform:translate(1px,-80px);-moz-transform:translate(1px,-80px);-ms-transform:translate(1px,-80px);-o-transform:translate(1px,-80px);transform:translate(1px,-80px)}100%{opacity:1;-webkit-transform:translate(-50px,-80px);-moz-transform:translate(-50px,-80px);-ms-transform:translate(-50px,-80px);-o-transform:translate(-50px,-80px);transform:translate(-50px,-80px)}}

/************Animation pour le pseudo dans le slide 2*************/

@-webkit-keyframes apparitionlettres{0%,2.49%{width:4px}2.5%,4.99%{width:9px}5%,7.49%{width:13px}7.5%,9.99%{width:18px}10%,12.49%{width:21px}12.5%,14.99%{width:26px}15%,17.49%{width:30px}100%,17.5%,to{width:39px}}@-moz-keyframes apparitionlettres{0%,2.49%{width:4px}2.5%,4.99%{width:9px}5%,7.49%{width:13px}7.5%,9.99%{width:18px}10%,12.49%{width:21px}12.5%,14.99%{width:26px}15%,17.49%{width:30px}100%,17.5%,to{width:35px}}@-o-keyframes apparitionlettres{0%,2.49%{width:4px}2.5%,4.99%{width:9px}5%,7.49%{width:13px}7.5%,9.99%{width:18px}10%,12.49%{width:21px}12.5%,14.99%{width:26px}15%,17.49%{width:30px}100%,17.5%,to{width:35px}}@keyframes apparitionlettres{0%,2.49%{width:4px}2.5%,4.99%{width:9px}5%,7.49%{width:13px}7.5%,9.99%{width:18px}10%,12.49%{width:21px}12.5%,14.99%{width:26px}15%,17.49%{width:30px}100%,17.5%,to{width:35px}}

/************Animation pour le mdp dans le slide 2*************/

@-webkit-keyframes apparitionmdp{0%{width:0}100%,17%{width:90px}}@-moz-keyframes apparitionmdp{0%{width:0}100%,17%{width:90px}}@-o-keyframes apparitionmdp{0%{width:0}100%,17%{width:90px}}@keyframes apparitionmdp{0%{width:0}100%,17%{width:90px}}

/************Animation pour le document*************/

@-webkit-keyframes animdoc{from{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0)}5%,to{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}}@-moz-keyframes animdoc{from{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0)}5%,to{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}}@-o-keyframes animdoc{from{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0)}5%,to{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}}@keyframes animdoc{from{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0)}5%,to{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}}

/************Animation pour les lignes du document*************/

@-webkit-keyframes animline{from{background:#de6646}5%,to{background:#1b9eda}}@-moz-keyframes animline{from{background:#de6646}5%,to{background:#1b9eda}}@-o-keyframes animline{from{background:#de6646}5%,to{background:#1b9eda}}@keyframes animline{from{background:#de6646}5%,to{background:#1b9eda}}

/************Animation pour la ligne qui disparait*************/

@-webkit-keyframes animlignev{from{height:80px}5%,to{height:0}}@-moz-keyframes animlignev{from{height:80px}5%,to{height:0}}@-o-keyframes animlignev{from{height:80px}5%,to{height:0}}@keyframes animlignev{from{height:80px}5%,to{height:0}}@-webkit-keyframes animligneh{from{width:50px}5%,to{width:0}}@-moz-keyframes animligneh{from{width:50px}5%,to{width:0}}@-o-keyframes animligneh{from{width:50px}5%,to{width:0}}@keyframes animligneh{from{width:50px}5%,to{width:0}}

/************Animation pour Cyb qui emmene le document*************/

@-webkit-keyframes animcyb{from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}10%,5%{-webkit-transform:translate(0,80px);-moz-transform:translate(0,80px);-o-transform:translate(0,80px);-ms-transform:translate(0,80px);transform:translate(0,80px)}15%,to{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}@-moz-keyframes animcyb{from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}10%,5%{-webkit-transform:translate(0,80px);-moz-transform:translate(0,80px);-o-transform:translate(0,80px);-ms-transform:translate(0,80px);transform:translate(0,80px)}15%,to{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}@-o-keyframes animcyb{from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}10%,5%{-webkit-transform:translate(0,80px);-moz-transform:translate(0,80px);-o-transform:translate(0,80px);-ms-transform:translate(0,80px);transform:translate(0,80px)}15%,to{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}@keyframes animcyb{from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}10%,5%{-webkit-transform:translate(0,80px);-moz-transform:translate(0,80px);-o-transform:translate(0,80px);-ms-transform:translate(0,80px);transform:translate(0,80px)}15%,to{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}

/************Animation qui emmene le document*************/

@-webkit-keyframes animfeuille{10%,from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}20%,to{-webkit-transform:translate(0,-160px);-moz-transform:translate(0,-160px);-o-transform:translate(0,-160px);-ms-transform:translate(0,-160px);transform:translate(0,-160px)}}@-moz-keyframes animfeuille{10%,from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}20%,to{-webkit-transform:translate(0,-160px);-moz-transform:translate(0,-160px);-o-transform:translate(0,-160px);-ms-transform:translate(0,-160px);transform:translate(0,-160px)}}@-o-keyframes animfeuille{10%,from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}20%,to{-webkit-transform:translate(0,-160px);-moz-transform:translate(0,-160px);-o-transform:translate(0,-160px);-ms-transform:translate(0,-160px);transform:translate(0,-160px)}}@keyframes animfeuille{10%,from{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}20%,to{-webkit-transform:translate(0,-160px);-moz-transform:translate(0,-160px);-o-transform:translate(0,-160px);-ms-transform:translate(0,-160px);transform:translate(0,-160px)}}


/*animation*/