.model-box {
  position:   relative;
  width:      100%;
  height: 0;
  padding-top:   50%;
}

.model {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  width:    100%;
  height:   100%;
}

.bar{

    position:absolute;

    bottom:0;

    left:0;

    width:50px;

    height:50px;

    background: transparent;

    }

.bar2{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:120px;

    background: transparent;

    }
    

  /*---- Bouton > info-bulle ----*/



a.bouton div.info-bulle



{



    visibility: hidden;



    opacity: 0;



    position: absolute; /* important */



    top: 0px;



    left: 0%;



    transition: 0.3s ease-out;



    -webkit-transition: 0.3s ease-out;



}

a.bouton:hover div.info-bulle



{



    visibility: visible;



    opacity: 1;



    top: -50px;



    transition: 0.6s ease-out;



    -webkit-transition: 0.6s ease-out;



}

div.info-bulle



{



    width: 50%;

   
    padding: 0px;



    margin: 0 auto;

  margin-left: 25%;

    background: #ffffff;



    border-radius: 0px;



    box-shadow: 3px 5px 10px rgba(0,0,0,0.1);



}

div.info-bulle p



{

    font-family: 'Open Sans', sans-serif;

    color: #555;

    font-size: 100%;



    padding: 10px 5px;



    margin: 0;



    text-align: center;



    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);



}