Add image repositioning feature

style/_lightbox.scss

@@ -101,6 +101,10 @@
 		.lb-container {
 			overflow: hidden;
 		
+			&.moving {
+				cursor: grab;
+			}
+
 			.lb-image {
 				image-orientation: from-image;
 				border-radius: 0;
@@ -124,29 +128,54 @@
 			}
 			
 			.lb-nav {
+
+				.lb-prev-area, .lb-next-area {
+					position: absolute;
+					top: 0;
+					height: 100%;
+					width: 50%;
+					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+					
+					&.lb-next-area {
+						right: 0;
+					}
+
+					&:hover a.lb-prev, &:hover a.lb-next {
+						filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+						opacity: 1;
+					}
+				}
+
 				a.lb-prev, a.lb-next {
 					color: white;
 					text-decoration: none;
 					text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+					width: 150px;
+					height: 150px;
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+
+					-webkit-transition: opacity 0.4s;
+					-moz-transition: opacity 0.4s;
+					-o-transition: opacity 0.4s;
+					transition: opacity 0.4s;
 					
 					&:before {
 						position: absolute;
-						top: calc(50% - 1em);
+						top: 50%;
+						transform: translateY(-50%);
 					}
 				}
 			
 				a.lb-prev {
 					@include lightbox-icon(prev);
-					&:before {
-						left: 2em;
-					}
+					left: 0;
 				}
 			
 				a.lb-next {
 					@include lightbox-icon(next);
-					&:before {
-						right: 2em;
-					}
+					right: 0;
 				}
 			}
 		}

style/_mobile.scss

@@ -63,6 +63,21 @@
 			text-align: center;
 		}
 	}
+
+	.lightbox .lb-outerContainer .lb-container .lb-nav {
+		a.lb-prev, a.lb-next  {
+			height: 100%;
+			width: 100%;
+		}
+
+		a.lb-prev::before {
+			left: 1em;
+		}
+
+		a.lb-next::before {
+			right: 1em;
+		}
+	} 
 }
 
 @media only screen and (min-width: 801px) {