work{
    margin:15px;
}
work.expanded{
    margin:0;
}
.workContainer{
    cursor: pointer;
    margin:10px;
}

.workArea{
    width:250px;
    height: 250px;
    background-color: rgba(0,0,0,0);
    position: relative;
    overflow: hidden;
    background-size: cover;
    z-index: 2;
}

work,
.workArea > .workCaption,
.workFooter > .workFooterOverlay{
    transition:all 0.25s cubic-bezier(.25,.1,.25,1);
}

.workArea > .workCaption{
    position:absolute;
    bottom:-60px;
    left:0;
    width:100%;
    height:60px;
    background-color: rgba(0,0,0,0.6);
    z-index: 3;
}
.workContainer:hover .workArea > .workCaption{
    bottom:0;
}

.workFooter .workFooterOverlay{
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,.9);
    position:absolute;
    top:-100%;
    left:0;
    z-index: 1;
}
.workContainer:hover .workFooter .workFooterOverlay{
    top:0;
}


.workArea > .workCaption > p{
    font-family: 'ProximaNovaLIght', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 11.5px;
    color: #ccc;
    position:absolute;
    right:15px;
}
.workCaption > p.workDim{
    bottom:0;
}
.workCaption > p.workYear{
    top:0;
}
.workFooter{
    position: relative;
    /*width:calc(100% - 30px);*/
    width:220px;
    padding:20px 15px 0;
}
.workFooter .workTitle,
.workFooter .workDesc,
.workFooter .workDate{
    font-size: 13.5px;
    color: #333;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 10px;
    font-weight: normal;
    font-family: 'ProximaNovaLIght', sans-serif;
    position:relative;;
    z-index: 2;
}

.workFooter .workTitle{
     color: #151515;
 }
.workContainer:hover .workFooter .workTitle{
    color: #fff;
}
.workFooter .workDesc,
.workFooter .workDate{
    font-size: 11.5px;
    color: #999;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 10px;
    display: block;
    font-weight: normal;

}


work{
    background-color: transparent;
}

work.expanded{
    background-color: black;
    width:100vw;
    height:100vh;
}
work.expanded .workContainer{
    height:100%;
    margin:0;
}
body.viewEnabled .navBarWrapper,
body.viewEnabled work:not(.expanded),
body.viewEnabled footer{
    display:none;
}
body.viewEnabled .worksWrapper{
    height:100vh;
}

work .closeViewerBtn{
    position:absolute;
    top:15px;
    right:20px;
    width:40px;
}

work .workViewerWrapper .imageContainer > img{
    max-width:800px;
    max-height:calc(100vh - 150px);
    z-index:2;
    position:relative;
}
work .workViewerWrapper .imageInfo{
    opacity:0;
    z-index: 1;
    position:relative;
}
work .workViewerWrapper .imageInfo > h2,
work .workViewerWrapper .imageInfo > span{
    color: #999;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px;
    display: block;
    font-weight: normal;
    text-align:right;
}
work .workViewerWrapper .imageInfo > h2{
    font-size:13px;
}
work .workViewerWrapper .imageInfo > span{
    font-size:11px;
}