--- /dev/null
+/**
+ * @file
+ * Provides shared lightbox stylings for both Colorbox and Photobox.
+ */
+
+.media__icon--litebox {
+ cursor: pointer;
+ display: block;
+ height: 80px;
+ left: 50%;
+ margin: 0;
+ opacity: 0;
+ position: absolute;
+ top: 50%;
+ width: 80px;
+ visibility: hidden;
+ z-index: 9;
+ -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
+ transition: visibility 0s linear 0.5s, opacity 0.5s linear;
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.media__icon--litebox::before,
+.media__icon--litebox::after {
+ content: '';
+ display: block;
+ position: absolute;
+ pointer-events: none;
+}
+
+.media__icon--litebox {
+ z-index: 9;
+}
+
+.media__icon--litebox::before,
+.media__icon--litebox::after {
+ background: white;
+ border-radius: 4px;
+ height: 2px;
+ left: 50%;
+ margin: -1px 0 0 -40px;
+ top: 50%;
+ width: 80px;
+ -ms-transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+
+.media__icon--litebox::after {
+ -ms-transform: rotate(-90deg);
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+
+.media__icon--litebox:hover::before,
+.media__icon--litebox:hover::after {
+ background-color: #ff6d2c;
+}
+
+.media:hover .media__icon--litebox {
+ -webkit-transition-delay: 0s;
+ transition-delay: 0s;
+}
+
+.media:hover .media__icon--litebox,
+.media--switch .media__image {
+ opacity: 1;
+ visibility: visible;
+}
+
+.litebox {
+ border: 0;
+ display: block;
+}