html{
    zoom:0.8;
}
body{
    background-image:url("../../img/bg22.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin:0;
}


#livre2{
    margin-left: 10%;



}
#console{
    margin-left: 0px;
    width: 253px;
    height: auto ;


}

#olaf{
    width: 253px;
    height: auto;
    margin-right:0px;
}


#persogars{
    height: 100vh;
    width: auto;
}










.modalDialog {
        position: fixed;
        font-family: open sans,  sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.2);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 70%;
        height: 70%;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        background: rgb(50,50,50);
    }

    .close {
        background: fff;
        color: #fff;
        line-height: 25px;
        position: absolute;
        right: 0px;
        text-align: center;
        top: 0px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
    }

    .close:hover { color: red; }

    iframe{
      width: 100%;
      height: 100%;
    }


form {
    display: inline;
}
button{
    background: rgba(0,0,0,0);
    border: none;
}




video{
    width: 90%;
    height: auto;
}

#droite{
    left: 0;
    position: fixed;
    bottom:2%
}
#center{
right: 40%;
    position: fixed;
    bottom:7.5%;

}
#gauche{
    right: 0px;
    position: fixed;
    bottom:3%;
}


#f{
    right: 10%;
    bottom:8%;
    position: fixed;
}
#m{
left: 10%;
    bottom:7%;
    position: fixed;
}








.modalDialog2 {
        position: fixed;
        font-family: open sans,  sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    background-image:url("../../img/bg22.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin:0;
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog2:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog2 > div {
        width: 100%;
        height: 100%;
        position: relative;
        background: rgb(50,50,50,0);
    }