.img {position: relative; background: no-repeat center; background-size: cover; border-radius: .25rem; cursor: pointer}
.img.top {background-position: 50% 10%}
.img.bottom {background-position: 50% 90%}
.img[folder] div {display: none}

.gallery {position: fixed; display: table-cell; vertical-align: middle; width: 100%; height: 100%; z-index: 3}
.gallery > :nth-child(n) {position: absolute}
.gallery i {position: absolute; font-size: 2.8125rem; color: #999; cursor: pointer}
.gallery i:hover, .gallery :hover i {color: #333}
.gallery img {display: inherit; max-width: inherit; cursor: pointer}

.gallery .top {width: 100%; height: 15%; text-align: center}
.gallery .title {position: relative; display: inline-block; font-size: 1.5rem; font-weight: 300; z-index: 2}

.gallery .slide {max-height: 70%; text-align: center; z-index: 2; opacity: 0}
.gallery .slide img {display: inline-block}
.gallery .desc {max-width: 30rem; bottom: 15%; text-align: center; margin: 0 auto; padding: 1.5rem 0 3rem; box-sizing: border-box}

.gallery .bottom {height: 15%; padding: 1rem 0}
.gallery .drive {z-index: 2}
.gallery .drive img {display: inline-block; margin: 0 .75rem}

.gallery .close {right: 0; padding:  1rem 2rem 2rem}
.gallery .prev {left: 0; cursor: pointer; z-index: 2; opacity: 0}
.gallery .next {right: 0; cursor: pointer; z-index: 2; opacity: 0}
.gallery .prev i {left: 2rem}
.gallery .next i {right: 2rem}
.gallery .arrow {bottom: 15%; font-size: 1.5rem; color: #333; cursor: inherit}
.gallery .overlay {background: #fff}

.gallery.size-1 .title {font-size: 1rem}
.gallery.size-1 .title h1 {font-size: 2rem}
.gallery.size-1 .desc {padding: .75rem 0 2.5rem}