#modal, #infos {
    opacity:0;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    position:absolute;
    top:$bar-title-height;
    bottom:0px;
    box-sizing:border-box;
    background-color:rgba(255,255,255,0.8);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border:2px solid white;
    box-shadow: 5px 5px 5px rgba(50,50,50,0.5);
    color:black;
    padding:0;
    //margin:auto 5%;
    margin:5% 10%;
    width:80%;
    height:80%;
    p {
        margin: 0;
        width: 90%;       // avoid linebreak
        height: 100%;     // on long description
        overflow: hidden; // -------------------
        float: left;
        font-size: .8em;
    }
    .closebtn {
        float:right;
        //position:absolute;
        //right:0px;
        //width:50px;
        font-weight: bold;
        font-size:1.3em;
        color: darken($base-color, 20%);
        &:hover {
            cursor: pointer;
        };
    }
    .title {
        background:rgba(255,255,255,0.9);
        height: $bar-title-height - 10;
        line-height: $bar-title-height - 10;
        color: #333;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1em;
        font-weight: bold;
        border-bottom:1px solid #ddd;
        box-sizing:border-box;
    }
    &.open {
        opacity:1;
    }
}

#infos {
    top: 50%;
    width: 40%;
    height: 400px;
    margin: -165px 30% 0;
    text-align: center;
    h2 {
        margin: 0;
        padding: 10px 0;
        display: block;
        background: white;
    }
    a {
        display: block;
    }
    img {
        margin-top: 10px;
    }
    .git {
        margin-top: 20px;
        color: black;
        text-decoration: none;
    }
}