﻿.rilanimation10 .ril-card-ligne {
}

.rilanimation11 .ril-card-ligne {
}
    .rilanimation11 .ril-card-ligne::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        top: -5px;
        left: -5px;
        border-top: 2px solid #888;
        border-left: 2px solid #888;
        transition: 0.5s ease-in-out;
    }
    .rilanimation11 .ril-card-ligne::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        right: -5px;
        bottom: -5px;
        border-bottom: 2px solid #888;
        border-right: 2px solid #888;
        transition: 0.5s ease-in-out;
    }
    .rilanimation11 .ril-card-ligne:hover::before, .rilanimation11 .ril-card-ligne:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }

.rilanimation12 .ril-card-ligne {
    outline: solid 0px #888;
    transition: outline 0.2s linear;
}
    .rilanimation12 .ril-card-ligne:hover {
        outline-width: 5px;
    }

.rilanimation13 .ril-card-ligne {
    transition: transform .2s;
}
    .rilanimation13 .ril-card-ligne:hover {
        transform: scale(1.02);
    }

.rilanimation14 .ril-card-ligne {
    opacity: 1;
}
    .rilanimation14 .ril-card-ligne:hover {
        animation: flash 1s;
    }
@keyframes flash {
    0% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}

.rilanimation15 .ril-card-ligne img {
    transition: 0.4s filter linear;
    filter: drop-shadow(5px 5px 4px transparent);
}
    .rilanimation15 .ril-card-ligne:hover img {
        filter: drop-shadow(5px 5px 4px #888888cc);
    }

.rilanimation16 .ril-card-ligne {
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
}
    .rilanimation16 .ril-card-ligne:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #888;
        transform: scaleY(0);
        transition: 0.3s linear;
    }

    .rilanimation16 .ril-card-ligne:hover:before {
        transform: scaleY(1);
    }

.rilanimation17 .ril-card-ligne img {
    transform: translate(-50%,-50%);
}
    .rilanimation17 .ril-card-ligne:hover img {
        animation-name: buzz-out;
        animation-duration: 0.75s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }
@keyframes buzz-out {
    10% {
        transform: translate(-52%, -50%) rotate(2deg);
    }

    20% {
        transform: translate(-48%, -50%) rotate(-2deg);
    }

    30% {
        transform: translate(-52%, -50%) rotate(2deg);
    }

    40% {
        transform: translate(-48%, -50%) rotate(-2deg);
    }

    50% {
        transform: translate(-52%, -50%) rotate(1deg);
    }

    60% {
        transform: translate(-48%, -50%) rotate(-1deg);
    }

    70% {
        transform: translate(-52%, -50%) rotate(1deg);
    }

    80% {
        transform: translate(-48%, -50%) rotate(-1deg);
    }

    90% {
        transform: translate(-52%, -50%) rotate(0);
    }

    100% {
        transform: translate(-48%, -50%) rotate(0);
    }
}