﻿body {
}


#chengduNews {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../../images/chengdu/tv16_9.png');
    position: relative;
    width: 100%;
    margin:auto;
}

    #chengduNews > img {
        display: block;
        visibility: hidden;
        width: 100%
    }

    #chengduNews button {
        border: none;
        background-color: transparent;
        position: absolute;
        width:10%;
        left:74.5%;
        z-index:3;
    }

    #chengduNews button img {
        width:100%;
    }


#chengduContainer{
    width:100%;
    margin:auto;
}

    #chengduContainer button {
        display:none;
    }
    #chengduContainer #chengduNews {
        background-image: none;
    }

#seminaire {
    position: absolute;
    top: 0;
    /*z-index: 14;*/
    height: 100%;
    overflow-y: scroll;
    visibility: hidden;
    font-size: 3vw;
    /*background: white*/
}
    #seminaire > p:first-child {
        visibility:visible;
        margin-top:0;
    }

#chengduContainer input {
    visibility:hidden;
}
#chengduContainer video{
    width: 100%;
    display: none
}

label[for="seminaire_input"] {

}

#chengduContainer #seminaire_input:checked ~ #seminaire {
    visibility: visible;
}
#chengduContainer #video1_input:checked ~ div:first-of-type #chengduVideo1 {
    display: block;
}
#chengduContainer #video2_input:checked ~ div:first-of-type #chengduVideo2 {
    display: block;
}
#chengduContainer #seminaire_input:checked ~ div label[for="seminaire_input"] {
    display: none;
}

#chengduContainer #video1_input:checked ~ div label[for="video1_input"] {
    display: none;
}

#chengduContainer #video2_input:checked ~ div label[for="video2_input"] {
    display: none;
}
    #plaquettes {
        position: absolute;
        width: 100%;
        display: flex;
        top: 0;
        height: 120%;
        overflow: hidden;
    }
    #plaquettes > div {
        flex: 1;
        position: relative;
        top: 84%;
    }
        #plaquettes > div img {
            width: 100%;
            position: absolute;
            top:0%;
            transition-property: top;
            transition-duration: 4s;
            z-index:5;
        }
    #plaquettes > div > div {
        position: absolute;
        height:16%;
        width:100%;
        z-index:10;
    }
        #plaquettes > div > div:hover + img {
            top: -80%;
        }

label {
    color: blue;
    font-weight: bold;
}
label:hover {
    color:red;
}

:checked + label {
   /* display: none;*/
}

div > label {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


