.galleryOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    opacity: 1;
    transition: opacity 0.25s;
    z-index: 1;
}

    .galleryOverlay.overlayFading {
        opacity: 0;
    }

    .galleryOverlay.overlayHidden {
        display: none;
    }

    .galleryOverlay .overlayImage {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        max-height: 95%;
        max-width: 95%;
    }

    .galleryOverlay .overlayCloseButton {
        position: fixed;
        top: 12px;
        right: 12px;
        width: 33px;
        height: 33px;
        font-weight: bold;
        color: white;
        font-size: 25px;
        padding: 6px;
        background: #4EB56E;
        border-radius: 3px;
        cursor: pointer;
        text-align: center;
    }

.galleryOuterContainer {
    width: 100%;
    height: auto;
    position: relative;
}

.galleryContainer {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

    .galleryContainer .galleryImage {
        display: inline-block;
        background: white;
        float: left;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
        opacity: 1;
        transition: margin 1s, width 1s, height 1s, box-shadow 1s;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .galleryContainer .galleryImage img {
            max-height: 100%;
            max-width: 100%;
        }

        .galleryContainer .galleryImage.offscreenHidden {
            width: 0;
            margin-left: 0;
            margin-right: 0;
            padding: 0;
        }

    .galleryContainer .galleryReel {
        position: relative;
        height: 100%;
    }

.galleryNavButton {
    background: #3D4B60;
    display: inline-block;
    position: absolute;
    border-radius: 3px;
    -moz-transition: background-color 180ms ease-in-out;
    -webkit-transition: background-color 180ms ease-in-out;
    transition: background-color 180ms ease-in-out;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .galleryNavButton:hover {
        background-color: #086ca1;
    }

#left.galleryNavButton {
    left: 0;
}

#right.galleryNavButton {
    right: 0;
}

.galleryStats {
    margin: 10px 0;
    text-align: right;
}

    .galleryStats p {
        display: inline-block;
        background-color: #4EB56E;
        color: #fff;
        padding: 12px;
        border-radius: 5px;
    }

/* Older web enabled phones and small form factor devices */
/* iPhones in portrait orientation and older web enabled phones in landscape */
/* Anything less than this will only display a single image */
@media only screen and (max-width: 399px) {
    .galleryNavButton {
        width: 20px;
        height: 20px;
        top: 44px;
        padding: 8px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 4px;
            border-right: 10px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 6px;
            border-left: 10px solid #fff;
        }

    .galleryContainer {
        width: 224px;
        height: 132px;
    }

        .galleryContainer .galleryReel {
            width: 890px;
            left: -444px;
        }

        .galleryContainer .galleryImage {
            margin-left: 4px;
            margin-right: 4px;
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 226px;
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 448px;
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 670px;
            }


    .largeImg, .smallImg {
        width: 214px;
        height: 120px;
        margin-top: 0;
        box-shadow: 0 3px 9px -3px black;
    }
}

/* iPhones in landscape and other smartphones in portrait */
@media only screen and (min-width: 400px) and (max-width: 599px) {
    .galleryNavButton {
        width: 20px;
        height: 20px;
        top: 16px;
        padding: 8px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 4px;
            border-right: 10px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 6px;
            border-left: 10px solid #fff;
        }

    .galleryContainer {
        width: 304px; /* min - 64(nav[160 - 94]) - 16*2(bodyOverflowPadding) */
        height: 67px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 486px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -91px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 0; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 0; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 91px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 182px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 392px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 119px; /* 39% of galleryContainer width */
        height: 67px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 0 0 0 black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 91px; /* 30% of galleryContainer Width */
        height: 51px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 8px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 8px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

/* Kindle Fire in portrait */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .galleryNavButton {
        width: 24px;
        height: 24px;
        top: 36px;
        padding: 8px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 5px;
            border-right: 12px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 7px;
            border-left: 12px solid #fff;
        }

    .galleryContainer {
        width: 504px; /* min - 64(nav[160 - 94]) - 16*2(bodyOverflowPadding) */
        height: 114px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 812px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -154px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 1px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 1px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 154px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 307px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 659px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 197px; /* 39% of galleryContainer width */
        height: 111px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 1px 3px -1px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 151px; /* 30% of galleryContainer Width */
        height: 85px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 13px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 13px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

/* iPads and tablets in portrait and smartphones in landscape */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .galleryNavButton {
        width: 24px;
        height: 24px;
        top: 26px;
        padding: 8px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 5px;
            border-right: 12px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 7px;
            border-left: 12px solid #fff;
        }

    .galleryContainer {
        width: 426px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 96px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 688px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -131px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 1px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 1px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 131px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 261px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 559px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 166px; /* 39% of galleryContainer width */
        height: 93px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 1px 3px -1px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 128px; /* 30% of galleryContainer Width */
        height: 72px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 10px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 10px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

@media only screen and (min-width: 960px) and (max-width: 1099px) {
    .galleryNavButton {
        width: 28px;
        height: 28px;
        top: 48px;
        padding: 10px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 6px;
            border-right: 14px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 8px;
            border-left: 14px solid #fff;
        }

    .galleryContainer {
        width: 618px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 139px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 994px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -188px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 1px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 1px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 188px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 375px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 805px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 241px; /* 39% of galleryContainer width */
        height: 136px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 1px 3px -1px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 185px; /* 30% of galleryContainer Width */
        height: 104px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 16px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 16px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

@media only screen and (min-width: 1100px) and (max-width: 1249px) {
    .galleryNavButton {
        width: 28px;
        height: 28px;
        top: 60px;
        padding: 10px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 6px;
            border-right: 14px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 8px;
            border-left: 14px solid #fff;
        }

    .galleryContainer {
        width: 758px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 173px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 1224px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -233px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 2px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 2px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 233px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 464px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 995px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 296px; /* 39% of galleryContainer width */
        height: 167px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 2px 6px -1px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 227px; /* 30% of galleryContainer Width */
        height: 128px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 19px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 19px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

@media only screen and (min-width: 1250px) and (max-width: 1399px) {
    .galleryNavButton {
        width: 28px;
        height: 28px;
        top: 78px;
        padding: 10px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 6px;
            border-right: 14px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 8px;
            border-left: 14px solid #fff;
        }

    .galleryContainer {
        width: 908px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 205px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 1464px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -278px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 2px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 2px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 278px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 554px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 1188px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 354px; /* 39% of galleryContainer width */
        height: 199px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 2px 6px -2px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 272px; /* 30% of galleryContainer Width */
        height: 153px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 23px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 23px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .galleryNavButton {
        width: 28px;
        height: 28px;
        top: 94px;
        padding: 10px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 6px;
            border-right: 14px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 8px;
            border-left: 14px solid #fff;
        }

    .galleryContainer {
        width: 1058px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 238px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 1704px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -323px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 2px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 2px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 323px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 644px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 1382px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }


    .largeImg {
        width: 413px; /* 39% of galleryContainer width */
        height: 232px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 2px 6px -2px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 317px; /* 30% of galleryContainer Width */
        height: 178px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 27px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 27px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .galleryNavButton {
        width: 32px;
        height: 32px;
        top: 114px;
        padding: 12px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 7px;
            border-right: 16px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 9px;
            border-left: 16px solid #fff;
        }

    .galleryContainer {
        width: 1259px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 285px; /* Equal to height of largest image + (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 2033px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -387px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 3px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
            margin-right: 3px; /* (GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 387px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 771px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 1652px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 491px; /* ~39% of galleryContainer width */
        height: 276px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 3px 9px -3px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 378px; /* ~30% of galleryContainer Width */
        height: 213px; /* (Small Image Width / 16) * 9 [to keep 16:9 aspect ratio] */
        margin-top: 31px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 31px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}

@media only screen and (min-width: 1801px) {
    .galleryNavButton {
        width: 32px;
        height: 32px;
        top: 140px;
        padding: 12px;
    }

        .galleryNavButton .arrowLeft, .galleryNavButton .arrowRight {
            width: 0;
            height: 0;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
        }

        .galleryNavButton .arrowLeft {
            margin-left: 7px;
            border-right: 16px solid #fff;
        }

        .galleryNavButton .arrowRight {
            margin-left: 9px;
            border-left: 16px solid #fff;
        }

    .galleryContainer {
        width: 1459px; /* min - 250(nav) - 46*2(bodyOverflowPadding) */
        height: 320px; /* Equal to height of largest image */
        padding-bottom: 9px; /* (3 * GalleryImage-margin-left) */
    }

        .galleryContainer .galleryReel {
            width: 2353px; /* GalleryContainerWidth + (2 * smallImgWidth) + (6 * GalleryImage-margin-left) */
            left: -447px; /* -(smallImageWidth + (3 * GalleryImage-margin-left)) */
        }

        .galleryContainer .galleryImage {
            margin-left: 3px; /* RoundDown((GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4)   */
            margin-right: 3px; /* RoundDown((GalleryContainerWidth - LargeImageWidth - 2 * SmallImageWidth) / 4)   */
        }

            .galleryContainer .galleryImage.margin-left-1 {
                margin-left: 447px; /* smallImageWidth + 3 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-2 {
                margin-left: 891px; /* 2 * smallImageWidth + 5 * GalleryImage-margin-left */
            }

            .galleryContainer .galleryImage.margin-left-4 {
                margin-left: 1910px; /* largeImageWidth + (3 * smallImageWidth) + (9 * GalleryImage-margin-left) */
            }

    .largeImg {
        width: 569px; /* ~39% of galleryContainer width */
        height: 320px; /* (Large Image Width  /  16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 0; /* Always Zero */
        box-shadow: 0 3px 9px -3px black; /* 0, GalleryImage-margin-left, 3 * GalleryImage-margin-left, -GalleryImage-margin-left */
    }

    .smallImg {
        width: 438px; /* ~30% of galleryContainer Width */
        height: 246px; /* (Small Image Width / 16) * 9    [to keep 16:9 aspect ratio] */
        margin-top: 37px; /* (Large Image Height - Small Image Height ) / 2  */
        margin-bottom: 37px; /* (Large Image Height - Small Image Height ) / 2  */
    }
}