/* set the maximum height for the gallery slide, so the image will fit in the browser */
.fs-item {
    max-height: calc(100vh - 35px) !important;
}

/* when removing the imgHover class, the height of the contentImg will be 0. 
   Since the imgHover-overlay is relative to the contentImg we will need to set a height for the contentImg
   in order to have the caption at the bottom of the image.
*/
#gallery .contentImg {
    height: 100%;
}

/* remove the default animation (slide from top) */
#gallery .imgHover-content p {
    -webkit-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important;
    padding: 10px;
    background-color: rgba(64, 64, 64, 0.8);
}

#gallery .imgHover-content {
    padding: 0;
}

.footerContent .caption {
    float: right;
    cursor: pointer;
    font-size: 1.2em;
}

/* make the footer fixed to the bottom 
   Some of the pages will need some extra space at the bottom.
   The space can be added in DESIGN -> page -> container
*/
.footerContainer {
    position: fixed;
    bottom: 0;
    background-color: #404040;
}

@media only screen and (min-width: 768px) {
    .headerAndNavContainer.fixedNav + .primaryAndSecondaryContainer {
        z-index: auto;
    }
}