.picture {
    position:relative;
    border:1px solid white;
    max-height:220px;
    overflow:hidden;
}

.nopic {
    background:transparent url(../img/IMG-no-picture.png) no-repeat center center;
    height:220px;
    
}

.picture h2 {
    background:rgba(0%, 47%, 75%,0.80);
    color:white;
    font-size:15px;
    bottom:20px;
    right:0px;
    display:table;
    margin:0px;
    padding:5px 20px;
    position:absolute;
    text-align:right;
}

#list_of_projects li a:hover h2 {
    background:rgba(56%, 66%, 29%,0.80); 
}

body {
    margin-top:60px;
}

@media (max-width:720px) {
    body {
        margin-top:30px;
    }
}

@media (max-width:770px) {
    
    #list_of_projects [class~="col-xs-12"] {
         width:50%;
    }
    .picture h2 {
        width:100%;
        text-align: center;
        bottom:0px;
    }
}


@media (max-width:450px) {
    #list_of_projects [class~="col-xs-12"] {
         width:100%;
    }
    
    .picture {
        width:100%;
        margin:0px auto;
        display:block;
        max-height:none;
    }
}