/*
*
* Style for IYTPL Lightbox
*
*/

.iytpl-thumbnails {
  display: grid;
  width: 100%;
  grid-template-columns: auto;
  max-width: 1200px !important;
  gap: 15px;
}

@media screen and (min-width: 768px) {
  .iytpl-thumbnails {
    grid-template-columns: auto auto;
  }
}

@media screen and (min-width: 991px) {
  .iytpl-thumbnails {
    grid-template-columns: auto auto auto;
  }
}

.iytpl-thumbnail img {
    object-fit: cover;
    height: 200px;
    width: 100%;
}

#iytpl_lightboxWrapper {
    background-color: rgba(0,0,0,0.9);
    position: fixed;
    width: 98vw;
    height: 98vh;
    top: 1%;
    left: 1%;
    display: block;
    z-index: 99999;
}

.iytpl_lightbox_overlay {
    background-color: rgba(0,0,0,0.9);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.iytpl_lightbox_overlay iframe {
    width: 98%;
    margin-left: 1%;
    height: calc(55.125vw); /* (98vh / 16) * 9 */

}
@media screen and (min-width: 768px) {
    .iytpl_lightbox_overlay iframe {
        width: 90%;
        margin-left: 5%;
        height: calc(50.625vw); /* (90vh / 16) * 9 */
    }
}

#iytplLightboxClose {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white;
    font-size: 60px;
    z-index:10;
}
#iytplLightboxClose:hover {
    color: red;
    cursor: pointer;
}