﻿.Rbllangr {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

    .Rbllangr td {
        width: 16.6%;
    }

        .Rbllangr td label {
            display: block;
            text-align: center;
            font-size: .9em;
            font-weight: bold;
        }

        .Rbllangr td input[type=radio] {
            width: 24px;
            height: 24px;
            accent-color: #07106e;
            border: 1px solid red;
        }

/*.Min-H{min-height:50vh}*/

@keyframes RotateDiv {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/**/
@-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;
    }
}

.visHome {
    background:#000;
    padding:.1% 10%
}

    .visHome h2 {
        font-size: 1.3em;
        padding-bottom: 2%;
        color: #c8a94f !important
    }

#scene {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: left;
    width:100%;
    height: 500px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:3% auto;
    background: #4e4e4e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    position: relative;margin-bottom:0 !important;
}

    #scene #left-zone {
        height: 75%;
        flex-grow: 0;
        display: flex;
        width: 350px;
        align-items: center;
        justify-content: left;
    }

        #scene #left-zone .list {
            display: flex;
            list-style: none;
            align-content: stretch;
            flex-direction: column;
            flex-grow: 1;
            margin: 0;
            padding: 0;
        }

            #scene #left-zone .list li.item input[type=radio] {
                display: none;
            }

        #scene #left-zone label {
            display: block;
            opacity: 0.8;
            color: #fff;
            height: 50px;
            line-height: 50px;padding-right:5%;font-size:.88em;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label:first-letter {
            text-transform: uppercase;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label:hover {
            opacity: 0.75;
            cursor: pointer;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label.label_strawberry:before {
            content: " ";
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            background-image: url("/images/uni.png");
            background-position: center;
            background-size: 75% 75%;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label.label_banana:before {
            content: " ";
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            background-image: url("/images/ta.png");
            background-position: center;
            background-size: 75% 75%;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label.label_apple:before {
            content: " ";
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            background-image: url("/images/co.png");
            background-position: center;
            background-size: 75% 75%;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label.label_orange:before {
            content: " ";
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            background-image: url("/images/ho.png");
            background-position: center;
            background-size: 75% 75%;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ label.label_orange3:before {
            content: " ";
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            background-image: url("/images/ac.png");
            background-position: center;
            background-size: 75% 75%;
            background-repeat: no-repeat;
        }

    #scene h3 {
        color: #c8a94f;
        line-height:5em;text-align:center;font-size:1.1em
    }

    #scene #left-zone .list li.item input[type=radio] ~ label.label_orange2:before {
        background-image: url("/images/st.png") !important;
    }

    #scene #left-zone .list li.item input[type=radio] ~ .content {
        position: absolute;
        right: 350px;
        top: -500px;
        width: 70%;
        height: 400px;
        -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;
        align-items: center;
        justify-content: center;
        flex-direction: column;box-sizing:border-box;padding:3%;text-align:justify;
    }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_strawberry .picto {
            height: 100px;
            width: 100px;
            background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/83067-200.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_strawberry h1 {
            color: #d64541;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_banana .picto {
            height: 100px;
            width: 100px;
            background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/53209-200.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_banana h1 {
            color: #f5d76e;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_apple .picto {
            height: 100px;
            width: 100px;
            background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/14333-200.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_apple h1 {
            color: #00b16a;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_orange .picto {
            height: 100px;
            width: 100px;
            background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/9636-200.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content.content_orange h1 {
            color: #f27935;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content h1:first-letter {
            text-transform: uppercase;
        }

        #scene #left-zone .list li.item input[type=radio] ~ .content p.ho {
            font-size:1em;line-height:1.8
        }

    #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);
    }

        #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_strawberry {
            color: #c8a94f;
            border-right: solid 4px #c8a94f;
        }

        #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_banana {
            color: #c8a94f;
            border-right: solid 4px #c8a94f;
        }

        #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_apple {
            color: #c8a94f;
            border-right: solid 4px #c8a94f;
        }

        #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_orange {
            color: #c8a94f;
            border-right: solid 4px #c8a94f;
        }

    #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);
    }

    #scene #middle-border {
        background-color: #eee;
        height: 75%;
        flex-grow: 1;
        max-width: 2px;
        z-index: 0;
    }

    #scene #right-zone {
        height: 100%;
        flex-grow: 3;
    }


.flaghome {
    width: 10%;
    float: right;
    margin: 2%;
    color: #fff;
    text-align: center;
    font-size: .8em
}

    .flaghome img {
        width: 100%;
        border-radius: 100px;
        padding: 4%;
    }

.BackgGol2 {
    background: #f3d07c !important;
}

/**/
.divFlag {
    padding: 1% 5%;
    display: flex;
}

    .divFlag .divFlagin {
        background: #ffe5a5;
        margin: .5%;
        width: 10%;
        padding: .5%;
        color: rgba(0,0,0,.9);
        font-size: .9em;
        border-radius: 10px;
    }

        .divFlag .divFlagin img {
            width: 34%;
            border-radius: 100px;
            vertical-align: middle;
            margin-left: 3%;
        }
