@-webkit-keyframes slidein {
    0% {
        top: -400px;
        opacity: 0;
    }

    100% {
        opacity: 1;
        top: 0px;
    }
}

@keyframes slidein {
    0% {
        top: -400px;
        opacity: 0;
    }

    100% {
        opacity: 1;
        top: 0px;
    }
}

@-webkit-keyframes slideout {
    0% {
        top: 0;
        opacity: 1;
    }

    100% {
        top: -400px;
        opacity: 0;
    }
}

@keyframes slideout {
    0% {
        top: 0;
        opacity: 1;
    }

    100% {
        top: -400px;
        opacity: 0;
    }
}



body #scene {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    margin: auto;
    overflow: hidden;
    position: relative;
}

        body #scene #left-zone {
            background: #fff;
            height: 75%;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 350px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: left;
            -ms-flex-pack: left;
            justify-content: left;
        }

            body #scene #left-zone .list {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                list-style: none;
                -ms-flex-line-pack: stretch;
                align-content: stretch;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;
                margin: 0;
                padding: 0;
            }

                body #scene #left-zone .list li.item input[type="radio"] {
                    display: none;
                }
                body #scene #left-zone .list li.item .radio__icon {
                    background-color: #fff;
                    box-sizing: border-box;
                    width: 16px;
                    height: 16px;
                    border: 1px solid #e4e4e4;
                    border-radius: 8px;
                    margin-top: 12px;
                    position: relative;
                    float: left;
                }

                    body #scene #left-zone .list li.item .radio__icon:after {
                        content: "";
                        background: #1b8270;
                        width: 8px;
                        height: 8px;
                        border-radius: 4px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin: -4px 0 0 -4px;
                        display: none;
                    }
                body #scene #left-zone .list li.item input[type="radio"] ~ label {
                    display: block;
                    opacity: 0.5;
                    padding: 10px 25px;
                }

                        body #scene #left-zone .list li.item input[type="radio"] ~ label:first-letter {
                            text-transform: uppercase;
                        }

                        body #scene #left-zone .list li.item input[type="radio"] ~ label:hover {
                            opacity: 0.75;
                            cursor: pointer;
                        }

               

                

                    body #scene #left-zone .list li.item input[type="radio"] ~ .content {
                        position: absolute;
                        /*left: 350px;
                        top: -480px;
                        right: 0;*/
                        -webkit-animation-duration: 0.75s;
                        animation-duration: 0.75s;
                        -webkit-animation-name: slideout;
                        animation-name: slideout;
                        -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        text-align: center;
                        height: 100%;
                    }

                        body #scene #left-zone .list li.item input[type="radio"]:checked ~ .radio__icon:after{
                           display:block;
                        }

                        body #scene #left-zone .list li.item input[type="radio"] ~ .content .picto {
                            width: 100%;
                            /*height: 100%;*/
                            overflow: hidden;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                            body #scene #left-zone .list li.item input[type="radio"] ~ .content .picto img {
                                height: 100%;
                            }
                            body #scene #left-zone .list li.item input[type="radio"] ~ .content h1:first-letter {
                                text-transform: uppercase;
                            }

                        body #scene #left-zone .list li.item input[type="radio"] ~ .content p {
                            max-width: 50%;
                            text-align: center;
                        }

                    body #scene #left-zone .list li.item input[type="radio"]:checked ~ label {
                        opacity: 1;
                        -webkit-animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
                        animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
                    }



                        body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label-active {
                            color: #1b8270;
                        }

                    body #scene #left-zone .list li.item input[type="radio"]:checked ~ .content {
                        -webkit-animation-duration: 0.75s;
                        animation-duration: 0.75s;
                        -webkit-animation-name: slidein;
                        animation-name: slidein;
                        -webkit-animation-fill-mode: forwards;
                        animation-fill-mode: forwards;
                        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
                        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
                    }

      

        body #scene #right-zone {
            height: 100%;
            -webkit-box-flex: 3;
            -ms-flex-positive: 3;
            flex-grow: 3;
        }