.blur {
    animation-name: blur-effect;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.blur2 {
    animation-name: blur2-effect;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.clear {
    animation-name: clear-effect;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

@keyframes blur-effect {
    from {
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        filter: blur(0);
    }
    to {
        -webkit-filter: blur(.8px);
        -moz-filter: blur(.8px);
        filter: blur(.8px);
    }
}

@keyframes blur2-effect {
    from {
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        filter: blur(0);
    }
    to {
        -webkit-filter: blur(.8px);
        -moz-filter: blur(.8px);
        filter: blur(.8px);
    }
}

@keyframes clear-effect {
    from {
        -webkit-filter: blur(10px)
    }
    to {
        -webkit-filter: blur(0px)
    }
}

@keyframes left-one {
    0% {

        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);

    }
    100% {

        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

/*animation de module_modif*/
.pivot {
    animation: pivote linear .8s;
    animation-iteration-count: 1;
    transform-origin: 0% 0%;
    top: -115px;
    border: solid 2px #ddd;
    animation-fill-mode: forwards; /*when the spec is finished*/
    -webkit-animation: pivote ease-in-out .8s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 0% 0%;
    -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: pivote ease-in-out .8s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 0% 0%;
    -moz-animation-fill-mode: forwards; /*FF 5+*/
    -o-animation: pivote ease-in-out .8s;
    -o-animation-iteration-count: .8;
    -o-transform-origin: 0% 0%;
    -o-animation-fill-mode: forwards; /*Not implemented yet*/
    -ms-animation: pivote ease-in-out .8s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 0% 0%;
    -ms-animation-fill-mode: forwards; /*IE 10+*/
}

.retour_pivot {
    animation: retour_pivote ease-out .4s;
    animation-iteration-count: 1;
    transform-origin: 0% 0%;
    animation-fill-mode: forwards;
}

.show_mobil {
    animation: mobil_show ease-in .3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.hide_mobil {
    animation: mobil_hide ease-in .2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes mobil_show {
    from {
        transform: rotate(-10deg);
        filter: blur(12px);
        -webkit-filter: blur(12px);
        z-index: 0;
        left: -200px;
        opacity: .5;
    }
    to {
        transform: rotate(0deg);
        filter: blur(0);
        -webkit-filter: blur(0px);
        z-index: 100;
        left: -200px;
        background-color: rgba(220, 220, 220, 1);
        box-shadow: 0 0 5px #bbb;
        opacity: 1;
    }
}

@keyframes mobil_hide {
    from {
        transform: rotate(0deg);
        filter: blur(0);
        -webkit-filter: blur(0px);
        z-index: 100;
        left: -200px;
    }
    to {
        transform: scale(0);
        filter: blur(12px);
        -webkit-filter: blur(12px);
        z-index: -1;
        left: -200px;
        opacity: 0;
    }
}

@keyframes retour_pivote {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(90deg);
        opacity: 0;
    }
}

@keyframes pivote {
    0% {
        transform: rotate(90deg);
        opacity: 0;
    }


    50% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

@-moz-keyframes pivote {
    0% {
        -moz-transform: rotate(90deg);
    }
    22% {
        -moz-transform: rotate(-34deg);
    }
    30% {
        -moz-transform: rotate(13deg);
    }
    45% {
        -moz-transform: rotate(-9deg);
    }
    59% {
        -moz-transform: rotate(4deg);
    }
    73% {
        -moz-transform: rotate(-6deg);
    }

    100% {
        -moz-transform: rotate(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes pivote {
    0% {
        -webkit-transform: rotate(90deg);
    }
    22% {
        -webkit-transform: rotate(-24deg);
    }
    30% {
        -webkit-transform: rotate(13deg);
    }
    45% {
        -webkit-transform: rotate(-9deg);
    }
    59% {
        -webkit-transform: rotate(4deg);
    }
    63% {
        -webkit-transform: rotate(-6deg);
    }

    78% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
}

@-o-keyframes pivote {
    0% {
        -o-transform: translate(3px, -2px) rotate(90deg);
    }
    22% {
        -o-transform: rotate(-34deg);
    }
    30% {
        -o-transform: rotate(13deg);
    }
    45% {
        -o-transform: rotate(-9deg);
    }
    59% {
        -o-transform: translate(-1px, -2px) rotate(4deg);
    }
    73% {
        -o-transform: translate(-1px, -2px) rotate(-6deg);
    }
    87% {
        -o-transform: translate(-1px, -2px);
    }
    100% {
        -o-transform: translate(-1px, 0px) rotate(0deg);
        opacity: 1;
    }
}

@-ms-keyframes pivote {
    0% {
        -ms-transform: translate(3px, -2px) rotate(90deg);
    }
    22% {
        -ms-transform: rotate(-34deg);
    }
    30% {
        -ms-transform: rotate(13deg);
    }
    45% {
        -ms-transform: rotate(-9deg);
    }
    59% {
        -ms-transform: translate(-1px, -2px) rotate(4deg);
    }
    73% {
        -ms-transform: translate(-1px, -2px) rotate(-6deg);
    }
    87% {
        -ms-transform: translate(-1px, -2px);
    }
    100% {
        -ms-transform: translate(-1px, 0px) rotate(0deg);
        opacity: 1;
    }
}

.glyphicon-refresh-animate {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}