#person-overlay{
    position:fixed;
    background-color:rgba(255,255,255,0.85);
    width:100%;
    height:100%;
    z-index:10;
    top:0px;
    left:0px;
}

article.person-individual{
    margin:0 auto;
    padding:15px;
    height:100%;
    position:relative;
    box-sizing:border-box;
}

div.person-details{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:calc(100% - 30px);
}

div.person-metadata h2{
    font-family:avenir-light,proxima-nova,helvetica,arial,sans-serif;
    margin:0 0 0.5em 0;
    font-size:1.8em;
    color:#555;
}

div.person-metadata p, div.person-bio p{
    margin:0 0 0.4em 0;
    font-size:1.2em;
    color:#333;
}

div.person-metadata p.person-position{
    color:#EF357B;
}

div.person-bio p{
    color:#555;
}

div.person-bio p a{
    color:#f3732e;
    text-decoration:none;
    border-bottom:1px dotted #f3732e;
}

div.person-bio p a:hover{
    border-bottom:0px;
}

#bio-closer{
    position:absolute;
    top:30px;
    right:30px;
    width:34px;
    height:34px;
    display:block;
    background-image:url('../Images/modal-closer-black.png');
}

#bio-closer.hi-res{
    background-image:url('../Images/modal-closer-black-2x.png');
    background-size:34px 34px;
}

@media screen and (min-width: 768px) {
    
    article.person-individual{
        width:765px;
    }
    
    div.person-metadata{
        width:250px;
    }
    
    div.person-bio{
        width:450px;
    }
    
}

@media screen and (min-width: 1024px) {
    
    article.person-individual{
        width:950px;
    }
    
    div.person-metadata{
        width:300px;
    }
    
    div.person-bio{
        width:600px;
    }
    
}